Documentation #

This library contails following components for Svelte Runes project.

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 flowbite-svelte svelte-rune-highlight highlight.js runes-webkit svelte-lib-helpers

Setting #

Layout #

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

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 'flowbite-svelte';
  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.

Tests #

Please refer to tests/test.ts