tests: add tests for all pages

package.json

@@ -42,7 +42,7 @@
     "@sveltejs/adapter-auto": "^3.2.1",
     "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/eslint": "^8.56.10",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
@@ -60,10 +60,10 @@
     "publint": "^0.2.8",
     "runatics": "^0.1.3",
     "runes-meta-tags": "^0.2.5",
-    "runes-webkit": "^0.6.18",
-    "svelte": "5.0.0-next.143",
+    "runes-webkit": "^0.7.4",
+    "svelte": "5.0.0-next.144",
     "svelte-5-ui-lib": "^0.4.13",
-    "svelte-check": "^3.7.1",
+    "svelte-check": "^3.8.0",
     "svelte-lib-helpers": "^0.4.6",
     "svelte-preprocess": "^5.1.4",
     "svelte-rune-highlight": "^0.5.9",

src/lib/IconOutline.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   interface Props{
-    icon: ComponentType;
+    icon: Component;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     role?: string;
     color?: string;

src/lib/IconSolid.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   interface Props{
-    icon: ComponentType;
+    icon: Component;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     role?: string;
     color?: string;

src/routes/+layout.svelte

@@ -3,12 +3,12 @@
 export const extra: ListType[] = [
   {
     name: 'Solid Icons',
-    icon: RocketOutline as ComponentType,
+    icon: RocketOutline as Component,
     href: '/solid-icons'
   },
   {
     name: 'Outline Icons',
-    icon: PaletteOutline as ComponentType,
+    icon: PaletteOutline as Component,
     href: '/outline-icons'
   }
 ];
@@ -20,7 +20,7 @@ export const newSidebarList: ListType[] = [
 <script lang="ts">
   import '../app.pcss';
   import { page } from '$app/stores';
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import type { ListType } from 'runes-webkit';
   import {
     Footer,

src/routes/+page.svelte

@@ -1,50 +1,55 @@
 <script lang="ts">
-  import {
-    removeHyphensAndCapitalize,
-    HomeCards,
-    SupportBanner,
-    TechInfo,
-    BellActiveAltOutline,
-    GlobeOutline,
-    insertObjectToArray,
-    excludeByTitle,
-    cards,
-    info,
-    pkg
-  } from 'runes-webkit';
+  
+  import { removeHyphensAndCapitalize, HomeCards, SupportBanner, TechInfo, BellActiveAltOutline, InfoCircleOutline, cards, info } from 'runes-webkit';
+ 
+  const brand = {
+    title: `${removeHyphensAndCapitalize(__NAME__)}`,
+    description: `${__DESCRIPTION__}`,
+    icon: BellActiveAltOutline,
+    icon_class: 'text-blue-500'
+  };
 
-  const cardsToExclude = ['Seven Props', 'Global Icon'];
+  const filteredCards = [brand, ...cards];
 
-  const global_icons = {
-    title: 'Global Icons',
-    description: 'Use <code>IconSolid</code> and <code>IconOutline</code> to careat default icons.',
-    icon: GlobeOutline,
-    icon_class: 'text-purple-500'
+  const originalSource = {
+    title: 'Original source',
+    description: `${__ORIGINAL_SOURCE_NAME__}`,
+    icon: InfoCircleOutline,
+    href: `${__ORIGINAL_SOURCE_URL__}`,
+    icon_class: 'text-orange-500'
+  }
+  const license = {
+    title: 'License',
+    description: 'Released under the MIT License.',
+    icon: InfoCircleOutline,
+    href: `https://github.com/shinokada/${__NAME__}/blob/main/LICENSE`,
+    icon_class: 'text-lime-500'
+  }
+ 
+  const newInfo = [originalSource, license, ...info];
+  const pkg = {
+    pkgName: __NAME__,
+    pkgVersion: __VERSION__,
+    repoUrl: __GITHUBURL__,
+    runaticsVersion: __RUNATICS_VERSION__,
+    runesMetaTagsVersion: __RUNES_METATAGS_VERSION__,
+    svelteVersion: __SVELTE_VERSION__,
+    svelteKitVersion: __SVELTEKIT_VERSION__,
+    svelte5uilib: __SVELTE_5_UI_LIB_VERSION__,
+    svelteRuneHighlight: __SVELTE_RUNE_HIGHLIGHT_VERSION__,
+    viteVersion: __VITE_VERSION__
   };
-  let filteredCards = $state(insertObjectToArray(excludeByTitle(cards, cardsToExclude), global_icons, 6))
-  // let filteredCards = $state(excludeByTitle(cards, cardsToExclude));
-
-  const runaticsVersion = __RUNATICS_VERSION__;
-  const runesMetaTagsVersion = __RUNES_METATAGS_VERSION__;
-  let newPkg = $state({ ...pkg, runaticsVersion, runesMetaTagsVersion });
 </script>
 
-<div class="relative mx-auto h-full max-w-7xl overflow-y-auto px-8 pb-20">
-  <SupportBanner>
-    To Keep It Going, Please Show Your Love.<a href="https://ko-fi.com/Z8Z2CHALG" target="_blank"
-      ><img
-        height="40"
-        style="border:0px;height:40px;"
-        src="https://storage.ko-fi.com/cdn/kofi3.png?v=3"
-        alt="Buy Me a Coffee at ko-fi.com"
-      /></a
-    >
-  </SupportBanner>
+<div class="relative h-full max-w-7xl mx-auto overflow-y-auto px-8 pb-20">
+<SupportBanner>
+    To Keep It Going, Please Show Your Love.<a href='https://ko-fi.com/Z8Z2CHALG' target='_blank'><img height='40' style='border:0px;height:40px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' alt='Buy Me a Coffee at ko-fi.com' /></a>
+</SupportBanner>
 
-  <h1 class="my-8 flex justify-center">{removeHyphensAndCapitalize(__NAME__)}</h1>
+<h1 class='flex justify-center my-8'>{removeHyphensAndCapitalize(__NAME__)}</h1>
 
-  <HomeCards cards={filteredCards} />
-  <h2 class="my-8 flex justify-center">Info</h2>
-  <HomeCards cards={info} />
-  <TechInfo {...newPkg} />
-</div>
+<HomeCards cards={filteredCards}/>
+<h2 class='flex justify-center my-8'>Info</h2>
+<HomeCards cards={newInfo} />
+<TechInfo {...pkg} />
+</div>

src/routes/guide/custom-icons/md/create-a-custom-component.md

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   const config = {
     size: "xl",
     color: '#FF5733'
   };
   import { IconSolid } from 'flowbite-svelte-icons';
-  export let icon: ComponentType;
+  export let icon: Component;
 </script>
 
 <IconSolid {...config} {icon} />

src/routes/outline-icons/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import { IconPage, filterIconsByKeyword } from 'runes-webkit';
   import * as icons from '$lib';
 
@@ -8,7 +8,7 @@
 </script>
 
 <IconPage
-  icons={keyIcons as ComponentType}
+  icons={keyIcons as Component}
   sizeByTailwind
   title="Outline Icons - Flowbite Svelte Icons"
   defaultSize="6"

src/routes/solid-icons/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import { IconPage, filterIconsByKeyword } from 'runes-webkit';
   import * as icons from '$lib';
 
@@ -8,7 +8,7 @@
 </script>
 
 <IconPage
-  icons={keyIcons as ComponentType}
+  icons={keyIcons as Component}
   sizeByTailwind
   title="Solid Icons - Flowbite Svelte Icons"
   defaultSize="6"

src/routes/utils/Nav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import {
     Navbar,
     NavLi,
@@ -32,7 +32,7 @@
   type LiType = {
     name: string;
     href: string;
-    icon?: ComponentType;
+    icon?: Component;
   };
   interface Props {
     lis?: LiType[];

src/vite-env.d.ts

@@ -1,3 +1,13 @@
 declare const __NAME__: string;
+declare const __DESCRIPTION__: string;
 declare const __VERSION__: string;
 declare const __GITHUBURL__: string;
+declare const __ORIGINAL_SOURCE_NAME__: string;
+declare const __ORIGINAL_SOURCE_URL__: string;
+declare const __RUNATICS_VERSION__: string;
+declare const __RUNES_METATAGS_VERSION__: string;
+declare const __SVELTE_VERSION__: string;
+declare const __SVELTEKIT_VERSION__: string;
+declare const __SVELTE_RUNE_HIGHLIGHT_VERSION__: string;
+declare const __SVELTE_5_UI_LIB_VERSION__: string;
+declare const __VITE_VERSION__: string;

vite.config.ts

@@ -12,18 +12,18 @@ import runaticsPackage from './node_modules/runatics/package.json' assert { type
 export default defineConfig({
   plugins: [sveltekit()],
   define: {
-    __NAME__: `"${pkg.name}"`,
-    __DESCRIPTION__: `"${pkg.description}"`,
-    __VERSION__: `"${pkg.version}"`,
-    __GITHUBURL__: `"${pkg.repository.url}"`,
-    __ORIGINAL_SOURCE_NAME__: `"${pkg.contributors[0].name}"`,
-    __ORIGINAL_SOURCE_URL__: `"${pkg.contributors[0].url}"`,
-    __RUNATICS_VERSION__: `"${runaticsPackage.version}"`,
-    __RUNES_METATAGS_VERSION__: `"${runesmetatagsPackage.version}"`,
-    __SVELTE_VERSION__: `"${sveltePackage.version}"`,
-    __SVELTEKIT_VERSION__: `"${svelteKitPackage.version}"`,
-    __SVELTE_RUNE_HIGHLIGHT_VERSION__: `"${svelterunehighlightPackage.version}"`,
-    __SVELTE_5_UI_LIB_VERSION__: `"${svelte5uilibPackage.version}"`,
-    __VITE_VERSION__: `"${vitePackage.version}"`
+    __NAME__: JSON.stringify(pkg.name),
+    __DESCRIPTION__: JSON.stringify(pkg.description),
+    __VERSION__: JSON.stringify(pkg.version),
+    __GITHUBURL__: JSON.stringify(pkg.repository.url),
+    __ORIGINAL_SOURCE_NAME__: JSON.stringify(pkg.contributors[0].name),
+    __ORIGINAL_SOURCE_URL__: JSON.stringify(pkg.contributors[0].url),
+    __RUNATICS_VERSION__: JSON.stringify(runaticsPackage.version),
+    __RUNES_METATAGS_VERSION__: JSON.stringify(runesmetatagsPackage.version),
+    __SVELTE_VERSION__: JSON.stringify(sveltePackage.version),
+    __SVELTEKIT_VERSION__: JSON.stringify(svelteKitPackage.version),
+    __SVELTE_RUNE_HIGHLIGHT_VERSION__: JSON.stringify(svelterunehighlightPackage.version),
+    __SVELTE_5_UI_LIB_VERSION__: JSON.stringify(svelte5uilibPackage.version),
+    __VITE_VERSION__: JSON.stringify(vitePackage.version),
   }
 });