@ansidev-oss/vitepress-theme-ansidev 1.0.6

package/src/client/plugins/google-analytics/components/GoogleAnalytics.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { GoogleAnalyticsOptions } from '..'
+
+// biome-ignore lint/suspicious/noExplicitAny: ignore check for this line
+declare const dataLayer: any[]
+// biome-ignore lint/suspicious/noExplicitAny: ignore check for this line
+declare const gtag: (...args: any[]) => void
+declare global {
+  interface Window {
+    dataLayer?: typeof dataLayer
+    gtag?: typeof gtag
+  }
+}
+
+const props = defineProps<{
+  googleAnalytics: GoogleAnalyticsOptions
+}>()
+
+const googleAnalyticsOptions = props.googleAnalytics
+
+let isInitialized = false
+
+function init() {
+  if (window.dataLayer && window.gtag) {
+    return
+  }
+
+  if (!isInitialized) {
+    isInitialized = true
+    const externalScript = document.createElement('script')
+    externalScript.src = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsOptions.id}`
+    externalScript.async = true
+    document.head.appendChild(externalScript)
+
+    const inlineScript = document.createElement('script')
+    inlineScript.textContent = `
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '${googleAnalyticsOptions.id}');
+`
+    document.head.appendChild(inlineScript)
+  }
+}
+
+if (googleAnalyticsOptions) {
+  onMounted(init)
+}
+</script>
+
+<template />

package/src/client/plugins/google-analytics/index.ts

@@ -0,0 +1,8 @@
+export interface GoogleAnalyticsOptions {
+  /**
+   * The Google Analytics ID.
+   *
+   * @default process.env.VITE_GA_ID
+   */
+  id: string
+}

package/src/client/plugins/i18n/index.ts

@@ -0,0 +1,13 @@
+import { createI18n } from 'vue-i18n'
+
+import en from './locales/en.json' with { type: 'json' }
+import vi from './locales/vi.json' with { type: 'json' }
+
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en,
+    vi,
+  },
+})

package/src/client/plugins/i18n/locales/en.json

@@ -0,0 +1,25 @@
+{
+  "button": {
+    "toggle_locale": "Change language",
+    "read_more": "Read more"
+  },
+  "all_posts": "All posts",
+  "posted_on": "Posted on",
+  "my_projects": "My projects",
+  "categories": "Categories",
+  "tags": "Tags",
+  "archives": "Archives",
+  "no_post": "No post.",
+  "no_category": "No category.",
+  "no_tag": "No tag.",
+  "no_archive": "No archive.",
+  "license": "License",
+  "source_code": "Source Code",
+  "technologies": "Technologies",
+  "development_status": {
+    "title": "Development status",
+    "active": "Active",
+    "inactive": "Inactive",
+    "unmaintained": "Unmaintained"
+  }
+}

package/src/client/plugins/i18n/locales/vi.json

@@ -0,0 +1,25 @@
+{
+  "button": {
+    "toggle_locale": "Đổi ngôn ngữ",
+    "read_more": "Đọc thêm"
+  },
+  "all_posts": "Tất cả bài viết",
+  "posted_on": "Đăng vào",
+  "my_projects": "Các dự án của tôi",
+  "categories": "Chủ đề",
+  "tags": "Thẻ",
+  "archives": "Lưu trữ",
+  "no_post": "Không có bài viết nào.",
+  "no_category": "Không có chủ đề nào.",
+  "no_archive": "Không có bản lưu trữ nào.",
+  "no_tag": "Không có thẻ nào.",
+  "license": "Giấy phép",
+  "source_code": "Mã nguồn",
+  "technologies": "Công nghệ",
+  "development_status": {
+    "title": "Trạng thái dự án",
+    "active": "Đang phát triển",
+    "inactive": "Không hoạt động",
+    "unmaintained": "Ngừng phát triển"
+  }
+}

package/src/client/styles/index.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: rgb(59, 130, 246);
+  --color-primary-alt: rgb(29, 78, 216);
+  --color-primary-alt-dark: rgb(147, 197, 253);
+  --color-secondary: rgb(239, 68, 68);
+  --color-secondary-dark: rgb(234, 179, 8);
+}
+
+@utility component-border {
+  @apply border rounded-md border-gray-500 hover:border-secondary dark:hover:border-secondary-dark;
+}
+
+@utility link {
+  @apply no-underline hover:text-secondary dark:hover:text-secondary-dark;
+}
+
+@utility link-alt {
+  @apply text-primary-alt! dark:text-primary-alt-dark! link!;
+}
+
+:root {
+  --vp-c-brand-1: var(--color-primary);
+}
+
+.vp-doc a {
+  @apply link;
+}

package/src/client/types/index.ts

@@ -0,0 +1,50 @@
+import type { DefaultTheme } from 'vitepress/theme'
+import type { DonationPluginConfig } from '../plugins/donation'
+import type { GoogleAnalyticsOptions } from '../plugins/google-analytics'
+
+export interface ThemeConfig extends DefaultTheme.Config {
+  /**
+   * The site URL.
+   *
+   * @default process.env.VITE_BASE_URL
+   */
+  siteURL?: string
+  googleAnalytics?: GoogleAnalyticsOptions
+  donation?: DonationPluginConfig
+}
+
+export type { DonationPluginConfig } from '../plugins/donation'
+export type { GoogleAnalyticsOptions } from '../plugins/google-analytics'
+
+export interface Post {
+  type: string
+  title: string
+  author: string
+  gravatar: string
+  twitter: string
+  url?: string
+  date: Date
+  excerpt: string | undefined
+  categories: string[]
+  tags: string[]
+}
+
+export interface PostDate {
+  time: number
+  day: string
+  month: string
+  year: string
+}
+
+export interface Project {
+  title: string
+  url: string
+  showcaseUrl: string
+  repositoryUrl: string
+  excerpt: string | undefined
+  license: string
+  licenseUrl: string
+  developmentStatus: string
+  techs: string[]
+  date: Date
+}

package/src/node/composables/index.ts

@@ -0,0 +1,3 @@
+export * from './markdown'
+export * from './route'
+export * from './slug'

package/src/node/composables/markdown.ts

@@ -0,0 +1,14 @@
+import fs from 'node:fs'
+import { resolve } from 'node:path'
+import { globSync } from 'glob'
+import matter from 'gray-matter'
+import type { Frontmatter, Pattern } from './types'
+
+export const useMarkdownFrontmatter = (pattern: Pattern, excerptSeparator: string = '---'): Array<Frontmatter> => {
+  const files = globSync(pattern, { ignore: ['node_modules/**', '.git/**'] })
+  return files.map((file) => {
+    const src = fs.readFileSync(resolve(file), 'utf-8')
+    const { data, excerpt } = matter(src, { excerpt: true, excerpt_separator: excerptSeparator })
+    return { ...data, excerpt }
+  })
+}

package/src/node/composables/route.ts

@@ -0,0 +1,26 @@
+import { useSlugFromMarkdownFrontMatter } from './slug'
+import type { Frontmatter, Pattern } from './types'
+
+export const useMarkdownFrontmatterRoute = (
+  pattern: Pattern,
+  frontmatterKey: string,
+  excerptSeparator: string = '---',
+) => {
+  return {
+    paths() {
+      return useSlugFromMarkdownFrontMatter(pattern, frontmatterKey, excerptSeparator)
+    },
+  }
+}
+
+export const useArchiveRoute = (pattern: Pattern, excerptSeparator: string = '---') => {
+  return {
+    paths() {
+      return useSlugFromMarkdownFrontMatter(
+        pattern,
+        (frontmatter: Frontmatter) => new Date(frontmatter.date as string).getFullYear().toString(),
+        excerptSeparator,
+      )
+    },
+  }
+}

package/src/node/composables/slug.ts

@@ -0,0 +1,40 @@
+import { useMarkdownFrontmatter } from './markdown'
+import type { Frontmatter, FrontmatterToString, Pattern, StringOrFrontmatterToString } from './types'
+
+export const useSlug = (str: string) => {
+  const s = str.replace(/#/, '-sharp-').replace(/\./, '-dot-').replace(/-$/, '')
+  return s
+    .toLowerCase()
+    .normalize('NFD') // Decompose Unicode characters
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+    .replace(/đ/g, 'd') // Handle Vietnamese "đ"
+    .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with dashes
+    .replace(/^-+|-+$/g, '') // Remove leading or trailing dashes
+}
+
+export const useSlugFilter = (slug: string) => (str: string) => useSlug(str) === slug
+
+export const useSlugFromMarkdownFrontMatter = (
+  pattern: Pattern,
+  frontmatterKeyOrMappingFn: StringOrFrontmatterToString,
+  excerptSeparator: string = '---',
+) => {
+  const frontMatters = useMarkdownFrontmatter(pattern, excerptSeparator)
+  const _frontmatterMappingFn: FrontmatterToString =
+    typeof frontmatterKeyOrMappingFn === 'string'
+      ? (frontMatter: Frontmatter) => frontMatter[frontmatterKeyOrMappingFn] as string
+      : frontmatterKeyOrMappingFn
+
+  const arr: string[] = frontMatters.flatMap(_frontmatterMappingFn)
+
+  const set = [...new Set(arr)]
+  const slugs = set.map((str: string) => {
+    const slug = useSlug(str)
+    if ('index' === slug) {
+      console.warn("[WARN] Generated routes contain the reserved route 'index'.")
+    }
+    return { params: { slug } }
+  })
+  // console.log(slugs)
+  return slugs
+}

package/src/node/composables/types.ts

@@ -0,0 +1,7 @@
+export type Pattern = string | string[]
+export type Frontmatter = Record<string, unknown> & {
+  date?: string
+  excerpt?: string
+}
+export type FrontmatterToString = (frontmatter: Frontmatter) => string
+export type StringOrFrontmatterToString = string | FrontmatterToString

package/src/node/config.ts

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import { fileURLToPath, URL } from 'node:url'
+import { loadEnv } from 'vitepress'
+
+process.env.VITE_EXTRA_EXTENSIONS = 'rss'
+globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === 'development'
+
+const env = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), 'VITE_')
+
+const siteURL = env.VITE_BASE_URL
+
+/**
+ * This file is intended to be required from VitePress
+ * consuming project's config file.
+ *
+ * It runs in Node.js.
+ */
+
+// for local-linked development
+const deps = ['vitepress-theme-ansidev']
+
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+const config = {
+  themeConfig: {
+    siteURL,
+    googleAnalytics: {
+      id: env.VITE_GA_ID,
+    },
+    search: {
+      provider: 'local',
+      options: {
+        /**
+         * @param {string} src
+         * @param {import('vitepress').MarkdownEnv} env
+         * @param {import('markdown-it')} md
+         */
+        async _render(src, env, md) {
+          const html = await md.renderAsync(src, env)
+          if (env.frontmatter?.search === false) return ''
+          let renderedHtml = ''
+          if (env.frontmatter?.title) {
+            renderedHtml += `<h1>${env.frontmatter.title} <a href="#">&#8203;</a></h1>`
+          }
+          if (html.length > 0) {
+            renderedHtml += html
+          }
+          return renderedHtml
+        },
+      },
+    },
+  },
+  vite: {
+    ssr: {
+      noExternal: deps,
+    },
+    optimizeDeps: {
+      exclude: deps,
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/VPFooter\.vue$/,
+          replacement: fileURLToPath(new URL('./components/EmptyFooter.vue', import.meta.url)),
+        },
+      ],
+    },
+  },
+}
+
+export default config

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { Component } from 'vue'
+  const component: Component
+  export default component
+}