create-specra 0.1.7 → 0.2.0

package/templates/jbrains-docs/docs/v1.0.0/basics/syntax.mdx

@@ -0,0 +1,129 @@
+---
+title: Basic Syntax
+description: Learn the fundamental syntax and structure
+sidebar_position: 1
+---
+
+This page covers the essential syntax you need to know to start writing documentation content with MDX.
+
+## Page Structure
+
+Every MDX page starts with frontmatter followed by content:
+
+```mdx
+---
+title: Page Title
+description: Page description
+sidebar_position: 1
+---
+
+Your content goes here.
+```
+
+The frontmatter is a YAML block enclosed by `---` lines. It defines metadata about the page.
+
+## Markdown Basics
+
+MDX supports all standard Markdown syntax:
+
+### Text Formatting
+
+```markdown
+**Bold text**
+*Italic text*
+`Inline code`
+~~Strikethrough~~
+```
+
+**Bold text**, *Italic text*, `Inline code`, ~~Strikethrough~~
+
+### Links
+
+```markdown
+[Internal link](/docs/v1.0.0/getting-started)
+[External link](https://example.com)
+```
+
+### Images
+
+```markdown
+![Alt text](/path/to/image.png)
+```
+
+## Code Blocks
+
+Fenced code blocks support syntax highlighting for many languages:
+
+```typescript
+interface Document {
+  title: string;
+  content: string;
+  version: string;
+}
+
+function createDocument(title: string): Document {
+  return {
+    title,
+    content: '',
+    version: '1.0.0',
+  };
+}
+```
+
+```python
+class Document:
+    def __init__(self, title: str):
+        self.title = title
+        self.content = ""
+        self.version = "1.0.0"
+```
+
+## Components in MDX
+
+MDX lets you use components directly in your Markdown. Components are available globally — no imports needed:
+
+```mdx
+<Callout type="info">
+  This is a callout component inside MDX.
+</Callout>
+```
+
+<Callout type="info">
+  This is a callout component inside MDX.
+</Callout>
+
+## Headings
+
+Use headings to create document structure. The table of contents (when enabled) is generated from H2 and H3 headings:
+
+```markdown
+## Section (H2)
+### Subsection (H3)
+#### Detail (H4)
+```
+
+<Callout type="tip">
+  Start your content with H2 (`##`). The page title from frontmatter automatically renders as H1.
+</Callout>
+
+## Lists
+
+### Unordered
+
+- First item
+- Second item
+  - Nested item
+- Third item
+
+### Ordered
+
+1. First step
+2. Second step
+3. Third step
+
+## Tables
+
+| Column A | Column B | Column C |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |

package/templates/jbrains-docs/docs/v1.0.0/basics/types.mdx

