Documentation #

This library contails following components for Svelte Runes project.

- Code block style changer
- On This Page
- Code wrapper
- HighlightCompo
- Home cards
- Icon page
- Doc page
- Footer
- Sidebar
- Support banner
- Tech info
- Toc
- Anchor
- Code
- H2, H3
- Helper functions

Use the utils and +layout.svelte examples how to set up Nav and DynamicCodeBlockStyle.

Runes Webkit #

If you prefer to use the starter, please refer to https://github.com/shinokada/runes-webkit-starter.

Installation #

pnpm i -D svelte-5-ui-lib tailwind-merge svelte-rune-highlight highlight.js runes-webkit svelte-lib-helpers

// install tailwindcss
npx svelte-add@latest tailwindcss

Setting #

Enable compilerOptions

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess({})],
  compilerOptions: {
    runes: true
  },
  kit: {
    adapter: adapter()
  }
};

export default config;

Layout #

Create +layout.svelte, utils/Nav.svelte, utils/DynamicCodeBlockStyle.svelte and create a directory named utils/highlight and add all styles to it.

Add the following to the +layout.svelte:

<script context="module">
  const extra: ListType[] = [
    {
      name: '3 Tabs',
      Icon: ExpandOutline as Component,
      href: '/three-tabs'
    },
    {
      name: '3 Tabs Tailwind ',
      Icon: CogOutline as Component,
      href: '/three-tabs-sizebytailwind'
    },
    {
      name: 'No Tabs',
      Icon: GridPlusOutline as Component,
      href: '/no-tabs'
    }
  ];
  export const newSidebarList: ListType[] = [
    ...sidebarList, ...extra 
  ];
</script>

<script lang="ts">
  import '../app.pcss';
  import { page } from '$app/stores';
  import type { Component } from 'svelte';
  import type { ListType } from 'runes-webkit';
  import { Footer, OnThisPage, extract, Sidebar, removeHyphensAndCapitalize, sidebarList, ExpandOutline, GridPlusOutline, CogOutline } from 'runes-webkit'
  import { RunesMetaTags, deepMerge } from 'runes-meta-tags';
  import Nav from './utils/Nav.svelte';
  import { Runatics } from 'runatics';

  let { children, data } = $props()
  const analyticsId = data.ANALYTICS_ID
  let metaTags = $state(
    $page.data.pageMetaTags
      ? deepMerge($page.data.layoutMetaTags, $page.data.pageMetaTags)
      : data.layoutMetaTags
  );

  let currentUrl = $state($page.url.pathname);
  $effect(() => {
    currentUrl = $page.url.pathname;
    metaTags = $page.data.pageMetaTags
      ? deepMerge($page.data.layoutMetaTags, $page.data.pageMetaTags)
      : data.layoutMetaTags;
  })
  const lis =[
    {name: 'Guide', href: '/guide/svelte-4/getting-started'},
    {name: '3-Tabs', href: '/three-tabs'},
    {name: '3-Tabs-tailwind', href: '/three-tabs-sizebytailwind'},
    {name: 'No-tabs', href: '/no-tabs'},
    {name: 'How to use', href: '/how-to-use'},
  ]
  const brand = {
    name: 'codewithshin.com',
    href: 'https://codewithshin.com',
  }
  const urlsToIncludeSwitcherAndSidebar =['/guide/', '/guide2/', '/how-to-use']
  const siteName = removeHyphensAndCapitalize(__NAME__)
  const twitterUrl = 'https://twitter.com/shinokada'
  const githubUrl = `https://github.com/shinokada/${__NAME__}`

</script>
<RunesMetaTags {...metaTags} />
<Runatics {analyticsId} />

