Merge pull request #13 from PureStackStudio/cleanup-studio-plugin

Cleanup studio plugin by removing manual file generations.

Author: koculu

biome.json

@@ -3,6 +3,8 @@
   "files": {
     "includes": [
       "**",
+      "!frontend/out",
+      "!**/.*",
       "!**/dist",
       "!**/node_modules",
       "!**/.yarn",

frontend/docs/dataGuide.ts

@@ -64,15 +64,17 @@ export function createChartAppearanceState(): ChartAppearanceState {
   }
 }
 
+export interface ChartAppearanceControls {
+  tone: Ref<SemanticTone>
+  variant: Ref<ComponentVariant>
+  variantMode: Ref<ComponentVariantMode>
+  width: Ref<number | string>
+  showWidth?: RefOrValue<boolean>
+  prefix: RefOrValue<string>
+}
+
 export function defineChartAppearanceControls() {
-  return defineComponent<{
-    tone: Ref<SemanticTone>
-    variant: Ref<ComponentVariant>
-    variantMode: Ref<ComponentVariantMode>
-    width: Ref<number | string>
-    showWidth?: RefOrValue<boolean>
-    prefix: RefOrValue<string>
-  }>(
+  return defineComponent<ChartAppearanceControls>(
     html`<Grid columns="1" columnsMd="3">
     <FormSelectField :id="prefix + '-tone'" label="Chart tone" :model="tone" :options="tones"/>
     <FormSelectField :id="prefix + '-variant'" label="Chart variant" :model="variant" :options="variants"/>
@@ -94,11 +96,13 @@ export function defineChartAppearanceControls() {
   )
 }
 
+export interface ChartAppearanceGallery {
+  component: RefOrValue<string>
+  axis: RefOrValue<'tone' | 'variant' | 'mode'>
+}
+
 export function defineChartAppearanceGallery() {
-  return defineComponent<{
-    component: RefOrValue<string>
-    axis: RefOrValue<'tone' | 'variant' | 'mode'>
-  }>(
+  return defineComponent<ChartAppearanceGallery>(
     html`<div class="component-appearance-grid data-chart-gallery">
     <div class="component-appearance-cell" r-for="sample in samples">
       <code>{{ sample.label }}</code>

frontend/docs/docsComponents.ts

@@ -1,17 +1,19 @@
 import type { SiteConfig } from '@purestack/ts-common'
-import { defineConsentPreviewComponent } from '../purestack.studio/components/site/consent/preview'
-import { defineNavMenuPreviewComponent } from '../purestack.studio/components/site/nav-menu/preview'
-import { definePageTocPreviewComponent } from '../purestack.studio/components/site/page-toc/preview'
-import { defineSignInPreviewComponent } from '../purestack.studio/components/site/sign-in/preview'
-import { defineTopBarPreviewComponent } from '../purestack.studio/components/site/top-bar/preview'
 import { defineApiPropertyComponent } from './apiProperty'
 import { defineComponentGuideComponents } from './componentGuide'
 import { defineChartAppearanceGallery } from './dataGuide'
 import { defineFormAppearanceGallery } from './formAppearance'
 import { defineLandingAppearanceGallery } from './landingGuide'
 import { defineModalExampleComponents } from './modal'
 import { defineSemanticToneGallery } from './semanticToneGuide'
-import { defineSiteAppearanceGallery } from './siteGuide'
+import {
+  defineConsentPreviewComponent,
+  defineNavMenuPreviewComponent,
+  definePageTocPreviewComponent,
+  defineSignInPreviewComponent,
+  defineTopBarPreviewComponent,
+} from './sitePreviewComponents'
+import { defineSiteAppearanceGallery } from './sitePreviews'
 
 export function defineDocumentationComponents(site: SiteConfig) {
   return {

frontend/docs/landingGuide.ts

@@ -23,12 +23,14 @@ const variants: ComponentVariant[] = [
   'none',
 ]
 
+export interface LandingAppearanceGallery {
+  component: RefOrValue<string>
+  axis: RefOrValue<'tone' | 'variant' | 'mode'>
+}
+
 /** Full, simultaneously visible samples of each component's public appearance API. */
 export function defineLandingAppearanceGallery() {
-  return defineComponent<{
-    component: RefOrValue<string>
-    axis: RefOrValue<'tone' | 'variant' | 'mode'>
-  }>(
+  return defineComponent<LandingAppearanceGallery>(
     html`<div class="component-appearance-grid landing-appearance-gallery">
       <div class="component-appearance-cell" r-for="sample in samples">
         <code>{{ sample.label }}</code>

frontend/docs/previewTemplate.ts

@@ -0,0 +1,53 @@
+import type { PageTemplate } from '@purestack/ts-common'
+import { h } from '@purestack/ts-html'
+
+const previewStyles = `
+html,body{margin:0;min-height:0;height:auto}
+body.preview{display:block;min-height:0!important;padding:8px;box-sizing:border-box}
+.site-guide-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
+.site-guide-sample{min-width:0}
+.site-guide-sample>code{display:block;margin:0 0 1rem}
+.site-guide-sample iframe{width:100%;border:0;display:block}
+.preview .nav__menu,.preview .page-toc{position:static!important;width:100%!important;max-height:none!important}
+.preview .page-toc__panel-toggle,.preview .page-toc__restore-toggle,.preview .nav__panel-toggle,.preview .nav__collapse-toggle{display:none!important}
+.site-guide-sample .consent{position:static!important;pointer-events:auto!important}
+.site-guide-sample .consent__banner{position:static!important;display:block!important;max-width:none!important;width:100%!important}
+.site-guide-sample .consent__panel,.site-guide-sample [data-consent-settings]{display:none!important}
+.site-guide-sample .site-footer{margin:0;padding:1rem}
+.site-guide-sample .site-footer__inner{padding:0}
+.site-guide-sample .site-footer__bottom{flex-direction:column!important;align-items:start!important}
+.site-guide-sample .sign-in__panel{position:static!important;transform:none!important;min-width:0!important;width:100%!important}
+.site-guide-sample .sign-in{width:100%}
+.preview .topbar{position:static!important;padding:.5rem!important}
+.site-guide-sample .topbar__search{min-width:0}
+.site-guide-sample .text-title{font-size:1.15rem;line-height:1.35}
+.site-guide-sample .site-logo{max-width:100%}
+`
+
+// Presentation only: page head, assets, and component runtimes come from PureStack.
+const frameScript = `
+document.querySelectorAll('.site-guide-sample details.sign-in').forEach(menu=>menu.open=true);
+document.querySelectorAll('.site-guide-sample .consent__banner').forEach(banner=>{banner.hidden=false;banner.removeAttribute('aria-hidden')});
+if(window.parent!==window){
+  const sync=()=>{document.documentElement.dataset.theme=parent.document.documentElement.dataset.theme||'light';document.documentElement.setAttribute('data-theme-ready','true')};
+  sync();
+  new MutationObserver(sync).observe(parent.document.documentElement,{attributes:true,attributeFilter:['data-theme']});
+  const minimumHeight=frameElement ? parseFloat(frameElement.style.height)||0 : 0;
+  const resize=()=>{if(frameElement)frameElement.style.height=Math.max(minimumHeight,Math.ceil(document.body.getBoundingClientRect().height))+'px'};
+  new ResizeObserver(resize).observe(document.body);
+  addEventListener('load',resize);
+}
+`
+
+export const previewTemplate: PageTemplate = ({ head, bodyHtml, pageInfo }) => {
+  head.push(h('style').raw(previewStyles))
+  return h('html')
+    .attr({ lang: pageInfo.locale ?? 'en' })
+    .push(
+      head,
+      h('body')
+        .class('preview template-doc doc-content tone--neutral')
+        .raw(bodyHtml)
+        .push(h('script').raw(frameScript)),
+    )
+}

frontend/docs/semanticToneGuide.ts

@@ -49,8 +49,12 @@ const variants: ComponentVariant[] = [
   'none',
 ]
 
+export interface SemanticToneGallery {
+  axis: RefOrValue<string>
+}
+
 export function defineSemanticToneGallery() {
-  return defineComponent<{ axis: RefOrValue<string> }>(
+  return defineComponent<SemanticToneGallery>(
     html`<div class="component-appearance-grid tone-guide-gallery">
       <article class="component-appearance-cell" r-for="sample in samples" :data-tone-sample="sample.label">
         <code>{{ sample.label }}</code>