fix: localized remaining assets and removed discord widget

Author: blaquewithaq

.gitignore

@@ -27,5 +27,6 @@ logs
 .history
 
 # Project
+.private
 public/assets
-TODO.md
+package-lock.json

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

app/pages/blog/index.vue

@@ -14,6 +14,7 @@ useSeoMeta({
   ogDescription: description
 })
 
+// TODO: Figure out OgImage component usage in static builds
 if (import.meta.client) defineOgImageComponent('myOgImage')
 </script>
 
@@ -33,7 +34,7 @@ if (import.meta.client) defineOgImageComponent('myOgImage')
           :icon="post.icon"
           :title="post.title"
           :description="post.description"
-          :image="post.image"
+          :image="{ src: useRuntimeConfig().public.siteUrl + post.image.src }"
           :date="new Date(post.date).toLocaleDateString('en', { year: 'numeric', month: 'short', day: 'numeric' })"
           :authors="post.authors"
           :badge="post.badge"

app/pages/index.vue

@@ -37,18 +37,7 @@ const batchTwo = computed(() => {
   return contributors.value.slice(mid)
 })
 
-const discordWidgetSrc = computed(() => {
-  const widgetId = page.value?.connect?.discordWidgetId
-  const color = useColorMode().value === 'dark' ? 'light' : 'dark'
-
-  return widgetId ? `https://discord.com/widget?id=${widgetId}&theme=${color}` : undefined
-})
-
-const isClient = ref(false)
-
 onMounted(async () => {
-  isClient.value = true
-
   try {
     projects.value = dataStore.getProjects({
       itemsToShow: page.value?.projects?.itemsToShow || 6,
@@ -250,17 +239,35 @@ onMounted(async () => {
     <UPageSection
       v-if="page.connect"
       v-bind="page.connect"
+      :ui="{
+        features: 'block'
+      }"
     >
-      <div class="w-full h-[524px] rounded-lg shadow-2xl ring ring-default overflow-hidden relative">
-        <USkeleton class="absolute inset-0 w-full h-full z-0" />
+      <template #features>
+        <UButton
+          v-if="page.connect.button"
+          v-bind="page.connect.button"
+          class="bg-[#5865F2]"
+          color="neutral"
+          variant="subtle"
+          size="xl"
+        />
+      </template>
 
-        <iframe
-          v-if="isClient && discordWidgetSrc"
-          :src="discordWidgetSrc"
-          allowtransparency="true"
-          frameborder="0"
-          sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-          class="absolute inset-0 w-full h-full z-10 transition-opacity duration-300"
+      <div
+        class="w-full h-[524px] rounded-lg shadow-2xl ring ring-default overflow-hidden relative flex items-center justify-center"
+      >
+        <NuxtImg
+          v-if="page.connect.image && page.connect.image.src"
+          :src="useRuntimeConfig().public.siteUrl + page.connect.image.src"
+          :srcset="useRuntimeConfig().public.siteUrl + page.connect.image.src"
+          :alt="page.connect.image.alt"
+          class="absolute inset-0 w-full h-full object-cover"
+        />
+
+        <USkeleton
+          v-else
+          class="absolute inset-0 w-full h-full"
         />
       </div>
     </UPageSection>

bun.lock

@@ -119,7 +119,8 @@ const collections = {
         reverse: z.boolean().optional(),
         orientation: z.enum(orientationEnum).optional(),
         icon: z.string().optional(),
-        discordWidgetId: z.string().optional()
+        image: createImageSchema().optional(),
+        button: createButtonSchema().optional()
       }).optional()
     })
   }),

content.config.ts

@@ -65,4 +65,11 @@ connect:
   icon: i-lucide-spline
   title: Connect With Us
   description: Have questions or feedback? We'd love to hear from you!
-  discordWidgetId: "737206408482914387"
+  image:
+    src: /assets/images/connect-cover.jpg
+    alt: Discord Community
+  button:
+    label: Join our Discord
+    icon: i-simple-icons-discord
+    to: https://discord.gg/mMrxAqaa3W
+    target: _blank

content/0.index.yml

@@ -12,7 +12,7 @@ download:
   title: Download
   description: Find the latest releases of our software and tools.
   items:
-    - icon: i-simple-icons:windows
+    - icon: i-simple-icons-windows
       title: Windows
       description: Download the latest version for Windows.
       items:
@@ -22,7 +22,7 @@ download:
         - icon: i-lucide-download
           label: Library
           repoName: projectm
-    - icon: i-simple-icons:linux
+    - icon: i-simple-icons-linux
       title: Linux
       description: Download the latest version for Linux.
       items:
@@ -32,7 +32,7 @@ download:
         - icon: i-lucide-download
           label: Library
           repoName: projectm
-    - icon: i-simple-icons:apple
+    - icon: i-simple-icons-apple
       title: macOS
       description: Download the latest version for macOS.
       items:

content/2.download.yml

@@ -56,9 +56,50 @@ export default defineNuxtConfig({
         braceStyle: '1tbs'
       }
     }
-  }
+  },
 
   // image: {
   //   domains: ['projectm-visualizer.org']
