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 }; };