Improve starter template.

Author: koculu

.gitignore

@@ -9,3 +9,4 @@ tsconfig.bundle.generated.json
 /.tmp*
 /frontend/out/
 /frontend/purestack.studio/legal/_private/
+/private-docs

frontend/components/getting-started/studioSetupStep.ts

@@ -0,0 +1,29 @@
+import { defineComponent, html } from 'regor'
+
+export interface StudioSetupStep {
+  heading: string
+  description: string
+}
+
+const setupStepTemplate = html`<Panel tone="accent" variant="surface" class="p-0 mb-5" bodyClass="p-4">
+  <Flex align="center" class="gap-3 mb-3">
+    <IconFrame name="tabler:browser" tone="accent" variant="surface"/>
+    <strong>{{ heading }}</strong>
+  </Flex>
+  <p class="mt-0 mb-3 fs-sm">{{ description }}</p>
+  <ol class="m-0 pl-4 fs-sm">
+    <li>Choose your template, colors, and features.</li>
+    <li>Review your choices and create your site.</li>
+    <li>Browse it live, then finish Studio when you’re ready.</li>
+  </ol>
+</Panel>`
+
+export function defineStudioSetupStepComponent() {
+  return defineComponent<StudioSetupStep>(setupStepTemplate, {
+    context: () => ({
+      heading: 'Configure your site in your browser',
+      description:
+        'init starts a local PureStack setup website. Open the URL printed in your terminal to get started.',
+    }),
+  })
+}

frontend/components/studioComponents.ts

@@ -1,7 +1,8 @@
+import { defineStudioSetupStepComponent } from './getting-started/studioSetupStep'
 import { defineStudioActivityChartComponent } from './studioActivityChart'
 import { defineStudioBrandComponent } from './studioBrand'
-import { defineStudioCommandComponent } from './studioCommand'
 import { defineStudioColorPickerComponent } from './studioColorPicker'
+import { defineStudioCommandComponent } from './studioCommand'
 import { defineStudioCopyComponent } from './studioCopy'
 import { defineStudioFaqComponent } from './studioFaq'
 import { defineStudioFeatureComponent } from './studioFeature'
@@ -19,6 +20,7 @@ export function defineStudioComponents() {
     studioCopy: defineStudioCopyComponent(),
     studioFaq: defineStudioFaqComponent(),
     studioCommand: defineStudioCommandComponent(),
+    studioSetupStep: defineStudioSetupStepComponent(),
     studioActivityChart: defineStudioActivityChartComponent(),
     studioWorkbench: defineStudioWorkbenchComponent(),
   }

frontend/purestack.studio/assets/guides/purestack-cli/studio-options.png

@@ -522,65 +522,58 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
       <span class="eyebrow">03 / START BUILDING</span>
       <h2 id="start-title">Make something<br/><span>of your own.</span></h2>
       <p>
-        Install <code>purestack</code> from npm to build your own site. Explore
-        the source and run the included examples with the steps here, or follow
-        the <a href="/guides/getting-started/purestack-cli/">CLI guide</a> to start a project.
+        Start PureStack Studio with one command, then open it in your browser.
+        Choose a starting point, find your colors, and make it yours.
       </p>
       <ol class="start-steps">
         <li>
           <span>01</span>
           <div>
-            <strong>Get the source</strong>
-            <p>Clone the repository and install with Yarn.</p>
+            <strong>Open Studio</strong>
+            <p>Run init. Follow the link in your terminal.</p>
           </div>
         </li>
         <li>
           <span>02</span>
           <div>
-            <strong>Start the playground</strong>
-            <p>Run the included content site locally.</p>
+            <strong>Find your starting point</strong>
+            <p>Choose a template, colors, and the features you need.</p>
           </div>
         </li>
         <li>
           <span>03</span>
           <div>
-            <strong>Make it yours</strong>
-            <p>Edit a page. Add a component. Keep going.</p>
+            <strong>Create it. See it. Make it yours.</strong>
+            <p>Browse your new site. Your content and code are yours to shape.</p>
           </div>
         </li>
       </ol>
     </div>
     <div class="start-terminal">
       <div class="terminal-heading">
         <span><Icon name="tabler:terminal-2"/>Your terminal</span
