Skip to content

Commit 45096ff

Browse files
TechQueryTechQuery
committed
[add] Album example page
[optimize] upgrade Upstream packages
1 parent 011003f commit 45096ff

File tree

11 files changed

+264
-77
lines changed

11 files changed

+264
-77
lines changed

‎document/source/components/Card.mdx‎

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ description: Bootstrap’s cards provide a flexible and extensible content conta
55
group: Components
66
---
77

8-
import { Card } from 'boot-cell/source/Content/Card';
8+
import { Card, CardHeader, CardFooter } from 'boot-cell/source/Content/Card';
99
import { Button } from 'boot-cell/source/Form/Button';
10-
import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
10+
import { NavLink } from 'boot-cell/source/Navigator/Nav';
1111

1212
import { Example } from '../../../source/component/Example';
1313

@@ -150,32 +150,33 @@ Add an optional header and/or footer within a card.
150150

151151
<Example>
152152
<Card
153-
header="Featured"
154153
title="Special title treatment"
155154
text="With supporting text below as a natural lead-in to additional content."
156155
>
156+
<CardHeader>Featured</CardHeader>
157157
<Button>Go somewhere</Button>
158158
</Card>
159159
</Example>
160160

161161
```TSX
162162
import { render, createCell } from 'web-cell';
163-
import { Card } from 'boot-cell/source/Content/Card';
163+
import { Card, CardHeader } from 'boot-cell/source/Content/Card';
164164
import { Button } from 'boot-cell/source/Form/Button';
165165

166166
render(
167167
<Card
168-
header="Featured"
169168
title="Special title treatment"
170169
text="With supporting text below as a natural lead-in to additional content."
171170
>
171+
<CardHeader>Featured</CardHeader>
172172
<Button>Go somewhere</Button>
173173
</Card>
174174
);
175175
```
176176

