Skip to content

Commit 88d9ff3

Browse files
TechQueryTechQuery
committed
[add] Example Home page
[optimize] Home page & Document navigators
1 parent a8ad7bc commit 88d9ff3

9 files changed

Lines changed: 184 additions & 81 deletions

File tree

‎.travis.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@ deploy:
1919
branch: master
2020
skip_cleanup: true
2121
local_dir: dist/
22+
fqdn: bootstrap.web-cell.dev
2223
token: ${TOKEN}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
"version": "0.16.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-beta.7",
6+
"boot-cell": "^1.0.0-rc.0",
77
"cell-router": "^2.0.0-rc.7",
88
"classnames": "^2.2.6",
9+
"github-web-widget": "^3.0.0-beta.2",
910
"lodash.groupby": "^4.6.0",
1011
"mobx": "^5.15.4",
1112
"mobx-web-cell": "^0.2.5",

‎source/component/PageFrame.tsx‎

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,86 @@
1-
import { WebCellProps, createCell } from 'web-cell';
1+
import {
2+
WebCellProps,
3+
component,
4+
mixin,
5+
watch,
6+
attribute,
7+
createCell,
8+
Fragment
9+
} from 'web-cell';
210
import { HTMLHyperLinkProps } from 'web-utility/source/DOM-type';
311
import { Button } from 'boot-cell/source/Form/Button';
12+
import { HeaderList } from 'boot-cell/source/Navigator/HeaderList';
413

514
import { SideNav } from './SideNav';
615

716
interface PageFrameProps extends WebCellProps {
817
menu: { [key: string]: HTMLHyperLinkProps[] };
9-
title: string;
18+
header: string;
1019
description: string;
1120
}
1221