@@ -0,0 +1,135 @@
+---
+title: Types & Variables
+description: Understand the type system and variable declarations
+sidebar_position: 2
+---
+
+This page covers how content types and configuration variables work in the documentation platform.
+
+## Frontmatter Types
+
+Frontmatter fields have specific types that the system validates:
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `title` | `string` | Yes | Page title |
+| `description` | `string` | No | SEO description |
+| `sidebar_position` | `number` | No | Sidebar ordering |
+| `icon` | `string` | No | Lucide icon name |
+| `tab_group` | `string` | No | Tab group assignment |
+| `tags` | `string[]` | No | Content tags |
+| `draft` | `boolean` | No | Hide in production |
+
+## Configuration Types
+
+The `specra.config.json` file uses typed configuration:
+
+### Theme Configuration
+
+```typescript
+interface ThemeConfig {
+  defaultMode: 'light' | 'dark' | 'system';
+  respectPrefersColorScheme: boolean;
+}
+```
+
+Example:
+
+```json
+{
+  "theme": {
+    "defaultMode": "light",
+    "respectPrefersColorScheme": true
+  }
+}
+```
+
+### Navigation Configuration
+
+```typescript
+interface NavigationConfig {
+  showSidebar: boolean;
+  collapsibleSidebar: boolean;
+  showBreadcrumbs: boolean;
+  showTableOfContents: boolean;
+  tocPosition: 'left' | 'right';
+  tocMaxDepth: number;
+  tabGroups?: TabGroup[];
+}
+
+interface TabGroup {
+  id: string;
+  label: string;
+  icon?: string;
+}
+```
+
+<Callout type="info">
+  Tab groups allow you to split sidebar content into separate sections. Each category folder can be assigned to a tab group using `tab_group` in its `_category_.json`.
+</Callout>
+
+### Category Configuration
+
+Categories are defined with `_category_.json` files:
+
+```typescript
+interface CategoryConfig {
+  label: string;
+  position: number;
+  collapsible: boolean;
+  collapsed: boolean;
+  icon?: string;
+  tab_group?: string;
+}
+```
+
+Example:
+
+```json
+{
+  "label": "Basics",
+  "position": 3,
+  "collapsible": true,
+  "collapsed": false,
+  "icon": "book",
+  "tab_group": "language"
+}
+```
+
+## Content Variables
+
+Environment variables can be defined in configuration and used in content:
+
+```json
+{
+  "env": {
+    "API_URL": "https://api.example.com",
+    "VERSION": "1.0.0"
+  }
+}
+```
+
+<Callout type="tip">
+  Use environment variables for values that change between environments, like API URLs or version numbers.
+</Callout>
+
+## Version Variables
+
+The documentation supports multiple versions. Each version is a folder under `docs/`:
+
+```txt
+docs/
+├── v1.0.0/    # Version 1.0.0
+├── v2.0.0/    # Version 2.0.0
+└── next/      # Development version
+```
+
+The active version is set in configuration:
+
+```json
+{
+  "site": {
+    "activeVersion": "v1.0.0"
+  }
+}
+```

package/templates/jbrains-docs/docs/v1.0.0/getting-started.mdx

@@ -0,0 +1,111 @@
+---
+title: Getting Started
+description: Set up your environment and create your first project
+sidebar_position: 2
+icon: rocket
+---
+
+This guide walks you through setting up your development environment and writing your first program.
+
+## Prerequisites
+
+- **Node.js 18+** installed on your machine
+- A code editor (VS Code recommended)
+- A terminal or command line
+
+## Create a Project
+
+<Steps>
+  <Step title="Scaffold the Project">
+    Use the CLI to create a new project:
+
+    ```bash
+    npx create-specra my-project
+    ```
+  </Step>
+
+  <Step title="Install Dependencies">
+    <Tabs defaultValue="npm">
+      <Tab label="npm">
+```bash
+cd my-project && npm install
+```
+      </Tab>
+      <Tab label="yarn">
+```bash
+cd my-project && yarn install
+```
+      </Tab>
+      <Tab label="pnpm">
+```bash
+cd my-project && pnpm install
+```
+      </Tab>
+    </Tabs>
+  </Step>
+
+  <Step title="Run the Project">
+    <Tabs defaultValue="npm">
+      <Tab label="npm">
+```bash
+npm run dev
+```
+      </Tab>
+      <Tab label="yarn">
+```bash
+yarn dev
+```
+      </Tab>
+      <Tab label="pnpm">
+```bash
+pnpm dev
+```
+      </Tab>
+    </Tabs>
+
+    Open `http://localhost:5173` in your browser.
+  </Step>
+</Steps>
+
+## Project Structure
+
+A newly scaffolded project has this structure:
+
+```txt
+my-project/
+├── docs/
+│   ├── v1.0.0/          # Documentation content
+│   └── v2.0.0/          # Another version
+├── src/                  # Application source
+├── specra.config.json    # Configuration
+└── package.json
+```
+
+## Hello World
+
+Create a new file `docs/v1.0.0/hello.mdx`:
+
+```mdx
+---
+title: Hello World
+sidebar_position: 99
+---
+
+# Hello World
+
+This is your first documentation page!
+
+```
+
+<Callout type="tip">
+  Files are automatically picked up by the sidebar. Use `sidebar_position` to control ordering.
+</Callout>
+
+## What's Next
+
+Now that you have a running project, explore the language fundamentals:
+
+<CardGrid cols={2}>
+  <Card icon="code" title="Basic Syntax" description="Learn the fundamental building blocks" href="/docs/v1.0.0/basics/syntax" />
+  <Card icon="layers" title="Types & Variables" description="Understand the type system" href="/docs/v1.0.0/basics/types" />
+</CardGrid>

