chore: update demo

README.md

@@ -1 +1,38 @@
-# pihka.al
+<div align="center">
+  <h1>pihka.al</h1>
+  <img src="docs/demo.gif" alt="demo" />
+</div>
+
+Personal dashboard for managing my [pihka.al](https://pihka.al) domain. I'm building it for my own use, it's not designed as a generic tool and not meant to be reused as-is.
+
+## What it does
+
+- Manage short URLs served from [pihka.al](https://pihka.al)
+
+## Next features
+
+- **API**: Create an API token that can be used to manage short URLs from anywere
+- **File management**: Upload and manage files directly in the dasboard 
+- **Text service**: Pastebin-like service, including burner messages
+
+## Stack
+
+- [Nuxt 4](https://nuxt.com) + [Nuxt UI](https://ui.nuxt.com)
+- [SQLite](https://sqlite.org) via [Drizzle ORM](https://orm.drizzle.team)
+
+## Running locally
+
+```sh
+pnpm install
+pnpm dev
+```
+
+```
+# .env.example
+DATABASE_URL=sqlite.db
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=strong_password
+REDIRECT_DOMAIN=pihka.al
+
+NUXT_SESSION_PASSWORD=strong_password
+```

app/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: "neutral",
+      neutral: "zinc",
+      success: "emerald",
+      error: "rose",
+    }
+  }
+})

app/assets/css/main.css

@@ -1,2 +1,6 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+:root {
+  --ui-radius: 0rem;
+}

app/components/ConfirmModal.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{ close: [confirmed: boolean] }>();
     <template #footer>
       <div class="flex gap-2 justify-end w-full">
         <UButton variant="ghost" color="neutral" @click="emit('close', false)">Cancel</UButton>
-        <UButton color="error" @click="emit('close', true)">Delete</UButton>
+        <UButton color="error" icon="i-lucide-trash-2" @click="emit('close', true)">Delete</UButton>
       </div>
     </template>
   </UModal>

app/components/LinkModal.vue

