chore: added date to doc pages and added doc pages

Author: blaquewithaq

app/components/content/DateSeparator.vue

@@ -0,0 +1,77 @@
+<script>
+</script>
+
+<script setup>
+import { computed } from 'vue'
+import { Separator, useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { tv } from 'tailwind-variants'
+import { useAppConfig } from '#imports'
+import theme from '#build/ui/separator'
+
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  type: { type: null, required: false },
+  orientation: { type: null, required: false, default: 'horizontal' },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  decorative: { type: Boolean, required: false }
+})
+const slots = defineSlots()
+const appConfig = useAppConfig()
+const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator || {} })({
+  color: props.color,
+  orientation: props.orientation,
+  size: props.size,
+  type: props.type
+}))
+</script>
+
+<template>
+  <Separator
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+  >
+    <div
+      :class="[
+        ui.border({ class: props.ui?.border }),
+        {
+          'max-w-2': label || icon || avatar || !!slots.default
+        }
+      ]"
+    />
+
+    <template v-if="label || icon || avatar || !!slots.default">
+      <div
+        :class="ui.container({ class: props.ui?.container })"
+        class="text-muted"
+      >
+        <slot>
+          <span
+            v-if="label"
+            :class="ui.label({ class: props.ui?.label })"
+          >{{ label }}</span>
+          <UIcon
+            v-else-if="icon"
+            :name="icon"
+            :class="ui.icon({ class: props.ui?.icon })"
+          />
+          <UAvatar
+            v-else-if="avatar"
+            :size="props.ui?.avatarSize || ui.avatarSize()"
+            v-bind="avatar"
+            :class="ui.avatar({ class: props.ui?.avatar })"
+          />
+        </slot>
+      </div>
+
+      <div :class="ui.border({ class: props.ui?.border })" />
+    </template>
+  </Separator>
+</template>

app/components/content/MenuLinkCard.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+export interface FileCardProps {
+  icon: string
+  name: string
+  description: string
+  to: string
+  toCode: string
+}
+
+const props = defineProps<FileCardProps>()
+</script>
+
+<template>
+  <div class="flex flex-1">
+    <UPageCard
+      variant="ghost"
+      :to="props.to"
+      class="flex-1"
+    >
+      <template #body>
+        <UUser
+          :name="props.name"
+          :description="props.description"
+          size="xl"
+          class="gap-4"
+        >
+          <template #avatar>
+            <UIcon
+              :name="props.icon"
+              class="size-6"
+            />
+          </template>
+        </UUser>
+      </template>
+    </UPageCard>
+
+    <UButton
+      variant="link"
+      size="lg"
+      :to="props.toCode"
+      class="min-w-12 sm:min-w-16 items-center justify-center"
+    >
+      <UTooltip text="Open source on GitHub">
+        <UIcon
+          name="i-lucide-code-xml"
+          class="size-5"
+        />
+      </UTooltip>
+    </UButton>
+  </div>
+</template>

app/pages/docs/[...slug].vue

@@ -18,6 +18,29 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
 
 const title = page.value.seo?.title || page.value.title
 const description = page.value.seo?.description || page.value.description
