init

.gitignore

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

README.md

@@ -0,0 +1,78 @@
+[<img src="https://essentials.supersaas.dev/supersaas-banner.png">](https://supersaas.dev?ref=github-logspot)
+
+# Logspot
+
+Logspot is a lightweight, free and open source template for your changelog made with Vue, Nuxt and Tailwindcss. 
+
+![image](https://user-images.githubusercontent.com/15716057/215351682-9f1032a5-7b71-4e5c-be22-951df57198d4.png)
+
+How it works?
+
+1. Each `.md` file in `/content/posts/` counts as one changelog post, logspot uses the [nuxt content module](https://content.nuxtjs.org/)
+
+### Features
+1. Markdown support
+2. Icons support using Iconify
+3. Code syntax highlighting using Shiki.js
+4. Frontmatter - dates, author supported
+5. Vue components inside markdown using Nuxt contents MDC format - More on this [here](https://content.nuxtjs.org/guide/writing/mdc)
+6. Icons support - `:icon{name="ph:user-circle-duotone"}` will show a user icon - find more icons at https://icones.js.org
+7. Alert component with icon, title and description.
+
+Format
+```
+::alert
+---
+icon: fluent:error-circle-24-regular
+title: This is alert with default variant colors.
+description: This will pick up colors from your primary color set in the tailwind config file. You can use this to show some kind of message to your users.
+---
+::
+```
+This above content will render a alert component, something like this
+<img width="719" alt="Screenshot2023-01-30 at 01 17 36@2x" src="https://user-images.githubusercontent.com/15716057/215352019-66f4fb5f-1c2b-4ea0-a596-671aa9a99b51.png">
+8. Widget page, Logspot also has a page specifically meant for widgets, here's an [example](https://logspot.vercel.app/test)
+
+
+https://user-images.githubusercontent.com/15716057/215352102-7796a751-a18f-499b-8302-700092b739f1.mp4
+
+
+
+## Setup Locally
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## 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
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

components/Authors.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="flex -space-x-2 relative z-0 overflow-hidden mt-6">
+    <img
+      v-for="(author, i) in authors"
+      :key="i"
+      class="relative inline-block h-8 w-8 rounded-full ring-2 ring-white"
+      :style="{ zIndex: authors.length - i }"
+      :src="author.avatar"
+      alt=""
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  authors: Array,
+});
+</script>

components/Badge.vue

@@ -0,0 +1,20 @@
+<template>
+  <span
+    class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-sky-100 text-sky-800 border border-sky-200"
+  >
+    <svg
+      class="-ml-0.5 mr-1.5 h-2 w-2 text-sky-400"
+      fill="currentColor"
+      viewBox="0 0 8 8"
+    >
+      <circle cx="4" cy="4" r="3" />
+    </svg>
+    {{ label }}
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: String,
+});
+</script>

components/Base/Spinner.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

components/Github.vue

@@ -0,0 +1,12 @@
+<template>
+  <a
+    href="https://github.com/fayazara/logspot"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="fixed rounded-full h-10 w-10 bg-slate-900 bottom-4 right-4 flex items-center justify-center z-50"
+  >
+    <icon name="mdi:github" class="text-white h-6 w-6" />
+  </a>
+</template>
+<script setup></script>
+<style scoped></style>

components/Hero.vue

@@ -0,0 +1,37 @@
+<template>
+  <header class="py-12 px-4 sm:px-6 lg:px-8">
+    <div class="relative mx-auto max-w-[37.5rem] pt-20 text-center pb-20">
+      <div class="flex items-center justify-center space-x-3">
+        <img loading="lazy" src="/vertex-logo.png" alt="Vertex" class="h-20 w-20" />
+        <h1
+          class="text-4xl font-extrabold tracking-tight text-primary sm:text-5xl"
+        >
+          Vertex GPU
+        </h1>
+      </div>
+      <p class="mt-4 text-base leading-7 text-white">
+        Whether you’re optimizing idle hardware or tapping into powerful compute resources,
+        we’re constantly evolving to make GPU sharing smarter, faster, and more accessible for everyone.
+
+        Follow us on 
+        <a
+          class="text-primary underline"
+          href="https://twitter.com/vertex_gpu"
+          target="_blank"
+          >twitter</a
+        > to stay plugged into the future of GPU leasing.
+      </p>
+    </div>
+  </header>
+</template>
+
+<script setup></script>
+
+<style scoped>
+.form-input {
+  @apply block h-10 w-full rounded-md bg-white pr-3 pl-12 text-slate-900 shadow-md shadow-black/5 ring-1 ring-slate-900/5 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary sm:text-sm sm:leading-6;
+}
+.form-submit {
+  @apply inline-flex justify-center rounded-lg text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 ml-4 flex-none;
+}
+</style>

