feat(nuxt): nuxt3 -> nuxt4

app/app.vue

@@ -0,0 +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: 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 min-h-[100vh] items-center justify-center">
+    <NuxtRouteAnnouncer />
+
+    <div
+      class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
+    >
+      <AppHeader />
+      <AppBody />
+    </div>
+  </div>
+</template>

app/assets/css/main.css

@@ -0,0 +1,28 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --ui-color-primary-50: oklch(98.2% 0.018 155.826);
+  --ui-color-primary-100: oklch(96.2% 0.044 156.743);
+  --ui-color-primary-200: oklch(92.5% 0.084 155.995);
+  --ui-color-primary-300: oklch(87.1% 0.15 154.449);
+  --ui-color-primary-400: oklch(79.5% 0.22 151.711);
+  --ui-color-primary-500: oklch(72.5% 0.232 149.579);
+  --ui-color-primary-600: oklch(62.9% 0.204 149.214);
+  --ui-color-primary-700: oklch(52.8% 0.162 150.069);
+  --ui-color-primary-800: oklch(44.9% 0.125 151.328);
+  --ui-color-primary-900: oklch(39.4% 0.1 152.535);
+  --ui-color-primary-950: oklch(26.7% 0.068 152.934);
+
+  --ui-color-neutral-50: oklch(98.5% 0 0);
+  --ui-color-neutral-100: oklch(96.7% 0.001 286.375);
+  --ui-color-neutral-200: oklch(92% 0.004 286.32);
+  --ui-color-neutral-300: oklch(87.1% 0.006 286.286);
+  --ui-color-neutral-400: oklch(70.5% 0.015 286.067);
+  --ui-color-neutral-500: oklch(55.2% 0.016 285.938);
+  --ui-color-neutral-600: oklch(44.2% 0.017 285.786);
+  --ui-color-neutral-700: oklch(37% 0.013 285.805);
+  --ui-color-neutral-800: oklch(27.4% 0.006 286.033);
+  --ui-color-neutral-900: oklch(21% 0.006 285.885);
+  --ui-color-neutral-950: oklch(14.1% 0.005 285.823);
+}

app/components/body/ApiModal.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const app = useAppStore();
+
+const baseApiUrl = useBaseApiUrl();
+const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
+</script>
+
+<template>
+  <UModal v-model:open="app.apiModalOpened" title="API Documentation">
+    <template #body>
+      <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="md" class="w-full">
+            <UInput
+              :model-value="baseApiUrl"
+              size="md"
+              class="w-full"
+              disabled
+              :ui="{ base: '!ps-12.5 !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-xs font-mono"
+                  ><span class="translate-y-px inline-block">GET</span></span
+                >
+              </template>
+            </UInput>
+            <UButton
+              color="neutral"
+              variant="subtle"
+              :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 pb-4 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="flex pb-4 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="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>
+    </template>
+  </UModal>
+</template>

app/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>

app/components/body/QRCodeForm.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { z } from "zod";
+
+const app = useAppStore();
+const baseApiUrl = useBaseApiUrl();
+
+const formSchema = z
+  .object({
+    content: z.string().min(1, "Required"),
+    hasLogo: z.boolean(),
+    logo: z.string().optional(),
+    format: z.enum(IMAGE_FORMATS),
+  })
+  .superRefine((data, ctx) => {
+    if (data.hasLogo && !data.logo) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Required",
+        path: ["logo"],
+      });
+    }
+  });
+
+const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");
+
+const state = reactive<{
+  hasLogo: boolean;
+  logo: string | undefined;
+  format: ImageFormat;
+  content: string | undefined;
+}>({
+  hasLogo: false,
+  logo: undefined,
+  format: IMAGE_FORMATS[0],
+  content: undefined,
+});
+
+const parsedState = computed(() => formSchema.safeParse(state));
+
+const apiUrl = computed<string>((previous) => {
+  if (!parsedState.value.success) return previous ?? "";
+
+  const { content, format, hasLogo, logo } = parsedState.value.data;
+  const params = new URLSearchParams({
+    ...(hasLogo && logo && { logo }),
+    format,
+    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 (!parsedState.value.success) return;
+
+  const { content, hasLogo, logo, format } = parsedState.value.data;
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);
+
+  app.qrCode = canvas.toDataURL(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;
+
+  if (!parsedState.value.success) return;
+  const { content, hasLogo, logo } = parsedState.value.data;
+
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);
+
+  const qrCode = canvas.toDataURL("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
+      :schema="formSchema"
+      :state="state"
+      :validate-on="['blur', 'change', 'input']"
+      class="space-y-4"
+    >
+      <UFormField
+        label="Username or link"
+        name="content"
+        :ui="{ error: 'hidden' }"
+      >
+        <UInput
+          v-model="state.content"
+          name="content"
+          icon="i-heroicons-user"
+          placeholder="Your username or profile link"
+          class="w-full"
+          @input="updateQRCode"
+        />
+      </UFormField>
+
+      <UFormField name="logo" :ui="{ error: 'hidden' }">
+        <template #label>
+          <UCheckbox
+            v-model="state.hasLogo"
+            class="mb-1.5"
+            label="Logo"
+            @change="updateQRCode"
+          />
+        </template>
+
+        <USelectMenu
+          v-model="state.logo"
+          name="logo"
+          icon="i-heroicons-photo"
+          :items="unreadonly(LOGOS)"
+          :disabled="!state.hasLogo"
+          placeholder="Select logo"
+          class="w-full"
+          @change="updateQRCode"
+        >
+          <template #item-label="{ item }">
+            {{ capitalize(item) }}
+          </template>
+
+          <template v-if="state.logo">{{ capitalize(state.logo) }}</template>
+        </USelectMenu>
+      </UFormField>
+
+      <UFormField label="Format" name="format">
+        <USelectMenu
+          v-model="state.format"
+          name="format"
+          icon="i-heroicons-document-duplicate"
+          :items="unreadonly(IMAGE_FORMATS)"
+          placeholder="Select format"
+          class="w-full"
+          @change="updateQRCode"
+        >
+          <template #item-label="{ item }">
+            {{ upperCase(item) }}
+          </template>
+
+          {{ upperCase(state.format) }}
+        </USelectMenu>
+      </UFormField>
+
+      <UFormField label="API">
+        <template #hint>
+          <UButton
+            size="md"
+            color="neutral"
+            variant="link"
+            icon="i-heroicons-question-mark-circle"
+            @click="openApiModal"
+          />
+        </template>
+
+        <UButtonGroup size="sm" class="w-full">
+          <UInput
+            v-model="apiUrl"
+            disabled
+            placeholder="Please fill all fields first"
+            class="w-full"
+          />
+          <UButton
+            color="neutral"
+            variant="subtle"
+            :disabled="!isValidApiUrl"
+            :icon="copyUrlIcon"
+            @click="copyUrl"
+          />
+        </UButtonGroup>
+      </UFormField>
+
+      <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>

app/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>

app/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="neutral"
+          variant="ghost"
+          icon="i-uil-github"
+          aria-label="Git 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>

app/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="neutral"
+    variant="ghost"
+    aria-label="Theme"
+    class="w-8 h-8"
+    @click="isDark = !isDark"
+  />
+</template>

app/composables/useBaseUrl.ts

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

app/composables/useCopyable.ts

@@ -0,0 +1,29 @@
+export const useCopyable = (
+  valueOrCallback:
+    | string
+    | Ref<string>
+    | (() => PromiseLike<string>)
+    | (() => PromiseLike<void>),
+) => {
+  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 };
+};

app/stores/app.ts

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