chore: docker restart always

.github/workflows/docker-build.yml

@@ -0,0 +1,28 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push Docker image
+        run: |
+          docker build -t pihkaal/simple-qr:latest .
+          docker push pihkaal/simple-qr:latest

README.md

@@ -1 +1,36 @@
-# simple-qr
+<h1 align="center">
+    <br>
+    <img src="https://i.imgur.com/an3wOdO.png" alt="QRCode Image" width="200">
+    <br>
+    simple-qr.com
+    <br>
+</h1>
+
+<h4 align="center">Simple, bullshit-free QR code generator with straightforward API.</h4>
+
+<p align="center">
+    <a href="https://nuxt.com">
+        <img src="https://img.shields.io/badge/nuxt-4ade80?style=for-the-badge&logo=vite&logoColor=white">
+    </a>
+    <a href="https://typescriptlang.org">
+        <img src="https://img.shields.io/badge/TypeScript-007acc?style=for-the-badge&logo=typescript&logoColor=white">
+    </a>
+</p>
+
+<p align="center" id="links">
+    <a href="#description">Description</a> •
+    <a href="https://simple-qr.com">Visit it</a> •
+    <a href="#license">License</a>
+</p>
+
+<br>
+
+## Description
+
+I created this side project to learn more about Nuxt and Vue, also because I needed a simple way to generate QR codes, but all websites I found were full of ads and were over complicated.
+
+<br>
+
+## License
+
+This project is <a href="https://opensource.org/licenses/MIT">MIT</a> licensed.

app.vue

@@ -1,402 +1,33 @@
 <script setup lang="ts">
