@ansidev-oss/vitepress-theme-ansidev 1.0.6

package/dist/client/types/index.d.ts

@@ -0,0 +1,45 @@
+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/dist/node/composables.d.mts

@@ -0,0 +1,30 @@
+//#region src/node/composables/types.d.ts
+type Pattern = string | string[];
+type Frontmatter = Record<string, unknown> & {
+  date?: string;
+  excerpt?: string;
+};
+type FrontmatterToString = (frontmatter: Frontmatter) => string;
+type StringOrFrontmatterToString = string | FrontmatterToString;
+//#endregion
+//#region src/node/composables/markdown.d.ts
+declare const useMarkdownFrontmatter: (pattern: Pattern, excerptSeparator?: string) => Array<Frontmatter>;
+//#endregion
+//#region src/node/composables/route.d.ts
+declare const useMarkdownFrontmatterRoute: (pattern: Pattern, frontmatterKey: string, excerptSeparator?: string) => {
+  paths(): any;
+};
+declare const useArchiveRoute: (pattern: Pattern, excerptSeparator?: string) => {
+  paths(): any;
+};
+//#endregion
+//#region src/node/composables/slug.d.ts
+declare const useSlug: (str: string) => string;
+declare const useSlugFilter: (slug: string) => (str: string) => boolean;
+declare const useSlugFromMarkdownFrontMatter: (pattern: Pattern, frontmatterKeyOrMappingFn: StringOrFrontmatterToString, excerptSeparator?: string) => {
+  params: {
+    slug: string;
+  };
+}[];
+//#endregion
+export { useArchiveRoute, useMarkdownFrontmatter, useMarkdownFrontmatterRoute, useSlug, useSlugFilter, useSlugFromMarkdownFrontMatter };

package/dist/node/composables.mjs

@@ -0,0 +1,51 @@
+import fs from "node:fs";
+import { resolve } from "node:path";
+import { globSync } from "glob";
+import matter from "gray-matter";
+
+//#region src/node/composables/markdown.ts
+const useMarkdownFrontmatter = (pattern, excerptSeparator = "---") => {
+	return globSync(pattern, { ignore: ["node_modules/**", ".git/**"] }).map((file) => {
+		const { data, excerpt } = matter(fs.readFileSync(resolve(file), "utf-8"), {
+			excerpt: true,
+			excerpt_separator: excerptSeparator
+		});
+		return {
+			...data,
+			excerpt
+		};
+	});
+};
+
+//#endregion
+//#region src/node/composables/slug.ts
+const useSlug = (str) => {
+	return str.replace(/#/, "-sharp-").replace(/\./, "-dot-").replace(/-$/, "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+};
+const useSlugFilter = (slug) => (str) => useSlug(str) === slug;
+const useSlugFromMarkdownFrontMatter = (pattern, frontmatterKeyOrMappingFn, excerptSeparator = "---") => {
+	const frontMatters = useMarkdownFrontmatter(pattern, excerptSeparator);
+	const _frontmatterMappingFn = typeof frontmatterKeyOrMappingFn === "string" ? (frontMatter) => frontMatter[frontmatterKeyOrMappingFn] : frontmatterKeyOrMappingFn;
+	const arr = frontMatters.flatMap(_frontmatterMappingFn);
+	return [...new Set(arr)].map((str) => {
+		const slug = useSlug(str);
+		if ("index" === slug) console.warn("[WARN] Generated routes contain the reserved route 'index'.");
+		return { params: { slug } };
+	});
+};
+
+//#endregion
+//#region src/node/composables/route.ts
+const useMarkdownFrontmatterRoute = (pattern, frontmatterKey, excerptSeparator = "---") => {
+	return { paths() {
+		return useSlugFromMarkdownFrontMatter(pattern, frontmatterKey, excerptSeparator);
+	} };
+};
+const useArchiveRoute = (pattern, excerptSeparator = "---") => {
+	return { paths() {
+		return useSlugFromMarkdownFrontMatter(pattern, (frontmatter) => new Date(frontmatter.date).getFullYear().toString(), excerptSeparator);
+	} };
+};
+
+//#endregion
+export { useArchiveRoute, useMarkdownFrontmatter, useMarkdownFrontmatterRoute, useSlug, useSlugFilter, useSlugFromMarkdownFrontMatter };

package/dist/node/config.d.mts

@@ -0,0 +1,46 @@
+//#region src/node/config.d.ts
+/**
+ * @type {import('vitepress').UserConfig}
+ */
+declare const config: {
+  themeConfig: {
+    siteURL: string;
+    googleAnalytics: {
+      id: string;
+    };
+    search: {
+      provider: string;
+      options: {
+        /**
+         * @param {string} src
+         * @param {import('vitepress').MarkdownEnv} env
+         * @param {import('markdown-it')} md
+         */
+        _render(src: any, env: any, md: any): Promise<string>;
+      };
+    };
+  };
+  vite: {
+    ssr: {
+      noExternal: string[];
+    };
+    optimizeDeps: {
+      exclude: string[];
+    };
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: string;
+        };
+      };
+    };
+    resolve: {
+      alias: {
+        find: RegExp;
+        replacement: string;
+      }[];
+    };
+  };
+};
+//#endregion
+export { config as default };

