@alliance-droid/svelte-docs-system 0.0.1

package/src/routes/+page.svelte

@@ -0,0 +1,165 @@
+<script>
+  import { Callout, Tabs, CodeBlock, Image, APITable, Breadcrumbs } from '$lib';
+
+  const exampleCode = `function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+
+console.log(greet('World'));`;
+
+  const apiTableColumns = [
+    { key: 'name', label: 'Parameter Name' },
+    { key: 'type', label: 'Type' },
+    { key: 'required', label: 'Required' },
+    { key: 'description', label: 'Description', width: '40%' }
+  ];
+
+  const apiTableRows = [
+    {
+      name: 'variant',
+      type: 'string',
+      required: false,
+      description: 'The callout type: info, warning, success, or error'
+    },
+    {
+      name: 'title',
+      type: 'string',
+      required: false,
+      description: 'Optional title for the callout'
+    },
+    {
+      name: 'children',
+      type: 'HTMLContent',
+      required: true,
+      description: 'The content to display inside the callout'
+    }
+  ];
+
+  const breadcrumbItems = [
+    { label: 'Home', href: '/' },
+    { label: 'Components', href: '/components' },
+    { label: 'Callout' }
+  ];
+
+  const tabItems = [
+    { label: 'JavaScript', content: '<code>const x = 42;</code>' },
+    { label: 'Python', content: '<code>x = 42</code>' },
+    { label: 'Rust', content: '<code>let x = 42;</code>' }
+  ];
+</script>
+
+<main class="mx-auto max-w-4xl px-6 py-12">
+  <h1 class="mb-2 text-4xl font-bold">Documentation Components</h1>
+  <p class="mb-8 text-gray-600">A collection of reusable Svelte components for building beautiful documentation.</p>
+
+  <!-- Breadcrumbs Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">Breadcrumbs Navigation</h2>
+    <Breadcrumbs items={breadcrumbItems} />
+  </section>
+
+  <!-- Callout Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">Callout Components</h2>
+
+    <h3 class="mb-3 text-xl font-semibold">Info Callout</h3>
+    <Callout variant="info" title="Information">
+      This is an informational message to guide users through the documentation.
+    </Callout>
+
+    <h3 class="mb-3 mt-6 text-xl font-semibold">Warning Callout</h3>
+    <Callout variant="warning" title="Warning">
+      Be careful! This action might have unexpected consequences.
+    </Callout>
+
+    <h3 class="mb-3 mt-6 text-xl font-semibold">Success Callout</h3>
+    <Callout variant="success" title="Success">
+      Great job! Your configuration has been saved successfully.
+    </Callout>
+
+    <h3 class="mb-3 mt-6 text-xl font-semibold">Error Callout</h3>
+    <Callout variant="error" title="Error">
+      Something went wrong. Please check your input and try again.
+    </Callout>
+  </section>
+
+  <!-- CodeBlock Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">Code Block</h2>
+    <CodeBlock code={exampleCode} language="javascript" filename="example.js" />
+  </section>
+
+  <!-- Tabs Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">Tabs Component</h2>
+    <Tabs items={tabItems} />
+  </section>
+
+  <!-- API Table Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">API Reference Table</h2>
+    <APITable title="Callout Component Props" columns={apiTableColumns} rows={apiTableRows} />
+  </section>
+
+  <!-- Image Section -->
+  <section class="mb-12">
+    <h2 class="mb-4 text-2xl font-bold">Image Component</h2>
+    <Image
+      src="https://via.placeholder.com/600x400"
+      alt="Example placeholder image"
+      caption="This is an example image with a caption"
+      zoomable={true}
+    />
+  </section>
+</main>
+
+<style>
+  :global(body) {
+    background-color: white;
+    color: #333;
+  }
+
+  :global(.dark) :global(body) {
+    background-color: #030712;
+    color: #f3f4f6;
+  }
+
+  main {
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 3rem 1.5rem;
+  }
+
+  h1 {
+    margin-bottom: 0.5rem;
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: #111827;
+  }
+
+  :global(.dark) h1 {
+    color: white;
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #111827;
+  }
+
+  :global(.dark) h2 {
+    color: white;
+  }
+
+  h3 {
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  :global(.dark) h3 {
+    color: white;
+  }
+</style>

package/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			// Pre-render all pages for static site generation
+			// This is required for Pagefind to index the site
+			precompress: false,
+			strict: false
+		}),
+		prerender: {
+			handleHttpError: 'warn'
+		}
+	}
+};
+
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,55 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        // Claude Code aesthetic - professional, clean
+        'claude': {
+          'bg': '#FFFFFF',
+          'bg-secondary': '#F7F6F3',
+          'text': '#1A1A1A',
+          'text-secondary': '#565656',
+          'border': '#ECECEC',
+          'accent': '#0066CC',
+          'accent-hover': '#0052A3',
+        },
+        'claude-dark': {
+          'bg': '#1A1A1A',
+          'bg-secondary': '#2D2D2D',
+          'text': '#FFFFFF',
+          'text-secondary': '#B0B0B0',
+          'border': '#3A3A3A',
+          'accent': '#4D94FF',
+          'accent-hover': '#6BA3FF',
+        },
+      },
+      fontFamily: {
+        'sans': ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
+        'mono': ['"Fira Code"', '"Source Code Pro"', 'Menlo', 'monospace'],
+      },
+      typography: (theme: any) => ({
+        DEFAULT: {
+          css: {
+            color: theme('colors.claude.text'),
+            a: {
+              color: theme('colors.claude.accent'),
+              '&:hover': {
+                color: theme('colors.claude.accent-hover'),
+              },
+            },
+            code: {
+              color: theme('colors.claude.accent'),
+              backgroundColor: theme('colors.claude.bg-secondary'),
+              padding: '0.25rem 0.5rem',
+              borderRadius: '0.25rem',
+            },
+          },
+        },
+      }),
+    },
+  },
+  plugins: [],
+  darkMode: 'class', // Use class-based dark mode
+} satisfies Config;

