Skip to content

Commit 435b5df

Browse files
TechQueryTechQuery
committed
[add] Site main framework
[add] BreadCrumb document
0 parents  commit 435b5df

10 files changed

Lines changed: 228 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
package-lock.json
2+
node_modules/
3+
dist/
4+
.cache/

‎.travis.yml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
branches:
2+
only:
3+
- master
4+
5+
language: node_js
6+
node_js:
7+
- lts/*
8+
cache:
9+
directories:
10+
- node_modules
11+
12+
install:
13+
- npm install
14+
script:
15+
- npm run build
16+
- echo '' > docs/.nojekyll
17+
deploy:
18+
provider: pages
19+
on:
20+
branch: master
21+
skip_cleanup: true
22+
local_dir: dist/
23+
token: ${TOKEN}

‎ReadMe.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# BootCell document
2+
3+
Re-implemented Official Web-site of [BootStrap][1] based on [WebCell][2], [BootCell][3] & [MarkCell][4]
4+
5+
[![NPM Dependency](https://david-dm.org/EasyWebApp/BootCell-document.svg)][5]
6+
[![Build Status](https://travis-ci.com/EasyWebApp/BootCell-document.svg?branch=master)][6]
7+
8+
[1]: https://getbootstrap.com/
9+
[2]: https://web-cell.dev/
10+
[3]: https://web-cell.dev/BootCell/
11+
[4]: https://github.com/EasyWebApp/MarkCell
12+
[5]: https://david-dm.org/EasyWebApp/BootCell-document
13+
[6]: https://travis-ci.com/EasyWebApp/BootCell-document

‎document/source/components/BreadCrumb.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
layout: docs
3+
title: BreadCrumb
4+
description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
5+
group: components
6+
---
7+
8+
import { BreadCrumb } from 'boot-cell/source/Navigator/BreadCrumb';
9+
10+
## Example
11+
12+
<BreadCrumb path={[{ title: 'Home' }]} />
13+
14+
```javascript
15+
<BreadCrumb path={[{ title: 'Home' }]} />
16+
```
17+
18+
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
19+
20+
```javascript
21+
<BreadCrumb path={[{ href: '#', title: 'Home' }, { title: 'Library' }]} />
22+
```
23+
24+
<BreadCrumb
25+
path={[
26+
{ href: '#', title: 'Home' },
27+
{ href: '#', title: 'Library' },
28+
{ title: 'Data' }
29+
]}
30+
/>
31+
32+
```javascript
33+
<BreadCrumb
34+
path={[
35+
{ href: '#', title: 'Home' },
36+
{ href: '#', title: 'Library' },
37+
{ title: 'Data' }
38+
]}
39+
/>
40+
```
41+
42+
## Changing the separator
43+
44+
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by changing `$breadcrumb-divider`. The [quote](https://sass-lang.com/documentation/functions/string#quote) function is needed to generate the quotes around a string, so if you want `>` as separator, you can use this:
45+
46+
```scss
47+
$breadcrumb-divider: quote('>');
48+
```
49+
50+
It's also possible to use an **embedded SVG icon**:
51+
52+
```scss
53+
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
54+
```
55+
56+
The separator can be removed by setting `$breadcrumb-divider` to `none`:
57+
58+
```scss
59+
$breadcrumb-divider: none;
60+
```
61+
62+
## Accessibility
63+
64+
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
65+
66+
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).

‎package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "bootcell-document",
3+
"version": "0.2.0",
4+
"description": "Re-implemented Official Web-site of BootStrap based on WebCell, BootCell & MarkCell",
5+
"dependencies": {
6+
"boot-cell": "^0.23.2",
7+
"cell-router": "^2.0.0-rc.6",
8+
"classnames": "^2.2.6",
9+
"mobx": "^5.15.2",
10+
"mobx-web-cell": "^0.2.5",
11+
"web-cell": "^2.0.0-rc.15"
12+
},
13+
"devDependencies": {
14+
"husky": "^4.2.0",
15+
"lint-staged": "^9.5.0",
16+
"mark-cell": "^0.2.1",
17+
"parcel": "^1.12.4",
18+
"prettier": "^1.19.1",
19+
"typescript": "^3.7.5"
20+
},
21+
"prettier": {
22+
"singleQuote": true,
23+
"tabWidth": 4
24+
},
25+
"lint-staged": {
26+
"*.{html,md,mdx,json,yml,ts,tsx}": [
27+
"prettier --write",
28+
"git add"
29+
]
30+
},
31+
"scripts": {
32+
"test": "lint-staged",
33+
"pack-mdx": "rm -rf document/dist/ && mark-cell document/source -p web-cell -f createCell",
34+
"pack-tsx": "rm -rf dist/ && parcel build source/index.html --public-url .",
35+
"build": "npm run pack-mdx && npm run pack-tsx",
36+
"start": "npm run pack-mdx && rm -rf dist/ && parcel source/index.html --open"
37+
},
38+
"husky": {
39+
"hooks": {
40+
"pre-commit": "npm test",
41+
"pre-push": "npm run build"
42+
}
43+
}
44+
}

‎source/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<head>
2+
<title>BootCell</title>
3+
<link
4+
rel="stylesheet"
5+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
6+
/>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css"
10+
/>
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.0/styles/atom-one-dark.css"
14+
/>
15+
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat"></script>
16+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/webcomponents-bundle.min.js"></script>
17+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.0/custom-elements-es5-adapter.js"></script>
18+
19+
<script src="index.tsx" async></script>
20+
</head>

‎source/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { documentReady, render, createCell } from 'web-cell';
2+
3+
import { PageRouter } from './page';
4+
5+
documentReady.then(() => render(<PageRouter />));

‎source/model/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { History } from 'cell-router/source';
2+
3+
export const history = new History();

‎source/page/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { component, createCell, Fragment } from 'web-cell';
2+
import { observer } from 'mobx-web-cell';
3+
import { HTMLRouter } from 'cell-router/source';
4+
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
5+
6+
import { history } from '../model';
7+
import routes from '../../document/dist';
8+
9+
@observer
10+
@component({
11+
tagName: 'page-router',
12+
renderTarget: 'children'
13+
})
14+
export class PageRouter extends HTMLRouter {
15+
protected history = history;
16+
protected routes = routes.map(({ paths, component, meta }) => ({
17+
paths,
18+
component: async () => {
19+
const { title, description } = await meta(),
20+
Content = await component();
21+
22+
return () => (
23+
<Fragment>
24+
<h1>{title}</h1>
25+
<p className="lead">{description}</p>
26+
<Content />
27+
</Fragment>
28+
);
29+
}
30+
}));
31+
32+
render() {
33+
return (
34+
<Fragment>
35+
<NavBar title="BootCell" />
36+
<main className="mt-5 p-3 markdown-body">{super.render()}</main>
37+
</Fragment>
38+
);
39+
}
40+
}

‎tsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES5",
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"experimentalDecorators": true,
7+
"jsx": "react",
8+
"jsxFactory": "createCell"
9+
}
10+
}

0 commit comments

Comments
 (0)