package/dist/node/config.mjs

@@ -0,0 +1,47 @@
+import { URL, fileURLToPath } from "node:url";
+import { loadEnv } from "vitepress";
+
+//#region src/node/config.ts
+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.
+*/
+const deps = ["vitepress-theme-ansidev"];
+/**
+* @type {import('vitepress').UserConfig}
+*/
+const config = {
+	themeConfig: {
+		siteURL,
+		googleAnalytics: { id: env.VITE_GA_ID },
+		search: {
+			provider: "local",
+			options: { 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))
+		}] }
+	}
+};
+
+//#endregion
+export { config as default };

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@ansidev-oss/vitepress-theme-ansidev",
+  "version": "1.0.6",
+  "description": "The VitePress theme for ansidev's blog",
+  "type": "module",
+  "main": "dist/node/index.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "author": "Le Minh Tri <ansidev@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ansidev/vitepress-theme-ansidev.git"
+  },
+  "keywords": [
+    "vitepress",
+    "theme",
+    "blog",
+    "tailwindcss",
+    "vue3",
+    "typescript",
+    "i18n",
+    "dark-mode",
+    "ansidev"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts"
+    },
+    "./styles.css": "./dist/client/styles.css",
+    "./config": {
+      "import": "./dist/node/config.mjs",
+      "types": "./dist/node/config.d.ts"
+    },
+    "./composables": {
+      "import": "./dist/node/composables.mjs",
+      "types": "./dist/node/composables.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.0",
+    "@vueuse/core": "^14.2.1",
+    "vue-i18n": "^11.2.8"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.2",
+    "@iconify/vue": "^5.0.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.2.3",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "autoprefixer": "^10.4.24",
+    "glob": "^13.0.5",
+    "gray-matter": "^4.0.3",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3",
+    "rollup-plugin-copy": "^3.5.0",
+    "tailwindcss": "^4.1.18",
+    "ts-node": "^10.9.2",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitepress": "^2.0.0-alpha.16",
+    "vue": "^3.5.28",
+    "vue-tsc": "^3.2.4"
+  },
+  "peerDependencies": {
+    "vitepress": "^2.0.0-alpha.16",
+    "vue": "^3.5.28"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint:check": "biome check",
+    "lint": "biome check --write",
+    "dev": "vite build --watch",
+    "clean": "rimraf dist",
+    "build:client": "vite build && tsc --emitDeclarationOnly",
+    "build:node": "tsdown",
+    "build": "pnpm clean && pnpm build:client && pnpm build:node"
+  }
+}

package/src/client/components/EmptyFooter.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

