move navigation to use Navbar from the Yesvelte library

This commit is contained in:
Dave Lane 2024-11-19 12:39:02 +13:00
parent d9361fe85c
commit 9316c299f4
2 changed files with 10 additions and 11 deletions

View file

@ -1,7 +1,9 @@
<script> <script>
import tabler from 'yesvelte/css/tabler.min.css?url'; import tabler from 'yesvelte/css/tabler.min.css?url';
import daisyui from 'yesvelte/css/daisyui.min.css?url'; import daisyui from 'yesvelte/css/daisyui.min.css?url';
import '../app.css'; import { Navbar, NavbarItem } from 'yesvelte'
import '../app.css';
// you can change theme of your project from here. // you can change theme of your project from here.
let theme = 'tabler'; let theme = 'tabler';
@ -9,17 +11,13 @@
</script> </script>
<svelte:head> <svelte:head>
{#if theme === 'tabler'} <link rel="stylesheet" href={tabler} />
<link rel="stylesheet" href={tabler} />
{:else}
<link rel="stylesheet" href={daisyui} />
{/if}
</svelte:head> </svelte:head>
<nav> <Navbar theme='light' style="margin-bottom: 2em;">
<a href="/">Web Services</a> <a href="/"><NavbarItem title="Web Services" /></a>
<a href="/about">About</a> <a href="/about"><NavbarItem title="About" /></a>
</nav> </Navbar>
<!-- content provided by the +page.svelte file in this directory - and sub-directories --> <!-- content provided by the +page.svelte file in this directory - and sub-directories -->
<slot /> <slot />

View file

@ -1,5 +1,6 @@
<h1>About this site... </h1> <h1>About this site... </h1>
<p>This simple app is a work-in-progress app that will soon (I hope) include the ability to filter the services using the various vocabularies of tags, like categories of software, libre license used, instance status, which of my roles they're affiliated with, and on which host they reside... </p> <p>This simple app is a work-in-progress that allows visitors to see the various <a href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values">libre</a> web services I currently run, filter them on a variety of properties like functional categories, similar proprietary apps, libre license used, instance status, which of my roles they're affiliated with, and on which host they reside... </p>
<p>The <a href="https://forge.magnificent.nz/lightweight/webservices">source code for this project is available</a> under an AGPL license.</p>
<p>This app is built on a suite of technologies that are largely new to me, but that I wanted to try out, as I see great potential in them. The key technology is a Javascript 'framework' called <a href="https://kid.svelte.dev">SvelteKit</a>, built with <a href="https://svelte.dev">Svelte</a> (a compiled language that generates pure Javascript) and ecosystem of extensions created by the community which provides useful components designed for reuse. <p>This app is built on a suite of technologies that are largely new to me, but that I wanted to try out, as I see great potential in them. The key technology is a Javascript 'framework' called <a href="https://kid.svelte.dev">SvelteKit</a>, built with <a href="https://svelte.dev">Svelte</a> (a compiled language that generates pure Javascript) and ecosystem of extensions created by the community which provides useful components designed for reuse.
</p> </p>