?

app/components/TheHeader.vue

@@ -13,7 +13,7 @@
 
       <nav class="links">
         <a href="#">{{ t.nav?.supportedGames }}</a>
-        <a href="#">{{ t.nav?.errorCodes }}</a>
+        <a href="/docs/policy/general">{{ t.nav?.errorCodes }}</a>
         <a href="#">{{ t.nav?.discordServer }}</a>
         <a href="/docs/connect">{{ t.nav?.installSpbr }}</a>
       </nav>

app/locales/message-en.json

@@ -1,7 +1,7 @@
 {
   "nav": {
     "supportedGames": "Supported games",
-    "errorCodes": "Error Codes",
+    "errorCodes": "View Policies",
     "discordServer": "Discord Server",
     "installSpbr": "Install SPBR",
     "searchPlaceholder": "Search"
@@ -68,5 +68,12 @@
       "aromaTitle": "Aroma",
       "aromaDesc": "Hacked"
     }
+  },
+  "policies": {
+    "sidebarHeader": "Spacebar Network Policies",
+    "sidebarSubheader": "Game Rules",
+    "loading": "Loading...",
+    "errorText": "Error",
+    "lastUpdated": "Last updated: "
   }
 }

app/pages/docs/policy/[id].vue

@@ -0,0 +1,490 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+
+const { t } = useLocale()
+
+const parsedHtml = ref('')
+let markedParser: { parse: (text: string) => string | Promise<string>, use: (plugin: unknown) => void } | null = null
+
+const baseRules = ref<Array<{ id: string, name: string }>>([])
+const gameRules = ref<Array<{ id: string, name: string, version: string }>>([])
+
+const selectedCategory = ref<string>('general')
+const isPageLoading = ref(true)
+const isDocLoading = ref(false)
+
+interface PolicyMetadata {
+  name: string
+  iso8601: string
+  version: string
+  icons?: {
+    icon?: string
+  }
+}
+const activeMetadata = ref<PolicyMetadata | null>(null)
+
+onMounted(async () => {
+  try {
+    const { marked } = await import('marked')
+    const { default: markedAlert } = await import('marked-alert')
+
+    marked.use(markedAlert())
+    markedParser = marked
+
+    const data = await $fetch<{
+      baseRules: Array<{ id: string, name: string }>
+      games: Array<{ id: string, name: string, version: string }>
+    }>('/api/policies')
+
+    baseRules.value = data.baseRules
+    gameRules.value = data.games
+
+    const pathSegments = window.location.pathname.split('/')
+    const currentId = pathSegments[pathSegments.length - 1]
+
+    const allValidIds = [...data.baseRules, ...data.games].map(item => item.id)
+    if (currentId && allValidIds.includes(currentId)) {
+      selectedCategory.value = currentId
+    }
+
+    await loadPolicyData(selectedCategory.value)
+  } catch (err) {
+    console.error(err)
+  } finally {
+    isPageLoading.value = false
+  }
+})
+
+const formatDate = (isoString?: string) => {
+  if (!isoString) return ''
+  return new Date(isoString).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+const getAssetUrl = (fileName: string | undefined, itemId: string) => {
+  if (!fileName) return ''
+  return `/policy/game-rules/${itemId}/${fileName}`
+}
+
+const loadPolicyData = async (id: string) => {
+  if (!markedParser) return
+  isDocLoading.value = true
+  activeMetadata.value = null
+  parsedHtml.value = ''
+
+  try {
+    let markdownPath = ''
+    let metadataPath = ''
+
+    if (id === 'general') markdownPath = '/policy/GENERAL-NETWORK-RULES.md'
+    else if (id === 'conduct') markdownPath = '/policy/CODE_OF_CONDUCT.md'
+    else if (id === 'privacy') markdownPath = '/policy/PRIVACY-POLICY.md'
+    else {
+      markdownPath = `/policy/game-rules/${id}/rule.md`
+      metadataPath = `/policy/game-rules/${id}/metadata.json`
+    }
+
+    const mdResponse = await fetch(markdownPath)
+    if (mdResponse.ok) {
+      const text = await mdResponse.text()
+      parsedHtml.value = await markedParser.parse(text)
+    } else {
+      parsedHtml.value = `<p class="error-text">${t.value.policies?.errorText || 'Error'}</p>`
+    }
+
+    if (metadataPath) {
+      const metaResponse = await fetch(metadataPath)
+      if (metaResponse.ok) {
+        activeMetadata.value = await metaResponse.json()
+      }
+    }
+  } catch (err) {
+    console.error(err)
+    parsedHtml.value = `<p class="error-text">${t.value.policies?.errorText || 'Error'}</p>`
+  } finally {
+    isDocLoading.value = false
+  }
+}
+
+const handleCategorySelect = (id: string) => {
+  selectedCategory.value = id
+  window.history.pushState({}, '', `/docs/policy/${id}`)
+}
+
+watch(selectedCategory, (newId) => {
+  loadPolicyData(newId)
+})
+</script>
+
+<template>
+  <div class="settings-page-wrapper">
+    <div
+      v-if="isPageLoading"
+      class="loader-container full-page-loader"
+    >
+      <div class="spinner" />
+      <p>{{ t.policies?.loading }}</p>
+    </div>
+
+    <div
+      v-else
+      class="settings-container"
+    >
+      <aside class="settings-sidebar">
+        <div class="sidebar-header archivo-black">
+          {{ t.policies?.sidebarHeader }}
+        </div>
+        <nav class="sidebar-menu">
+          <button
+            v-for="rule in baseRules"
+            :key="rule.id"
+            class="nav-item"
+            :class="{ 'active-nav': selectedCategory === rule.id }"
+            @click="handleCategorySelect(rule.id)"
+          >
+            <span>{{ rule.name }}</span>
+          </button>
+
+          <template v-if="gameRules.length > 0">
+            <div class="sidebar-subheader archivo-black">
+              {{ t.policies?.sidebarSubheader }}
+            </div>
+            <button
+              v-for="game in gameRules"
+              :key="game.id"
+              class="nav-item"
+              :class="{ 'active-nav': selectedCategory === game.id }"
+              @click="handleCategorySelect(game.id)"
+            >
+              <span>{{ game.name }}</span>
+              <span class="chevron">›</span>
+            </button>
+          </template>
+        </nav>
+      </aside>
+
+      <main class="settings-main-content">
+        <section class="settings-panel">
+          <div class="panel-header archivo-black split-header">
+            <div class="header-left">
+              <img
+                v-if="activeMetadata?.icons?.icon"
+                :src="getAssetUrl(activeMetadata.icons.icon, selectedCategory)"
+                class="item-icon"
+                alt="Icon"
+              >
+              <span>{{ activeMetadata?.name || selectedCategory.replace('-', ' ').toUpperCase() }}</span>
+            </div>
+
+            <div class="header-right">
+              <span
+                v-if="activeMetadata?.iso8601"
+                class="last-updated-text"
+              >
+                {{ t.policies?.lastUpdated }}{{ formatDate(activeMetadata.iso8601) }}
+              </span>
+              <span
+                v-if="activeMetadata?.version"
+                class="version-tag"
+              >
+                v{{ activeMetadata.version }}
+              </span>
+            </div>
+          </div>
+
+          <div class="panel-body">
+            <div
+              v-if="isDocLoading"
+              class="loader-container"
+            >
+              <div class="spinner" />
+              <p>{{ t.policies?.loading }}</p>
+            </div>
+            <div
+              v-else
+              class="markdown-body"
+              v-html="parsedHtml"
+            />
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
+
+.archivo-black {
+  font-family: "Archivo Black", sans-serif;
+  font-weight: 400;
+}
+
+.text-wiiu-blue {
+  color: #00aeef;
+}
+
+.settings-page-wrapper {
+  min-height: 100vh;
+  width: 100vw;
+  background-color: #1d1e1f;
+  color: #c9d1d9;
+  padding: 2rem 1rem;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.settings-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.settings-sidebar {
+  background-color: #1a1a1f;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  overflow: hidden;
+  height: max-content;
+}
+
+.sidebar-header {
+  padding: 0.85rem 1rem;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.sidebar-subheader {
+  padding: 0.85rem 1rem 0.35rem 1rem;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  color: #64748b;
+  letter-spacing: 0.05em;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  color: #8b949e;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.95rem;
+  transition: all 0.2s;
+  width: 100%;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: #ffffff;
+}
+
+.active-nav {
+  background: rgba(0, 174, 239, 0.1) !important;
+  border-left: 3px solid #00aeef;
+  color: #00aeef;
+  font-weight: 600;
+  padding-left: calc(1rem - 3px);
+}
+
+.chevron {
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.settings-main-content {
+  flex: 1;
+}
+
+.settings-panel {
+  background-color: #1a1a1f;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.split-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.last-updated-text {
+  font-size: 0.8rem;
+  color: #8b949e;
+  font-family: system-ui, sans-serif;
+  font-weight: normal;
+  text-transform: none;
+}
+
+.item-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.version-tag {
+  font-size: 0.85rem;
+  background-color: rgba(0, 174, 239, 0.15);
+  color: #00aeef;
+  padding: 0.2rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 174, 239, 0.3);
+  font-family: monospace;
+}
+
+.panel-header {
+  padding: 0.85rem 1.25rem;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.panel-body {
+  padding: 1.5rem;
+}
+
+.markdown-body {
+  line-height: 1.6;
+  font-size: 1rem;
+  color: #c9d1d9;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3) {
+  color: #ffffff;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.markdown-body :deep(p) {
+  margin-bottom: 1rem;
+}
+
+.markdown-body :deep(a) {
+  color: #00aeef;
+  text-decoration: underline;
+}
+
+.error-text {
+  color: #f85149;
+}
+
+.markdown-body :deep(.markdown-alert) {
+  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  margin-bottom: 1.5rem;
+  border-left: 4px solid #30363d;
+  border-radius: 0 6px 6px 0;
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.markdown-body :deep(.markdown-alert-title) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  text-transform: capitalize;
+}
+
+.markdown-body :deep(.markdown-alert-note) {
+  border-left-color: #00aeef;
+  background-color: rgba(0, 174, 239, 0.06);
+}
+
+.markdown-body :deep(.markdown-alert-note .markdown-alert-title) {
+  color: #ffffff !important;
+}
+
+.markdown-body :deep(.markdown-alert-note .markdown-alert-title svg) {
+  fill: #ffffff !important;
+  stroke: #ffffff !important;
+  color: #ffffff !important;
+}
+
+.markdown-body :deep(.markdown-alert-warning) {
+  border-left-color: #f0883e;
+  background-color: rgba(240, 136, 62, 0.06);
+}
+
+.markdown-body :deep(.markdown-alert-warning .markdown-alert-title) {
+  color: #f0883e;
+}
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 3rem 0;
+  color: #8b949e;
+}
+
+.full-page-loader {
+  min-height: 50vh;
+  justify-content: center;
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: #00aeef;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (min-width: 768px) {
+  .settings-container {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .settings-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+  }
+}
+</style>

bun.lock

@@ -10,8 +10,10 @@
         "@nuxt/ui": "^4.10.0",
         "@nuxt/vite-builder": "^4.5.0",
         "@primer/octicons": "^19.29.2",
+        "@types/node": "^26.1.1",
         "@unhead/ssr": "^3.2.1",
         "@unhead/vue": "^3.2.1",
+        "marked-alert": "^2.1.2",
         "nuxt": "^4.5.0",
         "tailwindcss": "^4.3.3",
       },
@@ -616,6 +618,8 @@
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
+    "@types/node": ["@types/node@26.1.1", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw=="],
+
     "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
 
     "@types/web-bluetooth": ["@types/web-bluetooth@0.0.21", "", {}, "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="],
@@ -1318,6 +1322,8 @@
 
     "marked": ["marked@17.0.6", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA=="],
 
+    "marked-alert": ["marked-alert@2.1.2", "", { "peerDependencies": { "marked": ">=7.0.0" } }, "sha512-EFNRZ08d8L/iEIPLTlQMDjvwIsj03gxWCczYTht6DCiHJIZhMk4NK5gtPY9UqAYb09eV5VGT+jD4lp396E0I+w=="],
+
     "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
 
     "merge-stream": ["merge-stream@2.0.0", "", {}, "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="],
@@ -1770,6 +1776,8 @@
 
     "undici": ["undici@8.8.0", "", {}, "sha512-ubshXMXwF3MQIMF1y/WxZdNBnjEKeSg2wF5mcGUtU55YTw34tnVVpKRlLf7ruDXZ5344KokPVX4RBx1wJm64Bw=="],
 
+    "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
+
     "unenv": ["unenv@2.0.0-rc.24", "", { "dependencies": { "pathe": "^2.0.3" } }, "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw=="],
 
     "unhead": ["unhead@3.2.1", "", { "dependencies": { "hookable": "^6.1.1", "unplugin": "^3.3.0" }, "peerDependencies": { "vite": ">=6.4.2" }, "optionalPeers": ["vite"] }, "sha512-Z7VNRf0QJlRZmwA1p5gsnmKYkjnbvV/CXdJAL+VMDmMF+RS2P4FqLouEhBA6WOuKPe3ZZ8EZgX2zQm7ZkAGDPg=="],

package.json

@@ -22,8 +22,10 @@
     "@nuxt/ui": "^4.10.0",
     "@nuxt/vite-builder": "^4.5.0",
     "@primer/octicons": "^19.29.2",
+    "@types/node": "^26.1.1",
     "@unhead/ssr": "^3.2.1",
     "@unhead/vue": "^3.2.1",
+    "marked-alert": "^2.1.2",
     "nuxt": "^4.5.0",
     "tailwindcss": "^4.3.3"
   },

server/api/policies.ts

@@ -0,0 +1,56 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+export default defineEventHandler(async () => {
+  const gameRulesDir = path.resolve(process.cwd(), 'public/policy/game-rules')
+
+  const baseRules = [
+    { id: 'general', name: 'General Rules' },
+    { id: 'conduct', name: 'Code of Conduct' },
+    { id: 'privacy', name: 'Privacy Policy' }
+  ]
+
+  const games: Array<{ id: string, name: string, version: string }> = []
+
+  try {
+    if (fs.existsSync(gameRulesDir)) {
+      const folders = await fs.promises.readdir(gameRulesDir)
+
+      for (const folder of folders) {
+        const folderPath = path.join(gameRulesDir, folder)
+
+        if (!folderPath.startsWith(gameRulesDir)) {
+          continue
+        }
+
+        const stat = await fs.promises.stat(folderPath)
+
+        if (stat.isDirectory()) {
+          const metadataPath = path.join(folderPath, 'metadata.json')
+
+          if (fs.existsSync(metadataPath)) {
+            try {
+              const metaContent = await fs.promises.readFile(metadataPath, 'utf-8')
+              const parsedMeta = JSON.parse(metaContent)
+
+              games.push({
+                id: folder,
+                name: parsedMeta.name || folder,
+                version: parsedMeta.version || '1.0.0'
+              })
+            } catch (jsonError) {
+              console.error(`Malformed metadata.json in ${folder}:`, jsonError)
+            }
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error('Error scanning public policy tree:', error)
+  }
+
+  return {
+    baseRules,
+    games
+  }
+})