package/templates/jbrains-docs/docs/v1.0.0/home.mdx

@@ -0,0 +1,37 @@
+---
+title: Home
+description: Welcome to the language documentation
+sidebar_position: 1
+icon: home
+---
+
+Welcome to the documentation. Learn the language from basics to advanced topics, and explore multiplatform tooling.
+
+## Get Started
+
+<CardGrid cols={2}>
+  <Card icon="book-open" title="Get Started" description="Set up your environment and write your first program" href="/docs/v1.0.0/getting-started" />
+  <Card icon="code" title="Basic Syntax" description="Learn the fundamental syntax and structure" href="/docs/v1.0.0/basics/syntax" />
+  <Card icon="layers" title="Types & Variables" description="Understand the type system and variable declarations" href="/docs/v1.0.0/basics/types" />
+  <Card icon="wrench" title="Build Tools" description="Configure and use build tools for your projects" href="/docs/v1.0.0/tools/build-tools" />
+</CardGrid>
+
+## Language
+
+The **Language** section covers everything from basic syntax to advanced features like generics and async programming.
+
+<Callout type="info">
+  If you're new, start with the [Getting Started](/docs/v1.0.0/getting-started) guide, then work through the Basics section.
+</Callout>
+
+## Multiplatform
+
+The **Multiplatform** section covers tooling, build systems, and testing across different platforms and environments.
+
+## What's in This Documentation
+
+| Section | Description |
+|---------|-------------|
+| **Basics** | Syntax, types, variables, and control flow |
+| **Advanced** | Generics, async programming, and advanced patterns |
+| **Tools** | Build tools, testing frameworks, and project setup |

package/templates/jbrains-docs/docs/v1.0.0/tools/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Tools",
+  "position": 5,
+  "collapsible": true,
+  "collapsed": false,
+  "icon": "wrench",
+  "tab_group": "multiplatform"
+}

package/templates/jbrains-docs/docs/v1.0.0/tools/build-tools.mdx

@@ -0,0 +1,165 @@
+---
+title: Build Tools
+description: Configure and use build tools for your documentation project
+sidebar_position: 1
+---
+
+This page covers the build tools used to develop, build, and deploy your documentation site.
+
+## Development Server
+
+Start the development server with hot reload:
+
+<Tabs defaultValue="npm">
+  <Tab label="npm">
+```bash
+npm run dev
+```
+  </Tab>
+  <Tab label="yarn">
+```bash
+yarn dev
+```
+  </Tab>
+  <Tab label="pnpm">
+```bash
+pnpm dev
+```
+  </Tab>
+</Tabs>
+
+The dev server runs on `http://localhost:5173` by default with:
+- **Hot Module Replacement (HMR)** — instant updates when you edit MDX files
+- **Error overlay** — displays build errors in the browser
+- **Fast startup** — powered by Vite
+
+## Production Build
+
+Build the site for production:
+
+<Tabs defaultValue="npm">
+  <Tab label="npm">
+```bash
+npm run build
+```
+  </Tab>
+  <Tab label="yarn">
+```bash
+yarn build
+```
+  </Tab>
+  <Tab label="pnpm">
+```bash
+pnpm build
+```
+  </Tab>
+</Tabs>
+
+This outputs a static site to the `build/` directory.
+
+<Callout type="info">
+  The production build pre-renders all pages for optimal performance and SEO.
+</Callout>
+
+## Preview
+
+Preview the production build locally:
+
+<Tabs defaultValue="npm">
+  <Tab label="npm">
+```bash
+npm run preview
+```
+  </Tab>
+  <Tab label="yarn">
+```bash
+yarn preview
+```
+  </Tab>
+  <Tab label="pnpm">
+```bash
+pnpm preview
+```
+  </Tab>
+</Tabs>
+
+## Vite Configuration
+
+The documentation platform uses Vite as its build tool. The default configuration is in `vite.config.ts`:
+
+```typescript
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()]
+});
+```
+
+## SvelteKit Configuration
+
+SvelteKit is configured in `svelte.config.js`:
+
+```javascript
+import { specraConfig } from 'specra/svelte-config';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = specraConfig({
+  vitePreprocess: { vitePreprocess }
+});
+
+export default config;
+```
+
+## PostCSS & Tailwind
+
+Styling is handled by Tailwind CSS via PostCSS. Configuration is in `postcss.config.mjs`:
+
+```javascript
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;
+```
+
+## TypeScript
+
+TypeScript is configured in `tsconfig.json` with strict mode enabled:
+
+```json
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true
+  }
+}
+```
+
+## Type Checking
+
+Run the type checker:
+
+<Tabs defaultValue="npm">
+  <Tab label="npm">
+```bash
+npm run check
+```
+  </Tab>
+  <Tab label="yarn">
+```bash
+yarn check
+```
+  </Tab>
+  <Tab label="pnpm">
+```bash
+pnpm check
+```
+  </Tab>
+</Tabs>
+
+This runs `svelte-kit sync` followed by `svelte-check` to verify your TypeScript types.

