Skip to content

Commit 10d682d

Browse files
TechQueryTechQuery
committed
[add] Example List
1 parent 88d9ff3 commit 10d682d

4 files changed

Lines changed: 194 additions & 29 deletions

File tree

‎source/page/Example/Home.tsx‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,54 @@
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 { Card } from 'boot-cell/source/Content/Card';
5+
6+
import data from './index.json';
47

58
export function HomePage() {
69
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"
10+
<Fragment>
11+
<Jumbotron
12+
fluid
13+
title="Example"
14+
description="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts."
1515
>
16-
Source Code
17-
</Button>
18-
</Jumbotron>
16+
<Button
17+
outline
18+
size="lg"
19+
target="_blank"
20+
href="https://github.com/EasyWebApp/BootCell-document/tree/master/source/page/Example"
21+
>
22+
Source Code
23+
</Button>
24+
</Jumbotron>
25+
26+
<div className="container">{data.map(Section)}</div>
27+
</Fragment>
28+
);
29+
}
30+
31+
function Section({ title, description, list }: typeof data[0]) {
32+
const path = 'example/' + title.replace(' ', '-').toLowerCase();
33+
34+
return (
35+
<section>
36+
<h2>{title}</h2>
37+
<p className="lead">{description}</p>
38+
<div className="card-deck">
39+
{list.map(({ image, title, description }) => (
40+
<Card
41+
className="mb-4"
42+
style={{
43+
minWidth: '15.5rem',
44+
maxWidth: '15.5rem'
45+
}}
46+
image={image}
47+
title={<a href={path}>{title}</a>}
48+
text={description}
49+
/>
50+
))}
51+
</div>
52+
</section>
1953
);
2054
}

‎source/page/Example/index.json‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
[
2+
{
3+
"title": "Custom components",
4+
"description": "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.",
5+
"list": [
6+
{
7+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/album.png",
8+
"title": "Album",
9+
"description": "Simple one-page template for photo galleries, portfolios, and more."
10+
},
11+
{
12+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/pricing.png",
13+
"title": "Pricing",
14+
"description": "Example pricing page built with Cards and featuring a custom header and footer."
15+
},
16+
{
17+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/checkout.png",
18+
"title": "Checkout",
19+
"description": "Custom checkout form showing our form components and their validation features."
20+
},
21+
{
22+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/product.png",
23+
"title": "Product",
24+
"description": "Lean product-focused marketing page with extensive grid and image work."
25+
},
26+
{
27+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/cover.png",
28+
"title": "Cover",
29+
"description": "A one-page template for building simple and beautiful home pages."
30+
},
31+
{
32+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/carousel.png",
33+
"title": "Carousel",
34+
"description": "Customize the navbar and carousel, then add some new components."
35+
},
36+
{
37+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/blog.png",
38+
"title": "Blog",
39+
"description": "Magazine like blog template with header, navigation, featured content."
40+
},
41+
{
42+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/dashboard.png",
43+
"title": "Dashboard",
44+
"description": "Basic admin dashboard shell with fixed sidebar and navbar."
45+
},
46+
{
47+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/sign-in.png",
48+
"title": "Sign-in",
49+
"description": "Custom form layout and design for a simple sign in form."
50+
},
51+
{
52+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/sticky-footer.png",
53+
"title": "Sticky footer",
54+
"description": "Attach a footer to the bottom of the viewport when page content is short."
55+
},
56+
{
57+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/sticky-footer-navbar.png",
58+
"title": "Sticky footer navbar",
59+
"description": "Attach a footer to the bottom of the viewport with a fixed top navbar."
60+
}
61+
]
62+
},
63+
{
64+
"title": "Framework",
65+
"description": "Examples that focus on implementing uses of built-in components provided by Bootstrap.",
66+
"list": [
67+
{
68+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/starter-template.png",
69+
"title": "Starter template",
70+
"description": "Nothing but the basics: compiled CSS and JavaScript."
71+
},
72+
{
73+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/grid.png",
74+
"title": "Grid",
75+
"description": "Multiple examples of grid layouts with all four tiers, nesting, and more."
76+
},
77+
{
78+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/jumbotron.png",
79+
"title": "Jumbotron",
80+
"description": "Build around the jumbotron with a navbar and some basic grid columns."
81+
}
82+
]
83+
},
84+
{
85+
"title": "Navbars",
86+
"description": "Taking the default navbar component and showing how it can be moved, placed, and extended.",
87+
"list": [
88+
{
89+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/navbars.png",
90+
"title": "Navbars",
91+
"description": "Demonstration of all responsive and container options for the navbar."
92+
},
93+
{
94+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/navbar-static.png",
95+
"title": "Navbar static",
96+
"description": "Single navbar example of a static top navbar along with some additional content."
97+
},
98+
{
99+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/navbar-fixed.png",
100+
"title": "Navbar fixed",
101+
"description": "Single navbar example with a fixed top navbar along with some additional content."
102+
},
103+
{
104+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/navbar-bottom.png",
105+
"title": "Navbar bottom",
106+
"description": "Single navbar example with a bottom navbar along with some additional content."
107+
}
108+
]
109+
},
110+
{
111+
"title": "Experiments",
112+
"description": "Examples that focus on future-friendly features or techniques.",
113+
"list": [
114+
{
115+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/floating-labels.png",
116+
"title": "Floating labels",
117+
"description": "Beautifully simple forms with floating labels over your inputs."
118+
},
119+
{
120+
"image": "https://getbootstrap.com/docs/4.4/assets/img/examples/offcanvas.png",
121+
"title": "Offcanvas",
122+
"description": "Turn your expandable navbar into a sliding offcanvas menu."
123+
}
124+
]
125+
}
126+
]

‎source/page/index.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,25 @@ export class PageRouter extends HTMLRouter {
4545
...examples
4646
];
4747

48+
private menu = [
49+
{
50+
title: 'Documentation',
51+
href: documents[0].paths[0]
52+
},
53+
{
54+
title: 'API',
55+
href: 'https://web-cell.dev/BootCell/'
56+
},
57+
{
58+
title: 'Examples',
59+
href: 'example'
60+
},
61+
{
62+
title: 'Source code',
63+
href: 'https://github.com/EasyWebApp/BootCell'
64+
}
65+
];
66+
4867
@on('click', 'pre[class*="language-"]')
4968
autoCopy({ target }: MouseEvent) {
5069
self.getSelection()
@@ -57,23 +76,8 @@ export class PageRouter extends HTMLRouter {
5776
render() {
5877
return (
5978
<Fragment>
60-
<NavBar
61-
brand="BootCell"
62-
menu={[
63-
{
64-
title: 'API document',
65-
href: 'https://web-cell.dev/BootCell/'
66-
},
67-
{
68-
title: 'Examples',
69-
href: 'example'
70-
},
71-
{
72-
title: 'Source code',
73-
href: 'https://github.com/EasyWebApp/BootCell'
74-
}
75-
]}
76-
/>
79+
<NavBar brand="BootCell" menu={this.menu} />
80+
7781
<main className="mt-5">{super.render()}</main>
7882

7983
<footer className="text-center bg-light py-5">

‎tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"module": "ESNext",
55
"moduleResolution": "Node",
66
"allowSyntheticDefaultImports": true,
7+
"resolveJsonModule": true,
78
"experimentalDecorators": true,
89
"jsx": "react",
910
"jsxFactory": "createCell",

0 commit comments

Comments
 (0)