177177
<Example>
178-
<Card header="Quote">
178+
<Card>
179+
<CardHeader>Quote</CardHeader>
179180
<blockquote className="blockquote mb-0">
180181
<p>
181182
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
@@ -190,10 +191,11 @@ render(
190191

191192
```TSX
192193
import { render, createCell } from 'web-cell';
193-
import { Card } from 'boot-cell/source/Content/Card';
194+
import { Card, CardHeader } from 'boot-cell/source/Content/Card';
194195

195196
render(
196-
<Card header="Quote">
197+
<Card>
198+
<CardHeader>Quote</CardHeader>
197199
<blockquote className="blockquote mb-0">
198200
<p>
199201
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
@@ -210,73 +212,69 @@ render(
210212
<Example>
211213
<Card
212214
className="text-center"
213-
header="Featured"
214215
title="Special title treatment"
215216
text="With supporting text below as a natural lead-in to additional content."
216-
footer="2 days ago"
217217
>
218+
<CardHeader>Featured</CardHeader>
218219
<Button>Go somewhere</Button>
220+
<CardFooter>2 days ago</CardFooter>
219221
</Card>
220222
</Example>
221223

222224
```TSX
223225
import { render, createCell } from 'web-cell';
224-
import { Card } from 'boot-cell/source/Content/Card';
226+
import { Card, CardHeader, CardFooter } from 'boot-cell/source/Content/Card';
225227
import { Button } from 'boot-cell/source/Form/Button';
226228

227229
render(
228230
<Card
229231
className="text-center"
230-
header="Featured"
231232
title="Special title treatment"
232233
text="With supporting text below as a natural lead-in to additional content."
233-
footer="2 days ago"
234234
>
235+
<CardHeader>Featured</CardHeader>
235236
<Button>Go somewhere</Button>
237+
<CardFooter>2 days ago</CardFooter>
236238
</Card>
237239
);
238240
```
239241

240242
## Navigation
241243

242-
Add some navigation to a card’s header (or block) with BootCell’s [`<Nav />` components][1].
244+
Add some navigation to a card’s header (or block) with BootCell’s [`<NavLink />` components][1].
243245

244246
<Example>
245247
<Card
246248
className="text-center"
247-
header={
248-
<Nav className="card-header-tabs" itemMode="tabs">
249-
<NavLink active>Active</NavLink>
250-
<NavLink>Link</NavLink>
251-
<NavLink disabled>Disabled</NavLink>
252-
</Nav>
253-
}
254249
title="Special title treatment"
255250
text="With supporting text below as a natural lead-in to additional content."
256251
>
252+
<CardHeader itemMode="tabs">
253+
<NavLink active>Active</NavLink>
254+
<NavLink>Link</NavLink>
255+
<NavLink disabled>Disabled</NavLink>
256+
</CardHeader>
257257
<Button>Go somewhere</Button>
258258
</Card>
259259
</Example>
260260

261261
```TSX
262262
import { render, createCell } from 'web-cell';
263-
import { Card } from 'boot-cell/source/Content/Card';
264-
import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
263+
import { Card, CardHeader } from 'boot-cell/source/Content/Card';
264+
import { NavLink } from 'boot-cell/source/Navigator/Nav';
265265
import { Button } from 'boot-cell/source/Form/Button';
266266

267267
render(
268268
<Card
269269
className="text-center"
270-
header={
271-
<Nav className="card-header-tabs" itemMode="tabs">
272-
<NavLink active>Active</NavLink>
273-
<NavLink>Link</NavLink>
274-
<NavLink disabled>Disabled</NavLink>
275-
</Nav>
276-
}
277270
title="Special title treatment"
278271
text="With supporting text below as a natural lead-in to additional content."
279272
>
273+
<CardHeader itemMode="tabs">
274+
<NavLink active>Active</NavLink>
275+
<NavLink>Link</NavLink>
276+
<NavLink disabled>Disabled</NavLink>
277+
</CardHeader>
280278
<Button>Go somewhere</Button>
281279
</Card>
282280
);
@@ -285,39 +283,35 @@ render(
285283
<Example>
286284
<Card
287285
className="text-center"
288-
header={
289-
<Nav className="card-header-pills" itemMode="pills">
290-
<NavLink active>Active</NavLink>
291-
<NavLink>Link</NavLink>
292-
<NavLink disabled>Disabled</NavLink>
293-
</Nav>
294-
}
295286
title="Special title treatment"
296287
text="With supporting text below as a natural lead-in to additional content."
297288
>
289+
<CardHeader itemMode="pills">
290+
<NavLink active>Active</NavLink>
291+
<NavLink>Link</NavLink>
292+
<NavLink disabled>Disabled</NavLink>
293+
</CardHeader>
298294
<Button>Go somewhere</Button>
299295
</Card>
300296
</Example>
301297

302298
```TSX
303299
import { render, createCell } from 'web-cell';
304-
import { Card } from 'boot-cell/source/Content/Card';
305-
import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
300+
import { Card, CardHeader } from 'boot-cell/source/Content/Card';
301+
import { NavLink } from 'boot-cell/source/Navigator/Nav';
306302
import { Button } from 'boot-cell/source/Form/Button';
307303

308304
render(
309305
<Card
310306
className="text-center"
311-
header={
312-
<Nav className="card-header-pills" itemMode="pills">
313-
<NavLink active>Active</NavLink>
314-
<NavLink>Link</NavLink>
315-
<NavLink disabled>Disabled</NavLink>
316-
</Nav>
317-
}
318307
title="Special title treatment"
319308
text="With supporting text below as a natural lead-in to additional content."
320309
>
310+
<CardHeader itemMode="pills">
311+
<NavLink active>Active</NavLink>
312+
<NavLink>Link</NavLink>
313+
<NavLink disabled>Disabled</NavLink>
314+
</CardHeader>
321315
<Button>Go somewhere</Button>
322316
</Card>
323317
);

‎document/source/components/NavBar.mdx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ group: Components
77

88
import { Fragment } from 'web-cell';
99
import { Image } from 'boot-cell/source/Media/Image';
10-
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
10+
import { NavBar, BannerNavBar } from 'boot-cell/source/Navigator/NavBar';
1111
import { NavLink } from 'boot-cell/source/Navigator/Nav';
1212
import { DropMenuItem } from 'boot-cell/source/Navigator/DropMenu';
1313

@@ -724,8 +724,36 @@ render(
724724
);
725725
```
726726

727+
### External content
728+
729+
Sometimes you want to use the [`<collapse-box />`][6] to trigger hidden content elsewhere on the page.
730+
731+
<Example>
732+
<BannerNavBar className="position-static">
733+
<div class="p-4">
734+
<h5 class="text-white h4">Collapsed content</h5>
735+
<span class="text-muted">Toggleable via the navbar brand.</span>
736+
</div>
737+
</BannerNavBar>
738+
</Example>
739+
740+
```TSX
741+
import { render, createCell } from 'web-cell';
742+
import { BannerNavBar } from 'boot-cell/source/Navigator/NavBar';
743+
744+
render(
745+
<BannerNavBar>
746+
<div class="p-4">
747+
<h5 class="text-white h4">Collapsed content</h5>
748+
<span class="text-muted">Toggleable via the navbar brand.</span>
749+
</div>
750+
</BannerNavBar>
751+
);
752+
```
753+
727754
[1]: https://getbootstrap.com/docs/4.5/utilities/spacing/
728755
[2]: https://getbootstrap.com/docs/4.5/utilities/flex/
729756
[3]: https://getbootstrap.com/docs/4.5/utilities/display/
730757
[4]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
731758
[5]: https://caniuse.com/#feat=css-sticky
759+
[6]: components/collapse

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,35 @@
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"@nuintun/qrcode": "^3.0.1",
7-
"boot-cell": "^1.3.0",
7+
"boot-cell": "^1.5.1",
88
"bootstrap-icons": "^1.1.0",
99
"cell-router": "^2.0.1",
1010
"classnames": "^2.2.6",
1111
"github-web-widget": "^3.0.0-beta.5",
1212
"iterable-observer": "^1.0.0-beta.5",
13-
"koajax": "^0.6.2",
13+
"koajax": "^0.6.4",
1414
"lodash.groupby": "^4.6.0",
1515
"markdown-ime": "^1.0.3",
16-
"marked": "^1.2.3",
16+
"marked": "^1.2.5",
1717
"mobx": "^5.15.7",
1818
"mobx-web-cell": "^0.3.2",
1919
"turndown": "^7.0.0",
2020
"turndown-plugin-gfm": "^1.0.2",
2121
"web-cell": "^2.2.0",
22-
"web-utility": "^1.8.2"
22+
"web-utility": "^2.0.0"
2323
},
2424
"devDependencies": {
25-
"@octokit/types": "^5.5.0",
25+
"@octokit/openapi-types": "^1.2.2",
2626
"@types/classnames": "^2.2.11",
2727
"@types/lodash.groupby": "^4.6.6",
2828
"husky": "^4.3.0",
2929
"less": "^3.12.2",
30-
"lint-staged": "^10.5.1",
31-
"mark-cell": "^0.4.4",
30+
"lint-staged": "^10.5.2",
31+
"mark-cell": "^0.4.5",
3232
"parcel": "^1.12.4",
3333
"postcss-modules": "^3.2.2",
34-
"prettier": "^2.1.2",
35-
"typescript": "^4.0.5",
34+
"prettier": "^2.2.1",
35+
"typescript": "^4.1.2",
3636
"workbox-cli": "^4.3.1"
3737
},
3838
"prettier": {

‎source/index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,43 @@
1010
<title>BootCell</title>
1111
<link rel="icon" href="https://web-cell.dev/WebCell-0.f1ffd28b.png" />
1212
<link rel="manifest" href="index.webmanifest" />
13-
<script src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.15/pwacompat.min.js"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.17/pwacompat.min.js"></script>
1414
<link
1515
rel="stylesheet"
16-
href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.2/dist/dialog-polyfill.css"
16+
href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.4/dist/dialog-polyfill.css"
1717
/>
1818
<link
1919
rel="stylesheet"
20-
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
20+
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
2121
/>
2222
<link
2323
rel="stylesheet"
2424
href="https://cdn.jsdelivr.net/npm/bs-stepper@1.7.0/dist/css/bs-stepper.min.css"
2525
/>
2626
<link
2727
rel="stylesheet"
28-
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css"
28+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css"
2929
/>
3030
<link
3131
rel="stylesheet"
3232
href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css"
3333
/>
3434
<link
3535
rel="stylesheet"
36-
href="https://cdn.jsdelivr.net/npm/prismjs@1.21.0/themes/prism-okaidia.css"
36+
href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-okaidia.css"
3737
/>
3838
<link rel="stylesheet" href="index.less" />
3939

40-
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Object.fromEntries%2CArray.prototype.flat%2CIntersectionObserver%2CIntersectionObserverEntry"></script>
41-
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.2/dist/dialog-polyfill.js"></script>
42-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.4/webcomponents-bundle.min.js"></script>
43-
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.4/custom-elements-es5-adapter.js"></script>
44-
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.18/dist/share-min.js"></script>
40+
<script
41+
crossorigin
42+
src="https://polyfill.app/api/polyfill?features=es.string.match-all,es.array.flat,es.object.from-entries,regenerator-runtime,intersection-observer,resize-observer"
43+
></script>
44+
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.4/dist/dialog-polyfill.js"></script>
45+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.min.js"></script>
46+
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.5.0/custom-elements-es5-adapter.js"></script>
47+
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.20/dist/share-min.js"></script>
4548

4649
<script src="index.tsx" async></script>
4750
</head>
48-
<body style="overflow-x: hidden;"></body>
51+
<body style="overflow-x: hidden"></body>
4952
</html>

‎source/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { serviceWorkerUpdate } from 'web-utility';
1+
import { serviceWorkerUpdate } from 'web-utility/source/event';
22
import { documentReady, render, createCell } from 'web-cell';
33

44
import { PageRouter } from './page';

‎source/model/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { History } from 'cell-router/source';
22
import { HTTPClient } from 'koajax';
3+
import { components } from '@octokit/openapi-types';
34

45
import { MetaModel } from './Meta';
56

@@ -11,3 +12,5 @@ export const github = new HTTPClient({
1112
baseURI: 'https://api.github.com/',
1213
responseType: 'json'
1314
});
15+
16+
export type Repository = components['schemas']['minimal-repository'];

‎source/page/Example/Album.less‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.jumbotron {
2+
@media (min-width: 768px) {
3+
padding-top: 6rem;
4+
padding-bottom: 6rem;
5+
}
6+
h1 {
7+
font-weight: 300;
8+
}
9+
:global .container {
10+
max-width: 40rem;
11+
}
12+
}

0 commit comments

Comments
 (0)