✨ Web page for documentation

.github/workflows/ci.yml

@@ -2,7 +2,8 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
 
 jobs:

.github/workflows/deploy-docs.yml

@@ -0,0 +1,38 @@
+name: Deploy for Docs to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  packages: read
+  contents: read
+  pages: write
+  id-token: write
+  actions: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  deploy-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Run Build
+        run: pnpm build:docs
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/dist
+      - name: Deploy Docs to Github Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

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/astro.config.mjs

@@ -0,0 +1,91 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: 'SvelteMetaTags',
+      locales: {
+        root: { label: 'English', lang: 'en' },
+        ja: { label: '日本語', lang: 'ja' }
+      },
+      description: 'Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects.',
+      customCss: ['./src/styles/custom.css'],
+      logo: {
+        light: './src/assets/light-logo.svg',
+        dark: './src/assets/dark-logo.svg',
+        alt: 'SvelteMetaTags',
+        replacesTitle: true
+      },
+      social: {
+        github: 'https://github.com/oekazuma/svelte-meta-tags'
+      },
+      sidebar: [
+        {
+          label: 'Installing',
+          translations: {
+            ja: 'インストール'
+          },
+          autogenerate: { directory: 'installing' },
+          collapsed: true
+        },
+        {
+          label: 'Usage',
+          translations: {
+            ja: '使い方'
+          },
+          autogenerate: { directory: 'usage' },
+          collapsed: true
+        },
+        {
+          label: 'MetaTags Properties',
+          translations: {
+            ja: 'MetaTagsプロパティ'
+          },
+          autogenerate: { directory: 'meta-tags-properties' },
+          collapsed: true
+        },
+        {
+          label: 'Open Graph',
+          translations: {
+            ja: 'Open Graph'
+          },
+          autogenerate: { directory: 'open-graph' },
+          collapsed: true
+        },
+        {
+          label: 'JSON-LD',
+          translations: {
+            ja: 'JSON-LD'
+          },
+          autogenerate: { directory: 'json-ld' },
+          collapsed: true
+        },
+        {
+          label: 'Deep Merge function',
+          translations: {
+            ja: 'Deep Merge 関数'
+          },
+          autogenerate: { directory: 'deep-merge-function' },
+          collapsed: true
+        },
+        {
+          label: 'Types',
+          translations: {
+            ja: '型定義'
+          },
+          autogenerate: { directory: 'types' },
+          collapsed: true
+        },
+        {
+          label: 'Migration Guide',
+          translations: {
+            ja: '移行ガイド'
+          },
+          autogenerate: { directory: 'migration-guide' },
+          collapsed: true
+        }
+      ]
+    })
+  ]
+});

docs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "docs",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/starlight": "^0.29.2",
+    "astro": "^4.16.10",
+    "sharp": "^0.33.5",
+    "typescript": "^5.7.2"
+  }
+}

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/deep-merge-function/index.md

@@ -0,0 +1,86 @@
+---
+title: Deep Merge function
+sidebar:
+  badge:
+    text: New
+    variant: tip
+---
+
+Provides a function to deeply merge the enumerable properties of two or more objects.
+
+Use this when you want to override the default values on child pages, as in the following example.
+
+## +layout.svelte
+
+```svelte
+<script>
+  import { page } from '$app/state';
+  import { MetaTags, deepMerge } from 'svelte-meta-tags';
+
+  let { data, children } = $props();
+
+  let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
+</script>
+
+<MetaTags {...metaTags} />
+
+{@render children()}
+```
+
+## +layout.ts
+
+```svelte
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export const load = ({ url }) => {
+  const baseMetaTags = Object.freeze({
+    title: 'Default',
+    titleTemplate: '%s | Svelte Meta Tags',
+    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
+    canonical: new URL(url.pathname, url.origin).href,
+    openGraph: {
+      type: 'website',
+      url: new URL(url.pathname, url.origin).href,
+      locale: 'en_IE',
+      title: 'Open Graph Title',
+      description: 'Open Graph Description',
+      siteName: 'SiteName',
+      images: [
+        {
+          url: 'https://www.example.ie/og-image.jpg',
+          alt: 'Og Image Alt',
+          width: 800,
+          height: 600,
+          secureUrl: 'https://www.example.ie/og-image.jpg',
+          type: 'image/jpeg'
+        }
+      ]
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    baseMetaTags
+  };
+};
+```
+
+## +page.ts
+
+```svelte
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export const load = () => {
+  const pageMetaTags = Object.freeze({
+    title: 'TOP',
+    description: 'Description TOP',
+    openGraph: {
+      title: 'Open Graph Title TOP',
+      description: 'Open Graph Description TOP'
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    pageMetaTags
+  };
+};
+```

docs/src/content/docs/index.md

@@ -0,0 +1,23 @@
+---
+title: Svelte Meta Tags ・ Components to manage SEO
+head:
+  - tag: title
+    content: Svelte Meta Tags ・ Components to manage SEO
+description: Svelte Meta Tags is a Svelte library to manage SEO meta tags in your Svelte applications. It provides a set of components to manage the meta tags in your Svelte applications.
+template: splash
+editUrl: false
+lastUpdated: false
+hero:
+  title: Svelte Meta Tags
+  tagline: Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects.
+  image:
+    file: ../../assets/logo.webp
+  actions:
+    - text: Get started
+      icon: right-arrow
+      link: /installing/
+    - text: View on GitHub
+      icon: external
+      variant: minimal
+      link: https://github.com/oekazuma/svelte-meta-tags
+---

docs/src/content/docs/installing/index.mdx

@@ -0,0 +1,25 @@
+---
+title: Installing
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+<Tabs syncKey="pkg">
+    <TabItem label="npm">
+        ```sh
+        npm install -D svelte-meta-tags
+        ```
+
+    </TabItem>
+    <TabItem label="pnpm">
+        ```sh
+        pnpm add -D svelte-meta-tags
+        ```
+    </TabItem>
+    <TabItem label="Yarn">
+        ```sh
+        yarn add -D svelte-meta-tags
+        ```
+    </TabItem>
+
+</Tabs>