Svelte Library

TLDR: install into your project, wrap your app in the layout component and then start using any give component as you wish.

Install the Svelte+CSS Libraries:

npm i -D @barbajoe/svelte-lib && npm i -D @barbajoe/css-lib pnpm add -D @barbajoe/svelte-lib && pnpm add -D @barbajoe/css-lib yarn add -D @barbajoe/svelte-lib && yarn add -D @barbajoe/css-lib

Then wrap your app in the Layout component and you're good to go!

Note that you can overwrite CSS Variables if you wish. See the Variables page for more info.

TODO: add CSS Variables page

    

<script lang="ts">
  import { page } from "$app/stores";
  import { Layout } from "@barbajoe/svelte-lib";
  import type { HeaderLink, LogoData } from "@barbajoe/svelte-lib/dist/types";

  $: links = [
    { href: "/page1", text: "Page 1", active: $page.url.pathname === "/page1" },
    { href: "/page2", text: "Page 2", active: $page.url.pathname === "/page2" },
    { href: "/page3", text: "Page 3", active: $page.url.pathname === "/page3" },
  ] as HeaderLink[];

  const logo: LogoData = {
    href: "/",
    src: "/favicon.ico",
    alt: "Logo",
    ariaLabel: "go to landing page",
    text: "barbajoe's svelte library",
  };
</script>

<Layout {links} {logo}>
  <slot />
</Layout>

Components

Layout

Sets a Header, Footer, and a main body section that auto expands to the view height (vh)

Usage

TODO: add example code