Skip to content

Commit 610298b

Browse files
koculukoculu
authored
Merge pull request #11 from PureStackStudio/feature-plugin
Improve extensibility with plugin architecture.
2 parents 2e4fa11 + de6f44d commit 610298b

100 files changed

Lines changed: 4079 additions & 694 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ yarn frontend
1212
```
1313

1414
Open **http://127.0.0.1:4700**. The content watcher updates MDX and browser
15-
TypeScript; the process watcher reloads changes to the runner, components, and theme.
15+
TypeScript, and reloads the Studio plugin when it, a component, or the theme
16+
changes; the process watcher restarts the server when PureStack's own sources change.
1617

1718
```sh
1819
yarn frontend:build
@@ -23,14 +24,15 @@ yarn frontend:publish
2324
- `frontend:publish` creates a clean, minified production artifact in
2425
`frontend/out/purestack.studio/web`. This is a local build, not a deployment.
2526
- Serve the production folder as a static website at `https://purestack.studio`.
26-
- Use the site runner rather than invoking the generic CLI directly: the runner
27-
registers the `studio` skin, composition components, template, and typed styles.
27+
- Each command runs the `purestack` CLI. It loads `purestack.studio/purestack.config.ts`,
28+
whose plugin registers the `studio` skin, composition components, template, and typed styles.
2829

2930
## Source map
3031

3132
| File | Purpose |
3233
| --- | --- |
33-
| `studio.ts` | Build/dev entry point and semantic HTML document template |
34+
| `studioPlugin.ts` | The Studio plugin: skin, components, templates, styles, and generated previews |
35+
| `purestack.studio/purestack.config.ts` | Adds the Studio plugin, so the CLI builds and serves the site |
3436
| `demoStyle.ts` | Typed CSS for the real Style API workbench preview |
3537
| `purestack.studio/index.mdx` | Landing page, source examples, and static component previews |
3638
| `purestack.studio/header.mdx`, `footer.mdx` | Shared navigation and footer |