package/template-starter/.github/workflows/build.yml

@@ -0,0 +1,40 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint and type check
+        run: npm run check
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: build/
+          retention-days: 1

package/template-starter/.github/workflows/deploy-github-pages.yml

@@ -0,0 +1,47 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: './build'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

package/template-starter/.github/workflows/deploy-netlify.yml

@@ -0,0 +1,41 @@
+name: Deploy to Netlify
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@v2.0
+        with:
+          publish-dir: './build'
+          production-branch: main
+          deploy-message: 'Deploy from GitHub Actions'
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'

package/template-starter/.github/workflows/deploy-vercel.yml

@@ -0,0 +1,64 @@
+name: Deploy to Vercel
+
+on:
+  push:
+    branches:
+      - main
+      - staging
+  pull_request:
+    branches:
+      - main
+      - staging
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Vercel (Production)
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          vercel-args: '--prod'
+
+      - name: Deploy to Vercel (Preview)
+        if: github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref != 'refs/heads/main')
+        uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+
+      - name: Comment PR with Vercel URL
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const vercelUrl = process.env.VERCEL_URL || '';
+            if (vercelUrl) {
+              github.rest.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: `🚀 [Preview](https://${vercelUrl}) deployed to Vercel!`
+              });
+            }
+        env:
+          VERCEL_URL: ${{ steps.deploy.outputs.preview_url }}

package/template-starter/NPM-PACKAGE-SETUP.md