+const timeZone = ref()
+
+const date = computed(() => {
+  if (!page.value?.date || !timeZone.value) {
+    return undefined
+  }
+
+  const _date = new Date(page.value?.date)
+  const _dateString = _date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    timeZone: timeZone.value
+  })
+  const _timeString = _date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: timeZone.value,
+    timeZoneName: 'short'
+  })
+
+  return `Updated at ${_timeString} (${_dateString})`
+})
 
 useSeoMeta({
   title,
@@ -27,6 +50,10 @@ useSeoMeta({
 })
 
 defineOgImageComponent('Saas')
+
+onMounted(() => {
+  timeZone.value = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'
+})
 </script>
 
 <template>
@@ -42,7 +69,10 @@ defineOgImageComponent('Saas')
         :value="page"
       />
 
-      <USeparator v-if="surround?.length" />
+      <DateSeparator
+        v-if="surround?.length"
+        :label="date"
+      />
 
       <UContentSurround :surround="surround" />
     </UPageBody>

content.config.ts

@@ -127,7 +127,10 @@ const collections = {
   }),
   docs: defineCollection({
     type: 'page',
-    source: '1.docs/**/*'
+    source: '1.docs/**/*',
+    schema: z.object({
+      date: z.date()
+    })
   }),
   download: defineCollection({
     type: 'page',
@@ -158,7 +161,7 @@ const collections = {
   blog: defineCollection({
     type: 'page',
     source: '4.blog.yml',
-    schema: createBaseSchema().extend({
+    schema: z.object({
       image: createImageSchema().optional()
     })
   }),

content/1.docs/1.user/1.index.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction
-description: Welcome to our User Guide
+description:
+date:
 ---
 

content/1.docs/1.user/2.installation.md

@@ -1,4 +1,5 @@
 ---
 title: Installation
-description: Get started with the installation of our software.
+description:
+date:
 ---

content/1.docs/2.developer/1.index.md

@@ -1,5 +1,6 @@
 ---
 title: Introduction
-description: Welcome to our Developer Guide
+description:
+date:
 ---
 

content/1.docs/2.developer/2.installation.md

@@ -0,0 +1,124 @@
+---
+title: Setup
+description: This guide walks you through setting up your system to build and use our library on Linux, macOS, and Windows.
+date:	2025-09-15T15:47:46Z
+---
+
+## Prerequisites
+
+Before starting, make sure you have:
+
+- Administrator or sudo access
+- A terminal or PowerShell environment
+- A C++ toolchain available for your platform
+
+---
+
+## Linux Setup
+
+### 1. Install Required Packages
+
+Open your terminal and install the following packages using your system's package manager.
+
+<details>
+<summary><strong>Debian/Ubuntu (APT)</strong></summary>
+
+```bash
+sudo apt update
+sudo apt install git cmake ninja-build pkg-config build-essential libgl1-mesa-dev mesa-common-dev libglm-dev
+```
+
+</details>
+
+<details>
+<summary><strong>Arch (Pacman)</strong></summary>
+
+```bash
+sudo pacman -Syu
+sudo pacman -S git cmake ninja pkgconf base-devel mesa
+```
+
+</details>
+
+<details>
+<summary><strong>Fedora/RHEL (YUM/DNF)</strong></summary>
+
+```bash
+sudo yum update -y
+sudo yum install -y git cmake ninja-build pkgconfig gcc-c++ mesa-libGL-devel mesa-libGLU-devel glm-devel
+```
+
+</details>
+
+---
+
+## macOS Setup
+
+### 1. Install Homebrew (if not installed)
+
+```bash
+/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
+```
+
+### 2. Install Required Packages
+
+```bash
+brew update
+brew install git cmake ninja pkg-config
+```
+
+### 3. Install Xcode Command Line Tools
+
+Check if installed:
+
+```bash
+xcode-select -p
+```
+
+If not, install:
+
+```bash
+xcode-select --install
+```
+
+Also, make sure you accept the license:
+
+```bash
+sudo xcodebuild -license accept
+```
+
+---
+
+## Windows Setup
+
+### 1. Install Dependencies
+
+Manually install the following:
+
+- [Git for Windows](https://git-scm.com/download/win)
+- [CMake](https://cmake.org/download)
+- [Microsoft Visual Studio 2022 or newer](https://visualstudio.microsoft.com/downloads)
+  - Include the "Desktop development with C++" workload
+- [Vcpkg (optional)](https://github.com/microsoft/vcpkg) — for managing C++ libraries
+
+> After installation, restart PowerShell or Command Prompt to ensure dependencies are on the PATH.
+
+### 2. Initialize Git Submodules
+
+```powershell
+git submodule update --init --recursive
+```
+
+---
+
+## Verifying Installation
+
+To confirm everything is ready:
+
+```bash
+git --version
+cmake --version
+ninja --version
+```
+
+On Windows, also confirm that Visual Studio tools like `cl.exe` or `msbuild` are available from your terminal.

content/1.docs/2.developer/2.setup.md

@@ -0,0 +1,6 @@
+---
+title: Build
+description:
+date:
+---
+