+const TITLE = "Simple QRCode Generator";
+const DESCRIPTION =
+  "Simple, bullshit-free QR code generator with straightforward API.";
+const IMAGE = "/thumbnail.png";
+
 useSeoMeta({
-  title: "Simple QRCode Generator",
-  description: "Simple, bullshit-free QR code generator.",
-});
-
-import { renderQRCodeToCanvas } from "@/utils/renderer";
-import { IMAGE_FORMATS, LOGOS } from "@/utils/settings";
-
-const form = ref(null);
-const qrCode = ref(undefined);
-
-const copyUrlIcon = ref("i-heroicons-clipboard-document");
-const copyBaseApiUrlIcon = ref("i-heroicons-clipboard-document");
-const copyImageIcon = ref("i-heroicons-clipboard-document");
-const copyImageLabel = ref("Copy");
-
-const isQRCodeEmpty = computed(() => !qrCode.value);
-const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp");
-
-const isApiModelOpen = ref(false);
-
-const state = reactive({
-  hasLogo: false,
-  logo: undefined,
-  format: IMAGE_FORMATS[0],
-  content: undefined,
-});
-
-const firstBlured = ref(false);
-
-const stateErrors = computed(() => ({
-  content: firstBlured.value && !state.content,
-  logo: firstBlured.value && state.hasLogo && !state.logo,
-}));
-
-const isValidState = computed(
-  () =>
-    state.content &&
-    ((state.hasLogo && state.logo) || !state.hasLogo) &&
-    state.format,
-);
-
-const BASE_API_URL = "https://simple-qr.com/api";
-
-const apiUrl = computed(() => {
-  if (!isValidState.value) return "";
-
-  const params = new URLSearchParams({
-    ...(state.hasLogo && { logo: state.logo }),
-    format: state.format,
-    content: state.content,
-  });
-
-  return `${BASE_API_URL}?${params}`;
-});
-
-const updateQRCode = async () => {
-  await nextTick();
-
-  if (!isValidState.value) return;
-
-  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
-
-  qrCode.value = canvas.toDataURL(`image/${state.format}`);
-};
-
-const copyUrl = async () => {
-  if (!isValidState.value) return;
-
-  await navigator.clipboard.writeText(apiUrl.value);
-
-  copyUrlIcon.value = "i-heroicons-clipboard-document-check";
-  setTimeout(() => {
-    copyUrlIcon.value = "i-heroicons-clipboard-document";
-  }, 3000);
-};
-
-const copyBaseApiUrl = async () => {
-  await navigator.clipboard.writeText(BASE_API_URL);
-
-  copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document-check";
-  setTimeout(() => {
-    copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document";
-  }, 3000);
-};
-
-const downloadQRCode = () => {
-  const link = document.createElement("a");
-  link.href = qrCode.value;
-  link.download = `qrcode.${state.format}`;
-
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const copyQRCode = async () => {
-  if (isQRCodeEmpty.value) return;
-
-  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
-
-  const qrCode = canvas.toDataURL(`image/png`);
-
-  const blob = await (await fetch(qrCode)).blob();
-  const item = new ClipboardItem({ "image/png": blob });
-  await navigator.clipboard.write([item]);
-
-  copyImageIcon.value = "i-heroicons-clipboard-document-check";
-  copyImageLabel.value = "Copied!";
-  setTimeout(() => {
-    copyImageIcon.value = "i-heroicons-clipboard-document";
-    copyImageLabel.value = "Copy";
-  }, 3000);
-};
-
-const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
-
-const upperCase = (str: string) => str.toUpperCase();
-
-const arrayToUnion = (array: string[]) =>
-  array.map((x) => `"${x}"`).join(" | ");
-
-const colorMode = useColorMode();
-const isDark = computed({
-  get() {
-    return colorMode.value === "dark";
-  },
-  set() {
-    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
-  },
+  title: TITLE,
+  description: DESCRIPTION,
+  ogType: "website",
+  ogTitle: TITLE,
+  ogDescription: DESCRIPTION,
+  ogImage: IMAGE,
+  themeColor: "#4ade80",
+  twitterCard: "summary",
+  twitterTitle: TITLE,
+  twitterDescription: DESCRIPTION,
+  twitterImage: IMAGE,
 });
 </script>
 
 <template>
-  <div role="main" class="flex h-[100vh] items-center justify-center">
+  <div role="main" class="flex min-h-[100vh] items-center justify-center">
     <NuxtRouteAnnouncer />
 
     <div
-      class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
+      class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
     >
-      <div
-        class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
-      >
-        <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
-
-        <div class="flex gap-x-1">
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-uil-github"
-            aria-label="Github repo"
-            class="w-8 h-8"
-            target="_blank"
-            to="https://github.com/pihkaal/simple-qr"
-          />
-
-          <ClientOnly>
-            <UButton
-              :icon="
-                isDark
-                  ? 'i-heroicons-moon-20-solid'
-                  : 'i-heroicons-sun-20-solid'
-              "
-              color="gray"
-              variant="ghost"
-              aria-label="Theme"
-              class="w-8 h-8"
-              @click="isDark = !isDark"
-            />
-            <template #fallback>
-              <div class="w-8 h-8" />
-            </template>
-          </ClientOnly>
+      <AppHeader />
+      <AppBody />
     </div>
   </div>
-      <div class="flex justify-between space-x-8">
-        <img
-          :src="qrCodeSrc"
-          class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
-        />
-
-        <div class="flex-1 flex flex-col justify-center">
-          <UForm ref="form" :state="state" class="space-y-4">
-            <UFormGroup
-              label="Username or link"
-              name="content"
-              :error="stateErrors.content"
-            >
-              <UInput
-                v-model="state.content"
-                icon="i-heroicons-user"
-                placeholder="Your username or profile link"
-                @input="updateQRCode"
-                @blur="firstBlured = true"
-              />
-            </UFormGroup>
-
-            <UFormGroup name="logo" :error="stateErrors.logo">
-              <template #label>
-                <UCheckbox
-                  v-model="state.hasLogo"
-                  class="mb-1.5"
-                  label="Logo"
-                  @change="updateQRCode"
-                  @blur="firstBlured = true"
-                />
-              </template>
-
-              <USelectMenu
-                v-model="state.logo"
-                icon="i-heroicons-photo"
-                :options="LOGOS"
-                :disabled="!state.hasLogo"
-                placeholder="Select logo"
-                searchable
-                clear-search-on-close
-                @change="updateQRCode"
-                @blur="firstBlured = true"
-              >
-                <template #label>
-                  <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
-                </template>
-
-                <template #option="props">
-                  <span>{{ capitalize(props.option) }}</span>
-                </template>
-              </USelectMenu>
-            </UFormGroup>
-
-            <UFormGroup label="Format" name="format">
-              <USelectMenu
-                v-model="state.format"
-                icon="i-heroicons-document-duplicate"
-                :options="IMAGE_FORMATS"
-                placeholder="Select format"
-                @change="updateQRCode"
-                @blur="firstBlured = true"
-              >
-                <template #label>
-                  <span v-if="state.format">{{ upperCase(state.format) }}</span>
-                </template>
-
-                <template #option="props">
-                  <span>{{ upperCase(props.option) }}</span>
-                </template>
-              </USelectMenu>
-            </UFormGroup>
-
-            <UFormGroup label="API">
-              <template #hint>
-                <UButton
-                  size="md"
-                  color="gray"
-                  variant="link"
-                  icon="i-heroicons-question-mark-circle"
-                  @click="isApiModelOpen = true"
-                />
-              </template>
-
-              <UButtonGroup size="sm" orientation="horizontal" class="w-full">
-                <UInput
-                  v-model="apiUrl"
-                  disabled
-                  placeholder="Please fill all fields first"
-                  class="w-full"
-                />
-                <UButton
-                  color="gray"
-                  :disabled="!isValidState"
-                  :icon="copyUrlIcon"
-                  @click="copyUrl"
-                />
-              </UButtonGroup>
-            </UFormGroup>
-
-            <div class="flex space-x-4 pt-2">
-              <UButton
-                class="flex-1"
-                block
-                :icon="copyImageIcon"
-                size="md"
-                color="primary"
-                variant="solid"
-                :label="copyImageLabel"
-                :trailing="false"
-                :disabled="isQRCodeEmpty"
-                @click="copyQRCode"
-              />
-
-              <UButton
-                class="flex-1"
-                block
-                icon="i-heroicons-arrow-down-tray"
-                size="md"
-                color="primary"
-                variant="solid"
-                label="Download"
-                :trailing="false"
-                :disabled="isQRCodeEmpty"
-                @click="downloadQRCode"
-              />
-            </div>
-          </UForm>
-        </div>
-      </div>
-    </div>
-
-    <UModal v-model="isApiModelOpen">
-      <UCard
-        :ui="{
-          ring: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3
-              class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
-            >
-              API Documentation
-            </h3>
-            <UButton
-              color="gray"
-              variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
-              class="-my-1"
-              @click="isApiModelOpen = false"
-            />
-          </div>
-        </template>
-
-        <div class="flex flex-col space-y-8">
-          <p>
-            You can easily generate QRCodes by using the API, with no rate
-            limitation.
-            <br />
-            <br />
-            If you are not sure how to use the API, you can fill the QRCode form
-            and copy the generated API URL.
-          </p>
-
-          <div class="space-y-3">
-            <h2 class="font-bold text-lg">Base API URL</h2>
-
-            <UButtonGroup size="sm" orientation="horizontal" class="w-full">
-              <UInput
-                :model-value="BASE_API_URL"
-                size="sm"
-                class="w-full"
-                disabled
-                :ui="{ base: '!ps-12 !cursor-text font-mono' }"
-              >
-                <template #leading>
-                  <span
-                    class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm"
-                    >GET</span
-                  >
-                </template>
-              </UInput>
-              <UButton
-                color="gray"
-                :icon="copyBaseApiUrlIcon"
-                @click="copyBaseApiUrl"
-              />
-            </UButtonGroup>
-          </div>
-
-          <div class="space-y-3">
-            <h2 class="font-bold text-lg">Query parameters</h2>
-            <div
-              class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
-            >
-              <div class="pt-1 flex justify-between gap-x-5">
-                <span class="text-primary font-semibold">format</span>
-                <span class="text-slate-700 dark:text-slate-200 text-right">{{
-                  arrayToUnion(IMAGE_FORMATS)
-                }}</span>
-              </div>
-
-              <div class="pt-4 flex justify-between gap-x-5">
-                <span class="text-primary font-semibold">logo</span>
-                <span class="text-slate-700 dark:text-slate-200 text-right">{{
-                  arrayToUnion(LOGOS)
-                }}</span>
-              </div>
-
-              <div class="pt-4 flex justify-between gap-x-5">
-                <span class="text-primary font-semibold">content</span>
-                <span class="text-slate-700 dark:text-slate-200 text-right"
-                  >string</span
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </UCard>
-    </UModal>
-  </div>
 </template>

components/body/ApiModal.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const app = useAppStore();
+
+const closeModal = () => {
+  app.apiModalOpened = false;
+};
+
+const baseApiUrl = useBaseApiUrl();
+const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
+</script>
+
+<template>
+  <UModal v-model="app.apiModalOpened">
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3
+            class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
+          >
+            API Documentation
+          </h3>
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
+            class="-my-1"
+            @click="closeModal"
+          />
+        </div>
+      </template>
+
+      <div class="flex flex-col space-y-8">
+        <p>
+          You can easily generate QRCodes by using the API, with no rate
+          limitation.
+          <br />
+          <br />
+          If you are not sure how to use the API, you can fill the QRCode form
+          and copy the generated API URL.
+        </p>
+
+        <div class="space-y-3">
+          <h2 class="font-bold text-lg">Base API URL</h2>
+
+          <UButtonGroup size="sm" orientation="horizontal" class="w-full">
+            <UInput
+              :model-value="baseApiUrl"
+              size="sm"
+              class="w-full"
+              disabled
+              :ui="{ base: '!ps-12 !cursor-text font-mono' }"
+            >
+              <template #leading>
+                <span
+                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm"
+                  >GET</span
+                >
+              </template>
+            </UInput>
+            <UButton
+              color="gray"
+              :icon="baseApiUrlIcon"
+              @click="copyBaseApiUrl"
+            />
+          </UButtonGroup>
+        </div>
+
+        <div class="space-y-3">
+          <h2 class="font-bold text-lg">Query parameters</h2>
+          <div
+            class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
+          >
+            <div class="pt-1 flex justify-between gap-x-5">
+              <span class="text-primary font-semibold">format</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right">{{
+                arrayToUnion(IMAGE_FORMATS)
+              }}</span>
+            </div>
+
+            <div class="pt-4 flex justify-between gap-x-5">
+              <span class="text-primary font-semibold">logo</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right">{{
+                arrayToUnion(LOGOS)
+              }}</span>
+            </div>
+
+            <div class="pt-4 flex justify-between gap-x-5">
+              <span class="text-primary font-semibold">content</span>
+              <span class="text-slate-700 dark:text-slate-200 text-right"
+                >string</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+  </UModal>
+</template>