-        ><span>FROM SOURCE</span>
+        ><span>START WITH STUDIO</span>
       </div>
       <div class="terminal-body">
         <StudioCommand
-          target="command-clone"
-          label="Copy clone command"
-          description="# Clone the project"
-          command="git clone https://github.com/PureStackStudio/PureStack.git"/>
-        <StudioCommand
-          target="command-install"
-          label="Copy install commands"
-          description="# Install dependencies"
-          :command="'cd PureStack\nyarn install'"/>
+          target="command-init"
+          label="Copy Studio command"
+          description="# Your new site starts here"
+          command="npx purestack@latest init"/>
+        <StudioSetupStep/>
         <StudioCommand
           target="command-dev"
           label="Copy development command"
-          description="# Start the sample site"
+          description="# After setup, keep building in your project folder"
           command="yarn dev"/>
         <div class="terminal-address">
-          <span class="status-dot"></span>Open localhost:4173 in your browser
+          <span class="status-dot"></span>Choose. Create. Browse your live site.
         </div>
       </div>
       <a
         class="terminal-footer"
-        href="https://github.com/PureStackStudio/PureStack#development"
-        target="_blank"
-        rel="noopener"
-        >Setup details in the README <span aria-hidden="true">↗</span></a
+        href="/guides/getting-started/purestack-cli/"
+        >Your first site, step by step <span aria-hidden="true">↗</span></a
       >
     </div>
   </Grid>
@@ -624,10 +617,10 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
       talk to whichever backend your product uses.
     </StudioFaq>
     <StudioFaq title="How do I install PureStack?">
-      Add the published package to your project with <code>yarn add purestack</code>.
-      The quick start above runs the included sample from a repository checkout;
-      the <a href="/guides/getting-started/purestack-cli/">CLI guide</a> shows how to build your
-      own site with the installed package.
+      Run <code>npx purestack@latest init</code> and open the link in your
+      terminal. Studio guides you through choosing and creating your site,
+      including optional dependency installation. Follow the
+      <a href="/guides/getting-started/purestack-cli/">CLI guide</a> for your first steps.
     </StudioFaq>
   </div>
 </Grid>

frontend/purestack.studio/assets/guides/purestack-cli/studio-review.png

@@ -1,4 +1,5 @@
 import {
+  cp,
   mkdir,
   mkdtemp,
   readdir,
@@ -54,7 +55,11 @@ class BrowserPeer implements DevWebSocketConnection {
 
 async function fixture(previewFails = false) {
   const cwd = await mkdtemp(path.join(tmpdir(), 'purestack-studio-test-'))
-  const root = path.resolve('templates/starter')
+  const root = path.join(cwd, 'template')
+  await cp(path.resolve('templates/starter'), root, {
+    recursive: true,
+    filter: (source) => path.basename(source) !== 'node_modules',
+  })
   const template = {
     root,
     source: 'starter',

frontend/purestack.studio/assets/guides/purestack-cli/studio-site.png

@@ -66,6 +66,7 @@ async function fixture(template = 'starter') {
   const unpacked = path.join(temporary, 'fixture')
   await cp(path.join(repository, 'templates', template), unpacked, {
     recursive: true,
+    filter: (source) => path.basename(source) !== 'node_modules',
   })
   return unpacked
 }
@@ -214,7 +215,10 @@ describe('project generation', () => {
     )
     expect(yarnConfig).toContain('nodeLinker: node-modules')
     expect(yarnConfig).toContain('npmMinimalAgeGate: 0')
-    expect(Object.keys(project.dependencies)).toEqual(['purestack'])
+    expect(project.dependencies).toMatchObject({
+      '@purestack/ts-style': cliVersion,
+      regor: '^1.7.6',
+    })
     expect(
       JSON.parse(
         await readFile(
@@ -606,7 +610,7 @@ describe('project generation', () => {
       await readFile(path.join(directory, 'content/siteConfig.json'), 'utf8'),
     )
     expect(config).toMatchObject({
-      style: { theme: { skin: 'standard', presets: ['mint'] } },
+      style: { theme: { skin: 'starter', presets: ['mint'] } },
       navigation: { mode: 'none' },
       pagefind: { enabled: false },
       pageToc: { enabled: false },