13-
export function PageFrame({
14-
menu,
15-
title,
16-
description,
17-
defaultSlot
18-
}: PageFrameProps) {
19-
const API = `https://web-cell.dev/BootCell/interfaces/${title
20-
.replace(' ', '')
21-
.toLowerCase()}props.html`;
22-
23-
return (
24-
<div className="d-flex">
25-
<SideNav className="border-right p-4" menu={menu} />
26-
27-
<div className="flex-fill p-4">
28-
<h1 className="d-flex justify-content-between align-items-center">
29-
{title}
30-
<Button size="sm" href={API}>
31-
API
32-
</Button>
33-
</h1>
34-
<p className="lead">{description}</p>
35-
36-
{defaultSlot}
37-
</div>
38-
</div>
39-
);
22+
@component({
23+
tagName: 'page-frame',
24+
renderTarget: 'children'
25+
})
26+
export class PageFrame extends mixin<PageFrameProps>() {
27+
@watch
28+
menu = [];
29+
30+
@attribute
31+
@watch
32+
header = '';
33+
34+
@attribute
35+
@watch
36+
description = '';
37+
38+
private box: HTMLElement;
39+
private nav: HeaderList;
40+
41+
connectedCallback() {
42+
this.classList.add('d-flex', 'align-items-start');
43+
44+
super.connectedCallback();
45+
}
46+
47+
updatedCallback() {
48+
if (this.box && this.nav) this.nav.spy(this.box);
49+
}
50+
51+
render({ header, menu, description, defaultSlot }: PageFrameProps) {
52+
const API = `https://web-cell.dev/BootCell/interfaces/${header
53+
.replace(' ', '')
54+
.toLowerCase()}props.html`;
55+
56+
return (
57+
<Fragment>
58+
<SideNav
59+
className="sticky-top"
60+
style={{ top: '3.5rem', height: 'calc(100vh - 3.5rem)' }}
61+
menu={menu}
62+
/>
63+
64+
<div className="flex-fill p-4 border-left">
65+
<h1 className="d-flex justify-content-between align-items-center">
66+
{header}
67+
<Button size="sm" href={API}>
68+
API
69+
</Button>
70+
</h1>
71+
<p className="lead">{description}</p>
72+
73+
<div ref={(node: HTMLElement) => (this.box = node)}>
74+
{defaultSlot}
75+
</div>
76+
</div>
77+
78+
<HeaderList
79+
className="p-4 d-none d-md-block"
80+
style={{ top: '3.5rem' }}
81+
ref={(node: HeaderList) => (this.nav = node)}
82+
/>
83+
</Fragment>
84+
);
85+
}
4086
}

‎source/component/SideNav.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { createCell } from 'web-cell';
1+
import { WebCellProps, createCell } from 'web-cell';
22
import { HTMLProps, HTMLHyperLinkProps } from 'web-utility/source/DOM-type';
33

4-
interface SideNavProps extends HTMLProps {
4+
interface SideNavProps extends WebCellProps, HTMLProps {
55
menu: { [group: string]: HTMLHyperLinkProps[] };
66
}
77

8-
export function SideNav({ menu, ...rest }: SideNavProps) {
8+
export function SideNav({ menu, defaultSlot, ...rest }: SideNavProps) {
99
return (
1010
<nav {...rest}>
11-
<ul className="list-unstyled">
11+
<ul className="list-unstyled p-4 h-100 overflow-auto">
1212
{Object.entries(menu).map(([group, list]) => (
1313
<li>
1414
<h5>{group}</h5>

‎source/index.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ blockquote {
55
pre[class*='language-'] {
66
margin: 0 0 1rem;
77
border-radius: 0 0 0.3rem 0.3rem;
8-
max-width: 82vw;
9-
overflow: auto;
10-
8+
& > code {
9+
white-space: pre-wrap;
10+
}
1111
position: relative;
1212
&::before {
1313
position: absolute;

‎source/page/Example/Home.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createCell } from 'web-cell';
2+
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
3+
import { Button } from 'boot-cell/source/Form/Button';
4+
5+
export function HomePage() {
6+
return (
7+
<Jumbotron
8+
title="Example"
9+
description="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts."
10+
>
11+
<Button
12+
outline
13+
target="_blank"
14+
href="https://github.com/EasyWebApp/BootCell-document/tree/master/source/page/Example"
15+
>
16+
Source Code
17+
</Button>
18+
</Jumbotron>
19+
);
20+
}

‎source/page/Example/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default [
2+
{
3+
paths: ['example'],
4+
component: async () => (await import('./Home')).HomePage
5+
}
6+
];

‎source/page/Home.tsx‎

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,57 @@
1-
import { createCell } from 'web-cell';
1+
import { createCell, Fragment } from 'web-cell';
22
import { Jumbotron } from 'boot-cell/source/Content/Jumbotron';
33
import { Button } from 'boot-cell/source/Form/Button';
4+
import { CommandLine } from 'github-web-widget/source/CommandLine';
45

56
import routes from '../../document/dist';
67

78
export function HomePage() {
89
return (
9-
<Jumbotron
10-
title="BootCell"
11-
description="Build responsive, mobile-first projects on the web with the world’s most popular front-end component library."
12-
>
13-
<p>
14-
BootCell is a{' '}
15-
<a target="_blank" href="https://www.webcomponents.org/">
16-
Web Components
17-
</a>{' '}
18-
UI library based on{' '}
19-
<a target="_blank" href="https://web-cell.dev/">
20-
WebCell v2
21-
</a>
22-
,{' '}
23-
<a target="_blank" href="https://getbootstrap.com/">
24-
BootStrap v4
25-
</a>{' '}
26-
&amp;{' '}
27-
<a target="_blank" href="https://fontawesome.com/">
28-
FontAwesome v5
29-
</a>
30-
</p>
31-
<Button outline size="lg" href={routes[0].paths[0]}>
32-
Get started
33-
</Button>
34-
</Jumbotron>
10+
<Fragment>
11+
<div className="container d-md-flex flex-row-reverse align-items-center text-center text-md-left">
12+
<img
13+
className="pt-5 p-md-5"
14+
style={{ width: '50vw' }}
15+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
16+
/>
17+
<Jumbotron
18+
className="bg-white"
19+
title="BootCell"
20+
description="Build responsive, mobile-first projects on the web with the world’s most popular front-end component library."
21+
>
22+
<p>
23+
BootCell is a{' '}
24+
<a
25+
target="_blank"
26+
href="https://www.webcomponents.org/"
27+
>
28+
Web Components
29+
</a>{' '}
30+
UI library based on{' '}
31+
<a target="_blank" href="https://web-cell.dev/">
32+
WebCell v2
33+
</a>
34+
,{' '}
35+
<a target="_blank" href="https://getbootstrap.com/">
36+
BootStrap v4
37+
</a>{' '}
38+
&amp;{' '}
39+
<a target="_blank" href="https://fontawesome.com/">
40+
FontAwesome v5
41+
</a>
42+
</p>
43+
<Button outline size="lg" href={routes[0].paths[0]}>
44+
Get started
45+
</Button>
46+
</Jumbotron>
47+
</div>
48+
49+
<CommandLine
50+
className="d-block mx-auto mb-5"
51+
style={{ maxWidth: '27rem' }}
52+
>
53+
npm install web-cell classnames boot-cell
54+
</CommandLine>
55+
</Fragment>
3556
);
3657
}

‎source/page/index.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import { NavBar } from 'boot-cell/source/Navigator/NavBar';
77
import { history } from '../model';
88
import { PageFrame } from '../component/PageFrame';
99
import { HomePage } from './Home';
10-
import routes from '../../document/dist';
10+
import documents from '../../document/dist';
11+
import examples from './Example';
1112

1213
const side_menu = groupBy(
13-
routes.map(({ paths: [href], meta }) => ({ ...meta, href })),
14+
documents.map(({ paths: [href], meta }) => ({ ...meta, href })),
1415
'group'
1516
);
1617

@@ -23,22 +24,25 @@ export class PageRouter extends HTMLRouter {
2324
protected history = history;
2425
protected routes = [
2526
{ paths: [''], component: HomePage },
26-
...routes.map(({ paths, component, meta: { title, description } }) => ({
27-
paths,
28-
component: async () => {
29-
const Content = await component();
27+
...documents.map(
28+
({ paths, component, meta: { title, description } }) => ({
29+
paths,
30+
component: async () => {
31+
const Content = await component();
3032

31-
return () => (
32-
<PageFrame
33-
menu={side_menu}
34-
title={title}
35-
description={description}
36-
>
37-
<Content />
38-
</PageFrame>
39-
);
40-
}
41-
}))
33+
return () => (
34+
<PageFrame
35+
menu={side_menu}
36+
header={title}
37+
description={description}
38+
>
39+
<Content />
40+
</PageFrame>
41+
);
42+
}
43+
})
44+
),
45+
...examples
4246
];
4347

4448
@on('click', 'pre[class*="language-"]')
@@ -60,6 +64,10 @@ export class PageRouter extends HTMLRouter {
6064
title: 'API document',
6165
href: 'https://web-cell.dev/BootCell/'
6266
},
67+
{
68+
title: 'Examples',
69+
href: 'example'
70+
},
6371
{
6472
title: 'Source code',
6573
href: 'https://github.com/EasyWebApp/BootCell'

0 commit comments

Comments
 (0)