components/body/AppBody.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col sm:flex-row justify-between gap-4">
+    <QRCodePreview />
+
+    <QRCodeForm />
+  </div>
+
+  <ApiModal />
+</template>

components/body/QRCodeForm.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+const app = useAppStore();
+const baseApiUrl = useBaseApiUrl();
+
+const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");
+
+const firstBlured = ref(false);
+
+const state = reactive({
+  hasLogo: false,
+  logo: undefined,
+  format: IMAGE_FORMATS[0],
+  content: undefined,
+});
+
+const stateErrors = computed(() => ({
+  content: firstBlured.value && !state.content,
+  logo: firstBlured.value && state.hasLogo && !state.logo,
+}));
+
+const isValidState = computed(
+  () =>
+    ((state.hasLogo && state.logo) || !state.hasLogo) &&
+    state.content &&
+    state.format,
+);
+
+const apiUrl = computed((previous) => {
+  if (!isValidState.value) return previous;
+
+  const params = new URLSearchParams({
+    ...(state.hasLogo && { logo: state.logo }),
+    format: state.format,
+    content: state.content,
+  });
+
+  return `${baseApiUrl}?${params}`;
+});
+const isValidApiUrl = computed(() => !!apiUrl.value);
+
+const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
+
+const openApiModal = () => {
+  app.apiModalOpened = true;
+};
+
+const updateQRCode = async () => {
+  await nextTick();
+
+  if (!isValidState.value) return;
+
+  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+
+  app.qrCode = canvas.toDataURL(`image/${state.format}`);
+};
+
+const downloadQRCode = () => {
+  const link = document.createElement("a");
+  link.href = app.qrCode;
+  link.download = `qrcode.${state.format}`;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const {
+  copy: copyQRCode,
+  icon: copyImageIcon,
+  label: copyImageLabel,
+} = useCopyable(async () => {
+  if (isQRCodeEmpty.value) return;
+
+  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+
+  const qrCode = canvas.toDataURL(`image/png`);
+
+  const blob = await (await fetch(qrCode)).blob();
+  const item = new ClipboardItem({ "image/png": blob });
+  await navigator.clipboard.write([item]);
+});
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col justify-center">
+    <UForm ref="form" :state="state" class="space-y-4">
+      <UFormGroup
+        label="Username or link"
+        name="content"
+        :error="stateErrors.content"
+      >
+        <UInput
+          v-model="state.content"
+          icon="i-heroicons-user"
+          placeholder="Your username or profile link"
+          @input="updateQRCode"
+          @blur="firstBlured = true"
+        />
+      </UFormGroup>
+
+      <UFormGroup name="logo" :error="stateErrors.logo">
+        <template #label>
+          <UCheckbox
+            v-model="state.hasLogo"
+            class="mb-1.5"
+            label="Logo"
+            @change="updateQRCode"
+            @blur="firstBlured = true"
+          />
+        </template>
+
+        <USelectMenu
+          v-model="state.logo"
+          icon="i-heroicons-photo"
+          :options="LOGOS"
+          :disabled="!state.hasLogo"
+          placeholder="Select logo"
+          searchable
+          clear-search-on-close
+          @change="updateQRCode"
+          @blur="firstBlured = true"
+        >
+          <template #label>
+            <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
+          </template>
+
+          <template #option="props">
+            <span>{{ capitalize(props.option) }}</span>
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+      <UFormGroup label="Format" name="format">
+        <USelectMenu
+          v-model="state.format"
+          icon="i-heroicons-document-duplicate"
+          :options="IMAGE_FORMATS"
+          placeholder="Select format"
+          @change="updateQRCode"
+          @blur="firstBlured = true"
+        >
+          <template #label>
+            <span v-if="state.format">{{ upperCase(state.format) }}</span>
+          </template>
+
+          <template #option="props">
+            <span>{{ upperCase(props.option) }}</span>
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+      <UFormGroup label="API">
+        <template #hint>
+          <UButton
+            size="md"
+            color="gray"
+            variant="link"
+            icon="i-heroicons-question-mark-circle"
+            @click="openApiModal"
+          />
+        </template>
+
+        <UButtonGroup size="sm" orientation="horizontal" class="w-full">
+          <UInput
+            v-model="apiUrl"
+            disabled
+            placeholder="Please fill all fields first"
+            class="w-full"
+          />
+          <UButton
+            color="gray"
+            :disabled="!isValidApiUrl"
+            :icon="copyUrlIcon"
+            @click="copyUrl"
+          />
+        </UButtonGroup>
+      </UFormGroup>
+
+      <div class="flex space-x-4 pt-2">
+        <UButton
+          class="flex-1"
+          block
+          :icon="copyImageIcon"
+          size="md"
+          color="primary"
+          variant="solid"
+          :label="copyImageLabel"
+          :trailing="false"
+          :disabled="isQRCodeEmpty"
+          @click="copyQRCode"
+        />
+
+        <UButton
+          class="flex-1"
+          block
+          icon="i-heroicons-arrow-down-tray"
+          size="md"
+          color="primary"
+          variant="solid"
+          label="Download"
+          :trailing="false"
+          :disabled="isQRCodeEmpty"
+          @click="downloadQRCode"
+        />
+      </div>
+    </UForm>
+  </div>
+</template>

components/body/QRCodePreview.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const app = useAppStore();
+</script>
+
+<template>
+  <img
+    :src="app.qrCode"
+    class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
+  />
+</template>

components/header/AppHeader.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
+  >
+    <h1 class="text-2xl sm:text-4xl font-bold">Simple QRCode</h1>
+
+    <ClientOnly>
+      <div class="flex gap-x-1 animate-fadeIn">
+        <UButton
+          color="gray"
+          variant="ghost"
+          icon="i-uil-github"
+          aria-label="Github repo"
+          class="w-8 h-8"
+          target="_blank"
+          to="https://github.com/pihkaal/simple-qr"
+        />
+
+        <ThemeSwitcher />
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 200ms ease-in-out forwards;
+}
+</style>