-  // }
+  // },
+
+  icon: {
+    provider: 'none',
+    serverBundle: false,
+    clientBundle: {
+      scan: true,
+      icons: [
+        'lucide:menu',
+        'lucide:chevron-down',
+        'lucide:arrow-up-right',
+        'lucide:arrow-right',
+        'lucide:x',
+        'lucide:hash',
+        'lucide:sun',
+        'lucide:moon',
+        'lucide:book',
+        'lucide:book-open',
+        'lucide:book-text',
+        'lucide:code-xml',
+        'lucide:credit-card',
+        'lucide:download',
+        'lucide:equal-approximately',
+        'lucide:folder-root',
+        'lucide:git-fork',
+        'lucide:newspaper',
+        'lucide:pencil',
+        'lucide:spline',
+        'lucide:star',
+        'simple-icons:apple',
+        'simple-icons:codesandbox',
+        'simple-icons:discord',
+        'simple-icons:github',
+        'simple-icons:linux',
+        'simple-icons:mastodon',
+        'simple-icons:stackblitz',
+        'simple-icons:windows',
+        'simple-icons:x',
+        'simple-icons:youtube'
+      ]
+    }
+  }
 })

nuxt.config.ts

@@ -24,7 +24,7 @@
     "push-secrets": "bun run ./scripts/push-secrets.ts"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/lucide": "^1.2.49",
     "@iconify-json/simple-icons": "^1.2.38",
     "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
@@ -52,6 +52,7 @@
     "eslint": "^9.28.0",
     "libsodium-wrappers": "^0.7.15",
     "lint-staged": "^16.1.1",
+    "node-gyp": "^11.2.0",
     "octokit": "^5.0.3",
     "semantic-release": "^24.2.5",
     "simple-git-hooks": "^2.13.0",

package.json

