Rebuilt littlefoxsoftware.xyz in Nuxt for testing.

2026-06-06 21:38:57 -05:00
parent c6be62a36c
commit 5d3010decf
10 changed files with 388 additions and 6 deletions
@@ -1,3 +1,59 @@
 <template>
-  <NuxtPage />
+  <main class="flex flex-col min-h-screen">
+    <header class="flex flex-row items-center p-8 gap-4 bg-base-100 shadow-xl">
+      <img class="w-1/5" src="~/assets/images/h_lfs_white.svg" alt="Little Fox Software" />
+      <input v-model="regex" class="input grow" type="text" placeholder="Search..." />
+      <button class="btn btn-ghost" @click="sortApps">
+        <ArrowDownAzIcon v-if="sort === 'AZ'" />
+        <ArrowDownZaIcon v-else />
+      </button>
+    </header>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-4 bg-base-200 grow">
+      <a v-for="app in filtered_apps"
+        class="card content-center items-center bg-base-100 saturate-0 hover:scale-102 hover:saturate-100 transition-all h-fit p-4"
+        :href="app.link">
+        <h3 class="card-title">{{ app.name }}</h3>
+        <img class="card-side" :src="app.img" />
+      </a>
+    </div>
+    <footer class="text-xs flex flex-col items-center p-4">
+      <p>Built by <a class="link" href="https://littlefoxsoftware.com" target="_blank">Little Fox Software</a></p>
+      <p>with <a class="link" href="https://nuxt.com" target="_blank">Nuxt</a> and <a class="link" href="https://daisyui.com" target="_blank">DaisyUI</a> </p>
+    </footer>
+  </main>
 </template>
+
+<script lang=ts setup>
+import { ArrowDownAzIcon, ArrowDownZaIcon } from '@lucide/vue';
+useHead({
+  htmlAttrs: { 'data-theme': 'halloween' }
+})
+
+const regex = ref('');
+const sort = ref('AZ');
+
+const apps = [
+  { name: 'Gitea', link: 'https://git.littlefoxsoftware.xyz', img: '_nuxt/assets/images/gitea.png' },
+  { name: 'Listmonk', link: 'https://newsletter.littlefoxsoftware.xyz', img: '_nuxt/assets/images/listmonk.png' },
+  { name: 'Nextcloud', link: 'https://cloud.littlefoxsoftware.xyz', img: '_nuxt/assets/images/nextcloud.png' },
+];
+const filtered_apps = computed(() => searchApps());
+
+function sortApps() {
+  if (sort.value === 'ZA') {
+    sort.value = 'AZ';
+    apps.sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name));
+  } else {
+    sort.value = 'ZA';
+    apps.sort((a, b) => b.name.toLocaleLowerCase().localeCompare(a.name));
+  }
+}
+
+function searchApps() {
+  if (regex.value.length >= 3) {
+    return apps.filter(app => app.name.toLowerCase().includes(regex.value));
+  } else {
+    return apps;
+  }
+}
+</script>