components/Post.vue

@@ -0,0 +1,44 @@
+<template>
+  <article class="md:flex">
+    <h2 class="content-date h-full mt-px">
+      <a href="#2022-06-23">{{ content.date }}</a>
+    </h2>
+    <div class="content-block">
+      <div class="feed-border"></div>
+      <div class="feed-dot"></div>
+      <badge
+        :label="`v ${content.version}`"
+        class="absolute -top-6 right-0 md:static mb-4"
+      />
+      <h1 v-if="content.title" class="text-xl sm:text-3xl font-bold mb-4">
+        {{ content.title }}
+      </h1>
+      <ContentRenderer :value="content" class="document" />
+      <Authors v-if="content.authors" :authors="content.authors" />
+    </div>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+});
+</script>
+
+<style>
+.feed-dot {
+  @apply absolute -top-[1.0625rem] -left-1 h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem];
+}
+.feed-border {
+  @apply absolute -bottom-2 left-0 w-px bg-slate-200 -top-3 md:top-2.5;
+}
+.content-date {
+  @apply pl-7 text-xs sm:text-sm leading-6 text-white md:w-1/4 md:pl-0 md:pr-12 md:text-right;
+}
+.content-block {
+  @apply relative pt-2 pl-7 md:w-3/4 md:pt-0 md:pl-12 pb-16;
+}
+.document {
+  @apply max-w-none prose-h3:mb-4 prose-h3:text-base prose-h3:leading-6 prose-sm prose prose-pre:text-base prose-slate text-white prose-strong:text-primary prose-a:font-semibold prose-a:text-primary hover:prose-a:text-sky-600;
+}
+</style>

components/Test/Sidebar.vue

@@ -0,0 +1,97 @@
+<template>
+  <!-- This example requires Tailwind CSS v2.0+ -->
+  <div
+    class="relative z-10"
+    aria-labelledby="slide-over-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <transition
+      enter-active-class="ease-in-out duration-500"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="ease-in-out duration-500"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="show"
+        class="fixed inset-0 bg-gray-700 bg-opacity-50 backdrop-blur-sm transition-opacity"
+      ></div>
+    </transition>
+    <div class="fixed inset-0 overflow-hidden">
+      <div class="absolute inset-0 overflow-hidden">
+        <div
+          class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"
+        >
+          <transition
+            enter-active-class="transform transition ease-in-out duration-500"
+            enter-from-class="translate-x-full"
+            enter-to-class="translate-x-0"
+            leave-active-class="transform transition ease-in-out duration-500"
+            leave-from-class="translate-x-0"
+            leave-to-class="translate-x-full"
+          >
+            <div
+              v-if="show"
+              class="pointer-events-auto w-screen max-w-md relative"
+              ref="slideOver"
+            >
+              <div
+                class="absolute top-0 left-0 -ml-8 flex pt-2 pr-2 sm:-ml-10 sm:pr-4"
+              >
+                <button
+                  @click="close"
+                  type="button"
+                  class="rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-white h-8 w-8 flex items-center justify-center"
+                >
+                  <span class="sr-only">Close panel</span>
+
+                  <icon name="fluent:dismiss-24-filled" class="h-6 w-6" />
+                </button>
+              </div>
+              <div class="h-full overflow-y-scroll bg-white shadow-xl">
+                <!-- The Feed iframe goes here -->
+                <div
+                  v-if="!iframeLoaded"
+                  class="h-full w-full flex items-center justify-center flex-col space-y-2 text-slate-700"
+                >
+                  <base-spinner class="h-5 w-5" />
+                  <p>Loading Feed</p>
+                </div>
+                <iframe
+                  src="/widget"
+                  class="h-full w-full"
+                  :class="iframeLoaded ? 'opacity-100' : 'opacity-0'"
+                  frameborder="0"
+                  @load="iframeLoaded = true"
+                ></iframe>
+                <!-- The Feed iframe goes here -->
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["close"]);
+import { ref } from "vue";
+const show = ref(false);
+const iframeLoaded = ref(false);
+function close() {
+  show.value = false;
+  setTimeout(() => {
+    document.body.style.removeProperty("overflow");
+    emit("close");
+  }, 500);
+}
+const slideOver = ref(null);
+useClickOutside(slideOver, () => close());
+onMounted(() => {
+  show.value = true;
+  document.body.style.setProperty("overflow", "hidden");
+});
+</script>

components/content/Alert.vue

