<commit_before># ftc-header

The responsive header component for FTChinese. There are three kinds of headers to choose. 

This package provides both js and sass APIs for building these headers.

## Install
```
cd yourProject
npm install "@ftchinese/ftc-header" --save // For getting js API
bower install ftc-header --save //for getting sass API
```

> NOTE: Please ensure there is a **package.json** and a **bower.json** in the root of your project, which can be generated by **npm init** and **bower init**

## Prepare the html 
Before using our APIs, you may first prepare the html code.

### Learn about the structure and the components of our header
At this part, I will introduce the root element and the html code fragments of the components of our header. They are just help you to understand the structure and configuration of ftc-header.If you do are not interested in them, you can skip this part and go direct to the next part:**The 3 kinds of headers we provide**.

#### The Root
The root element of ftc-header is a **header**, which should have the attribute **data-ftc-component="ftc-header"** and the class **class="ftc-header"**:

```
<header class="ftc-header" data-ftc-component="ftc-header" data-ftc-header--no-js>
</header>
``` 
This is the base structure of all kinds of our headers. All the other data are in this **header** element.

#### The Lang:
This is a little component for choosing the language of our website, which is at the left of the top line of our header when home page is showed.

The pure html:
```
<div class="ftc-header__lang" data-ftc-component="ftc-header-lang">
  <ul class="ftc-header__lang-list ftc-header__lang-listdefault">
    
    <li class="ftc-header__lang-item">
      <a href=#>
        简体中文
      </a><commit_msg>Update the readme<commit_after># ftc-header

The responsive header component for FTChinese. There are three kinds of headers to choose. 

This package provides both js and sass APIs for building these headers.

## Install

```cmd
cd yourProject
npm install "@ftchinese/ftc-header"
```

> NOTE: Please ensure there is a **package.json** and a **bower.json** in the root of your project, which can be generated by **npm init** and **bower init**

## Prepare the html 
Before using our APIs, you may first prepare the html code.

### Learn about the structure and the components of our header
At this part, I will introduce the root element and the html code fragments of the components of our header. They are just help you to understand the structure and configuration of ftc-header.If you do are not interested in them, you can skip this part and go direct to the next part:**The 3 kinds of headers we provide**.

#### The Root
The root element of ftc-header is a **header**, which should have the attribute **data-ftc-component="ftc-header"** and the class **class="ftc-header"**:

```
<header class="ftc-header" data-ftc-component="ftc-header" data-ftc-header--no-js>
</header>
``` 
This is the base structure of all kinds of our headers. All the other data are in this **header** element.

#### The Lang:
This is a little component for choosing the language of our website, which is at the left of the top line of our header when home page is showed.

The pure html:
```
<div class="ftc-header__lang" data-ftc-component="ftc-header-lang">
  <ul class="ftc-header__lang-list ftc-header__lang-listdefault">
    
    <li class="ftc-header__lang-item">
      <a href=#>
        简体中文
      </a>
{'fraction_non_alphanumeric': 0.09971098265895954, 'fraction_numerical': 0.0005780346820809249, 'mean_word_length': 4.037845705967976, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3884914', 'n_tokens_mistral': 1000, 'n_tokens_neox': 973, 'n_words': 481}