‎frontend/docs/siteGuide.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -321,9 +321,9 @@ export async function writeSiteGuidePreviews(site: SiteConfig) {
321321
index,
322322
),
323323
}))
324-
const cards = samples
325-
.map((sample) => {
326-
const body = renderApp(sample.template, {
324+
const cells = await Promise.all(
325+
samples.map(async (sample) => {
326+
const body = await renderApp(sample.template, {
327327
components: defineComponents(getSvgIcon),
328328
context: contextFor(site, sample),
329329
})
@@ -332,8 +332,9 @@ export async function writeSiteGuidePreviews(site: SiteConfig) {
332332
const isolated =
333333
name === 'TopBar' || name === 'SignIn' || sample.signedIn
334334
return `<section class="component-appearance-cell site-guide-sample"><code>${escapeAttribute(sample.label)}</code>${isolated ? `<iframe title="${escapeAttribute(sample.label)}" style="height:160px" srcdoc="${escapeAttribute(documentFor(site, inner, sample.signedIn))}"></iframe>` : body}</section>`
335-
})
336-
.join('')
335+
}),
336+
)
337+
const cards = cells.join('')
337338
const targets =
338339
name === 'PageToc'
339340
? '<section id="guide-intro"><h3>Introduction</h3><p>Outline links have real targets in this document.</p></section><section id="guide-detail"><h3>Details</h3><p>Nested entries link to supporting content.</p></section>'

‎frontend/purestack.studio/components/site/consent/consent.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const exampleTemplate = html`<SectionHeader
7575
Reset this example
7676
</Btn>`
7777

78-
function createConsentPreviewDocument(site: SiteConfig): string {
78+
async function createConsentPreviewDocument(site: SiteConfig): Promise<string> {
7979
const context: TsSsgContext = {
8080
site: { ...site },
8181
pageInfo: {
@@ -139,7 +139,7 @@ function createConsentPreviewDocument(site: SiteConfig): string {
139139
],
140140
services: [],
141141
}
142-
const body = renderApp(exampleTemplate, {
142+
const body = await renderApp(exampleTemplate, {
143143
components: defineComponents(getSvgIcon),
144144
context,
145145
})
@@ -169,7 +169,7 @@ export async function writeConsentPreview(site: SiteConfig) {
169169
'consent',
170170
'preview.html',
171171
)
172-
const documentHtml = createConsentPreviewDocument(site)
172+
const documentHtml = await createConsentPreviewDocument(site)
173173
await fs.mkdir(path.dirname(output), { recursive: true })
174174
await fs.writeFile(output, documentHtml, 'utf8')
175175
}

‎frontend/purestack.studio/components/site/consent/preview.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const exampleTemplate = html`<SectionHeader
4040
Reset this example
4141
</Btn>`
4242

43-
function createConsentPreviewDocument(site: SiteConfig): string {
43+
async function createConsentPreviewDocument(site: SiteConfig): Promise<string> {
4444
const context: TsSsgContext = {
4545
site: { ...site },
4646
pageInfo: {
@@ -104,7 +104,7 @@ function createConsentPreviewDocument(site: SiteConfig): string {
104104
],
105105
services: [],
106106
}
107-
const body = renderApp(exampleTemplate, {
107+
const body = await renderApp(exampleTemplate, {
108108
components: defineComponents(getSvgIcon),
109109
context,
110110
})
@@ -134,7 +134,7 @@ export async function writeConsentPreview(site: SiteConfig) {
134134
'consent',
135135
'preview.html',
136136
)
137-
const documentHtml = createConsentPreviewDocument(site)
137+
const documentHtml = await createConsentPreviewDocument(site)
138138
await fs.mkdir(path.dirname(output), { recursive: true })
139139
await fs.writeFile(output, documentHtml, 'utf8')
140140
}

‎frontend/purestack.studio/components/site/nav-menu/nav-menu.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@ const navMenuPreviewTemplate = html`<iframe
457457
></iframe>`
458458
const exampleTemplate = html`<NavMenu />`
459459

460-
function createNavMenuPreviewDocument(site: SiteConfig): string {
460+
async function createNavMenuPreviewDocument(site: SiteConfig): Promise<string> {
461461
const context: TsSsgContext = {
462462
site: { ...site },
463463
pageInfo: {
@@ -512,7 +512,7 @@ function createNavMenuPreviewDocument(site: SiteConfig): string {
512512
},
513513
],
514514
}
515-
const body = renderApp(exampleTemplate, {
515+
const body = await renderApp(exampleTemplate, {
516516
components: defineComponents(getSvgIcon),
517517
context,
518518
})
@@ -543,7 +543,7 @@ export async function writeNavMenuPreview(site: SiteConfig) {
543543
'nav-menu',
544544
'preview.html',
545545
)
546-
const documentHtml = createNavMenuPreviewDocument(site)
546+
const documentHtml = await createNavMenuPreviewDocument(site)
547547
await fs.mkdir(path.dirname(output), { recursive: true })
548548
await fs.writeFile(output, documentHtml, 'utf8')
549549
}

‎frontend/purestack.studio/components/site/nav-menu/preview.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const navMenuPreviewTemplate = html`<iframe
2424
></iframe>`
2525
const exampleTemplate = html`<NavMenu />`
2626

27-
function createNavMenuPreviewDocument(site: SiteConfig): string {
27+
async function createNavMenuPreviewDocument(site: SiteConfig): Promise<string> {
2828
const context: TsSsgContext = {
2929
site: { ...site },
3030
pageInfo: {
@@ -79,7 +79,7 @@ function createNavMenuPreviewDocument(site: SiteConfig): string {
7979
},
8080
],
8181
}
82-
const body = renderApp(exampleTemplate, {
82+
const body = await renderApp(exampleTemplate, {
8383
components: defineComponents(getSvgIcon),
8484
context,
8585
})
@@ -110,7 +110,7 @@ export async function writeNavMenuPreview(site: SiteConfig) {
110110
'nav-menu',
111111
'preview.html',
112112
)
113-
const documentHtml = createNavMenuPreviewDocument(site)
113+
const documentHtml = await createNavMenuPreviewDocument(site)
114114
await fs.mkdir(path.dirname(output), { recursive: true })
115115
await fs.writeFile(output, documentHtml, 'utf8')
116116
}

‎frontend/purestack.studio/components/site/page-toc/page-toc.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const exampleTemplate = html`<PageToc title="Example contents" />
6767
<p>Keep headings descriptive and ordered.</p>
6868
</section>`
6969

70-
function createPageTocPreviewDocument(site: SiteConfig): string {
70+
async function createPageTocPreviewDocument(site: SiteConfig): Promise<string> {
7171
const context: TsSsgContext = {
7272
site: { ...site },
7373
pageInfo: {
@@ -106,7 +106,7 @@ function createPageTocPreviewDocument(site: SiteConfig): string {
106106
children: [{ id: 'preview-contract', title: 'Contract', depth: 3 }],
107107
},
108108
]
109-
const body = renderApp(exampleTemplate, {
109+
const body = await renderApp(exampleTemplate, {
110110
components: defineComponents(getSvgIcon),
111111
context,
112112
})
@@ -135,7 +135,7 @@ export async function writePageTocPreview(site: SiteConfig) {
135135
'page-toc',
136136
'preview.html',
137137
)
138-
const documentHtml = createPageTocPreviewDocument(site)
138+
const documentHtml = await createPageTocPreviewDocument(site)
139139
await fs.mkdir(path.dirname(output), { recursive: true })
140140
await fs.writeFile(output, documentHtml, 'utf8')
141141
}

‎frontend/purestack.studio/components/site/page-toc/preview.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const exampleTemplate = html`<PageToc title="Example contents" />
3232
<p>Keep headings descriptive and ordered.</p>
3333
</section>`
3434

35-
function createPageTocPreviewDocument(site: SiteConfig): string {
35+
async function createPageTocPreviewDocument(site: SiteConfig): Promise<string> {
3636
const context: TsSsgContext = {
3737
site: { ...site },
3838
pageInfo: {
@@ -71,7 +71,7 @@ function createPageTocPreviewDocument(site: SiteConfig): string {
7171
children: [{ id: 'preview-contract', title: 'Contract', depth: 3 }],
7272
},
7373
]
74-
const body = renderApp(exampleTemplate, {
74+
const body = await renderApp(exampleTemplate, {
7575
components: defineComponents(getSvgIcon),
7676
context,
7777
})
@@ -100,7 +100,7 @@ export async function writePageTocPreview(site: SiteConfig) {
100100
'page-toc',
101101
'preview.html',
102102
)
103-
const documentHtml = createPageTocPreviewDocument(site)
103+
const documentHtml = await createPageTocPreviewDocument(site)
104104
await fs.mkdir(path.dirname(output), { recursive: true })
105105
await fs.writeFile(output, documentHtml, 'utf8')
106106
}

‎frontend/purestack.studio/components/site/sign-in/preview.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const exampleTemplate = html`<Flex align="center" justify="between">
4141
preview does not sign you in.
4242
</p>`
4343

44-
function createSignInPreviewDocument(site: SiteConfig): string {
44+
async function createSignInPreviewDocument(site: SiteConfig): Promise<string> {
4545
const context: TsSsgContext = {
4646
site: { ...site },
4747
pageInfo: {
@@ -72,7 +72,7 @@ function createSignInPreviewDocument(site: SiteConfig): string {
7272
recordRuntimeEmbed: () => {},
7373
}
7474
context.site.auth = { ...context.site.auth, enabled: true, signUp: false }
75-
const body = renderApp(exampleTemplate, {
75+
const body = await renderApp(exampleTemplate, {
7676
components: defineComponents(getSvgIcon),
7777
context,
7878
})
@@ -101,7 +101,7 @@ export async function writeSignInPreview(site: SiteConfig) {
101101
'sign-in',
102102
'preview.html',
103103
)
104-
const documentHtml = createSignInPreviewDocument(site)
104+
const documentHtml = await createSignInPreviewDocument(site)
105105
await fs.mkdir(path.dirname(output), { recursive: true })
106106
await fs.writeFile(output, documentHtml, 'utf8')
107107
}

‎frontend/purestack.studio/components/site/sign-in/sign-in.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const exampleTemplate = html`<Flex align="center" justify="between">
7676
preview does not sign you in.
7777
</p>`
7878

79-
function createSignInPreviewDocument(site: SiteConfig): string {
79+
async function createSignInPreviewDocument(site: SiteConfig): Promise<string> {
8080
const context: TsSsgContext = {
8181
site: { ...site },
8282
pageInfo: {
@@ -107,7 +107,7 @@ function createSignInPreviewDocument(site: SiteConfig): string {
107107
recordRuntimeEmbed: () => {},
108108
}
109109
context.site.auth = { ...context.site.auth, enabled: true, signUp: false }
110-
const body = renderApp(exampleTemplate, {
110+
const body = await renderApp(exampleTemplate, {
111111
components: defineComponents(getSvgIcon),
112112
context,
113113
})
@@ -136,7 +136,7 @@ export async function writeSignInPreview(site: SiteConfig) {
136136
'sign-in',
137137
'preview.html',
138138
)
139-
const documentHtml = createSignInPreviewDocument(site)
139+
const documentHtml = await createSignInPreviewDocument(site)
140140
await fs.mkdir(path.dirname(output), { recursive: true })
141141
await fs.writeFile(output, documentHtml, 'utf8')
142142
}

0 commit comments

Comments
 (0)