@@ -0,0 +1,59 @@
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    default: "fluent:error-circle-24-regular",
+  },
+  variant: {
+    type: String,
+    default: "primary",
+  },
+  title: {
+    type: String,
+  },
+  description: {
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative p-4 border-l-4 my-8 rounded-lg rounded-bl-sm alert"
+    :class="variant"
+  >
+    <span class="icon-container">
+      <icon :name="icon" class="h-7 w-7 icon" :class="variant" />
+    </span>
+    <div>
+      <h3>{{ title }}</h3>
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<style>
+.alert.primary {
+  @apply bg-primary border-primary bg-opacity-10;
+}
+.icon.primary {
+  @apply text-primary;
+}
+.alert.success {
+  @apply bg-green-600 border-green-600 bg-opacity-10;
+}
+.icon.success {
+  @apply text-green-600;
+}
+.alert.danger {
+  @apply bg-rose-500 border-rose-500 bg-opacity-10;
+}
+.icon.danger {
+  @apply text-rose-500;
+}
+
+.icon-container {
+  @apply h-10 w-10 flex items-center justify-center rounded-full bg-white absolute top-0 left-0;
+  transform: translate(calc(-50% - 1.5px), -50%);
+}
+</style>

composables/useClickOutside.js

@@ -0,0 +1,56 @@
+import { computed } from "vue";
+
+/**
+ *
+ * @param {*} el_target_ref The Root element for which clicking outside will trigger callback_fn
+ * @param {*} on_click_outside The function to call when user clicks outside of
+ * @param {Function} callback_condition Function, if provided, returns boolean indication if click outside should be allowed to happen
+ * @returns
+ */
+export async function useClickOutside(
+  el_target_ref,
+  on_click_outside,
+  callback_condition
+) {
+  if (!el_target_ref) return;
+  if (!el_target_ref.value) {
+    console.log(
+      "useClickOutside",
+      "target element was not supplied or is null"
+    );
+    //return
+  }
+
+  var dont_use_first_click = 0;
+  let listener = async (e) => {
+    var enable_click_outside = true;
+    if (typeof callback_condition == "function") {
+      enable_click_outside = await callback_condition();
+    }
+    if (!enable_click_outside) return;
+    if (dont_use_first_click == 0) {
+      dont_use_first_click++;
+      return;
+    }
+    if (
+      e.target == el_target_ref.value ||
+      e.composedPath().includes(el_target_ref.value)
+    ) {
+      return;
+    }
+
+    if (enable_click_outside && typeof on_click_outside == "function") {
+      on_click_outside();
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener("click", listener);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("click", listener);
+  });
+  return {
+    listener,
+  };
+}

content/posts/1.edgenode-client-expansion.md

@@ -0,0 +1,9 @@
+---
+title: EdgeNode Client Expansion
+date: February 2025
+version: "0.9.0"
+---
+
+We’ve expanded our EdgeNode Client compatibility to **macOS**, enabling a wider range of users to lease and share GPUs seamlessly.
+
+This update also introduces **advanced predictive features** that intelligently forecast GPU demand and availability — resulting in better scheduling and enhanced user experience for both lessors and renters.

content/posts/2.gridlink-resilience-update.md

@@ -0,0 +1,9 @@
+---
+title: GridLink Resilience Update
+date: March 2025
+version: "0.9.5"
+---
+
+The **GridLink** network just got smarter.
+
+This update deploys **self-healing capabilities** that automatically detect and recover from network disruptions. With this enhancement, Vertex users can enjoy improved uptime, smoother GPU transactions, and a more reliable distributed network.

content/posts/3.premium-gpu-fleet-acquisition.md

@@ -0,0 +1,9 @@
+---
+title: Premium GPU Fleet Acquisition
+date: April 2025
+version: "0.9.8"
+---
+
+Vertex GPU has officially acquired a **premium fleet of high-end commercial GPUs**.
+
+This strategic upgrade significantly boosts available hardware performance on the platform, providing renters with access to top-tier GPU capabilities and offering lessors the chance to monetize powerful, in-demand devices.

content/posts/4.launch.md

@@ -0,0 +1,20 @@
+---
+title: Vertex GPU v1.0.0 Release
+date: April 2025
+version: "1.0.0"
+---
+
+We’re proud to announce the **official v1.0.0 release of Vertex GPU**!
+
+This milestone marks the culmination of months of upgrades and innovations:
+
+### Highlights
+
+- **macOS Support** via EdgeNode Client Expansion
+- **Predictive GPU Scheduling** for optimized usage
+- **GridLink Self-Healing Network** for enhanced uptime
+- **Acquisition of Premium Commercial GPUs**, boosting platform power
+
+We're incredibly thankful to our early users and GPU providers for making this launch possible. Onward to more powerful, scalable GPU leasing for all!
+
+:rocket:

nuxt.config.ts

@@ -0,0 +1,9 @@
+export default ({
+    modules: ['@nuxtjs/tailwindcss', '@nuxt/content', 'nuxt-icon'],
+    content: {
+        highlight: {
+            theme: 'nord',
+            preload: ['js', 'css', 'html', 'md', 'ts', 'tsx', 'vue', 'python', 'ruby', 'java'],
+        }
+    }
+})

package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxt/content": "^2.4.2",
+    "@nuxtjs/tailwindcss": "^6.3.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "nuxt": "^3.1.1",
+    "nuxt-icon": "^0.2.10"
+  }
+}