components/header/ThemeSwitcher.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+  },
+});
+</script>
+
+<template>
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+    color="gray"
+    variant="ghost"
+    aria-label="Theme"
+    class="w-8 h-8"
+    @click="isDark = !isDark"
+  />
+</template>

composables/useBaseUrl.ts

@@ -0,0 +1 @@
+export const useBaseApiUrl = () => `${useRequestURL().origin}/api`;

composables/useCopyable.ts

@@ -0,0 +1,25 @@
+export const useCopyable = (
+  valueOrCallback: string | Ref<string> | (() => PromiseLike<string>),
+) => {
+  const icon = ref("i-heroicons-clipboard-document");
+  const label = ref("Copy");
+
+  const copy = async () => {
+    if (typeof valueOrCallback === "function") {
+      await valueOrCallback();
+    } else {
+      const value = unref(valueOrCallback);
+      await navigator.clipboard.writeText(value);
+    }
+
+    icon.value = "i-heroicons-clipboard-document-check";
+    label.value = "Copied!";
+
+    setTimeout(() => {
+      icon.value = "i-heroicons-clipboard-document";
+      label.value = "Copy";
+    }, 3000);
+  };
+
+  return { icon, copy, label };
+};

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   simple-qr:
-    build: .
+    image: pihkaal/simple-qr:latest
     networks:
       - web
     labels:
