fix: move charts to plugins dir (themesberg#1012)

src/hooks.server.js

@@ -1,5 +1,5 @@
 // vite function to get all md files from components dir
-const allFiles = [import.meta.glob('/src/routes/docs/components/*.md'), import.meta.glob('/src/routes/docs/forms/*.md'), import.meta.glob('/src/routes/docs/typography/*.md'), import.meta.glob('/src/routes/docs/examples/*.md'), import.meta.glob('/src/routes/docs/utilities/*.md'), import.meta.glob('/src/routes/docs/pages/*.md'), import.meta.glob('/src/routes/docs/extend/*.md'), import.meta.glob('/src/routes/docs/experimental/*.md')]
+const allFiles = [import.meta.glob('/src/routes/docs/components/*.md'), import.meta.glob('/src/routes/docs/forms/*.md'), import.meta.glob('/src/routes/docs/plugins/*.md'), import.meta.glob('/src/routes/docs/typography/*.md'), import.meta.glob('/src/routes/docs/examples/*.md'), import.meta.glob('/src/routes/docs/utilities/*.md'), import.meta.glob('/src/routes/docs/pages/*.md'), import.meta.glob('/src/routes/docs/extend/*.md'), import.meta.glob('/src/routes/docs/experimental/*.md')]
   .flatMap(Object.keys)
   .map((x) => x.replace(/\.[^/.]+$/, ''))
   .map((x) => x.split('/').slice(-2));

src/routes/docs/pages/introduction.md

@@ -22,7 +22,7 @@ You can install SvelteKit or Svelte to start your app. For SvelteKit:
 ```bash example
 npm create svelte@latest my-app
 cd my-app
-npm install
+pnpm install
 ```
 
 ### Using Svelte
@@ -32,7 +32,7 @@ If you want to get started with Svelte:
 ```bash
 npm create vite@latest myapp -- --template svelte
 cd myapp
-npm install
+pnpm install
 ```
 
 ### Install Tailwind CSS
@@ -41,21 +41,21 @@ In order to enable the utility classes from Tailwind CSS install the package usi
 
 ```bash
 npx svelte-add@latest tailwindcss
-npm i
+pnpm install
 ```
 
 Run a local development server by running:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 ### Install Flowbite Svelte
 
 Run the following command to install all Flowbite dependencies and libraries:
 
 ```sh
-npm i -D flowbite-svelte
+pnpm i -D flowbite-svelte
 ```
 
 ### Configuration

src/routes/docs/plugins/[slug]/+page.js

@@ -0,0 +1,13 @@
+// src/routes/experimental/[slug]/+page.js
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const post = await import(`../${params.slug}.md`);
+  const { title, dir } = post.metadata;
+  const content = post.default;
+
+  return {
+    content,
+    title,
+    dir
+  };
+}

src/routes/docs/plugins/[slug]/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  export let data: PageData;
+</script>
+
+<svelte:component this={data.content} />

src/routes/utils/index.ts

@@ -26,6 +26,7 @@ export const fetchMarkdownPosts = async () => {
   const extendFiles = import.meta.glob<Mdsvex>('/src/routes/docs/extend/*.md');
   const exampleFiles = import.meta.glob<Mdsvex>('/src/routes/docs/examples/*.md');
   const experimentalFiles = import.meta.glob<Mdsvex>('/src/routes/docs/experimental/*.md');
+  const pluginsFiles = import.meta.glob<Mdsvex>('/src/routes/docs/plugins/*.md');
   // returns an array of files
   const iterableComponentFiles = Object.entries(componentFiles);
   const iterableFormFiles = Object.entries(formFiles);
@@ -35,6 +36,7 @@ export const fetchMarkdownPosts = async () => {
   const iterableExtendFiles = Object.entries(extendFiles);
   const iterableExampleFiles = Object.entries(exampleFiles);
   const iterableExperimentalFiles = Object.entries(experimentalFiles);
+  const iterablePluginsFiles = Object.entries(pluginsFiles);
 
   const allComponents = await Promise.all(
     iterableComponentFiles.map(async ([path, resolver]) => {
@@ -76,6 +78,16 @@ export const fetchMarkdownPosts = async () => {
     })
   );
 
+  const allPlugins = await Promise.all(
+    iterablePluginsFiles.map(async ([path, resolver]) => {
+      const { metadata } = await resolver();
+      return {
+        meta: metadata,
+        path: filePath(path)
+      };
+    })
+  );
+
   // returns an array of paths, /introduction from /src/routes/pages/introduction.md
   const pageOrder: string[] = ['introduction', 'quickstart', 'colors', 'customization', 'typescript', 'compiler-speed', 'how-to-contribute', 'license'];
   const allPages = await Promise.all(
@@ -128,6 +140,7 @@ export const fetchMarkdownPosts = async () => {
     examples: allExamples,
     extend: allExtends,
     utilities: allUtils,
+    plugins: allPlugins,
     experimental: allExperimental
   };
 };

tests/components.spec.ts

@@ -66,12 +66,6 @@ test('Carousel page should have h1', async ({ page }) => {
   expect(await page.textContent('h1')).toBe('Svelte Carousel - Flowbite');
 });
 
-// Charts
-test('Charts page should have h1', async ({ page }) => {
-  await page.goto('/docs/components/charts');
-  expect(await page.textContent('h1')).toBe('Svelte Charts - Flowbite');
-});
-
 // Darkmode
 test('Dark mode page should have h1', async ({ page }) => {
   await page.goto('/docs/components/darkmode');

tests/plugins.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+// Charts
+test('Charts page should have h1', async ({ page }) => {
+  await page.goto('/docs/plugins/charts');
+  expect(await page.textContent('h1')).toBe('Svelte Charts - Flowbite');
+});