add start template (#16)

.gitignore

@@ -112,3 +112,7 @@ generated-assets
 .idea/
 
 .velite
+docs/public
+docs/.wrangler
+start/.wrangler
+start/public

docs/src/content/getting-started.md

@@ -44,7 +44,7 @@ export const siteConfig = defineSiteConfig({
 	description: "A SvelteKit docs starter template",
 	keywords: "sveltekit, docs, starter, template",
 	ogImage: {
-		url: "https://docs.svecosystem.com/og.png",
+		url: "https://docs.sveco.dev/og.png",
 		height: 630,
 		width: 1200,
 	},

docs/src/lib/site-config.ts

@@ -2,9 +2,9 @@ import { defineSiteConfig } from "@svecodocs/kit";
 
 export const siteConfig = defineSiteConfig({
 	name: "Svecodocs",
-	url: "https://docs.svecosystem.com",
+	url: "https://docs.sveco.dev",
 	ogImage: {
-		url: "https://docs.svecosystem.com/og.png",
+		url: "https://docs.sveco.dev/og.png",
 		height: "630",
 		width: "1200",
 	},

docs/src/routes/api/search.json/search.json

@@ -3,7 +3,7 @@
 		"title": "Getting Started",
 		"href": "/docs/getting-started",
 		"description": "A quick guide to get started using Svecodocs",
-		"content": "  import { Callout } from \"@svecodocs/kit\";   The following guide will walk you through the process of getting a Svecodocs project up and running.  Clone the starter template  Clone the Svecodocs starter template:  pnpx degit svecosystem/svecodocs/starter  Navigation  The starter template comes with a basic navigation structure to get your started. To customize the navigation, adjust the src/lib/navigation.ts file.  import { createNavigation } from \"@svecodocs/kit\";  export const navigation = createNavigation({  // Customize the navigation here });  Site config  The site config is used to configure site-wide settings, such as the title, description, keywords, ogImage, and other metadata.  The config is located in the src/lib/site-config.ts file.  import { defineSiteConfig } from \"@svecodocs/kit\";  export const siteConfig = defineSiteConfig({  title: \"Svecodocs\",  description: \"A SvelteKit docs starter template\",  keywords: \"sveltekit, docs, starter, template\",  ogImage: {   url: \"https://docs.svecosystem.com/og.png\",   height: 630,   width: 1200,  }, });  Per-Route Site Config  You can override any part of the site config on a per-route basis using the useSiteConfig hook.   This feature is still being worked on.  Theme  The starter template comes with the default Svecodocs theme (orange). To customize the theme, adjust the import in the src/app.css file to reflect the color scheme you want to use for your project. Each theme has been designed to work well in both light and dark mode.  /* @import \"@svecodocs/kit/themes/orange.css\"; */ @import \"@svecodocs/kit/themes/emerald.css\"; @import \"@svecodocs/kit/globals.css\";  Logo  To customize the logo displayed in the sidebar header, head to the src/routes/(docs)/+layout.svelte file and adjust the contents of the logo snippet. If the logo has a light and dark version, ensure to handle those similarly to the default Svecosystem logo.  {#snippet logo()}      The project name here {/snippet} `"
+		"content": "  import { Callout } from \"@svecodocs/kit\";   The following guide will walk you through the process of getting a Svecodocs project up and running.  Clone the starter template  Clone the Svecodocs starter template:  pnpx degit svecosystem/svecodocs/starter  Navigation  The starter template comes with a basic navigation structure to get your started. To customize the navigation, adjust the src/lib/navigation.ts file.  import { createNavigation } from \"@svecodocs/kit\";  export const navigation = createNavigation({  // Customize the navigation here });  Site config  The site config is used to configure site-wide settings, such as the title, description, keywords, ogImage, and other metadata.  The config is located in the src/lib/site-config.ts file.  import { defineSiteConfig } from \"@svecodocs/kit\";  export const siteConfig = defineSiteConfig({  title: \"Svecodocs\",  description: \"A SvelteKit docs starter template\",  keywords: \"sveltekit, docs, starter, template\",  ogImage: {   url: \"https://docs.sveco.dev/og.png\",   height: 630,   width: 1200,  }, });  Per-Route Site Config  You can override any part of the site config on a per-route basis using the useSiteConfig hook.   This feature is still being worked on.  Theme  The starter template comes with the default Svecodocs theme (orange). To customize the theme, adjust the import in the src/app.css file to reflect the color scheme you want to use for your project. Each theme has been designed to work well in both light and dark mode.  /* @import \"@svecodocs/kit/themes/orange.css\"; */ @import \"@svecodocs/kit/themes/emerald.css\"; @import \"@svecodocs/kit/globals.css\";  Logo  To customize the logo displayed in the sidebar header, head to the src/routes/(docs)/+layout.svelte file and adjust the contents of the logo snippet. If the logo has a light and dark version, ensure to handle those similarly to the default Svecosystem logo.  {#snippet logo()}      The project name here {/snippet} `"
 	},
 	{
 		"title": "Introduction",

eslint.config.js

@@ -44,10 +44,13 @@ export default tseslint.config(
 			".svelte-kit/",
 			"dist/",
 			".svelte-kit/**/*",
-			"sites/docs/.svelte-kit/**/*",
+			"docs/.svelte-kit/**/*",
 			".svelte-kit",
-			"playgrounds/**/*",
-			"packages/cli/dist/**/*",
+			"start/.svelte-kit/**/*",
+			"start/node_modules/**/*",
+			"start/build/**/*",
+			"packages/kit/dist/**/*",
+			"packages/kit/.svelte-kit/**/*",
 		],
 	}
 );

package.json

@@ -7,7 +7,7 @@
 	"license": "MIT",
 	"type": "module",
 	"scripts": {
-		"build": "pnpm -r build",
+		"build": "pnpm build:packages && pnpm build:docs",
 		"build:packages": "pnpm -F \"./packages/**\" --parallel build",
 		"build:docs": "pnpm -F \"./docs/**\" build",
 		"check": "pnpm build:packages && pnpm -r check",

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
     - "packages/*"
     - "docs"
+    - "start"

start/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

start/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

start/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

start/mdsx.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from "mdsx";
+import { baseRemarkPlugins, baseRehypePlugins } from "@svecodocs/kit/mdsxConfig";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+export default defineConfig({
+	remarkPlugins: [...baseRemarkPlugins],
+	// @ts-expect-error shh
+	rehypePlugins: [...baseRehypePlugins],
+	blueprints: {
+		default: {
+			path: resolve(__dirname, "./src/lib/components/blueprint.svelte"),
+		},
+	},
+	extensions: [".md"],
+});

start/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@svecodocs/docs",
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "pnpm \"/dev:/\"",
+		"dev:content": "velite dev --watch",
+		"dev:svelte": "vite dev",
+		"build": "velite && node ./scripts/update-velite-output.js && pnpm build:search && vite build",
+		"build:search": "node ./scripts/build-search-data.js",
+		"preview": "vite preview",
+		"check": "velite && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "pnpm build:content && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@svecodocs/kit": "workspace:*",
+		"@sveltejs/adapter-cloudflare": "^4.8.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@tailwindcss/vite": "4.0.0-beta.4",
+		"mdsx": "^0.0.6",
+		"phosphor-svelte": "^3.0.0",
+		"svelte": "^5.2.11",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
+		"tailwindcss": "4.0.0-beta.4",
+		"typescript": "^5.0.0",
+		"velite": "^0.2.1",
+		"vite": "^5.0.11"
+	}
+}

start/scripts/build-search-data.js

@@ -0,0 +1,24 @@
+import { fileURLToPath } from "node:url";
+import { writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { docs } from "../.velite/index.js";
+import { cleanMarkdown } from "../node_modules/@svecodocs/kit/dist/utils.js";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+export function buildDocsSearchIndex() {
+	return docs.map((doc) => ({
+		title: doc.title,
+		href: `/docs/${doc.slug}`,
+		description: doc.description,
+		content: cleanMarkdown(doc.raw),
+	}));
+}
+
+const searchData = buildDocsSearchIndex();
+
+writeFileSync(
+	resolve(__dirname, "../src/routes/api/search.json/search.json"),
+	JSON.stringify(searchData),
+	{ flag: "w" }
+);

start/scripts/update-velite-output.js

@@ -0,0 +1,38 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const dtsPath = join(__dirname, "../.velite/index.d.ts");
+const indexPath = join(__dirname, "../.velite/index.js");
+
+async function replaceContents() {
+	const data = await readFile(dtsPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+	});
+	if (!data) return;
+
+	const updatedContent = data.replace("'../velite.config'", "'../velite.config.js'");
+	if (updatedContent === data) return;
+
+	await writeFile(dtsPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+}
+
+async function replaceIndexContents() {
+	const data = await readFile(indexPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+	});
+	if (!data) return;
+
+	const updatedContent = data.replaceAll(".json'", ".json' with { type: 'json' }");
+	if (updatedContent === data) return;
+
+	await writeFile(indexPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+}
+
+await replaceContents();
+await replaceIndexContents();

start/src/app.css

@@ -0,0 +1,2 @@
+@import "@svecodocs/kit/theme-blue.css";
+@import "@svecodocs/kit/globals.css";

start/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

start/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="relative">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

start/src/content/components/button.md

@@ -0,0 +1,50 @@
+---
+title: Button
+description: A button component to use in examples and documentation.
+section: Components
+---
+
+<script>
+	import { Button, DemoContainer } from "@svecodocs/kit";
+</script>
+
+## Usage
+
+```svelte title="document.md"
+<script>
+	import { Button } from "@svecodocs/kit";
+</script>
+
+<Button>Default</Button>
+<Button variant="brand">Brand</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="subtle">Subtle</Button>
+<Button variant="link">Link</Button>
+```
+
+## Example
+
+### Default Size
+
+<DemoContainer class="flex items-center gap-2.5 flex-wrap">
+	<Button>Default</Button>
+	<Button variant="brand">Brand</Button>
+	<Button variant="destructive">Destructive</Button>
+	<Button variant="ghost">Ghost</Button>
+	<Button variant="outline">Outline</Button>
+	<Button variant="subtle">Subtle</Button>
+	<Button variant="link">Link</Button>
+</DemoContainer>
+
+### Small Size
+
+<DemoContainer class="flex items-center gap-4 flex-wrap">
+	<Button size="sm">Default</Button>
+	<Button variant="brand" size="sm">Brand</Button>
+	<Button variant="destructive" size="sm">Destructive</Button>
+	<Button variant="ghost" size="sm">Ghost</Button>
+	<Button variant="outline" size="sm">Outline</Button>
+	<Button variant="subtle" size="sm">Subtle</Button>
+	<Button variant="link" size="sm">Link</Button>
+</DemoContainer>