package/src/client/components/Footer.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import { computed, defineAsyncComponent } from 'vue'
+
+const { theme, frontmatter } = useData()
+const { hasSidebar } = useLayout()
+
+const copyright = computed(() => {
+  return typeof theme.value.footer.copyright === 'string'
+    ? theme.value.footer.copyright.replace(/#\{present\}/g, new Date().getFullYear().toString())
+    : theme.value.footer.copyright
+})
+
+const GoogleAnalytics = theme.value.googleAnalytics
+  ? defineAsyncComponent(() => import('../plugins/google-analytics/components/GoogleAnalytics.vue'))
+  : () => null
+
+const Donation = theme.value.donation
+  ? defineAsyncComponent(() => import('../plugins/donation/components/Donation.vue'))
+  : () => null
+</script>
+
+<template>
+  <div class="flex flex-wrap space-x-4 py-4 items-center justify-center">
+    <Donation :donation="theme.donation" />
+  </div>
+  <footer
+    v-if="theme.footer && frontmatter.footer !== false"
+    class="VPFooter"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
+    <div class="container">
+      <p
+        v-if="theme.footer.message"
+        class="message"
+        v-html="theme.footer.message"
+      ></p>
+      <p v-if="copyright" class="copyright" v-html="copyright"></p>
+    </div>
+  </footer>
+  <GoogleAnalytics :google-analytics="theme.googleAnalytics" />
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+.VPFooter :deep(a) {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  transition: color 0.25s;
+}
+
+.VPFooter :deep(a:hover) {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>

package/src/client/components/Link.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import RouterLink from './RouterLink.vue'
+
+const props = defineProps({
+  href: {
+    type: String,
+    required: true,
+    default: '#',
+  },
+  disableRouterLink: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+const isInternalLink = props.href?.startsWith('/') && !props.disableRouterLink
+const isAnchorLink = props.href?.startsWith('#')
+</script>
+
+<template>
+  <RouterLink v-if="isInternalLink || isAnchorLink" :to="href" v-bind="$attrs">
+    <slot />
+  </RouterLink>
+  <a v-else-if="disableRouterLink" target="_self" :href="href" v-bind="$attrs">
+    <slot />
+  </a>
+  <a v-else target="_blank" rel="noopener noreferrer" :href="href" v-bind="$attrs">
+    <slot />
+  </a>
+</template>

package/src/client/components/LocaleSwitcher.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { switchLocale } from '../composables/locale'
+
+defineProps({
+  size: {
+    type: Number,
+    required: false,
+    default: 20,
+  },
+})
+
+const { t, availableLocales, locale } = useI18n()
+const toggleLocale = () => switchLocale(availableLocales, locale)
+</script>
+
+<template>
+  <div class="divider" />
+  <button
+    :aria-label="t('button.toggle_locale')"
+    type="button"
+    class="VPLocaleSwitcher"
+    @click="toggleLocale"
+  >
+    <Icon icon="bi:translate" :width="size" :height="size" />
+  </button>
+</template>
+
+<style scoped>
+.divider {
+  margin-right: 8px;
+  margin-left: 16px;
+  width: 1px;
+  height: 24px;
+  background-color: var(--vp-c-divider);
+  content: "";
+}
+
+.VPLocaleSwitcher {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.VPLocaleSwitcher:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPLocaleSwitcher > :deep(svg) {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+</style>

package/src/client/components/PostDate.vue

@@ -0,0 +1,42 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  /**
+   * { time, string }
+   */
+  date: [Date, String],
+  textSize: {
+    type: String,
+    default: null,
+  },
+})
+
+const { t } = useI18n()
+const dateObject = computed(() => {
+  const date = props.date instanceof Date ? props.date : new Date(props.date as string)
+
+  return {
+    time: +date,
+    string: date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }),
+  }
+})
+
+const getDateTime = () => new Date().toISOString()
+</script>
+
+<template>
+  <dl>
+    <dt class="sr-only">
+      {{ t('posted_on') }}
+    </dt>
+    <dd class="font-medium leading-6" :class="[textSize ? `text-${textSize}` : 'text-base']">
+      <time :datetime="getDateTime()">{{ dateObject.string }}</time>
+    </dd>
+  </dl>
+</template>

package/src/client/components/PostItem.vue

@@ -0,0 +1,33 @@
+<script setup lang='ts'>
+import { computed, type PropType } from 'vue'
+import { usePostDate } from '../composables'
+import type { Post } from '../types'
+import TermLink from './TermLink.vue'
+
+const props = defineProps({
+  post: {
+    type: Object as PropType<Post>,
+    required: true,
+  },
+})
+
+const postDate = computed(() => usePostDate(props.post.date))
+</script>
+
+<template>
+  <div class="flex p-4 component-border">
+    <div class="text-center" style="min-width: 80px;">
+      <div class="text-6xl font-bold">{{ postDate?.day }}</div>
+      <div>{{ postDate?.month }}, {{ postDate?.year }}</div>
+    </div>
+    <div class="pl-8">
+      <div class="flex flex-wrap mb-3">
+        <a class="text-2xl font-bold leading-8 tracking-tight" :href="post?.url" :title="post.title">{{ post.title }}</a>
+      </div>
+      <div class="flex flex-wrap mb-3">
+        <TermLink v-for="category in post.categories" :key="category" :text="category" basePath="/categories/" />
+      </div>
+      <p>{{ post?.excerpt }}</p>
+    </div>
+  </div>
+</template>

package/src/client/components/PostList.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Post } from '../types'
+import PostItem from './PostItem.vue'
+
+defineProps({
+  posts: {
+    type: Object as PropType<Post[]>,
+    required: true,
+    default: [],
+  },
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="posts.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+    <PostItem v-for="post of posts" :key="post?.url" :post="post" />
+  </div>
+  <p v-if="posts.length === 0">{{ t('no_post') }}</p>
+</template>

package/src/client/components/ProjectCard.vue

@@ -0,0 +1,68 @@
+<script setup lang='ts'>
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useProjectStatusStyle } from '../composables'
+import type { Project } from '../types'
+import Link from './Link.vue'
+import PostDate from './PostDate.vue'
+import StatusBadge from './StatusBadge.vue'
+import TermLink from './TermLink.vue'
+
+const props = defineProps({
+  project: {
+    type: Object as PropType<Project>,
+    required: true,
+  },
+})
+
+const { t } = useI18n()
+const projectStatusStyles = computed(() => useProjectStatusStyle(props.project.developmentStatus))
+</script>
+
+<template>
+  <div class="flex flex-col p-4 component-border">
+    <div class="flex flex-row justify-between items-center mb-4">
+      <a :href="project.url" class="text-2xl font-bold leading-8 tracking-tight">
+        {{ project.title }}
+      </a>
+      <div class="flex flex-row">
+        <a v-if="project.showcaseUrl" class="mx-1 text-gray-500 transition hover:text-gray-600" target="_blank"
+          rel="noopener noreferrer" :href="project.showcaseUrl">
+          <span class="sr-only">external-link</span>
+          <Icon icon="bi:box-arrow-up-right" class="text-dark dark:text-white ml-2" />
+        </a>
+        <a v-if="project.repositoryUrl" class="mx-1 text-gray-500 transition hover:text-gray-600" target="_blank"
+          rel="noopener noreferrer" :href="project.repositoryUrl">
+          <span class="sr-only">github</span>
+          <Icon icon="bi:github" class="text-dark dark:text-white ml-2" />
+        </a>
+      </div>
+    </div>
+    <div class="project-info">
+      <div v-html="project.excerpt" />
+      <div class="flex flex-col justify-between">
+        <div v-if="project.license" class="mb-3">
+          {{ t('license') }}:
+          <Link v-if="project.licenseUrl" :href="project.licenseUrl" class="link-alt">
+          {{ project.license }}
+          </Link>
+          <span v-else>{{ project.license }}</span>
+        </div>
+        <div class="mb-3">
+          {{ t('development_status.title') }}: <StatusBadge v-bind="projectStatusStyles">
+            {{ $t(`development_status.${project.developmentStatus}`) }}
+          </StatusBadge>
+        </div>
+        <div class="flex flex-wrap mb-3">
+          <TermLink v-for="tech in project.techs" :key="tech" :text="tech" basePath="/projects?tech=" />
+        </div>
+        <PostDate :date="project.date" text-size="sm" />
+      </div>
+    </div>
+    <div class="text-end">
+      <a :href="project.url" :aria-label="`Read ${project.title}`">
+        {{ t('button.read_more') }} &rarr;
+      </a>
+    </div>
+  </div>
+</template>

package/src/client/components/ProjectList.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Project } from '../types'
+import ProjectCard from './ProjectCard.vue'
+
+defineProps({
+  projects: {
+    type: Object as PropType<Project[]>,
+    required: true,
+    default: [],
+  },
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="projects.length > 0" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+    <ProjectCard v-for="project of projects" :key="project?.url" :project="project" />
+  </div>
+  <p v-if="projects.length === 0">{{ t('no_post') }}</p>
+</template>