@@ -0,0 +1,233 @@
+# NPM Package Setup for Create Command
+
+This template is designed to be published as an npm package that supports the `npm create` command.
+
+## Publishing as @andrew-org/create-docs-system
+
+### Prerequisites
+
+- npm account with access to @andrew-org organization
+- Authenticated npm CLI (`npm login`)
+
+### Package Configuration
+
+The `package.json` is pre-configured for:
+
+```json
+{
+  "name": "@andrew-org/create-docs-system",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "create-docs-system": "./bin/create.js"
+  }
+}
+```
+
+### Create Setup Script
+
+Create `bin/create.js` for the setup process:
+
+```javascript
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const sourceDir = path.join(__dirname, '..', 'template');
+const targetDir = process.argv[2] || 'my-docs';
+
+// Copy template files
+fs.cpSync(sourceDir, targetDir, { recursive: true });
+
+console.log(`✨ Documentation site created at ${targetDir}`);
+console.log('Next steps:');
+console.log(`  cd ${targetDir}`);
+console.log(`  npm install`);
+console.log(`  npm run dev`);
+```
+
+### Steps to Publish
+
+1. **Update package.json**
+   ```json
+   {
+     "name": "@andrew-org/create-docs-system",
+     "version": "1.0.0",
+     "repository": {
+       "type": "git",
+       "url": "https://github.com/andrew-org/create-docs-system.git"
+     },
+     "publishConfig": {
+       "access": "public"
+     }
+   }
+   ```
+
+2. **Create bin/create.js** (setup script above)
+
+3. **Test locally**
+   ```bash
+   npm link
+   npm create @andrew-org/docs-system@latest my-test-docs
+   ```
+
+4. **Publish to npm**
+   ```bash
+   npm publish
+   ```
+
+### Usage After Publishing
+
+Users can then create a new documentation site with:
+
+```bash
+npm create @andrew-org/docs-system@latest my-docs
+cd my-docs
+npm install
+npm run dev
+```
+
+Or with a custom name:
+
+```bash
+npm create @andrew-org/docs-system@latest -- --name my-custom-docs
+```
+
+## Testing the Template Locally
+
+### Option 1: Direct Copy
+
+```bash
+cp -r template-starter my-docs
+cd my-docs
+npm install
+npm run build
+```
+
+### Option 2: npm link (Simulate Published Package)
+
+```bash
+cd template-starter
+npm link
+
+# In another terminal, create from it
+npm create linked-package my-docs
+```
+
+### Option 3: Via npm create with Local Path
+
+```bash
+npm create file:./template-starter my-docs
+```
+
+## Template Structure for Publishing
+
+Ensure the template root contains:
+
+```
+template-starter/
+├── bin/
+│   └── create.js              # Setup script (when published)
+├── docs/
+│   ├── index.md
+│   ├── setup.md
+│   ├── guides/
+│   ├── api/
+│   └── _config.json
+├── src/
+│   ├── routes/
+│   ├── lib/
+│   ├── app.css
+│   ├── app.html
+│   └── app.d.ts
+├── .github/workflows/
+│   ├── build.yml
+│   ├── deploy-github-pages.yml
+│   ├── deploy-netlify.yml
+│   └── deploy-vercel.yml
+├── .gitignore
+├── .npmrc
+├── README.md
+├── package.json
+├── svelte.config.js
+├── tailwind.config.ts
+├── tsconfig.json
+├── vite.config.ts
+├── postcss.config.js
+└── pagefind.toml
+```
+
+## Updating the Package
+
+To release a new version:
+
+```bash
+# Update version in package.json
+npm version minor  # or major/patch
+
+# Publish
+npm publish
+```
+
+## Development Workflow
+
+1. Make changes to template files
+2. Test locally by copying template-starter to a test directory
+3. Test build: `npm run build`
+4. Test dev server: `npm run dev`
+5. Update version and publish when ready
+
+## Continuous Integration
+
+Configure GitHub Actions to:
+- Run tests on the template
+- Build and verify it works
+- Automatically publish on version tags
+
+Example workflow (`.github/workflows/publish.yml`):
+
+```yaml
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - run: npm publish --workspaces
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+```
+
+## Migration from Old Starter Template
+
+When upgrading users from an old version:
+
+1. Update CHANGELOG.md with breaking changes
+2. Provide migration guide in docs
+3. Maintain backwards compatibility where possible
+4. Test upgrade path
+
+## Support
+
+For issues with the template, users can:
+- Check documentation in `docs/`
+- Review GitHub issues
+- Submit pull requests
+- Contact @andrew-org organization
+
+---
+
+**Ready for npm publishing!**