feat: repo aside article

justserdar · Mar 12, 2024 · 7b77955 · 7b77955
1 parent 5676162
commit 7b77955
Show file tree

Hide file tree

Showing 18 changed files with 7,767 additions and 0 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+TURSO_DB_URL=
+TURSO_DB_AUTH_TOKEN=
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/README.md b/README.md
@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/app.vue b/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <main class="min-h-[100vhs]">
+    <NuxtPage />
+  </main>
+</template>
diff --git a/drizzle.config.ts b/drizzle.config.ts
@@ -0,0 +1,10 @@
+import type { Config } from "drizzle-kit";
+
+export default {
+  schema: "server/database/schema.ts",
+  driver: "turso",
+  dbCredentials: {
+    url: process.env.TURSO_DB_URL as string,
+    authToken: process.env.TURSO_DB_AUTH_TOKEN as string,
+  },
+} satisfies Config;
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['@nuxtjs/tailwindcss']
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "db:push": "drizzle-kit push:sqlite",
+    "db:studio": "drizzle-kit studio",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@libsql/client": "^0.5.1",
+    "drizzle-kit": "^0.20.14",
+    "drizzle-orm": "^0.29.4",
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.11.4"
+  }
+}
diff --git a/pages/index.vue b/pages/index.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+const errorMessage = ref<string | null>(null);
+
+export interface Ticket {
+  name: string,
+  email: string,
+  subject: string,
+  description: string,
+
+}
+
+const handleSubmit = async (e: Event) => {
+  if (!(e.target instanceof HTMLFormElement)) return;
+  errorMessage.value = null;
+  const formData = new FormData(e.target);
+  try {
+    await $fetch("/api/tickets/create", {
+      method: "POST",
+      body: <Ticket>{
+        name: formData.get("name"),
+        email: formData.get("email"),
+        subject: formData.get("subject"),
+        description: formData.get("description"),
+      }
+    });
+
+  } catch (e) {
+    const { data: error } = e as {
+      data: {
+        message: string;
+      };
+    };
+    errorMessage.value = error.message;
+  }
+};
+</script>
+
+<template>
+
+  <section class="m-auto px-6 mt-10">
+    <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
+      <div class="flex justify-between">
+        <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Create Ticket</h2>
+        <NuxtLink to="/tickets"
+          class="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
+          View all Tickets
+        </NuxtLink>
+      </div>
+      <form @submit.prevent="handleSubmit">
+        <div class="w-full grid grid-cols-2 gap-6 mt-4">
+          <div class="col-span-2 md:col-span-1">
+            <label class="text-gray-700 dark:text-gray-200" for="username">Name</label>
+            <input id="username" type="text" name="name"
+              class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring">
+          </div>
+
+          <div class="col-span-2 md:col-span-1">
+            <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
+            <input id="emailAddress" type="email" name="email"
+              class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring">
+          </div>
+
+          <div class="col-span-2">
+            <label class="text-gray-700 dark:text-gray-200" for="subject">Subject</label>
+            <input id="subject" type="text" name="subject"
+              class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring">
+          </div>
+
+          <div class="col-span-2">
+            <label class="text-gray-700 dark:text-gray-200" for="description">Description</label>
+            <textarea id="description" type="description" name="description"
+              class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"></textarea>
+          </div>
+
+          <div>
+            <p class="error">{{ errorMessage }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-end mt-6">
+          <button
+            class="px-8 py-2.5 leading-5 text-white transition-colors duration-300 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
+        </div>
+      </form>
+      <a href="https://merakiui.com/components/application-ui/forms">Component from Meraki UI, check their awesome
+        components. </a>
+    </div>
+  </section>
+</template>
diff --git a/pages/tickets.vue b/pages/tickets.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+const { data: tickets, pending, error, status, refresh } = await useFetch("/api/tickets", {
+    method: "GET",
+    immediate: false, // Don't fire automagically 
+    server: false, // Don't auto-fire automagically serverside - Nitro
+});
+</script>
+
+<template>
+
+    <section class="container px-4 mt-10 mx-auto">
+        <div class="flex justify-between">
+            <h2 class="text-lg font-medium text-gray-800 dark:text-white">Tickets</h2>
+            <div class="flex items-center gap-x-4 justify-between mt-6">
+                <NuxtLink
+                to="/"
+                    class="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
+                    Create Ticket
+                </NuxtLink>
+                <button v-if="pending == false" @click="refresh()"
+                    class="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
+                    <span>
+                        Refresh
+                    </span>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 h-5 rtl:-scale-x-100">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div class="flex flex-col mt-6">
+            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                    <div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
+
+                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                            <thead class="bg-gray-50 dark:bg-gray-800">
+                                <tr>
+                                    <th scope="col"
+                                        class="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                                        <button class="flex items-center gap-x-3 focus:outline-none">
+                                            <span>Name</span>
+
+                                            <svg class="h-3" viewBox="0 0 10 11" fill="none"
+                                                xmlns="http://www.w3.org/2000/svg">
+                                                <path
+                                                    d="M2.13347 0.0999756H2.98516L5.01902 4.79058H3.86226L3.45549 3.79907H1.63772L1.24366 4.79058H0.0996094L2.13347 0.0999756ZM2.54025 1.46012L1.96822 2.92196H3.11227L2.54025 1.46012Z"
+                                                    fill="currentColor" stroke="currentColor" stroke-width="0.1" />
+                                                <path
+                                                    d="M0.722656 9.60832L3.09974 6.78633H0.811638V5.87109H4.35819V6.78633L2.01925 9.60832H4.43446V10.5617H0.722656V9.60832Z"
+                                                    fill="currentColor" stroke="currentColor" stroke-width="0.1" />
+                                                <path
+                                                    d="M8.45558 7.25664V7.40664H8.60558H9.66065C9.72481 7.40664 9.74667 7.42274 9.75141 7.42691C9.75148 7.42808 9.75146 7.42993 9.75116 7.43262C9.75001 7.44265 9.74458 7.46304 9.72525 7.49314C9.72522 7.4932 9.72518 7.49326 9.72514 7.49332L7.86959 10.3529L7.86924 10.3534C7.83227 10.4109 7.79863 10.418 7.78568 10.418C7.77272 10.418 7.73908 10.4109 7.70211 10.3534L7.70177 10.3529L5.84621 7.49332C5.84617 7.49325 5.84612 7.49318 5.84608 7.49311C5.82677 7.46302 5.82135 7.44264 5.8202 7.43262C5.81989 7.42993 5.81987 7.42808 5.81994 7.42691C5.82469 7.42274 5.84655 7.40664 5.91071 7.40664H6.96578H7.11578V7.25664V0.633865C7.11578 0.42434 7.29014 0.249976 7.49967 0.249976H8.07169C8.28121 0.249976 8.45558 0.42434 8.45558 0.633865V7.25664Z"
+                                                    fill="currentColor" stroke="currentColor" stroke-width="0.3" />
+                                            </svg>
+                                        </button>
+                                    </th>
+
+                                    <th scope="col"
+                                        class="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                                        e-mail
+                                    </th>
+
+                                    <th scope="col"
+                                        class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                                        subject
+                                    </th>
+
+                                    <th scope="col"
+                                        class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                                        description</th>
+
+                                    <th scope="col" class="relative py-3.5 px-4">
+                                        <span class="sr-only">Edit</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
+                                <tr v-if="pending == true">
+                                    <td class="px-4 py-4 text-sm whitespace-nowrap">
+                                        <button @click="refresh()"
+                                            class="px-4 py-1 border border-gray-300 text-gray-500 transition-colors duration-200 rounded-lg dark:text-gray-300 hover:bg-gray-100">
+                                            Fetch
+                                        </button>
+                                    </td>
+                                    <td class="px-4 py-4 text-sm font-medium whitespace-nowrap">
+                                    </td>
+                                    <td></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr v-else-if="error">
+                                    <td class="px-4 py-4 text-sm font-medium whitespace-nowrap">
+                                        <div>
+                                            <p class="text-sm font-normal text-gray-600 dark:text-gray-400">
+                                                {{ error.message }}
+                                            </p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <template v-else>
+                                    <tr v-for="(ticket, i) in tickets" :key="i">
+                                        <td class="px-4 py-4 text-sm font-medium whitespace-nowrap">
+                                            <div>
+                                                <p class="font-medium text-gray-800 dark:text-white ">
+                                                    {{ ticket.name }}
+                                                </p>
+                                            </div>
+                                        </td>
+                                        <td class="px-12 py-4 text-sm font-medium whitespace-nowrap">
+                                            <div
+                                                class="inline px-3 py-1 text-sm font-normal rounded-full text-emerald-500 gap-x-2 bg-emerald-100/60 dark:bg-gray-800">
+                                                {{ ticket.email }}
+                                            </div>
+                                        </td>
+                                        <td class="px-4 py-4 text-sm whitespace-nowrap">
+                                            <div>
+                                                <p class="text-gray-500 dark:text-gray-400">
+                                                    {{ ticket.subject }}
+                                                </p>
+                                            </div>
+                                        </td>
+                                        <td class="px-4 py-4 text-sm whitespace-nowrap">
+                                            <p class="text-gray-500 dark:text-gray-400">
+                                                {{ ticket.description }}
+                                            </p>
+                                        </td>
+
+
+                                        <td class="px-4 py-4 text-sm whitespace-nowrap">
+                                            <button
+                                                class="px-1 py-1 text-gray-500 transition-colors duration-200 rounded-lg dark:text-gray-300 hover:bg-gray-100">
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z" />
+                                                </svg>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>