@@ -0,0 +1,129 @@
+// extract-icons.ts
+// Extract icons from the project and add to nuxt.config.ts icons
+//   - arguments:
+//   - options:
+//     - "--dirs, -d" (comma-separated directories to scan, default: './app,./content,./shared')
+//     - "--write, -w" (write changes to nuxt.config.ts, default: false)
+
+import { join, extname } from 'node:path'
+import { readdirSync, statSync } from 'node:fs'
+
+// ---------- Config & Constants ----------
+
+// const NUXT_CONFIG_FILE = 'nuxt.config.ts'
+// Match only icons that start with "i-" and follow the pattern: i-[namespace]-[icon-name]
+const ICON_REGEX = /\bi-([\w]+-[\w-]+)\b/g
+const VALID_EXTENSIONS = ['.yml', '.yaml', '.json', '.md', '.vue', '.ts']
+const DIRS = ['./app', './content', './shared']
+
+// ---------- Arg Parser ----------
+
+function getArgValue(args: string[], long: string, short: string, fallback?: string): string | undefined {
+  const index = args.indexOf(long) !== -1 ? args.indexOf(long) : args.indexOf(short)
+  return index !== -1 && args[index + 1] && !args[index + 1]?.startsWith('-')
+    ? args[index + 1]
+    : fallback
+}
+
+function parseArgs() {
+  const args = Bun.argv.slice(2)
+  const dirs = getArgValue(args, '--dirs', '-d', DIRS.join(','))
+    ?.split(',')
+    .map(dir => dir.trim())
+    .filter(Boolean) || DIRS
+  const write = args.includes('--write') || args.includes('-w')
+
+  if (dirs.length === 0) {
+    console.error('❌ No directories provided. Use --dirs or -d to specify directories.')
+    process.exit(1)
+  }
+
+  return {
+    dirs,
+    write
+  }
+}
+
+// ---------- Icon Extraction ----------
+
+async function extractIconsFromFile(filePath: string, icons: Set<string>) {
+  const content = await Bun.file(filePath).text()
+  let match: RegExpExecArray | null
+  while ((match = ICON_REGEX.exec(content))) {
+    if (match[1]) {
+      icons.add(match[1])
+    }
+  }
+}
+
+async function scanDirRecursively(dir: string, icons: Set<string>) {
+  for (const entry of readdirSync(dir)) {
+    const fullPath = join(dir, entry)
+    const stats = statSync(fullPath)
+
+    if (stats.isDirectory()) {
+      await scanDirRecursively(fullPath, icons)
+    } else if (stats.isFile() && VALID_EXTENSIONS.includes(extname(fullPath))) {
+      await extractIconsFromFile(fullPath, icons)
+    }
+  }
+}
+
+// ---------- Nuxt Config Update ----------
+
+// TODO: Implement this function to update the Nuxt config file with the extracted icons
+//   without overwriting existing icons.
+// async function updateNuxtConfig(icons: string[]) {
+//   const nuxtConfigPath = join(process.cwd(), NUXT_CONFIG_FILE)
+//   const config = await Bun.file(nuxtConfigPath).text()
+
+//   const mergedIcons = new Set([
+//     ...(config.icon?.clientBundle?.icons || []),
+//     ...icons
+//   ])
+
+//   config.icon.clientBundle.icons = mergedIcons
+
+//   await Bun.write(nuxtConfigPath, config)
+//   console.log(`✅ Updated ${NUXT_CONFIG_FILE} with ${icons.length} icons.`)
+// }
+
+// ---------- Format ----------
+
+function cleanIcons(icons: Set<string>): string[] {
+  return Array.from(icons)
+    .map(icon => icon.trim())
+    .filter(icon => icon.length > 0 && !icon.includes(' '))
+    .map(icon => icon.replace(/_/g, '-'))
+    .map((icon) => {
+      const lastDash = icon.lastIndexOf('-')
+      return lastDash !== -1
+        ? icon.slice(0, lastDash) + ':' + icon.slice(lastDash + 1)
+        : icon
+    })
+    .filter((icon, index, self) => self.indexOf(icon) === index)
+    .sort((a, b) => a.localeCompare(b))
+}
+// ---------- Main ----------
+
+async function main() {
+  const { dirs, write } = parseArgs()
+  const icons = new Set<string>()
+
+  for (const dir of dirs) {
+    await scanDirRecursively(dir, icons)
+  }
+
+  const sortedIcons = cleanIcons(icons)
+  console.log(`🔍 Found ${sortedIcons.length} styled icons:`)
+  console.log(sortedIcons.map(i => `  '${i}'`).join(',\n'))
+
+  if (write) {
+    // await updateNuxtConfig(sortedIcons)
+  }
+}
+
+main().catch((err) => {
+  console.error('❌ Unexpected error:', err)
+  process.exit(1)
+})