✨ init Open Preview website

.eslintrc

@@ -23,9 +23,6 @@
     "space-before-blocks": ["error", "always"],
     "space-infix-ops": ["error", { "int32Hint": false }],
 
-    // Typescript
-    "@typescript-eslint/type-annotation-spacing": "error",
-
     // Vuejs
     "vue/multi-word-component-names": 0,
     "vue/html-indent": ["error", 2],

LICENCE.md

@@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <[email protected]>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.

components/ColorModeButton.vue

@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <UButton :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'" color="gray" variant="ghost" aria-label="Theme" @click="isDark = !isDark" />
+    <UButton :ui="{ rounded: 'rounded-full' }" :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'" color="gray" variant="ghost" aria-label="Theme" @click="isDark = !isDark" />
     <template #fallback>
       <div class="h-8 w-8" />
     </template>

components/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <UPopover mode="hover">
     <template #default="{ open }">
-      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
+      <UButton :ui="{ rounded: 'rounded-full' }" color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
         <UIcon name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400 h-5 w-5" />
       </UButton>
     </template>

components/DefaultFooter.vue

@@ -1,8 +1,11 @@
 <template>
   <footer class="mt-auto border-t border-gray-200 dark:border-gray-800">
     <UContainer class="space-between flex h-14 items-center">
-      <span class="text-sm text-gray-500"> © {{ new Date().getFullYear() }} roiLeo.</span>
-      <UButton class="ml-auto" color="gray" size="md" label="View on GitHub" icon="i-simple-icons-github" to="https://github.com/roiLeo/Nuxtplate" target="_blank" />
+      <NuxtLink to="http://www.wtfpl.net" target="_blank" external>
+        <img class="h-4 mr-2 bg-white rounded-full" src="/img/WTFPL.svg" />
+      </NuxtLink>
+      <span class="text-sm text-gray-500"> {{ new Date().getFullYear() }} roiLeo.</span>
+      <UButton class="ml-auto" color="gray" size="md" label="View on GitHub" icon="i-simple-icons-github" to="https://github.com/roiLeo/open-preview" target="_blank" />
     </UContainer>
   </footer>
 </template>

components/DefaultNavbar.vue

@@ -1,11 +1,11 @@
 <template>
-  <header class="bg-background/75 border-b border-gray-200 dark:border-gray-800">
-    <UContainer class="flex h-14 items-center justify-between">
-      <NuxtLink to="/">Starter Nuxt</NuxtLink>
+  <header class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm">
+    <nav class="mt-4 relative max-w-2xl w-full bg-white border border-gray-200 rounded-[2rem] mx-2 py-2.5 flex items-center justify-between px-4 mx-auto dark:bg-neutral-900 dark:border-neutral-700">
+      <NuxtLink class="font-bold" to="/">OpenPreview</NuxtLink>
       <div class="flex">
         <ColorPicker />
         <ColorModeButton />
       </div>
-    </UContainer>
+    </nav>
   </header>
 </template>

components/InputSearchbar.vue

@@ -0,0 +1,29 @@
+<template>
+  <UFormGroup required class="flex-1">
+    <UInput
+      v-model="q"
+      name="q"
+      type="url"
+      placeholder="https://hmpg.net"
+      icon="i-heroicons-computer-desktop-20-solid"
+      autocomplete="off"
+      required
+      :ui="{ icon: { trailing: { pointer: '' } } }"
+    >
+      <template #trailing>
+        <UButton
+          v-show="q || q !== null"
+          color="gray"
+          variant="link"
+          icon="i-heroicons-x-mark-20-solid"
+          :padded="false"
+          @click="q = null"
+        />
+      </template>
+    </UInput>
+  </UFormGroup>
+</template>
+
+<script setup lang="ts">
+const q = defineModel({ type: String, default: null })
+</script>

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex min-h-screen flex-col">
+  <div class="px-4 sm:px-6 lg:px-8 max-w-2xl mx-auto relative gap-6 flex flex-col min-h-screen">
     <DefaultNavbar />
 
     <UContainer class="w-full">
@@ -9,11 +9,3 @@
     <DefaultFooter />
   </div>
 </template>
-
-<script setup lang="ts">
-useHead({
-  bodyAttrs: {
-    class: 'bg-white dark:bg-gray-900'
-  }
-})
-</script>

nuxt.config.ts

@@ -1,8 +1,20 @@
 export default defineNuxtConfig({
+  app: {
+    head: {
+      title: 'OpenPreview',
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1',
+      bodyAttrs: { class: 'bg-white dark:bg-gray-900' }
+    }
+  },
+
   modules: ['@nuxtjs/i18n', '@nuxt/ui'],
   ui: { global: true },
+
   colorMode: {
     preference: 'dark',
     classSuffix: ''
-  }
-})
+  },
+
+  compatibilityDate: '2024-09-02'
+})