@@ -10,6 +10,7 @@ services:
       - "traefik.http.services.simple-qr.loadbalancer.server.port=3000"
       - "traefik.http.routers.simple-qr.tls=true"
       - "traefik.http.routers.simple-qr.tls.certResolver=myresolver"
+    restart: always
 
 networks:
   web:

nuxt.config.ts

@@ -2,5 +2,11 @@
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
   devtools: { enabled: true },
-  modules: ["@nuxt/eslint", "@nuxt/ui"],
+  modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
+  components: [
+    {
+      path: "~/components",
+      pathPrefix: false,
+    },
+  ],
 });

package.json

@@ -18,6 +18,7 @@
     "@iconify-json/uil": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
     "@nuxt/ui": "^2.18.6",
+    "@pinia/nuxt": "^0.5.5",
     "canvas": "^2.11.2",
     "nuxt": "^3.13.0",
     "qrcode": "^1.5.4",

pnpm-lock.yaml

@@ -19,6 +19,9 @@ importers:
       "@nuxt/ui":
         specifier: ^2.18.6
         version: 2.18.6(magicast@0.3.5)(qrcode@1.5.4)(rollup@4.22.5)(vite@5.4.8(@types/node@22.7.4)(terser@5.34.1))(vue@3.5.10(typescript@5.5.4))