<Nav {lis} {siteName} {twitterUrl} {githubUrl} urlsToIncludeSwitcher={urlsToIncludeSwitcherAndSidebar}/>
<div class="lg:flex">  
{#if urlsToIncludeSwitcherAndSidebar.some(path => currentUrl.startsWith(path))}
  <Sidebar 
  sidebarList={newSidebarList}
  s_b_aside='fixed inset-0 z-30 flex-none h-full w-64 lg:static lg:h-auto border-e border-gray-200 dark:border-gray-600 lg:overflow-y-visible lg:pt-0 lg:block hidden'
  s_b_div='fixed top-20 px-2 w-60'
  />
  <div class="relative">
    <OnThisPage {extract} headingSelector="#mainContent > :where(h2, h3)" />
  </div>
{/if}
  {@render children()}
</div>
<Footer {brand} {lis}/>

Style #

There are two ways to style components.

Use Developer tools to find CSS class names. It starts and ends with underscore, like _iconPage_div_1_.

The first part is the abbriviation of the component name and the second part is tag name.

The props names are without underscore, like iconPage_div_1. Use the props name to add the styles to a component.

Another way is to add style to the app.pcss file using a class name with underbars, like _iconPage_div_1_, etc.

Guide Directory Layout #

Add the following to the guide/+layout.svelte:

<script lang="ts">
  import {DocPage} from "runes-webkit";
  import type { Snippet } from "svelte";
  interface Props {
    children: Snippet;
  }
  let { children }: Props = $props()
</script>


<DocPage>
  {@render children()}
</DocPage>

Home Page #

Home page has SupportBanner, HomeCards, TechInfo components.

<script lang="ts">
  import { removeHyphensAndCapitalize, HomeCards, SupportBanner, TechInfo, BellActiveAltOutline, insertObjectToArray, excludeByTitle, cards, info, pkg } from 'runes-webkit';
  import { A } from 'svelte-5-ui-lib';
  const cardsToExclude = ['Seven Props']
  const brand = {
    title: 'Brands, Regular, and Solid Icons',
    description: '2000+ SVG Icons.',
    Icon: BellActiveAltOutline,
    icon_class: 'text-green-500'
  }
  let filteredCards = $state(insertObjectToArray(excludeByTitle(cards, cardsToExclude), brand, 2))

  const runaticsVersion = __RUNATICS_VERSION__;
  const runesMetaTagsVersion = __RUNES_METATAGS_VERSION__;
  let newPkg = $state({...pkg, runaticsVersion, runesMetaTagsVersion})
</script>

<div class="relative h-full max-w-7xl mx-auto overflow-y-auto px-8">
<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='flex justify-center my-8'>{removeHyphensAndCapitalize(__NAME__)}</h1>
<h2 class='flex justify-center my-8'><A href ='/how-to-use' aclass='underline'>This is a demo page. Please read  How to use page.</A> </h2>
<HomeCards cards={filteredCards}/>
<h2 class='flex justify-center my-8'>Info</h2>
<HomeCards cards={info} />
<TechInfo {...newPkg} />
</div>

Icon Page #

Icon page uses IconPage component with threeTabs and titel props.

<script lang="ts">
  import type { Component } from 'svelte';
  import { IconPage, filterStringKeys } from 'runes-webkit'
  import * as icons from '$lib'

  const keyIcons = filterStringKeys(icons);

</script>

<IconPage icons={keyIcons as Component} threeTabs={false} title="No Tabs" />

Tests #

Please refer to tests/test.ts

import type { MetaProps } from 'runes-meta-tags';
import { ANALYTICS_ID } from '$env/static/private';
import { metaTitle, metaDescription, metaImg } from 'runes-meta-tags';

export const load = ({ url }) => {
  const siteName = metaTitle('/', __NAME__);
  const title = metaTitle(url.pathname, __NAME__);
  const basicDesc = 'A collection of reusable Svelte components for building user interfaces for Runes'
  const description = metaDescription(url.pathname, basicDesc);
  const image = metaImg(url.pathname, __NAME__);
  const keywords = 'svelte, runes, webkit, ui, components';

  const layoutMetaTags: MetaProps = {
    title,
    description,
    keywords,
    twitter: {
      card: 'summary_large_image',
      site: '@shinokada',
      handle: '@shinokada',
      title,
      description,
      image,
      imageAlt: title,
    },
    og: {
      type: 'website',
      title,
      description,
      url: url.href,
      image,
      imageAlt: title,
      siteName,
      imageWidth: '1200',
      imageHeight: '630'
    }
  };
  return {
    layoutMetaTags,
    ANALYTICS_ID
  };
};