Skip to content

Commit e0a110e

Browse files
seanwuappsseanwuapps
committed
docs update
1 parent 5bd958c commit e0a110e

File tree

28 files changed

+2800
-2376
lines changed

28 files changed

+2800
-2376
lines changed

‎docs/docs-data.json‎

Lines changed: 211 additions & 34 deletions
Large diffs are not rendered by default.

‎docs/pnpm-lock.yaml‎

Lines changed: 1881 additions & 2150 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/components.d.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ export namespace Components {
3939
*/
4040
"match": MatchResults;
4141
}
42-
interface PageHelperClasses {
43-
}
4442
interface PageHome {
4543
}
4644
interface PageNotfound {
@@ -59,6 +57,9 @@ export namespace Components {
5957
}
6058
interface ThemeSetter {
6159
}
60+
interface TitleBar {
61+
"heading": string;
62+
}
6263
interface UtterancesDiv {
6364
"async"?: boolean;
6465
"crossorigin"?: string;
@@ -129,12 +130,6 @@ declare global {
129130
prototype: HTMLPageComponentsElement;
130131
new (): HTMLPageComponentsElement;
131132
};
132-
interface HTMLPageHelperClassesElement extends Components.PageHelperClasses, HTMLStencilElement {
133-
}
134-
var HTMLPageHelperClassesElement: {
135-
prototype: HTMLPageHelperClassesElement;
136-
new (): HTMLPageHelperClassesElement;
137-
};
138133
interface HTMLPageHomeElement extends Components.PageHome, HTMLStencilElement {
139134
}
140135
var HTMLPageHomeElement: {
@@ -165,6 +160,12 @@ declare global {
165160
prototype: HTMLThemeSetterElement;
166161
new (): HTMLThemeSetterElement;
167162
};
163+
interface HTMLTitleBarElement extends Components.TitleBar, HTMLStencilElement {
164+
}
165+
var HTMLTitleBarElement: {
166+
prototype: HTMLTitleBarElement;
167+
new (): HTMLTitleBarElement;
168+
};
168169
interface HTMLUtterancesDivElement extends Components.UtterancesDiv, HTMLStencilElement {
169170
}
170171
var HTMLUtterancesDivElement: {
@@ -182,12 +183,12 @@ declare global {
182183
"doc-usage": HTMLDocUsageElement;
183184
"hl-code": HTMLHlCodeElement;
184185
"page-components": HTMLPageComponentsElement;
185-
"page-helper-classes": HTMLPageHelperClassesElement;
186186
"page-home": HTMLPageHomeElement;
187187
"page-notfound": HTMLPageNotfoundElement;
188188
"page-standard": HTMLPageStandardElement;
189189
"seo-tags": HTMLSeoTagsElement;
190190
"theme-setter": HTMLThemeSetterElement;
191+
"title-bar": HTMLTitleBarElement;
191192
"utterances-div": HTMLUtterancesDivElement;
192193
}
193194
}
@@ -223,8 +224,6 @@ declare namespace LocalJSX {
223224
*/
224225
"match"?: MatchResults;
225226
}
226-
interface PageHelperClasses {
227-
}
228227
interface PageHome {
229228
}
230229
interface PageNotfound {
@@ -244,6 +243,9 @@ declare namespace LocalJSX {
244243
interface ThemeSetter {
245244
"onThemeChanged"?: (event: CustomEvent<boolean>) => void;
246245
}
246+
interface TitleBar {
247+
"heading"?: string;
248+
}
247249
interface UtterancesDiv {
248250
"async"?: boolean;
249251
"crossorigin"?: string;
@@ -263,12 +265,12 @@ declare namespace LocalJSX {
263265
"doc-usage": DocUsage;
264266
"hl-code": HlCode;
265267
"page-components": PageComponents;
266-
"page-helper-classes": PageHelperClasses;
267268
"page-home": PageHome;
268269
"page-notfound": PageNotfound;
269270
"page-standard": PageStandard;
270271
"seo-tags": SeoTags;
271272
"theme-setter": ThemeSetter;
273+
"title-bar": TitleBar;
272274
"utterances-div": UtterancesDiv;
273275
}
274276
}
@@ -286,12 +288,12 @@ declare module "@stencil/core" {
286288
"doc-usage": LocalJSX.DocUsage & JSXBase.HTMLAttributes<HTMLDocUsageElement>;
287289
"hl-code": LocalJSX.HlCode & JSXBase.HTMLAttributes<HTMLHlCodeElement>;
288290
"page-components": LocalJSX.PageComponents & JSXBase.HTMLAttributes<HTMLPageComponentsElement>;
289-
"page-helper-classes": LocalJSX.PageHelperClasses & JSXBase.HTMLAttributes<HTMLPageHelperClassesElement>;
290291
"page-home": LocalJSX.PageHome & JSXBase.HTMLAttributes<HTMLPageHomeElement>;
291292
"page-notfound": LocalJSX.PageNotfound & JSXBase.HTMLAttributes<HTMLPageNotfoundElement>;
292293
"page-standard": LocalJSX.PageStandard & JSXBase.HTMLAttributes<HTMLPageStandardElement>;
293294
"seo-tags": LocalJSX.SeoTags & JSXBase.HTMLAttributes<HTMLSeoTagsElement>;
294295
"theme-setter": LocalJSX.ThemeSetter & JSXBase.HTMLAttributes<HTMLThemeSetterElement>;
296+
"title-bar": LocalJSX.TitleBar & JSXBase.HTMLAttributes<HTMLTitleBarElement>;
295297
"utterances-div": LocalJSX.UtterancesDiv & JSXBase.HTMLAttributes<HTMLUtterancesDivElement>;
296298
}
297299
}

‎docs/src/components/app-header/app-header.tsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
11
import { Component, Host, h } from '@stencil/core';
2-
2+
import state from '../../store';
33
@Component({
44
tag: 'app-header',
55
styleUrl: 'app-header.css',
66
})
77
export class AppHeader {
8+
toggleMobileMenu() {
9+
state.mobileMenuOpen = !state.mobileMenuOpen;
10+
}
811
render() {
912
return (
1013
<Host>
11-
<div class="py-2">
12-
<div class="container"></div>
14+
<div class="header">
15+
<sc-button flat icon bordered onClick={() => this.toggleMobileMenu()} class="mobile-nav-trigger">
16+
<box-icon name="menu" size="lg" color="currentColor"></box-icon>
17+
</sc-button>
18+
<div class="logo-container">
19+
<stencil-route-link url="/" exact={true}>
20+
<app-logo></app-logo>
21+
</stencil-route-link>
22+
</div>
23+
<div class="spacer">&nbsp;</div>
24+
</div>
25+
<div class={`mobile-nav ${state.mobileMenuOpen ? 'open' : ''}`}>
26+
<div class="mobile-nav-header">
27+
<sc-button flat icon bordered class="mobile-nav-trigger" onClick={() => this.toggleMobileMenu()}>
28+
<box-icon name="x" size="lg" color="currentColor"></box-icon>
29+
</sc-button>
30+
<div class="logo-container">
31+
<stencil-route-link url="/" exact={true} onClick={() => (state.mobileMenuOpen = false)}>
32+
<app-logo></app-logo>
33+
</stencil-route-link>
34+
</div>
35+
<div class="spacer">&nbsp;</div>
36+
</div>
37+
<app-nav onClick={() => (state.mobileMenuOpen = false)}></app-nav>
38+
</div>
39+
<div class="nav">
40+
<app-nav></app-nav>
1341
</div>
1442
</Host>
1543
);

‎docs/src/components/app-root/app-root.scss‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
app-root {
2-
display: grid;
3-
padding: var(--root-padding);
4-
overflow: hidden;
5-
min-height: 100vh;
6-
gap: 0px 0px;
7-
grid-template-columns: 100%;
8-
grid-template-rows: var(--mobile-header-height) 1fr auto;
9-
grid-template-areas:
10-
'header'
11-
'main'
12-
'footer';
13-
@include media(lg) {
14-
grid-template-columns: 220px minmax(0, 1fr);
15-
grid-template-rows: auto 1fr auto;
2+
stencil-router {
3+
display: grid;
4+
padding: var(--root-padding);
5+
overflow: hidden;
6+
min-height: 100vh;
7+
gap: 0px 0px;
8+
grid-template-columns: 100%;
9+
grid-template-rows: var(--mobile-header-height) 1fr auto;
1610
grid-template-areas:
17-
'header main'
18-
'nav main'
19-
'footer footer';
11+
'header'
12+
'main'
13+
'footer';
14+
@include media(lg) {
15+
grid-template-columns: 220px minmax(0, 1fr);
16+
grid-template-rows: auto 1fr auto;
17+
grid-template-areas:
18+
'header main'
19+
'nav main'
20+
'footer footer';
21+
}
2022
}
21-
2223
&.mobile-menu-open {
2324
overflow: hidden;
2425
}

‎docs/src/components/app-root/app-root.tsx‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,37 @@
1-
import { Component, Host, h, State } from '@stencil/core';
1+
import { Component, Host, h } from '@stencil/core';
22
import 'soft-components';
33
import 'linkable-title';
44
import 'seanwu-logo';
5+
import state from '../../store';
56
@Component({
67
tag: 'app-root',
78
styleUrl: 'app-root.scss',
89
})
910
export class AppRoot {
10-
@State() mobileMenuOpen: boolean = false;
1111
toggleMobileMenu() {
12-
this.mobileMenuOpen = !this.mobileMenuOpen;
12+
state.mobileMenuOpen = !state.mobileMenuOpen;
1313
}
1414

1515
render() {
1616
return (
17-
<Host class={`${this.mobileMenuOpen ? 'mobile-menu-open' : ''}`}>
18-
<div class="header">
19-
<sc-button flat icon bordered onClick={() => this.toggleMobileMenu()} class="mobile-nav-trigger">
20-
<box-icon name="menu" size="lg" color="currentColor"></box-icon>
21-
</sc-button>
22-
<div class="logo-container">
23-
<stencil-route-link url="/" exact={true}>
24-
<app-logo></app-logo>
25-
</stencil-route-link>
26-
</div>
27-
<div class="spacer">&nbsp;</div>
28-
</div>
29-
<div class={`mobile-nav ${this.mobileMenuOpen ? 'open' : ''}`}>
30-
<div class="mobile-nav-header">
31-
<sc-button flat icon bordered class="mobile-nav-trigger" onClick={() => this.toggleMobileMenu()}>
32-
<box-icon name="x" size="lg" color="currentColor"></box-icon>
33-
</sc-button>
34-
<div class="logo-container">
35-
<stencil-route-link url="/" exact={true} onClick={() => (this.mobileMenuOpen = false)}>
36-
<app-logo></app-logo>
37-
</stencil-route-link>
38-
</div>
39-
<div class="spacer">&nbsp;</div>
40-
</div>
41-
<app-nav onClick={() => (this.mobileMenuOpen = false)}></app-nav>
42-
</div>
43-
44-
<div class="nav">
45-
<app-nav></app-nav>
46-
</div>
47-
48-
<main class="main pa-2">
49-
<stencil-router>
17+
<Host class={`${state.mobileMenuOpen ? 'mobile-menu-open' : ''}`}>
18+
<stencil-router>
19+
<app-header></app-header>
20+
<title-bar heading={state.page.heading}></title-bar>
21+
<main class="main pa-2">
5022
<stencil-route-switch scrollTopOffset={0}>
5123
<stencil-route url="/" component="page-home" exact={true} />
5224
<stencil-route url="/:page" component="page-standard" exact={true} />
5325
<stencil-route url="/components" exact={true} component="page-standard" />
5426
<stencil-route url="/components/:tag" component="page-components" />
5527
<stencil-route component="page-notfound" />
5628
</stencil-route-switch>
57-
</stencil-router>
58-
</main>
59-
<footer class="footer pa-4">
60-
<app-footer></app-footer>
61-
</footer>
62-
<theme-setter></theme-setter>
29+
</main>
30+
<footer class="footer pa-4">
31+
<app-footer></app-footer>
32+
</footer>
33+
<theme-setter></theme-setter>
34+
</stencil-router>
6335
</Host>
6436
);
6537
}

‎docs/src/components/pages/page-components/page-components.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { JsonDocsComponent, JsonDocsProp } from '../../../../docs-data';
55
import { getName } from '../../../helpers/components';
66
import { md, mdUsage } from '../../../helpers/md';
77
import SimpleBar from 'simplebar';
8-
import store from '../../../store';
8+
import state from '../../../store';
99

1010
@Component({
1111
tag: 'page-components',
@@ -266,7 +266,7 @@ export class PageComponents {
266266
<utterances-div
267267
repo="seanwuapps/soft-components"
268268
issue-term="pathname"
269-
theme={store.state.themeIsDark ? 'photon-dark' : 'github-light'}
269+
theme={state.themeIsDark ? 'photon-dark' : 'github-light'}
270270
crossorigin="anonymous"
271271
async
272272
></utterances-div>

‎docs/src/components/pages/page-helper-classes/page-helper-classes.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/src/components/pages/page-home/page-home.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, Host, h, State } from '@stencil/core';
2-
import { md } from '../../../helpers/md';
2+
import { renderPage } from '../../../helpers/page';
3+
import state from '../../../store';
34
@Component({
45
tag: 'page-home',
56
styleUrl: 'page-home.css',
@@ -9,32 +10,16 @@ export class PageHome {
910

1011
@State() notfound: boolean = false;
1112

12-
@State() content: string = 'Loading...';
13-
1413
async componentWillLoad() {
15-
this.loading = true;
16-
try {
17-
let response = await fetch('/site-content/pages/index.md');
18-
if (response.status !== 200) {
19-
throw new Error("Page doesn't exist");
20-
}
21-
22-
this.notfound = false;
23-
let text = await response.text();
24-
this.content = md.render(text);
25-
} catch (error) {
26-
this.notfound = true;
27-
} finally {
28-
this.loading = false;
29-
}
14+
await renderPage('index');
3015
}
3116
render() {
3217
return (
3318
<Host>
3419
<seo-tags pageTitle="Home" description="A set of decorative web components inspired by the neumorphism design"></seo-tags>
3520
<div class="flex justify-between">
3621
<div class="w-6">
37-
<div innerHTML={this.content}></div>
22+
<div innerHTML={state.page.content}></div>
3823
</div>
3924
<div class="w-4 px-2">
4025
<sc-card engraved>

‎docs/src/components/pages/page-standard/page-standard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, Host, h, Prop, Watch, State, Element, Build } from '@stencil
22
import { MatchResults, RouterHistory } from '@stencil/router';
33
import { md } from '../../../helpers/md';
44
import SimpleBar from 'simplebar';
5+
import state from '../../../store';
56
@Component({
67
tag: 'page-standard',
78
styleUrl: 'page-standard.scss',
@@ -64,15 +65,14 @@ export class PageStandard {
6465
return <page-notfound></page-notfound>;
6566
}
6667

67-
if (this.loading) {
68+
if (state.page.loading) {
6869
return <sc-progress indeterminate circular></sc-progress>;
6970
}
7071
const { page } = this.match.params;
7172

7273
return (
7374
<Host>
74-
{this.meta.title}
75-
<seo-tags pageTitle={this.meta ? this.meta.title : 'Soft Components'} description={this.meta ? this.meta.description : null}></seo-tags>
75+
<seo-tags pageTitle={state.page.meta ? state.page.meta.title : 'Soft components'} description={state.page.meta ? state.page.meta.description : ''}></seo-tags>
7676
<div class="content" innerHTML={this.content}></div>
7777
<div class="content-bottom text-center text-left-lg">
7878
<sc-button block bordered flat icon-text href={`https://github.com/seanwuapps/soft-components/edit/master/docs/src/site-content/pages/${page}.md`} target="_blank">

0 commit comments

Comments
 (0)