@@ -73,7 +73,7 @@ const onSubmit = async (event: FormSubmitEvent<Schema>) => {
 
         <div class="flex justify-end gap-2 pt-2">
           <UButton variant="ghost" @click="emit('close', false)">Cancel</UButton>
-          <UButton type="submit" :loading="submitting">{{ link ? "Save" : "Create" }}</UButton>
+          <UButton type="submit" variant="subtle" :loading="submitting" :icon="link ? 'i-lucide-save' : 'i-lucide-plus'">{{ link ? "Save" : "Create" }}</UButton>
         </div>
       </UForm>
     </template>

app/error.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app"
+
+defineProps<{ error: NuxtError }>();
+useHead({ title: 'Not found' });
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="text-center space-y-2">
+        <p class="text-8xl font-black tracking-tight">404</p>
+        <p class="text-lg font-medium">This link doesn't exist.</p>
+        <p class="text-muted text-sm">
+          Maybe check out <a href="https://pihkaal.me" class="underline underline-offset-2 hover:text-default transition-colors">pihkaal.me</a> instead?
+        </p>
+      </div>
+    </div>
+  </UApp>
+</template>

app/pages/auth/sign-in.vue

@@ -2,6 +2,8 @@
 import { z } from "zod";
 import type { AuthFormField, FormSubmitEvent } from "@nuxt/ui";
 
+useHead({ title: 'Sign in' });
+
 definePageMeta({
   middleware: () => {
     const { loggedIn } = useUserSession();

app/pages/dashboard.vue

@@ -23,6 +23,13 @@ const category = computed(() => {
   return "all";
 });
 
+const categoryTitle = computed(() => {
+  if (category.value === "active") return "Active links";
+  if (category.value === "disabled") return "Disabled links";
+  return "All links";
+});
+useHead({ title: categoryTitle });
+
 const filteredLinks = computed(() => {
   if (!links.value) return [];
   if (category.value === "active") return links.value.filter((l) => !l.disabled);
@@ -54,9 +61,9 @@ const deleteLink = async (link: Link) => {
 
 <template>
   <UDashboardGroup>
-    <UDashboardSidebar :toggle="false">
+    <UDashboardSidebar :toggle="false" :ui="{ header: 'border-b border-default' }">
       <template #header>
-        <UDashboardNavbar title="pihka.al" :toggle="false" />
+        <span class="font-semibold text-highlighted text-lg">pihka.al</span>
       </template>
 
       <UNavigationMenu
@@ -88,9 +95,7 @@ const deleteLink = async (link: Link) => {
         class="px-2"
       />
       <template #footer>
-        <UButton variant="ghost" icon="i-lucide-log-out" block @click="signOut">
+        <UButton variant="link" icon="i-lucide-log-out" block @click="signOut">Sign out</UButton>
-          Sign out
-        </UButton>
       </template>
     </UDashboardSidebar>
 
@@ -98,9 +103,7 @@ const deleteLink = async (link: Link) => {
       <template #header>
         <UDashboardNavbar :title="category === 'all' ? 'All links' : category === 'active' ? 'Active links' : 'Disabled links'">
           <template #right>
-            <UButton icon="i-lucide-plus" @click="openModal(null)">
+            <UButton icon="i-lucide-plus" variant="subtle" @click="openModal(null)">New link</UButton>
-              New link
-            </UButton>
           </template>
         </UDashboardNavbar>
       </template>

app/plugins/redirect-error.server.ts

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+  const event = useRequestEvent()
+  if (event?.context.redirectNotFound) {
+    showError({ statusCode: 404, message: 'Link not found' })
+  }
+})

app/utils/api.ts

@@ -1,4 +1,7 @@
 import { z } from "zod";
+import type { InternalApi } from "nitropack/types";
+
+export type Link = InternalApi["/api/links"]["get"][number];
 
 const apiErrorSchema = z.object({
   data: z.object({

nuxt.config.ts

@@ -10,6 +10,13 @@ export default defineNuxtConfig({
     }
   },
 
+  app: {
+    head: {
+      titleTemplate: '%s · pihka.al',
+      link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
+    },
+  },
+
   devtools: {
     enabled: true
   },

public/favicon.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 18">
+    <style>
+        .bg { fill: #000000; }
+        .fg { fill: #ffffff; }
+    </style>
+
+    <rect x="0" y="11" width="5" height="5" class="bg" />
+    <rect x="1" y="10" width="7" height="5" class="bg" />
+    <rect x="6" y="10" width="22" height="6" class="bg" />
+    <rect x="9" y="5" width="18" height="12" class="bg" />
+    <rect x="10" y="16" width="16" height="2" class="bg" />
+    <rect x="7" y="7" width="16" height="4" class="bg" />
+    <rect x="8" y="6" width="2" height="2" class="bg" />
+    <rect x="26" y="9" width="2" height="2" class="bg" />
+    <rect x="11" y="4" width="16" height="2" class="bg" />
+    <rect x="12" y="3" width="15" height="2" class="bg" />
+    <rect x="13" y="2" width="6" height="2" class="bg" />
+    <rect x="14" y="1" width="5" height="2" class="bg" />
+    <rect x="15" y="0" width="3" height="2" class="bg" />
+    <rect x="21" y="2" width="6" height="2" class="bg" />
+    <rect x="22" y="1" width="5" height="2" class="bg" />
+    <rect x="23" y="0" width="3" height="2" class="bg" />
+
+    <rect x="2" y="11" width="5" height="3" class="fg" />
+    <rect x="1" y="12" width="3" height="3" class="fg" />
+    <rect x="10" y="6" width="16" height="10" class="fg" />
+    <rect x="8" y="10" width="19" height="5" class="fg" />
+    <rect x="7" y="12" width="2" height="3" class="fg" />
+    <rect x="6" y="12" width="2" height="2" class="fg" />
+    <rect x="8" y="8" width="18" height="3" class="fg" />
+    <rect x="9" y="7" width="2" height="2" class="fg" />
+    <rect x="12" y="15" width="13" height="2" class="fg" />
+    <rect x="25" y="10" width="2" height="5" class="fg" />
+    <rect x="15" y="11" width="3" height="1" class="bg" />
+    <rect x="22" y="11" width="3" height="1" class="bg" />
+    <rect x="12" y="5" width="14" height="2" class="fg" />
+    <rect x="13" y="4" width="6" height="2" class="fg" />
+    <rect x="14" y="3" width="4" height="2" class="fg" />
+    <rect x="15" y="2" width="3" height="2" class="fg" />
+    <rect x="16" y="1" width="1" height="2" class="fg" />
+    <rect x="21" y="4" width="5" height="2" class="fg" />
+    <rect x="22" y="3" width="4" height="2" class="fg" />
+    <rect x="23" y="2" width="3" height="2" class="fg" />
+    <rect x="24" y="1" width="1" height="2" class="fg" />
+    <rect x="16" y="3" width="1" height="2" class="bg" />
+    <rect x="15" y="4" width="1" height="2" class="bg" />
+    <rect x="14" y="5" width="2" height="1" class="bg" />
+    <rect x="15" y="4" width="2" height="1" class="bg" />
+    <rect x="24" y="3" width="1" height="3" class="bg" />
+    <rect x="23" y="4" width="2" height="1" class="bg" />
+</svg>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

server/middleware/redirect.ts

@@ -19,12 +19,9 @@ export default defineEventHandler(async (event) => {
     where: eq(tables.links.path, path),
   });
 
-  if (!link) {
+  if (!link || link.disabled) {
-    throw createError({ statusCode: 404, message: "Not found" });
+    event.context.redirectNotFound = true;
-  }
+    return;
-
-  if (link.disabled) {
-    throw createError({ statusCode: 410, message: "This link has been disabled" });
   }
 
   return sendRedirect(event, link.url, 302);

shared/types/app.ts

@@ -1,3 +0,0 @@
-import type { InternalApi } from "nitropack/types";
-
-export type Link = InternalApi["/api/links"]["get"][number];