pages/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <main class="min-h-screen relative bg-background">
+    <hero />
+    <!-- // Remove this once you clone the template -->
+    <!-- <github /> -->
+    <!-- // Remove this once you clone the template -->
+    <section
+      class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 overflow-hidden text-primary"
+    >
+      <post v-for="post in data" :content="post" />
+    </section>
+  </main>
+</template>
+
+<script setup>
+import seoConfig from "../seoConfig/index";
+useHead({
+  title: seoConfig.title,
+  meta: [
+    {
+      name: "description",
+      content: seoConfig.description,
+      meta: [
+        { name: "og:title", content: seoConfig.og.title },
+        { name: "og:description", content: seoConfig.og.description },
+        { name: "og:image", content: seoConfig.og.image },
+        { name: "og:url", content: seoConfig.og.url },
+        { name: "twitter:title", content: seoConfig.og.title },
+        { name: "twitter:description", content: seoConfig.og.description },
+        { name: "twitter:image", content: seoConfig.og.image },
+        { name: "twitter:card", content: "summary_large_image" },
+      ],
+    },
+  ],
+});
+const { data } = await useAsyncData("feed", () =>
+  queryContent("/posts").find()
+);
+</script>

pages/test.vue

@@ -0,0 +1,153 @@
+<template>
+  <main class="flex bg-slate-100 relative">
+    <aside
+      class="border-r w-20 h-screen bg-slate-100 sticky top-0 flex flex-col items-center justify-between py-8 flex-shrink-0"
+    >
+      <!-- Sample Logo  -->
+      <svg
+        class="h-8 w-auto"
+        viewBox="0 0 50 39"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z"
+          class="ccompli1"
+          fill="#007AFF"
+        ></path>
+        <path
+          d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+          class="ccustom"
+          fill="#312ECB"
+        ></path>
+      </svg>
+      <!-- Sample Logo  -->
+      <div class="space-y-8">
+        <icon name="fluent:channel-24-regular" class="h-6 w-6 text-sky-600" />
+        <icon
+          name="fluent:data-pie-24-regular"
+          class="h-6 w-6 text-slate-400"
+        />
+        <icon
+          name="fluent:mail-inbox-24-regular"
+          class="h-6 w-6 text-slate-400"
+        />
+        <icon
+          name="fluent:wallet-credit-card-24-regular"
+          class="h-6 w-6 text-slate-400"
+        />
+      </div>
+      <div class="space-y-8">
+        <button @click="sidebar = true" class="relative">
+          <icon
+            name="fluent:panel-right-28-filled"
+            class="h-6 w-6 text-slate-400"
+          />
+        </button>
+        <div class="relative" ref="floatingWidget">
+          <button @click="showChangelog = !showChangelog">
+            <icon
+              name="fluent:alert-badge-24-filled"
+              class="h-6 w-6 text-slate-400"
+            />
+          </button>
+          <transition
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <div
+              v-if="showChangelog"
+              class="h-[450px] w-80 z-20 bg-white rounded-lg shadow-2xl absolute left-[calc(50%+14px)] bottom-[calc(50%+14px)] origin-bottom-left overflow-hidden border border-gray-100"
+            >
+              <div
+                v-if="!iframeLoaded"
+                class="h-full w-full flex items-center justify-center flex-col space-y-2 text-slate-700"
+              >
+                <base-spinner class="h-5 w-5" />
+                <p>Loading Feed</p>
+              </div>
+              <iframe
+                src="/widget"
+                class="h-full w-full"
+                :class="iframeLoaded ? 'opacity-100' : 'opacity-0'"
+                frameborder="0"
+                @load="iframeLoaded = true"
+              ></iframe>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </aside>
+    <section class="flex-grow">
+      <header
+        class="border-b p-4 flex items-center justify-between sticky top-0 bg-white"
+      >
+        <div
+          class="flex w-full sm:w-1/2 p-3 items-center bg-slate-200 rounded-full"
+        >
+          <icon name="fluent:search-24-filled" class="h-4 w-4 text-slate-400" />
+          <p class="text-sm text-slate-400 ml-4 truncate">
+            Search your transactions, accounts, cards etc...
+          </p>
+        </div>
+        <div class="hidden sm:flex items-center space-x-2">
+          <div
+            class="rounded-full bg-slate-200 p-3 flex-shrink-0 h-12 w-12 flex items-center justify-center"
+          >
+            <icon
+              name="fluent:alert-badge-24-filled"
+              class="h-5 w-5 text-slate-600"
+            />
+          </div>
+          <div
+            class="rounded-full bg-slate-200 p-3 flex-shrink-0 h-12 w-12 flex items-center justify-center"
+          >
+            <icon
+              name="fluent:person-24-filled"
+              class="h-5 w-5 text-slate-600"
+            />
+          </div>
+        </div>
+      </header>
+      <div class="p-4">
+        <div class="mt-4 space-y-8">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <div
+              class="h-40 rounded-lg bg-white border shadow-sm"
+              v-for="n in 4"
+              :key="n"
+            ></div>
+          </div>
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div
+              class="h-96 rounded-lg bg-white border shadow-sm"
+              v-for="n in 4"
+              :key="n"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <test-sidebar v-if="sidebar" @close="sidebar = false" ref="overlayWidget" />
+    <test-arrow v-if="!showChangelog" class="fixed bottom-24 left-32 z-0" />
+  </main>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const showChangelog = ref(false);
+const iframeLoaded = ref(false);
+const sidebar = ref(false);
+const floatingWidget = ref(null);
+useClickOutside(floatingWidget, () => (showChangelog.value = false));
+</script>
+
+<style scoped>
+.icon {
+  display: block !important;
+}
+</style>

