diff --git a/.gitignore b/.gitignore index fec5ebe..d4f0858 100644 --- a/.gitignore +++ b/.gitignore @@ -112,3 +112,7 @@ generated-assets .idea/ .velite +docs/public +docs/.wrangler +start/.wrangler +start/public \ No newline at end of file diff --git a/docs/src/content/getting-started.md b/docs/src/content/getting-started.md index a34916c..5edd6da 100644 --- a/docs/src/content/getting-started.md +++ b/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, }, diff --git a/docs/src/lib/site-config.ts b/docs/src/lib/site-config.ts index cc91063..02473eb 100644 --- a/docs/src/lib/site-config.ts +++ b/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", }, diff --git a/docs/src/routes/api/search.json/search.json b/docs/src/routes/api/search.json/search.json index 269e220..1b5729a 100644 --- a/docs/src/routes/api/search.json/search.json +++ b/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", diff --git a/docs/static/fonts/cascadia-mono-italic.woff2 b/docs/static/fonts/cascadia-mono-italic.woff2 deleted file mode 100644 index 7309104..0000000 Binary files a/docs/static/fonts/cascadia-mono-italic.woff2 and /dev/null differ diff --git a/docs/static/fonts/cascadia-mono-regular.woff2 b/docs/static/fonts/cascadia-mono-regular.woff2 deleted file mode 100644 index 45d8bc4..0000000 Binary files a/docs/static/fonts/cascadia-mono-regular.woff2 and /dev/null differ diff --git a/eslint.config.js b/eslint.config.js index adb6168..f582433 100644 --- a/eslint.config.js +++ b/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/**/*", ], } ); diff --git a/package.json b/package.json index eb82e6c..16a8717 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e33e77e..0c9859a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -214,6 +214,51 @@ importers: specifier: ^5.0.11 version: 5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0) + start: + devDependencies: + '@svecodocs/kit': + specifier: workspace:* + version: link:../packages/kit + '@sveltejs/adapter-cloudflare': + specifier: ^4.8.0 + version: 4.8.0(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)))(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)))(wrangler@3.91.0(@cloudflare/workers-types@4.20241127.0)) + '@sveltejs/kit': + specifier: ^2.0.0 + version: 2.9.0(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)))(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)) + '@sveltejs/vite-plugin-svelte': + specifier: ^4.0.0 + version: 4.0.2(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)) + '@tailwindcss/vite': + specifier: 4.0.0-beta.4 + version: 4.0.0-beta.4(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(svelte@5.2.11)(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)) + mdsx: + specifier: ^0.0.6 + version: 0.0.6(svelte@5.2.11) + phosphor-svelte: + specifier: ^3.0.0 + version: 3.0.0(svelte@5.2.11)(vite@5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0)) + svelte: + specifier: ^5.2.11 + version: 5.2.11 + svelte-check: + specifier: ^4.0.0 + version: 4.1.0(picomatch@3.0.1)(svelte@5.2.11)(typescript@5.7.2) + svelte-preprocess: + specifier: ^6.0.3 + version: 6.0.3(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(svelte@5.2.11)(typescript@5.7.2) + tailwindcss: + specifier: 4.0.0-beta.4 + version: 4.0.0-beta.4 + typescript: + specifier: ^5.0.0 + version: 5.7.2 + velite: + specifier: ^0.2.1 + version: 0.2.1(acorn@8.14.0) + vite: + specifier: ^5.0.11 + version: 5.4.11(@types/node@22.10.1)(lightningcss@1.28.2)(terser@5.36.0) + packages: '@ampproject/remapping@2.3.0': diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 4d848b6..b1788c2 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,3 +1,4 @@ packages: - "packages/*" - "docs" + - "start" diff --git a/start/.gitignore b/start/.gitignore new file mode 100644 index 0000000..79518f7 --- /dev/null +++ b/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-* diff --git a/start/.npmrc b/start/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/start/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/start/README.md b/start/README.md new file mode 100644 index 0000000..b5b2950 --- /dev/null +++ b/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. diff --git a/start/mdsx.config.js b/start/mdsx.config.js new file mode 100644 index 0000000..8f56fdf --- /dev/null +++ b/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"], +}); diff --git a/start/package.json b/start/package.json new file mode 100644 index 0000000..1091c1f --- /dev/null +++ b/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" + } +} diff --git a/start/scripts/build-search-data.js b/start/scripts/build-search-data.js new file mode 100644 index 0000000..377c0ef --- /dev/null +++ b/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" } +); diff --git a/start/scripts/update-velite-output.js b/start/scripts/update-velite-output.js new file mode 100644 index 0000000..2ff0a62 --- /dev/null +++ b/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(); diff --git a/start/src/app.css b/start/src/app.css new file mode 100644 index 0000000..d55a847 --- /dev/null +++ b/start/src/app.css @@ -0,0 +1,2 @@ +@import "@svecodocs/kit/theme-blue.css"; +@import "@svecodocs/kit/globals.css"; diff --git a/start/src/app.d.ts b/start/src/app.d.ts new file mode 100644 index 0000000..da08e6d --- /dev/null +++ b/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 {}; diff --git a/start/src/app.html b/start/src/app.html new file mode 100644 index 0000000..a2beb95 --- /dev/null +++ b/start/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/start/src/content/components/button.md b/start/src/content/components/button.md new file mode 100644 index 0000000..6aaa66f --- /dev/null +++ b/start/src/content/components/button.md @@ -0,0 +1,50 @@ +--- +title: Button +description: A button component to use in examples and documentation. +section: Components +--- + + + +## Usage + +```svelte title="document.md" + + + + + + + + +``` + +## Example + +### Default Size + + + + + + + + + + + +### Small Size + + + + + + + + + + diff --git a/start/src/content/components/callout.md b/start/src/content/components/callout.md new file mode 100644 index 0000000..a7457ff --- /dev/null +++ b/start/src/content/components/callout.md @@ -0,0 +1,88 @@ +--- +title: Callout +description: A callout component to highlight important information. +section: Components +--- + + + +Callouts (also known as _admonitions_) are used to highlight a block of text. There are five types of callouts available: `'note'`, `'warning'`, `'danger'`, `'tip'`, and `'success'`. + +You can override the default icon for the callout by passing a component via the `icon` prop. + +## Usage + +```svelte title="document.md" + + + + + This is a note, used to highlight important information or provide additional context. You can use + markdown in here as well! Just ensure you include a space between the component and the content in + your Markdown file. + + +``` + +## Examples + +### Warning + + + +This is an example of a warning callout. + + + +### Note + + + +This is an example of a note callout. + + + +### Danger + + + +This is an example of a danger callout. + + + +### Tip + + + +This is an example of a tip callout. + + + +### Success + + + +This is an example of a success callout. + + + +### Custom Icon + + + +This is an example of a note callout with a custom icon. + + + +### Custom Title + + + +This is an example of a warning callout with a custom title. + + diff --git a/start/src/content/configuration/navigation.md b/start/src/content/configuration/navigation.md new file mode 100644 index 0000000..506ec69 --- /dev/null +++ b/start/src/content/configuration/navigation.md @@ -0,0 +1,19 @@ +--- +title: Navigation +description: Learn how to customize the navigation in your Svecodocs project. +section: Configuration +--- + +Navigation is a key component of every site, documenting the structure of your site and providing a clear path for users to navigate through your content. + +Svecodocs comes with a navigation structure that is designed to be flexible and customizable. Each page in your site should have a corresponding navigation item, and the navigation items should be nested according to their hierarchy. + +## Navigation Structure + +### Anchors + +Anchors are links that are displayed at the top of the sidebar and typically used to either highlight important information or provide quick access to linked content. + +### Sections + +Sections are used to group related navigation items together. They are typically used to organize content into different categories, such as "Components", "Configuration", and "Utilities". diff --git a/start/src/content/configuration/theme.md b/start/src/content/configuration/theme.md new file mode 100644 index 0000000..49b248b --- /dev/null +++ b/start/src/content/configuration/theme.md @@ -0,0 +1,52 @@ +--- +title: Theme +description: Learn how to customize the theme in your Svecodocs project. +section: Configuration +--- + +The theme determines the branded color scheme for your site. A theme for each of the TailwindCSS colors is provided by the `@svecodocs/kit` package. Each theme has been designed to present well in both light and dark mode. + +## Using a theme + +To use a theme, import the theme file into your `src/app.css` file _before_ importing the `@svecodocs/kit/globals.css` file. + +```css +/* @import "@svecodocs/kit/theme-orange.css"; */ +@import "@svecodocs/kit/theme-emerald.css"; +@import "@svecodocs/kit/globals.css"; +``` + +It's not recommended to customize the theme to maintain consistency across the UI components that are provided by Svecodocs and align with the provided themes. + +## Available themes + +| Theme name | Import path | +| ---------- | ---------------------------------- | +| orange | `@svecodocs/kit/theme-orange.css` | +| green | `@svecodocs/kit/theme-green.css` | +| blue | `@svecodocs/kit/theme-blue.css` | +| purple | `@svecodocs/kit/theme-purple.css` | +| pink | `@svecodocs/kit/theme-pink.css` | +| lime | `@svecodocs/kit/theme-lime.css` | +| yellow | `@svecodocs/kit/theme-yellow.css` | +| cyan | `@svecodocs/kit/theme-cyan.css` | +| teal | `@svecodocs/kit/theme-teal.css` | +| violet | `@svecodocs/kit/theme-violet.css` | +| amber | `@svecodocs/kit/theme-amber.css` | +| red | `@svecodocs/kit/theme-red.css` | +| sky | `@svecodocs/kit/theme-sky.css` | +| emerald | `@svecodocs/kit/theme-emerald.css` | +| fuchsia | `@svecodocs/kit/theme-fuchsia.css` | +| rose | `@svecodocs/kit/theme-rose.css` | + +## Tailwind Variables + +Svecodocs uses TailwindCSS to style the UI components and provides a set of Tailwind variables that can be used to style your examples/custom components. + +### Gray + +We override the TailwindCSS `gray` color scale to provide our own grays. + +### Brand + +You can use the `brand` color to use the brand color of your project. diff --git a/start/src/content/getting-started.md b/start/src/content/getting-started.md new file mode 100644 index 0000000..564de98 --- /dev/null +++ b/start/src/content/getting-started.md @@ -0,0 +1,82 @@ +--- +title: Getting Started +description: A quick guide to get started using Svecodocs +section: Overview +--- + + + +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: + +```bash +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. + +```ts +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. + +```ts +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. + +```css {1-2} +/* @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. + +```svelte title="src/routes/(docs)/+layout.svelte" +{#snippet logo()} +