initial commit

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "@babel/eslint-parser",
+    "sourceType": "module"
+  },
+  "extends": [
+    "@nuxtjs/eslint-config-typescript",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"]
+}

.eslintrc copy

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "@babel/eslint-parser",
+    "sourceType": "module"
+  },
+  "extends": [
+    "@nuxtjs/eslint-config-typescript",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"]
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

.gitignore copy

@@ -0,0 +1,9 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+# Node dependencies
+node_modules
+# System files
+*.log
+# Env file
+.env

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.prettierignore

@@ -0,0 +1,3 @@
+.nuxt
+*.d.ts
+*.json

.prettierignore copy

@@ -0,0 +1,3 @@
+.nuxt
+*.d.ts
+*.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "semi": false,
+    "singleQuote": true
+}

.prettierrc copy

@@ -0,0 +1,4 @@
+{
+    "semi": false,
+    "singleQuote": true
+}

README.md

@@ -0,0 +1,42 @@
+# 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
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </template>

assets/css/main.css

@@ -0,0 +1,29 @@
+.visual-effects .mouse-gradient {
+  background: repeating-linear-gradient(
+    to right,
+    #6644ff 0%,
+    #947cff 50%,
+    #ff99dd 100%
+  );
+  filter: blur(100px);
+  opacity: 0.5;
+}
+.bg-noise {
+  background: rgba(0, 0, 0, 0.5);
+  background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+::selection {
+  @apply bg-accent text-white;
+}
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

assets/css/tailwind.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+
+@tailwind utilities;

components/Categories.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// Import the $directus plugin
+const { $directus } = useNuxtApp()
+
+// Get the params from the Nuxt route
+const { params, path } = useRoute()
+
+// Fetch the page data from the Directus API using the Nuxt useAsyncData composable
+// https://v3.nuxtjs.org/docs/usage/data-fetching#useasyncdata
+const {
+  data: categories,
+  pending,
+  error,
+} = await useAsyncData(
+  'categories',
+  () => {
+    return $directus.items('categories').readByQuery({
+      filter: {
+        // status: { _eq: 'published' },
+      },
+
+      fields: ['*'],
+    })
+  },
+  {
+    transform: (data) => data.data,
+    // pick: [
+    //   'title',
+    //   'content',
+    //   'image',
+    //   'author',
+    //   'category',
+    //   'summary',
+    //   'date_published',
+    // ],
+  }
+)
+</script>
+<template>
+  <div class="mt-4 space-y-2">
+    <NuxtLink
+      v-for="category in categories"
+      :href="`/posts/categories/${category.slug}`"
+      class="block font-mono dark:text-gray-200 hover:opacity-80"
+    >
+      <VBadge :color="category.color" size="lg" class="rounded-bl-lg">
+        {{ category.title }}
+      </VBadge>
+    </NuxtLink>
+  </div>
+</template>

components/DarkModeToggle.vue

@@ -0,0 +1,23 @@
+<template>
+  <button @click="(e) => toggleDark()" class="p-1">
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0 "
+      mode="out-in"
+    >
+      <MoonIcon v-if="isDark" class="w-8 h-8" />
+      <SunIcon v-else-if="!isDark" class="w-8 h-8" />
+    </transition>
+  </button>
+</template>
+
+<script setup>
+import { MoonIcon, SunIcon } from '@heroicons/vue/24/outline'
+// Currently having to import the composable directly because Nuxt 3 auto import is not working
+// https://github.com/nuxt/framework/issues/3924
+import { isDark, toggleDark } from '~~/composables/useDark'
+</script>

components/FeaturePostCard.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const { fileUrl } = useFiles()
+const props = defineProps<{
+  post: {
+    id: string
+    title: string
+    summary: string
+    image: string
+    slug: string
+    category: {
+      title: string
+      slug: string
+      color: string
+    }
+  }
+}>()
+</script>
+<template>
+  <figure
+    class="relative flex space-x-2 outline outline-2 outline-offset-4 outline-accent rounded-bl-3xl rounded-tr-3xl"
+  >
+    <NuxtLink class="group" :href="`/posts/${post.slug}`">
+      <div
+        :class="[
+          'relative overflow-hidden h-[300px] w-[300px]  duration-300 rounded-bl-3xl rounded-tr-3xl',
+        ]"
+      >
+        <img
+          class="object-cover w-full h-full saturate-0 group-hover:opacity-75 transition-opacity duration-300"
+          :src="fileUrl(post.image)"
+          alt=""
+        />
+        <div
+          class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-accent group-hover:opacity-100 opacity-0 transition-opacity duration-300"
+        />
+
+        <VBadge
+          v-if="post.category"
+          size="lg"
+          :color="post.category.color"
+          :class="[
+            {
+              'rounded-br-lg': even,
+              'rounded-bl-lg': !even,
+            },
+            'absolute bottom-0 left-0 ml-4 mb-4',
+          ]"
+          >{{ post.category.title }}</VBadge
+        >
+      </div>
+    </NuxtLink>
+
+    <div class="relative px-8 rounded-tl-3xl rounded-tr-3xl overflow-hidden">
+      <div
+        class="absolute inset-0 bg-gradient-to-br from-white via-gray-300 to-accent dark:from-gray-700 dark:via-gray-900 dark:to-accent"
+      />
+      <div class="absolute inset-0 grain-bg dark:opacity-20" />
+      <NuxtLink class="block relative" :href="`/posts/${post.slug}`">
+        <!-- Icon -->
+        <p
+          class="mt-5 text-3xl font-semibold font-serif text-gray-900 dark:text-white group-hover:text-accent"
+        >
+          {{ post.title }}
+        </p>
+        <p class="mt-3 text-sm font-mono text-gray-500 dark:text-gray-300">
+          {{ truncateString(post.summary, 150) }}
+        </p>
+      </NuxtLink>
+      <VAvatar
+        v-if="post.author"
+        class="mt-4 relative"
+        size="sm"
+        :author="post.author"
+      />
+    </div>
+  </figure>
+</template>