footer things

.contentlayer/generated/Doc/_index.mjs

@@ -1,7 +1,7 @@
 // NOTE This file is auto-generated by Contentlayer
 
 import componentsMd from './components.md.json' assert { type: 'json' }
-import gettingStartedMd from './getting-started.md.json' assert { type: 'json' }
 import introductionMd from './introduction.md.json' assert { type: 'json' }
+import configurationMd from './configuration.md.json' assert { type: 'json' }
 
-export const allDocs = [componentsMd, gettingStartedMd, introductionMd]
+export const allDocs = [componentsMd, introductionMd, configurationMd]

.contentlayer/generated/Doc/configuration.md.json

@@ -0,0 +1,22 @@
+{
+  "title": "Configuration",
+  "description": "Learn how to get started with this template.",
+  "tagline": "Overview",
+  "body": {
+    "raw": "\nThere isn't a ton of magic going on here, as this template was developed quickly to meet our own needs. The following sections will give you a brief overview of how the template is structured and how to get started.\n\n## Site Config\n\nThe site config is used to define the site's title, description, metadata, and other information that is used throughout the site. The site config is defined in `src/lib/config/site.ts`.\n\nHere's an example of what the `site.ts` file looks like:\n\n```ts title=\"src/lib/config/site.ts\"\nexport const siteConfig = {\n\tname: \"Svecosystem Docs Starter\",\n\turl: \"https://svecosystem.com\",\n\tdescription: \"Componentized & accessible forms for SvelteKit.\",\n\tlinks: {\n\t\ttwitter: \"https://twitter.com/huntabyte\",\n\t\tgithub: \"https://github.com/svecosystem\"\n\t},\n\tauthor: \"Huntabyte\",\n\tkeywords: \"Svelte ecosystem,ecosystem,svecosystem,sveltekit,svelte libraries\",\n\togImage: {\n\t\turl: \"https://www.svecosystem.com/og.png\",\n\t\twidth: \"1200\",\n\t\theight: \"630\"\n\t}\n};\n```\n\n## Navigation Config\n\nNavigation for the various components (navbar, sidebar, etc.) is defined in a single file, `src/lib/config/navigation.ts`. The `main` navigation items are rendered in the top navigation bar, while the `sidebar` navigation items are rendered in the sidebar. The `sidebar` navigation only supports 2 levels of navigation out of the box.\n\nHere's an example of what the `navigation.ts` file looks like:\n\n```ts title=\"src/lib/config/navigation.ts\"\nexport const navigation: Navigation = {\n\tmain: [\n\t\t{\n\t\t\ttitle: \"Documentation\",\n\t\t\thref: \"/docs\"\n\t\t},\n\t\t{\n\t\t\ttitle: \"Svecosystem\",\n\t\t\thref: \"https://svecosystem.com\",\n\t\t\texternal: true\n\t\t},\n\t\t{\n\t\t\ttitle: \"Releases\",\n\t\t\thref: \"https://github.com/svecosystem/mode-watcher/releases\",\n\t\t\texternal: true\n\t\t}\n\t],\n\tsidebar: [\n\t\t{\n\t\t\ttitle: \"Overview\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Introduction\",\n\t\t\t\t\thref: \"/docs/introduction\",\n\t\t\t\t\titems: []\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Getting Started\",\n\t\t\t\t\thref: \"/docs/getting-started\",\n\t\t\t\t\titems: []\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Components\",\n\t\t\t\t\thref: \"/docs/components\",\n\t\t\t\t\titems: []\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttitle: \"API Reference\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Root\",\n\t\t\t\t\thref: \"/docs/api-reference/root\",\n\t\t\t\t\titems: []\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n};\n```\n\nWhen links are marked as `external`, they will open in a new tab when clicked.\n\n## Meta Tags\n\nMeta tags are defined in the `src/lib/components/metadata.svelte` component. This component is used in the root layout component, `src/routes/+layout.svelte` to render the meta tags for each page.\n\n```svelte title=\"src/lib/components/metadata.svelte\"\n<script lang=\"ts\">\n\timport { page } from \"$app/stores\";\n\timport { siteConfig } from \"$lib/config/site\";\n\n\texport let title: string = siteConfig.name;\n\n\t$: title = $page.data?.title\n\t\t? `${$page.data.title} - ${siteConfig.name}`\n\t\t: siteConfig.name;\n</script>\n\n<svelte:head>\n\t<title>{title}</title>\n\t<meta name=\"description\" content={siteConfig.description} />\n\t<meta name=\"keywords\" content={siteConfig.keywords} />\n\t<meta name=\"author\" content={siteConfig.author} />\n\t<meta name=\"twitter:card\" content=\"summary_large_image\" />\n\t<meta name=\"twitter:site\" content={siteConfig.url} />\n\t<meta name=\"twitter:title\" content={title} />\n\t<meta name=\"twitter:description\" content={siteConfig.description} />\n\t<meta name=\"twitter:image\" content=\"https://shadcn-svelte.com/og.png\" />\n\t<meta name=\"twitter:image:alt\" content={siteConfig.name} />\n\t<meta name=\"twitter:creator\" content={siteConfig.author} />\n\t<meta property=\"og:title\" content={title} />\n\t<meta property=\"og:type\" content=\"article\" />\n\t<meta property=\"og:url\" content={siteConfig.url + $page.url.pathname} />\n\t<meta property=\"og:image\" content={siteConfig.ogImage.url} />\n\t<meta property=\"og:image:alt\" content={siteConfig.name} />\n\t<meta property=\"og:image:width\" content={siteConfig.ogImage.width} />\n\t<meta property=\"og:image:height\" content={siteConfig.ogImage.height} />\n\t<meta property=\"og:description\" content={siteConfig.description} />\n\t<meta property=\"og:site_name\" content={siteConfig.name} />\n\t<meta property=\"og:locale\" content=\"EN_US\" />\n\t<link rel=\"shortcut icon\" href=\"/favicon-16x16.png\" />\n\t<link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\" />\n</svelte:head>\n```\n\nAny meta tags could be modified by frontmatter in the markdown file, which would be returned in the `$page.data` object, and then could be used here. At the moment, the only meta tag that is modified by frontmatter on a per-route basis is the `title` tag.\n\n## Content\n\nThe markdown files that are used to generate the documentation are stored in the `content` directory. Each markdown file is a page in the documentation, and the directory structure is followed for navigation.\n\nHere's an example of what the `content` directory looks like:\n\n```txt\ncontent\n├── api-reference\n│   └── root.md\n├── components\n│   └── tabs.md\n├── docs\n│   ├── components.md\n│   ├── example.md\n│   ├── getting-started.md\n│   ├── index.md\n│   └── introduction.md\n├── index.md\n```\n\nYou can use Svelte components in your markdown files by importing them as you would in any other Svelte file. We've also included a few pre-built components that you can use within the docs. Learn more about them in the [Components](/docs/components) section.\n",
+    "html": "<p>There isn't a ton of magic going on here, as this template was developed quickly to meet our own needs. The following sections will give you a brief overview of how the template is structured and how to get started.</p>\n<h2>Site Config</h2>\n<p>The site config is used to define the site's title, description, metadata, and other information that is used throughout the site. The site config is defined in <code>src/lib/config/site.ts</code>.</p>\n<p>Here's an example of what the <code>site.ts</code> file looks like:</p>\n<pre><code class=\"language-ts\">export const siteConfig = {\n\tname: \"Svecosystem Docs Starter\",\n\turl: \"https://svecosystem.com\",\n\tdescription: \"Componentized &#x26; accessible forms for SvelteKit.\",\n\tlinks: {\n\t\ttwitter: \"https://twitter.com/huntabyte\",\n\t\tgithub: \"https://github.com/svecosystem\"\n\t},\n\tauthor: \"Huntabyte\",\n\tkeywords: \"Svelte ecosystem,ecosystem,svecosystem,sveltekit,svelte libraries\",\n\togImage: {\n\t\turl: \"https://www.svecosystem.com/og.png\",\n\t\twidth: \"1200\",\n\t\theight: \"630\"\n\t}\n};\n</code></pre>\n<h2>Navigation Config</h2>\n<p>Navigation for the various components (navbar, sidebar, etc.) is defined in a single file, <code>src/lib/config/navigation.ts</code>. The <code>main</code> navigation items are rendered in the top navigation bar, while the <code>sidebar</code> navigation items are rendered in the sidebar. The <code>sidebar</code> navigation only supports 2 levels of navigation out of the box.</p>\n<p>Here's an example of what the <code>navigation.ts</code> file looks like:</p>\n<pre><code class=\"language-ts\">export const navigation: Navigation = {\n\tmain: [\n\t\t{\n\t\t\ttitle: \"Documentation\",\n\t\t\thref: \"/docs\"\n\t\t},\n\t\t{\n\t\t\ttitle: \"Svecosystem\",\n\t\t\thref: \"https://svecosystem.com\",\n\t\t\texternal: true\n\t\t},\n\t\t{\n\t\t\ttitle: \"Releases\",\n\t\t\thref: \"https://github.com/svecosystem/mode-watcher/releases\",\n\t\t\texternal: true\n\t\t}\n\t],\n\tsidebar: [\n\t\t{\n\t\t\ttitle: \"Overview\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Introduction\",\n\t\t\t\t\thref: \"/docs/introduction\",\n\t\t\t\t\titems: []\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Getting Started\",\n\t\t\t\t\thref: \"/docs/getting-started\",\n\t\t\t\t\titems: []\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Components\",\n\t\t\t\t\thref: \"/docs/components\",\n\t\t\t\t\titems: []\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttitle: \"API Reference\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\ttitle: \"Root\",\n\t\t\t\t\thref: \"/docs/api-reference/root\",\n\t\t\t\t\titems: []\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n};\n</code></pre>\n<p>When links are marked as <code>external</code>, they will open in a new tab when clicked.</p>\n<h2>Meta Tags</h2>\n<p>Meta tags are defined in the <code>src/lib/components/metadata.svelte</code> component. This component is used in the root layout component, <code>src/routes/+layout.svelte</code> to render the meta tags for each page.</p>\n<pre><code class=\"language-svelte\">&#x3C;script lang=\"ts\">\n\timport { page } from \"$app/stores\";\n\timport { siteConfig } from \"$lib/config/site\";\n\n\texport let title: string = siteConfig.name;\n\n\t$: title = $page.data?.title\n\t\t? `${$page.data.title} - ${siteConfig.name}`\n\t\t: siteConfig.name;\n&#x3C;/script>\n\n&#x3C;svelte:head>\n\t&#x3C;title>{title}&#x3C;/title>\n\t&#x3C;meta name=\"description\" content={siteConfig.description} />\n\t&#x3C;meta name=\"keywords\" content={siteConfig.keywords} />\n\t&#x3C;meta name=\"author\" content={siteConfig.author} />\n\t&#x3C;meta name=\"twitter:card\" content=\"summary_large_image\" />\n\t&#x3C;meta name=\"twitter:site\" content={siteConfig.url} />\n\t&#x3C;meta name=\"twitter:title\" content={title} />\n\t&#x3C;meta name=\"twitter:description\" content={siteConfig.description} />\n\t&#x3C;meta name=\"twitter:image\" content=\"https://shadcn-svelte.com/og.png\" />\n\t&#x3C;meta name=\"twitter:image:alt\" content={siteConfig.name} />\n\t&#x3C;meta name=\"twitter:creator\" content={siteConfig.author} />\n\t&#x3C;meta property=\"og:title\" content={title} />\n\t&#x3C;meta property=\"og:type\" content=\"article\" />\n\t&#x3C;meta property=\"og:url\" content={siteConfig.url + $page.url.pathname} />\n\t&#x3C;meta property=\"og:image\" content={siteConfig.ogImage.url} />\n\t&#x3C;meta property=\"og:image:alt\" content={siteConfig.name} />\n\t&#x3C;meta property=\"og:image:width\" content={siteConfig.ogImage.width} />\n\t&#x3C;meta property=\"og:image:height\" content={siteConfig.ogImage.height} />\n\t&#x3C;meta property=\"og:description\" content={siteConfig.description} />\n\t&#x3C;meta property=\"og:site_name\" content={siteConfig.name} />\n\t&#x3C;meta property=\"og:locale\" content=\"EN_US\" />\n\t&#x3C;link rel=\"shortcut icon\" href=\"/favicon-16x16.png\" />\n\t&#x3C;link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\" />\n&#x3C;/svelte:head>\n</code></pre>\n<p>Any meta tags could be modified by frontmatter in the markdown file, which would be returned in the <code>$page.data</code> object, and then could be used here. At the moment, the only meta tag that is modified by frontmatter on a per-route basis is the <code>title</code> tag.</p>\n<h2>Content</h2>\n<p>The markdown files that are used to generate the documentation are stored in the <code>content</code> directory. Each markdown file is a page in the documentation, and the directory structure is followed for navigation.</p>\n<p>Here's an example of what the <code>content</code> directory looks like:</p>\n<pre><code class=\"language-txt\">content\n├── api-reference\n│   └── root.md\n├── components\n│   └── tabs.md\n├── docs\n│   ├── components.md\n│   ├── example.md\n│   ├── getting-started.md\n│   ├── index.md\n│   └── introduction.md\n├── index.md\n</code></pre>\n<p>You can use Svelte components in your markdown files by importing them as you would in any other Svelte file. We've also included a few pre-built components that you can use within the docs. Learn more about them in the <a href=\"/docs/components\">Components</a> section.</p>"
+  },
+  "_id": "configuration.md",
+  "_raw": {
+    "sourceFilePath": "configuration.md",
+    "sourceFileName": "configuration.md",
+    "sourceFileDir": ".",
+    "contentType": "markdown",
+    "flattenedPath": "configuration"
+  },
+  "type": "Doc",
+  "slug": "",
+  "slugFull": "/configuration",
+  "fileName": "configuration",
+  "suffix": ".md"
+}