+      "@pinia/nuxt":
+        specifier: ^0.5.5
+        version: 0.5.5(magicast@0.3.5)(rollup@4.22.5)(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))
       canvas:
         specifier: ^2.11.2
         version: 2.11.2
@@ -1700,6 +1703,12 @@ packages:
       }
     engines: { node: ">= 10.0.0" }
 
+  "@pinia/nuxt@0.5.5":
+    resolution:
+      {
+        integrity: sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==,
+      }
+
   "@pkgjs/parseargs@0.11.0":
     resolution:
       {
@@ -5676,6 +5685,21 @@ packages:
       }
     engines: { node: ">=0.10.0" }
 
+  pinia@2.2.4:
+    resolution:
+      {
+        integrity: sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==,
+      }
+    peerDependencies:
+      "@vue/composition-api": ^1.4.0
+      typescript: ">=4.4.4"
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      "@vue/composition-api":
+        optional: true
+      typescript:
+        optional: true
+
   pirates@4.0.6:
     resolution:
       {
@@ -8782,6 +8806,19 @@ snapshots:
       "@parcel/watcher-win32-ia32": 2.4.1
       "@parcel/watcher-win32-x64": 2.4.1
 
+  "@pinia/nuxt@0.5.5(magicast@0.3.5)(rollup@4.22.5)(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))":
+    dependencies:
+      "@nuxt/kit": 3.13.2(magicast@0.3.5)(rollup@4.22.5)
+      pinia: 2.2.4(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))
+    transitivePeerDependencies:
+      - "@vue/composition-api"
+      - magicast
+      - rollup
+      - supports-color
+      - typescript
+      - vue
+      - webpack-sources
+
   "@pkgjs/parseargs@0.11.0":
     optional: true
 
@@ -11384,6 +11421,14 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pinia@2.2.4(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4)):
+    dependencies:
+      "@vue/devtools-api": 6.6.4
+      vue: 3.5.10(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.5.10(typescript@5.5.4))
+    optionalDependencies:
+      typescript: 5.5.4
+
   pirates@4.0.6: {}
 
   pkg-types@1.2.0:

stores/app.ts

@@ -0,0 +1,6 @@
+export const useAppStore = defineStore("appStore", {
+  state: () => ({
+    qrCode: "/default.webp",
+    apiModalOpened: false,
+  }),
+});

utils/formatting.ts

@@ -0,0 +1,7 @@
+export const capitalize = (str: string) =>
+  str.charAt(0).toUpperCase() + str.slice(1);
+
+export const upperCase = (str: string) => str.toUpperCase();
+
+export const arrayToUnion = (array: string[]) =>
+  array.map((x) => `"${x}"`).join(" | ");