pages/widget.vue

@@ -0,0 +1,43 @@
+<template>
+  <main class="min-h-screen bg-white">
+    <header
+      class="py-4 px-2.5 sticky top-0 z-50 bg-white bg-opacity-50 backdrop-blur border-b border-slate-100"
+    >
+      <h1 class="text-gray-500 flex items-center text-sm">
+        <span class="h-3 w-3 mr-2 rounded-full bg-primary"></span>
+        <span class="font-semibold"> Latest changes </span>
+      </h1>
+    </header>
+    <section class="min-h-[calc(100vh-102px)] pt-4">
+      <div
+        class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 overflow-hidden"
+      >
+        <post v-for="(post, i) in data" :content="post" :key="i" />
+      </div>
+    </section>
+    <footer
+      class="px-4 py-3 flex items-center justify-between sticky bottom-0 z-50 bg-white bg-opacity-50 backdrop-blur-xl text-xs border-t border-slate-100"
+    >
+      <a
+        class="text-gray-500"
+        href="https://github.com/fayazara/logspot"
+        target="_blank"
+      >
+        Powered by logspot
+      </a>
+      <a
+        class="text-primary"
+        href="https://github.com/fayazara/logspot"
+        target="_blank"
+      >
+        See all updates
+      </a>
+    </footer>
+  </main>
+</template>
+
+<script setup>
+const { data } = await useAsyncData("feed", () =>
+  queryContent("/posts").find()
+);
+</script>

seoConfig/index.js

@@ -0,0 +1,12 @@
+export default {
+  title: "Vertex - Changelog",
+  description:
+    "Harness the Power of Idle GPUs for Global Change",
+  og: {
+    title: "Vertex - Changelog",
+    description:
+      "Harness the Power of Idle GPUs for Global Change",
+    image: "https://changelog.vertexgpu.com/og-banner.png",
+    url: "https://changelog.vertexgpu.com",
+  },
+};

tailwind.config.js

@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    fontFamily: {
+      sans: [
+        "Inter",
+        "Avenir Next",
+        "Roboto",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        "Ubuntu",
+        '"Helvetica Neue"',
+        "Arial",
+        '"Noto Sans"',
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      mono: [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace",
+      ],
+    },
+    extend: {
+      colors: {
+        primary: "#0CE77E",
+        background: "#070F11",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+  content: [
+    `components/**/*.{vue,js}`,
+    `layouts/**/*.vue`,
+    `pages/**/*.vue`,
+    `composables/**/*.{js,ts}`,
+    `plugins/**/*.{js,ts}`,
+    `App.{js,ts,vue}`,
+    `app.{js,ts,vue}`,
+  ],
+};

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}