package/templates/jbrains-docs/docs/v1.0.0/tools/testing.mdx

@@ -0,0 +1,112 @@
+---
+title: Testing
+description: Verify your documentation builds and renders correctly
+sidebar_position: 2
+---
+
+This page covers strategies for testing your documentation site to ensure content renders correctly and the build succeeds.
+
+## Build Verification
+
+The simplest test is to run a production build and check for errors:
+
+<Tabs defaultValue="npm">
+  <Tab label="npm">
+```bash
+npm run build
+```
+  </Tab>
+  <Tab label="yarn">
+```bash
+yarn build
+```
+  </Tab>
+  <Tab label="pnpm">
+```bash
+pnpm build
+```
+  </Tab>
+</Tabs>
+
+The build will fail if:
+- MDX files have syntax errors
+- Frontmatter is malformed
+- Required fields are missing
+
+<Callout type="tip">
+  Run `npm run build` in your CI pipeline to catch documentation errors before they reach production.
+</Callout>
+
+## Type Checking
+
+Verify TypeScript types are correct:
+
+```bash
+npm run check
+```
+
+This catches type errors in your SvelteKit configuration and any custom components.
+
+## Content Checklist
+
+When reviewing documentation changes, verify:
+
+| Check | Description |
+|-------|-------------|
+| **Frontmatter** | All pages have `title`, and key pages have `description` |
+| **Links** | Internal links point to existing pages |
+| **Versions** | Content exists in all active version directories |
+| **Sidebar Order** | `sidebar_position` values create a logical reading flow |
+| **Categories** | Each folder has a `_category_.json` with `label` and `position` |
+
+## Visual Testing
+
+Preview the site locally and check:
+
+<Steps>
+  <Step title="Start Dev Server">
+    Run `npm run dev` and open the site in your browser.
+  </Step>
+
+  <Step title="Check Navigation">
+    Verify sidebar links work, breadcrumbs are correct, and previous/next navigation follows the expected order.
+  </Step>
+
+  <Step title="Check Themes">
+    Toggle between light and dark themes. Ensure all content is readable in both modes.
+  </Step>
+
+  <Step title="Check Responsive">
+    Test on different viewport sizes. The mobile sidebar should collapse into a menu.
+  </Step>
+</Steps>
+
+## Common Issues
+
+### Frontmatter Parsing Errors
+
+```
+Error: Invalid frontmatter in docs/v1.0.0/page.mdx
+```
+
+Ensure your frontmatter uses valid YAML syntax and is enclosed by `---` delimiters.
+
+### Missing Pages
+
+If a page doesn't appear in the sidebar:
+
+1. Check the file has the `.mdx` extension (not `.md`)
+2. Verify the file is in the correct version directory
+3. Check if `draft: true` is set in frontmatter
+
+### Broken Links
+
+If internal links return 404:
+
+1. Check the path matches the file structure
+2. Include the version prefix: `/docs/v1.0.0/page-name`
+3. Use the file's slug (filename without `.mdx`), not the title
+
+<Callout type="info">
+  The dev server shows detailed error messages in the browser overlay. Check the terminal output for build-time errors.
+</Callout>

package/templates/jbrains-docs/docs/v2.0.0/advanced/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Advanced",
+  "position": 4,
+  "collapsible": true,
+  "collapsed": false,
+  "icon": "graduation-cap",
+  "tab_group": "language"
+}