Merge pull request #219 from DaveKeehl/documentation/211-publish-new-…

…docs-website

Publish new docs website

README.md

@@ -17,7 +17,7 @@ Svelte Reveal is a library created with the purpose of helping [Svelte](https://
 
 ## Documentation
 
-The documentation is available [here](./packages/svelte-reveal/README.md).
+You can find full documentation on [svelte-reveal.dev](https://svelte-reveal.dev).
 
 ## Monorepo
 

docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

docs/README.md

@@ -0,0 +1,12 @@
+# Svelte Reveal - Docs
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+This Astro project is the documentation for Svelte Reveal.
+
+## Local development
+
+In order to locally develop this project you need to:
+
+1. Run `npm install` to install the dependencies
+2. Run `npm run dev` to start the local dev server at `localhost:4321`

docs/astro.config.mjs

@@ -0,0 +1,31 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: 'Svelte Reveal',
+      social: {
+        github: 'https://github.com/davekeehl/svelte-reveal'
+      },
+      editLink: {
+        baseUrl: 'https://github.com/davekeehl/svelte-reveal/edit/main/docs/'
+      },
+      sidebar: [
+        {
+          label: 'Start Here',
+          autogenerate: { directory: 'start-here' }
+        },
+        {
+          label: 'Reference',
+          autogenerate: { directory: 'reference' }
+        }
+      ],
+      customCss: [
+        // Relative path to your custom CSS file
+        './src/styles/custom.css'
+      ]
+    })
+  ]
+});

docs/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "docs",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "clean": "rimraf .astro .turbo node_modules package-lock.json dist"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.5.10",
+    "@astrojs/starlight": "^0.21.4",
+    "astro": "^4.3.5",
+    "rimraf": "^5.0.5",
+    "sharp": "^0.32.5",
+    "typescript": "^5.4.4"
+  }
+}

docs/src/content/config.ts

@@ -0,0 +1,6 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() })
+};

docs/src/content/docs/index.mdx

@@ -0,0 +1,41 @@
+---
+title: Simple scroll based animations for Svelte
+description: Svelte Reveal is your go-to library for adding simple scroll based animations to your Svelte apps.
+template: splash
+hero:
+  tagline: Svelte Reveal is your go-to library for adding simple scroll based animations to your Svelte apps.
+  image:
+    dark: ../../assets/hero_img_dark.svg
+    light: ../../assets/hero_img_light.svg
+  actions:
+    - text: Get started
+      link: /start-here/getting-started/
+      icon: right-arrow
+      variant: primary
+    - text: View on GitHub
+      link: https://github.com/davekeehl/svelte-reveal
+      icon: external
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<CardGrid>
+  <Card title="Near zero config" icon="rocket">
+    Get started really fast with just a few lines of code.
+  </Card>
+  <Card title="Highly customizable" icon="puzzle">
+    Creating custom transitions with Svelte Reveal is a <em>breeze</em>.
+  </Card>
+  <Card title="100% TypeScript" icon="seti:typescript">
+    Built from the ground up for maximum type safety.
+  </Card>
+  <Card title="Exhaustive documentation" icon="open-book">
+    We spent a lot of time documenting every bit possible.
+  </Card>
+  <Card title="Intersection Observer" icon="seti:svg">
+    Built-in support for the Intersection Observer API.
+  </Card>
+  <Card title="Extensive API" icon="seti:json">
+    Need full control? We got you covered.
+  </Card>
+</CardGrid>