.contentlayer/generated/Doc/getting-started.md.json

@@ -1,5 +1,5 @@
 {
-  "title": "Getting Started",
+  "title": "Configuration",
   "description": "Learn how to get started with this template.",
   "tagline": "Overview",
   "body": {

content/getting-started.md → content/configuration.md

@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Configuration
 description: Learn how to get started with this template.
 tagline: Overview
 ---

src/lib/components/layout/footer/footer-icons.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { GitHubLogo, XLogo } from "$lib/components/logos";
+	import MobileNav from "../mobile-nav/mobile-nav.svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { siteConfig } from "$lib/config";
+</script>
+
+<div class="flex items-center justify-end lg:flex-1">
+	<Button
+		href={siteConfig.links.github}
+		target="_blank"
+		aria-label="view this project on github"
+		size="icon"
+		variant="subtle"
+	>
+		<GitHubLogo class="size-5" />
+	</Button>
+	<Button
+		href={siteConfig.links.x}
+		target="_blank"
+		aria-label="follow on X (formerly known as Twitter)"
+		size="icon"
+		variant="subtle"
+		class="inline-flex items-center"
+	>
+		<XLogo class="size-4" />
+	</Button>
+	<MobileNav />
+</div>

src/lib/components/layout/footer/footer-nav.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { navigation } from "$lib/config";
+	import { ArrowUpRight } from "phosphor-svelte";
+</script>
+
+<nav class="hidden items-center justify-center lg:flex">
+	<ul class="flex w-full items-center justify-center gap-8">
+		{#each navigation.main as { href, title, external }}
+			<li class="relative">
+				<a
+					{href}
+					class="text-sm text-muted-foreground hover:text-brand {external
+						? 'flex items-center gap-0.5'
+						: ''}"
+					target={external ? "_blank" : undefined}
+				>
+					{title}
+					{#if external}
+						<ArrowUpRight class="-mt-2 ml-0.5 h-3 w-3" />
+					{/if}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

src/lib/components/layout/footer/footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import A from "$lib/components/markdown/a.svelte";
+	import { siteConfig } from "$lib/config";
+	import FooterIcons from "./footer-icons.svelte";
+	import FooterNav from "./footer-nav.svelte";
+</script>
+
+<footer class="mt-4 border-t border-border text-sm leading-6">
+	<div
+		class="mx-auto flex h-16 max-w-8xl items-center justify-between gap-3 px-4 text-foreground/80 sm:px-6 lg:px-8"
+	>
+		<div class="flex items-center gap-2 lg:flex-1">
+			<A href={siteConfig.license.url}>
+				{siteConfig.license.name}
+			</A>
+			<p>&copy; {new Date().getFullYear()} Svecosystem Team</p>
+		</div>
+		<FooterNav />
+		<FooterIcons />
+	</div>
+</footer>

src/lib/components/layout/index.ts

@@ -1,2 +1,2 @@
 export * as PageHeader from "./page-header/index.js";
-export { default as Footer } from "./footer.svelte";
+export { default as Footer } from "./footer/footer.svelte";

src/lib/components/layout/mobile-nav/mobile-nav.svelte

@@ -5,11 +5,16 @@
 	import { navigation, siteConfig } from "$lib/config";
 	import MobileNavItem from "./mobile-nav-item.svelte";
 	import MobileNavLink from "./mobile-nav-link.svelte";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "$lib/utils";
 </script>
 
 <Drawer.Root>
-	<Drawer.Trigger class="ml-5 md:hidden" aria-label="open menu">
-		<List class="size-5" />
+	<Drawer.Trigger
+		class={cn(buttonVariants({ variant: "subtle", size: "icon" }), "md:hidden")}
+		aria-label="open menu"
+	>
+		<List class="size-6" />
 	</Drawer.Trigger>
 	<Drawer.Portal>
 		<Drawer.Overlay class="fixed inset-0 z-[60] bg-black/40" />
@@ -50,11 +55,7 @@
 					>
 						GitHub
 					</MobileNavLink>
-					<MobileNavLink
-						class="text-xs text-muted-foreground"
-						href={siteConfig.links.twitter}
-						external
-					>
+					<MobileNavLink class="text-xs text-muted-foreground" href={siteConfig.links.x} external>
 						X
 					</MobileNavLink>
 				</div>

src/lib/components/layout/navbar/navbar-icons.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { GitHubLogo, XLogo } from "$lib/components/logos";
+	import MobileNav from "../mobile-nav/mobile-nav.svelte";
+	import ThemeDropdown from "./theme-dropdown.svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { siteConfig } from "$lib/config";
+</script>
+
+<div class="flex items-center justify-end lg:flex-1">
+	<ThemeDropdown />
+	<Button
+		href={siteConfig.links.github}
+		target="_blank"
+		aria-label="view this project on github"
+		size="icon"
+		variant="subtle"
+	>
+		<GitHubLogo class="size-5" />
+	</Button>
+	<Button
+		href={siteConfig.links.x}
+		target="_blank"
+		aria-label="follow on X (formerly known as Twitter)"
+		size="icon"
+		variant="subtle"
+		class="inline-flex items-center"
+	>
+		<XLogo class="size-4" />
+	</Button>
+	<MobileNav />
+</div>

src/lib/components/layout/navbar/navbar.svelte

@@ -1,26 +1,13 @@
 <script lang="ts">
-	import { GitHubLogo } from "$lib/components/logos/index.js";
-	import ThemeDropdown from "./theme-dropdown.svelte";
 	import NavbarLogo from "./navbar-logo.svelte";
 	import NavbarNav from "./navbar-nav.svelte";
-	import MobileNav from "../mobile-nav/mobile-nav.svelte";
+	import NavbarIcons from "./navbar-icons.svelte";
 </script>
 
 <header class="sticky top-0 z-50 -mb-px border-b border-border bg-background/75 backdrop-blur">
 	<div class="mx-auto flex h-16 max-w-8xl items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
 		<NavbarLogo />
 		<NavbarNav />
-		<div class="flex items-center justify-end lg:flex-1">
-			<ThemeDropdown />
-			<a
-				href="https://github.com/svecosystem"
-				target="_blank"
-				aria-label="View this project on Github"
-				class="ml-5"
-			>
-				<GitHubLogo class="size-5" />
-			</a>
-			<MobileNav />
-		</div>
+		<NavbarIcons />
 	</div>
 </header>

src/lib/components/layout/navbar/theme-dropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { buttonVariants } from "$lib/components/ui/button";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 	import { setMode } from "mode-watcher";
 	import { MoonStars } from "phosphor-svelte";
@@ -7,8 +8,11 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger aria-label="Change theme">
-		<MoonStars class="size-5" />
+	<DropdownMenu.Trigger
+		aria-label="Change theme"
+		class={buttonVariants({ variant: "subtle", size: "icon" })}
+	>
+		<MoonStars class="size-6" />
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content class="z-[100]">
 		{#each modes as themeMode}

src/lib/components/logos/index.ts

@@ -1,3 +1,4 @@
 export { default as SvecosystemDark } from "./svecosystem-dark.svelte";
 export { default as SvecosystemLight } from "./svecosystem-light.svelte";
 export { default as GitHubLogo } from "./github.svelte";
+export { default as XLogo } from "./x-com.svelte";

src/lib/components/logos/x-com.svelte

@@ -0,0 +1,11 @@
+<svg
+	height="23"
+	viewBox="0 0 1200 1227"
+	width="23"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	><path
+		d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+	></path></svg
+>