├── composables
    ├── index.ts
    └── useGithubFetch.ts
├── .npmrc
├── .eslintrc
├── public
    └── favicon.ico
├── utils
    ├── index.ts
    ├── readTime.ts
    ├── url.ts
    └── date.ts
├── tsconfig.json
├── api
    ├── query.d.ts
    ├── index.ts
    └── type.d.ts
├── app.vue
├── .env.example
├── .editorconfig
├── pages
    ├── [...404].vue
    ├── p
    │   └── [id].vue
    ├── index.vue
    ├── search.vue
    └── blog
    │   └── [[catelog]].vue
├── components
    ├── markdown
    │   ├── DocFooter.vue
    │   ├── DocRender.vue
    │   ├── DocToc.vue
    │   ├── DocBack.vue
    │   ├── index.vue
    │   ├── markdown-it.ts
    │   └── DocTitle.vue
    ├── AppFooter.vue
    ├── SearchBar.vue
    ├── IssueCell.vue
    ├── SubNav.vue
    ├── Comment.vue
    ├── AppHeader.vue
    └── DarkMode.vue
├── layouts
    └── default.vue
├── middleware
    └── app.global.ts
├── assets
    └── styles
    │   ├── var.css
    │   ├── global.css
    │   ├── transition.css
    │   └── markdown.scss
├── .gitignore
├── .vscode
    └── settings.json
├── package.json
├── LICENSE
├── uno.config.ts
├── nuxt.config.ts
├── README.md
└── README_en.md


/composables/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useGithubFetch'
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@chansee97/eslint-config-vue"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chansee97/issue-nuxt-blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './url'
2 | export * from './date'
3 | export * from './readTime'
4 | 


--------------------------------------------------------------------------------
/utils/readTime.ts:
--------------------------------------------------------------------------------
1 | export function getReadTime(post: string) {
2 |   return Math.round(post.length / 700) + 1
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/api/query.d.ts:
--------------------------------------------------------------------------------
1 | export interface IssueQuery {
2 |   /* issue分类 */
3 |   milestone?: string
4 |   /* issue标签 */
5 |   labels?: string
6 | }
7 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtLoadingIndicator color="#777" />
4 |     <NuxtPage />
5 |   </NuxtLayout>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # gh 用户名
2 | VITE_OWNER = chansee97
3 | # gh blog 仓库
4 | VITE_BLOGS_REPO = my-blogs
5 | # gh token
6 | VITE_GITHUB_TOKEN = github_pat_xxxxxx
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/pages/[...404].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | useHead({
 3 |   title: '404',
 4 | })
 5 | </script>
 6 | 
 7 | <template>
 8 |   <section>
 9 |     <p>This page is 404.</p>
10 |   </section>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/markdown/DocFooter.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | </script>
3 | 
4 | <template>
5 |   <div class="h-6em flex items-center">
6 |     <div class="bg-gray-300:50 h-1px w-full" />
7 |   </div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <AppHeader />
 4 |     <main class="px-12 py-10 w-100%">
 5 |       <div class="max-w-73ch m-auto">
 6 |         <slot />
 7 |         <AppFooter />
 8 |       </div>
 9 |     </main>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/middleware/app.global.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtRouteMiddleware((_to, _from) => {
 2 |   useHead({
 3 |     titleTemplate: (productCategory) => {
 4 |       return productCategory
 5 |         ? `${productCategory} - Rock Chen`
 6 |         : 'Rock Chen'
 7 |     },
 8 |   })
 9 | })
10 | 


--------------------------------------------------------------------------------
/assets/styles/var.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | }
 3 | 
 4 | html {
 5 |   --primary: #0d0d0d;
 6 |   --c-bg: #fafafa;
 7 |   --c-scrollbar: #ccc;
 8 |   --c-scrollbar-hover: #aaa;
 9 | }
10 | 
11 | html.dark {
12 |   --c-text: #ebebeb;
13 |   --c-bg: #141414;
14 |   --c-scrollbar: #555;
15 |   --c-scrollbar-hover: #777;
16 | }
17 | 


--------------------------------------------------------------------------------
/components/markdown/DocRender.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { md } from './markdown-it'
 3 | 
 4 | const { content } = defineProps(['content'])
 5 | 
 6 | const mdContent = md.render(content || '暂无内容')
 7 | </script>
 8 | 
 9 | <template>
10 |   <div v-html="mdContent" />
11 | </template>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | .env.local
25 | !.env.example
26 | 
27 | #Lock files
28 | *-lock.yaml
29 | 


--------------------------------------------------------------------------------
/pages/p/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { getIssue } from '@/api'
 3 | 
 4 | const route = useRoute()
 5 | const { id } = route.params
 6 | 
 7 | const { data } = await getIssue(id as string)
 8 | 
 9 | useHead({
10 |   title: data?.value.title,
11 | })
12 | </script>
13 | 
14 | <template>
15 |   <div>
16 |     <markdown :issue="data" />
17 |     <Comment :id="data.number" />
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/components/markdown/DocToc.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toc } from './markdown-it'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div
 7 |     class="absolute top-0 left-full h-full pl-2em hidden 2xl:block w-20em"
 8 |   >
 9 |     <div
10 |       class="sticky top-14 w-25em max-h-70vh overflow-y-auto overscroll-contain op-30 hover:op-100 transition-opacity" v-html="toc.html || ''"
11 |     />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/AppFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { VITE_OWNER } = import.meta.env
 3 | </script>
 4 | 
 5 | <template>
 6 |   <footer class="pt-5em">
 7 |     <div class="flex items-center flex-col md:flex-row gap-1em">
 8 |       <span class="op-50 text-sm">
 9 |         <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="underline mr-2" target="_blank" rel="noopener noreferrer">
10 |           CC BY-NC-SA 4.0
11 |         </a>
12 |         2023-PRESENT © {{ VITE_OWNER }}
13 |       </span>
14 |     </div>
15 |   </footer>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/composables/useGithubFetch.ts:
--------------------------------------------------------------------------------
 1 | const { VITE_GITHUB_TOKEN } = import.meta.env
 2 | 
 3 | export async function useGithubFetch<T>(url: string) {
 4 |   const { data, error } = await useFetch<T>(url, {
 5 |     onRequest({ options }) {
 6 |       options.headers = {
 7 |         Authorization: `Bearer ${VITE_GITHUB_TOKEN}`,
 8 |       }
 9 |     },
10 |   })
11 | 
12 |   if (error.value) {
13 |     throw createError({
14 |       ...error.value,
15 |       statusMessage: `Could not fetch data from ${url}`,
16 |     })
17 |   }
18 | 
19 |   return {
20 |     data,
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.tabSize": 2,
 3 |   "editor.formatOnSave": false,
 4 |   "editor.codeActionsOnSave": {
 5 |     "source.fixAll.eslint": "explicit",
 6 |     "source.fixAll.stylelint": "explicit",
 7 |     "source.organizeImports": "never"
 8 |   },
 9 |   "prettier.enable": false,
10 |   "eslint.format.enable": true,
11 |   "eslint.validate": [
12 |     "javascript",
13 |     "javascriptreact",
14 |     "typescript",
15 |     "typescriptreact",
16 |     "vue",
17 |     "html",
18 |     "markdown",
19 |     "json",
20 |     "jsonc",
21 |     "yaml"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/components/markdown/DocBack.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | function backTop() {
 3 |   window.scrollTo({ top: 0, behavior: 'smooth' })
 4 | }
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="pr-2em lg:(absolute top-0 right-full h-full)">
 9 |     <div class="sticky top-14 w-8em">
10 |       <div class="cursor-pointer" @click="$router.back()">
11 |         <div class="i-icon-park-outline-left-small-up" /> Back
12 |       </div>
13 | 
14 |       <div class="hidden xl:block cursor-pointer " @click="backTop">
15 |         <div class="i-icon-park-outline-to-top-one" /> To Top
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import DocRender from '@/components/markdown/DocRender.vue'
 3 | import { getReadme } from '@/api'
 4 | 
 5 | const { data } = await getReadme()
 6 | 
 7 | const readme = decodeURIComponent(escape(atob(data.value.content)))
 8 | </script>
 9 | 
10 | <template>
11 |   <section class="prose">
12 |     <DocRender :content="readme" />
13 |   </section>
14 | </template>
15 | 
16 | <style>
17 | .skill-wrapper{
18 |   display: flex;
19 |   flex-wrap: wrap;
20 |   gap:0.5em;
21 |   margin-bottom: 0.5em;
22 | }
23 | .skill-wrapper > img{
24 |   border-radius: 3px;
25 |   margin: 3px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/assets/styles/global.css:
--------------------------------------------------------------------------------
 1 | ::-webkit-scrollbar {
 2 |   width: 6px;
 3 | }
 4 | 
 5 | ::-webkit-scrollbar:horizontal {
 6 |   height: 6px;
 7 | }
 8 | 
 9 | ::-webkit-scrollbar-track,
10 | ::-webkit-scrollbar-corner {
11 |   border-radius: 10px;
12 | }
13 | 
14 | ::-webkit-scrollbar-thumb {
15 |   background: var(--c-scrollbar);
16 |   border-radius: 10px;
17 | }
18 | 
19 | ::-webkit-scrollbar-thumb:hover {
20 |   background: var(--c-scrollbar-hover);
21 | }
22 | 
23 | html,
24 | body,
25 | #nuxt-root {
26 |   height: 100%;
27 |   line-height: 1.75;
28 |   scroll-behavior: smooth;
29 | }
30 | 
31 | html {
32 |   background: var(--c-bg);
33 |   color:var(--c-text);
34 | }
35 | 


--------------------------------------------------------------------------------
/components/SearchBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits<{
 3 |   search: [q: string] // 具名元组语法
 4 | }>()
 5 | 
 6 | const q = ref('')
 7 | 
 8 | function handleSearch() {
 9 |   emit('search', q.value)
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <div class="flex gap-1em">
15 |     <input
16 |       v-model="q"
17 |       class="r-input"
18 |       placeholder="Search post title"
19 |       @keyup.enter="handleSearch"
20 |     >
21 |     <button
22 |       class="r-button"
23 |       @click="handleSearch"
24 |     >
25 |       <div class="i-icon-park-outline-search" />
26 |       Search
27 |     </button>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/utils/url.ts:
--------------------------------------------------------------------------------
 1 | export function addSearchParamsToURL(url: string, params?: Record<string, any>) {
 2 |   if (!params) return url
 3 | 
 4 |   const searchParams = new URLSearchParams()
 5 | 
 6 |   // 将参数添加到 URLSearchParams 对象中
 7 |   for (const key in params)
 8 |     searchParams.append(key, params[key])
 9 | 
10 |   // 将 URLSearchParams 对象添加到 URL 中
11 |   const urlObject = new URL(url)
12 |   urlObject.search = searchParams.toString()
13 | 
14 |   return urlObject.toString()
15 | }
16 | 
17 | export function buildQueryString(obj: any) {
18 |   let queryString = ''
19 | 
20 |   for (const key in obj)
21 |     queryString += `+${key}:${obj[key]}`
22 | 
23 |   return queryString
24 | }
25 | 


--------------------------------------------------------------------------------
/utils/date.ts:
--------------------------------------------------------------------------------
 1 | import { format, parseISO } from 'date-fns'
 2 | 
 3 | export function formattedDate(date: string) {
 4 |   if (!date) return ''
 5 |   const dateObject = parseISO(date)
 6 |   const formattedResult = format(dateObject, 'yyyy/MM/dd ')
 7 |   return formattedResult
 8 | }
 9 | 
10 | export function insertYearToPosts(posts: any) {
11 |   let currentYear = -1
12 |   return posts.reduce(
13 |     (posts: any, post: any) => {
14 |       const year = new Date(post.created_at).getFullYear()
15 |       if (year !== currentYear && !isNaN(year)) {
16 |         posts.push({
17 |           isMarked: true,
18 |           year,
19 |         })
20 |         currentYear = year
21 |       }
22 |       posts.push(post)
23 |       return posts
24 |     },
25 |     [],
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/components/IssueCell.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { formattedDate } from '@/utils'
 3 | 
 4 | const { issue } = defineProps(['issue'])
 5 | </script>
 6 | 
 7 | <template>
 8 |   <li>
 9 |     <NuxtLink
10 |       :to="`/p/${issue.number}`"
11 |       class="w-full mb-6 flex flex-col transition-opacity op-70 hover:(op-100) md:(gap-2 flex-row items-center)"
12 |     >
13 |       <span class="text-sm op-70 font-mono">
14 |         {{ formattedDate(issue.created_at) }} <span class="display-none md:display-inline">·</span>
15 |       </span>
16 |       <span class="text-lg">
17 |         {{ issue.title }}
18 |       </span>
19 | 
20 |       <div v-show="issue.comments" class="m-l-auto display-none md:display-block">
21 |         <div class="i-icon-park-outline-comment" /> {{ issue.comments }}
22 |       </div>
23 |     </NuxtLink>
24 |   </li>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/components/markdown/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { Issue } from 'api/type.d.ts'
 3 | 
 4 | import DocTitle from './DocTitle.vue'
 5 | import DocFooter from './DocFooter.vue'
 6 | import DocRender from './DocRender.vue'
 7 | import DocToc from './DocToc.vue'
 8 | import DocBack from './DocBack.vue'
 9 | 
10 | const props = defineProps<{
11 |   issue: Issue | string
12 | }>()
13 | 
14 | const isRaw = typeof props.issue === 'string'
15 | </script>
16 | 
17 | <template>
18 |   <div class="prose slide-enter-content relative">
19 |     <!-- 文章页头 -->
20 |     <DocTitle v-if="!isRaw" :issue="issue" />
21 | 
22 |     <!-- 文章返回 -->
23 |     <DocBack />
24 | 
25 |     <!-- 文章目录 -->
26 |     <DocToc />
27 | 
28 |     <!-- 文章正文 -->
29 |     <DocRender :content="isRaw ? issue : issue?.body" />
30 | 
31 |     <!-- 文章底部 -->
32 |     <DocFooter v-if="!isRaw" :issue="issue" />
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/components/SubNav.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { getMilestones } from '@/api'
 3 | 
 4 | const { data: milestones } = await getMilestones()
 5 | 
 6 | const route = useRoute()
 7 | 
 8 | const catelog = computed(() => {
 9 |   return route.params.catelog ? String(route.params.catelog) : null
10 | })
11 | </script>
12 | 
13 | <template>
14 |   <nav>
15 |     <ul class="flex gap-1em mb-1em text-2xl sm:text-4xl">
16 |       <li
17 |         class="cursor-pointer transition-opacity"
18 |         :class="!catelog ? 'font-bold' : 'op-30 hover:op-70'"
19 |         @click="$router.push('/blog')"
20 |       >
21 |         <span> All</span>
22 |       </li>
23 |       <li
24 |         v-for="(item) in milestones" :key="item.id"
25 |         class="cursor-pointer transition-opacity"
26 |         :class="catelog === item.title ? ' font-bold' : 'op-30 hover:op-70'"
27 |         @click="$router.push(`/blog/${item.title}`)"
28 |       >
29 |         <span> {{ item.title }}</span>
30 |       </li>
31 |     </ul>
32 |   </nav>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare"
10 |   },
11 |   "dependencies": {
12 |     "@iconify-json/icon-park-outline": "^1.1.14",
13 |     "@iconify-json/simple-icons": "^1.1.82",
14 |     "@unocss/reset": "^0.58.0",
15 |     "date-fns": "^2.30.0",
16 |     "highlight.js": "^11.9.0",
17 |     "markdown-it": "^14.0.0",
18 |     "markdown-it-anchor": "^8.6.7",
19 |     "markdown-it-highlightjs": "^4.0.1",
20 |     "markdown-it-toc-done-right": "^4.2.0"
21 |   },
22 |   "devDependencies": {
23 |     "@chansee97/eslint-config-vue": "^0.3.5",
24 |     "@nuxt/devtools": "^1.0.5",
25 |     "@types/markdown-it": "^13.0.7",
26 |     "@types/node": "^18.17.3",
27 |     "@unocss/nuxt": "^0.55.0",
28 |     "@vueuse/core": "^10.3.0",
29 |     "@vueuse/nuxt": "^10.3.0",
30 |     "eslint": "^8.47.0",
31 |     "feed": "^4.2.2",
32 |     "nuxt": "^3.8.2",
33 |     "sass": "^1.65.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/components/Comment.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { id } = defineProps(['id'])
 3 | const { VITE_OWNER, VITE_BLOGS_REPO } = import.meta.env
 4 | const page = ref('')
 5 | 
 6 | onMounted(() => {
 7 |   const isDark = document.documentElement.classList.contains('dark')
 8 |   const config = {
 9 |     url: window.location.href,
10 |     origin: window.location.origin,
11 |     pathname: window.location.pathname,
12 |     repo: `${VITE_OWNER}/${VITE_BLOGS_REPO}`,
13 |     issueNumber: id,
14 |     theme: isDark ? 'github-dark' : 'github-light',
15 |     crossorigin: 'anonymous',
16 |   }
17 |   page.value = `https://utteranc.es/utterances.html?async=&src=https://utteranc.es/client.js&repo=${config.repo}&theme=${config.theme}&crossorigin=${config.crossorigin}&url=${config.url}&origin=${config.origin
18 |     }&pathname=${config.pathname}&issue-number=${config.issueNumber}`
19 | })
20 | </script>
21 | 
22 | <template>
23 |   <iframe
24 |     class="w-full h-fit min-h-lg"
25 |     title="评论系统"
26 |     scrolling="no"
27 |     allowtransparency="true"
28 |     :src="page"
29 |   />
30 | </template>
31 | 


--------------------------------------------------------------------------------
/components/markdown/markdown-it.ts:
--------------------------------------------------------------------------------
 1 | import MarkdownIt from 'markdown-it'
 2 | import PluginAnchor from 'markdown-it-anchor'
 3 | import PluginToc from 'markdown-it-toc-done-right'
 4 | import PluginHighlight from 'markdown-it-highlightjs'
 5 | import 'highlight.js/styles/base16/atelier-estuary.css'
 6 | 
 7 | interface TocType {
 8 |   html?: string
 9 |   ast?: object
10 | }
11 | 
12 | export const toc = ref<TocType>({})
13 | export const md = new MarkdownIt({
14 |   html: true,
15 |   linkify: true,
16 |   typographer: true,
17 |   // breaks: true,
18 |   xhtmlOut: true,
19 | }).use(PluginAnchor, {
20 |   level: [2, 3, 4],
21 |   permalink: true,
22 |   permalinkBefore: true,
23 |   permalinkSymbol: '#',
24 | })
25 |   .use(PluginToc, {
26 |     listType: 'ul',
27 |     callback(html, ast) {
28 |       toc.value = {
29 |         html,
30 |         ast,
31 |       }
32 |     },
33 |   })
34 |   .use(PluginHighlight)
35 | 
36 | md.renderer.rules.image = (tokens, idx) => {
37 |   const token = tokens[idx]
38 |   const src = token.attrGet('src')
39 |   const alt = token.content
40 |   return `<img src="${src}" alt="${alt}" referrerpolicy='no-referrer' />`
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020-2021 Rock Chen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/markdown/DocTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { formattedDate, getReadTime } from '@/utils'
 3 | 
 4 | const { issue } = defineProps(['issue'])
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div>
 9 |     <h1>{{ issue.title }}  </h1>
10 | 
11 |     <div class="op-70 mb-4em">
12 |       <!-- Time -->
13 |       <div class="flex justify-between">
14 |         <span class="flex items-center">
15 |           <div class="i-icon-park-outline-calendar m-r-2" /> {{ formattedDate(issue.created_at) }}
16 |           <div class="i-icon-park-outline-timer m-l-4 m-r-2" /> {{ getReadTime(issue.body) }} mins read
17 |         </span>
18 |         <a :href="issue.html_url" target="_blank">See this issue <div class="i-icon-park-outline-arrow-right-up" /></a>
19 |       </div>
20 | 
21 |       <!-- Tags -->
22 |       <div class="flex gap-2 m-y-0.5em">
23 |         <div
24 |           v-for="label in issue.labels" :key="label.id"
25 |           :style="{ backgroundColor: `#${label.color}77` }"
26 |           class="px-2 rd-1 cursor-pointer"
27 |           @click="$router.push(`/tags/${label.name}`)"
28 |         >
29 |           # {{ label.name }}
30 |         </div>
31 |       </div>
32 |     </div>
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/components/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { VITE_OWNER, VITE_BLOGS_REPO } = import.meta.env
 3 | const repoIssuesPath = `https://github.com/${VITE_OWNER}`
 4 | </script>
 5 | 
 6 | <template>
 7 |   <header class="max-w-73ch m-auto flex items-center justify-end gap-5% text-lg p-2em p-x-12">
 8 |     <NuxtLink to="/blog/Blog" title="Blog" class="transition-opacity op-70 hover:op-100">
 9 |       Blog
10 |     </NuxtLink>
11 | 
12 |     <NuxtLink to="/" title="About" class="transition-opacity op-70 hover:op-100">
13 |       About
14 |     </NuxtLink>
15 | 
16 |     <span class="ml-auto" />
17 | 
18 |     <NuxtLink to="/search" title="Search" class="transition-opacity op-70 hover:op-100">
19 |       <div class="i-icon-park-outline-search" />
20 |     </NuxtLink>
21 | 
22 |     <a
23 |       :href="`https://rsshub.app/github/issue/${VITE_OWNER}/${VITE_BLOGS_REPO}`" target="_blank" title="RSS"
24 |       class="transition-opacity op-70 hover:op-100 i-icon-park-outline-rss"
25 |     />
26 |     <a
27 |       :href="repoIssuesPath" target="_blank" title="GitHub Issues"
28 |       class="transition-opacity op-70 hover:op-100 i-icon-park-outline-github-one"
29 |     />
30 |     <dark-mode class="transition-opacity op-70 hover:op-100" />
31 |   </header>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/pages/search.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { getIssues, getTags, searchIssues } from '@/api'
 3 | 
 4 | useHead({
 5 |   title: 'Tags',
 6 | })
 7 | 
 8 | const { data: tags } = await getTags()
 9 | 
10 | const issues = ref()
11 | async function fetchIssues(tag: string) {
12 |   // 防止部分文章无动画
13 |   issues.value = []
14 |   const { data } = await getIssues({ labels: tag })
15 |   issues.value = data.value
16 | }
17 | 
18 | async function handleSearch(q: string) {
19 |   const { data } = await searchIssues(q)
20 |   issues.value = data.value?.items
21 | }
22 | </script>
23 | 
24 | <template>
25 |   <h1 class="text-xl sm:text-3xl mb-2em font-bold">
26 |     Search
27 |   </h1>
28 |   <SearchBar @search="handleSearch" />
29 | 
30 |   <ul class="flex gap-1em flex-wrap mt-2em">
31 |     <li
32 |       v-for="(tag, index) in tags" :key="tag.id"
33 |       slide-enter
34 |       :style="{ '--stagger': index + 1, 'backgroundColor': `#${tag.color}66` }"
35 |       class="px-2 rd-1 cursor-pointer"
36 |       @click="fetchIssues(tag.name)"
37 |     >
38 |       #{{ tag.name }}
39 |     </li>
40 |   </ul>
41 |   <ul class="mt-2em">
42 |     <IssueCell
43 |       v-for="(issue, index) in issues" :key="issue.id"
44 |       slide-enter :style="{ '--stagger': index + 1 }"
45 |       :issue="issue"
46 |     />
47 |   </ul>
48 | </template>
49 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, presetAttributify, presetIcons, presetUno, presetWebFonts, transformerVariantGroup } from 'unocss'
 2 | 
 3 | export default defineConfig({
 4 |   shortcuts: {
 5 |     'flex-center': 'flex items-center justify-center',
 6 |     'r-button': 'bg-transparent transition-colors rounded-md px-1em ring ring-current text-gray-800 dark:text-gray-200 hover:(text-gray)',
 7 |     'r-input': 'flex-1 px-1em py-.2em outline-none rounded-md bg-transparent transition-colors ring ring-current text-gray-800 dark:text-gray-200 focus:text-gray',
 8 |   },
 9 |   presets: [
10 |     presetUno({
11 |       dark: 'class',
12 |     }),
13 |     presetWebFonts({
14 |       provider: 'google',
15 |       fonts: {
16 |         sans: ['Inter', 'Noto Sans Simplified Chinese'],
17 |         mono: ['Fira Mono:400,700'],
18 |         hand: ['Dancing Script'],
19 |       },
20 |     }),
21 |     presetAttributify (),
22 |     presetIcons({
23 |       extraProperties: {
24 |         'display': 'inline-block',
25 |         'vertical-align': 'middle',
26 |       },
27 |       collections: {
28 |         'icon-park-outline': () => import('@iconify-json/icon-park-outline/icons.json').then(i => i.default),
29 |         'simple-icons': () => import('@iconify-json/simple-icons/icons.json').then(i => i.default),
30 |       },
31 |     }),
32 |   ],
33 |   transformers: [
34 |     transformerVariantGroup(),
35 |   ],
36 | })
37 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   typescript: {
 5 |     strict: true,
 6 |   },
 7 |   modules: [
 8 |     '@unocss/nuxt',
 9 |     '@vueuse/nuxt',
10 |   ],
11 |   app: {
12 |     head: {
13 |       meta: [
14 |         { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
15 |         { name: 'revisit-after', content: '7 days' },
16 |         { name: 'msapplication-TileColor', content: '#ffffff' },
17 |         { charset: 'UTF-8' },
18 |         { 'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge' },
19 |       ],
20 |       script: [
21 |         {
22 |           src: 'https://www.googletagmanager.com/gtag/js?id=G-MEC21CTMC9',
23 |           async: '',
24 |         },
25 |         {
26 |           innerHTML: `
27 |           window.dataLayer = window.dataLayer || [];
28 |           function gtag(){dataLayer.push(arguments);}
29 |           gtag('js', new Date());
30 | 
31 |           gtag('config', 'G-MEC21CTMC9');
32 |           `,
33 |         },
34 |       ],
35 |       noscript: [{ children: 'JavaScript is required' }],
36 |       bodyAttrs: {
37 |         class: 'font-sans',
38 |       },
39 |     },
40 |   },
41 |   css: [
42 |     '@unocss/reset/tailwind-compat.css',
43 |     '@/assets/styles/global.css',
44 |     '@/assets/styles/var.css',
45 |     '@/assets/styles/transition.css',
46 |     '@/assets/styles/markdown.scss',
47 |   ],
48 |   devServer: {
49 |     port: 4000,
50 |   },
51 | })
52 | 


--------------------------------------------------------------------------------
/api/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Issue, IssueResult, Label, Milestone, Readme } from './type'
 2 | import type { IssueQuery } from './query'
 3 | import { addSearchParamsToURL, buildQueryString } from '@/utils'
 4 | import { useGithubFetch } from '@/composables'
 5 | 
 6 | const { VITE_OWNER, VITE_BLOGS_REPO } = import.meta.env
 7 | 
 8 | /* 获取README */
 9 | export const getReadme = () => {
10 |   return useGithubFetch<Readme>(`https://api.github.com/repos/${VITE_OWNER}/${VITE_OWNER}/readme`)
11 | }
12 | 
13 | /* 获取issue */
14 | export const getIssues = (query?: IssueQuery) => {
15 |   const path = addSearchParamsToURL(`https://api.github.com/repos/${VITE_OWNER}/${VITE_BLOGS_REPO}/issues`, query)
16 | 
17 |   return useGithubFetch<Issue[]>(path)
18 | }
19 | 
20 | /* 获取单篇issue */
21 | export const getIssue = (id: string) => {
22 |   return useGithubFetch<Issue>(`https://api.github.com/repos/${VITE_OWNER}/${VITE_BLOGS_REPO}/issues/${id}`)
23 | }
24 | 
25 | /* 搜索issue */
26 | export const searchIssues = (q: string, opt?: IssueQuery) => {
27 |   let query = `?q=${q}+repo:${VITE_OWNER}/${VITE_BLOGS_REPO}+is:issue+state:open`
28 |   if (opt)
29 |     query += buildQueryString(opt)
30 | 
31 |   return useGithubFetch<IssueResult>(`https://api.github.com/search/issues${query}`)
32 | }
33 | 
34 | /* 标签 */
35 | export const getTags = () => {
36 |   return useGithubFetch<Label[]>(`https://api.github.com/repos/${VITE_OWNER}/${VITE_BLOGS_REPO}/labels`)
37 | }
38 | 
39 | /* 里程碑分类 */
40 | export const getMilestones = () => {
41 |   return useGithubFetch<Milestone[]>(`https://api.github.com/repos/${VITE_OWNER}/${VITE_BLOGS_REPO}/milestones`)
42 | }
43 | 


--------------------------------------------------------------------------------
/assets/styles/transition.css:
--------------------------------------------------------------------------------
 1 | @keyframes slide-enter {
 2 |   0% {
 3 |     opacity: 0;
 4 |     transform: translateY(10px)
 5 |   }
 6 | 
 7 |   100% {
 8 |     opacity: 1;
 9 |     transform: none
10 |   }
11 | }
12 | 
13 | [slide-enter], .slide-enter, .slide-enter-content > * {
14 |   --stagger: 0;
15 |   --delay: 90ms;
16 |   --start: 0ms;
17 | 
18 |   animation: slide-enter 1s both 1;
19 |   animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
20 | }
21 | 
22 | .slide-enter-content > *:nth-child(1) { --stagger: 1; }
23 | .slide-enter-content > *:nth-child(2) { --stagger: 2; }
24 | .slide-enter-content > *:nth-child(3) { --stagger: 3; }
25 | .slide-enter-content > *:nth-child(4) { --stagger: 4; }
26 | .slide-enter-content > *:nth-child(5) { --stagger: 5; }
27 | .slide-enter-content > *:nth-child(6) { --stagger: 6; }
28 | .slide-enter-content > *:nth-child(7) { --stagger: 7; }
29 | .slide-enter-content > *:nth-child(8) { --stagger: 8; }
30 | .slide-enter-content > *:nth-child(9) { --stagger: 9; }
31 | .slide-enter-content > *:nth-child(10) { --stagger: 10; }
32 | .slide-enter-content > *:nth-child(11) { --stagger: 11; }
33 | .slide-enter-content > *:nth-child(12) { --stagger: 12; }
34 | .slide-enter-content > *:nth-child(13) { --stagger: 13; }
35 | .slide-enter-content > *:nth-child(14) { --stagger: 14; }
36 | .slide-enter-content > *:nth-child(15) { --stagger: 15; }
37 | .slide-enter-content > *:nth-child(16) { --stagger: 16; }
38 | .slide-enter-content > *:nth-child(17) { --stagger: 17; }
39 | .slide-enter-content > *:nth-child(18) { --stagger: 18; }
40 | .slide-enter-content > *:nth-child(19) { --stagger: 19; }
41 | .slide-enter-content > *:nth-child(20) { --stagger: 20; }
42 | 


--------------------------------------------------------------------------------
/pages/blog/[[catelog]].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { searchIssues } from '@/api'
 3 | 
 4 | const route = useRoute()
 5 | const catelog = route.params.catelog as string
 6 | 
 7 | useHead({
 8 |   title: catelog || 'All',
 9 | })
10 | 
11 | const searchResult = ref()
12 | const issueList = ref()
13 | 
14 | async function handleSearch(q: string) {
15 |   const { data } = catelog ? await searchIssues(q, { milestone: catelog }) : await searchIssues(q)
16 |   searchResult.value = data.value
17 |   issueList.value = insertYearToPosts(data.value?.items)
18 | }
19 | 
20 | handleSearch('')
21 | </script>
22 | 
23 | <template>
24 |   <div>
25 |     <sub-nav />
26 |     <div class="flex items-center m-y-2em">
27 |       <div class="flex-auto border-b-1 border-dashed border-current op-30" />
28 |       <div class="m-x-1em">
29 |         A total of <b> {{ searchResult?.total_count || '?' }} </b> articles
30 |       </div>
31 |       <div class="flex-auto border-b-1 border-dashed border-current op-30" />
32 |     </div>
33 | 
34 |     <ul>
35 |       <template v-for="(issue, index) in issueList" :key="issue.id">
36 |         <div
37 |           v-if="issue.isMarked" class="relative pointer-events-none select-none h-20"
38 |           slide-enter :style="{ '--stagger': index + 1 }"
39 |         >
40 |           <span
41 |             class="text-8em font-bold font-mono op-15 absolute -top-0.2em -left-0.3em color-transparent text-stroke-2 text-stroke-hex-aaa"
42 |           >{{ issue.year }}</span>
43 |         </div>
44 |         <IssueCell
45 |           v-else
46 |           slide-enter :style="{ '--stagger': index + 1 }"
47 |           :issue="issue"
48 |         />
49 |       </template>
50 |     </ul>
51 |   </div>
52 | </template>
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <div align="center">
 4 | 
 5 | ## Issue-nuxt-blog
 6 | 
 7 | ![Cover.png](https://s2.loli.net/2023/12/08/OINcU36A9tCyFYW.png)
 8 | </div>
 9 | 
10 | <div align='center'>
11 | 
12 |   <b>简体中文</b> | [English](https://github.com/chansee97/issue-nuxt-blog/blob/main/README_en.md)
13 | </div>
14 | 
15 | 
16 | Issue-nuxt-blog是基于Github issue实现的博客项目, 新增和编辑文章更加快速方便，而且部署简单，无需服务器，只需配置环境变量即可使用。
17 | 
18 | 本项目基于另一个使用本地文件记录的[nuxt博客](https://github.com/chansee97/nuxt-blog)，使用并不方便，所以有了使用issue的版本
19 | 
20 | ## 💡 特点
21 | - Nuxt3技术栈，ssr渲染，对seo更友好
22 | - 适应移动的端布局
23 | - 页面简约，暗模式过渡动画优雅
24 | - 使用Github issue作为数据源，文章操作更加简单
25 | - 使用issue Label来为文章标记标签, Milestone作为文章分类
26 | - 文章搜索功能
27 | - 只需配置简单的环境变量即可使用，无需更改代码
28 | - 基于[utteranc](https://utteranc.es/)的评论功能，评论与issue绑定
29 | - 使用[rsshub](https://docs.rsshub.app/)生成RSS订阅
30 | 
31 | 
32 | ## 📖 使用方法
33 | 
34 | ### 使用前准备
35 | 1. 准备一个新仓库，仓库名称随意，例如“my-blogs”，记下仓库的名字
36 | 2. 记下自己的github用户名，例如“chansee97”
37 | 3. 创建一个专门用来读取issue的[github token](https://github.com/settings/tokens/new)并保存,配置如下
38 | ![image.png](https://s2.loli.net/2023/12/08/v91ueNF7HItShA4.png)
39 | 4. 准备一个[vecel](https://vercel.com/)账号（此处以vecel部署为例）
40 | 
41 | ### 项目部署
42 | 1. [fork本项目](https://github.com/chansee97/issue-nuxt-blog/fork)到自己的仓库
43 | 2. vecel中[import](https://vercel.com/new)刚才fork的项目, 在部署前导入自己的变量
44 | ![image.png](https://s2.loli.net/2023/12/08/HiDORUvM64oZy7Y.png)
45 | 你应当在部署的站点增加如下的环境变量
46 | - `VITE_OWNER` issue所在仓库的拥有者
47 | - `VITE_BLOGS_REPO` issue所在仓库名称
48 | - `VITE_GITHUB_TOKEN ` issue账号的验证token,如果不设置会导致速率下降，访问受限
49 | 3. 环境变量设置完毕后，点击部署Deploy，耐心等待部署成功
50 | 4. 至此，所有的设置完成，没有其他需要修改的地方，如果你有自定义的需求，可以进行个人开发修改
51 | 
52 | ### 增加文章
53 | 
54 | 从刚才新建的仓库进入，新建打开状态的issue即可，所有的issue会同步在博客站点上，如果issue关闭，则文章也会隐藏
55 | 
56 | issue的标题即为文章的标题
57 | issue的正文即为文章的内容
58 | issue的Labels 为文章标签，你可以为一个文章打上多个标签
59 | issue的Milestone 为文章分类，你可以为一个文章设置一个分类
60 | 
61 | 可以参考我的[博客issue](https://github.com/chansee97/my-blogs/issues)
62 | 
63 | ### 修改个人介绍
64 | 博客中的个人介绍与issue所有者的reamde简介文件一致，请仔细编辑自己名下简介文件
65 | github上个人简介的仓库是https://github.com/用户名/用户名
66 | 简介则是此仓库下的`reamde.md`文件
67 | 
68 | ## 🔎 本地开发
69 | 确保安装依赖项：
70 | ```shell
71 | pnpm install
72 | ```
73 | 
74 | 启动开发服务
75 | ```shell
76 | pnpm dev
77 | ```
78 | ## 协议
79 | [MIT](LICENSE)
80 | 


--------------------------------------------------------------------------------
/components/DarkMode.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | let isDark: boolean
 3 | 
 4 | function toggleDark() {
 5 |   const root = document.documentElement
 6 |   isDark = root.classList.contains('dark')
 7 |   root.classList.remove(isDark ? 'dark' : 'light')
 8 |   root.classList.add(isDark ? 'light' : 'dark')
 9 | }
10 | function toggleViewTransition(event: MouseEvent) {
11 |   const x = event.clientX
12 |   const y = event.clientY
13 |   const endRadius = Math.hypot(
14 |     Math.max(x, innerWidth - x),
15 |     Math.max(y, innerHeight - y),
16 |   )
17 |   const clipPath = [
18 |         `circle(0px at ${x}px ${y}px)`,
19 |         `circle(${endRadius}px at ${x}px ${y}px)`,
20 |   ]
21 |   // @ts-expect-error: Transition API
22 |   const transition = document.startViewTransition(async () => {
23 |     toggleDark()
24 |     await nextTick()
25 |   })
26 | 
27 |   transition.ready.then(() => {
28 |     document.documentElement.animate(
29 |       {
30 |         clipPath: isDark ? [...clipPath].reverse() : clipPath,
31 |       },
32 |       {
33 |         duration: 300,
34 |         easing: 'ease-in',
35 |         pseudoElement: isDark
36 |           ? '::view-transition-old(root)'
37 |           : '::view-transition-new(root)',
38 |       },
39 |     )
40 |   })
41 | }
42 | 
43 | function toogleTheme(event: MouseEvent) {
44 |   // @ts-expect-error: Transition API
45 |   const isSupport = document.startViewTransition
46 |     && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
47 | 
48 |   if (!isSupport) {
49 |     toggleDark()
50 |     return
51 |   }
52 |   toggleViewTransition(event)
53 | }
54 | </script>
55 | 
56 | <template>
57 |   <div title="Toggle Color Scheme" class="cursor-pointer dark:i-icon-park-outline-moon i-icon-park-outline-sun " @click="toogleTheme" />
58 | </template>
59 | 
60 | <style>
61 | ::view-transition-old(root),
62 | ::view-transition-new(root) {
63 |   mix-blend-mode: normal;
64 |   animation: none;
65 | }
66 | 
67 | /* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
68 | .dark::view-transition-old(root) {
69 |   z-index: 1;
70 | }
71 | 
72 | .dark::view-transition-new(root) {
73 |   z-index: 999;
74 | }
75 | 
76 | ::view-transition-old(root) {
77 |   z-index: 999;
78 | }
79 | 
80 | ::view-transition-new(root) {
81 |   z-index: 1;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/api/type.d.ts:
--------------------------------------------------------------------------------
  1 | export interface Readme {
  2 |   name: string;
  3 |   path: string;
  4 |   sha: string;
  5 |   size: number;
  6 |   url: string;
  7 |   html_url: string;
  8 |   git_url: string;
  9 |   download_url: string;
 10 |   type: string;
 11 |   content: string;
 12 |   encoding: string;
 13 |   _links: {
 14 |     self: string;
 15 |     git: string;
 16 |     html: string;
 17 |   };
 18 | }
 19 | 
 20 | export interface IssueResult {
 21 |   incomplete_results: boolean
 22 |   items: any[]
 23 |   total_count: number
 24 | }
 25 | export interface Issue {
 26 |   url: string;
 27 |   repository_url: string;
 28 |   labels_url: string;
 29 |   comments_url: string;
 30 |   events_url: string;
 31 |   html_url: string;
 32 |   id: number;
 33 |   node_id: string;
 34 |   number: number;
 35 |   title: string;
 36 |   user: Creator;
 37 |   labels: Label[];
 38 |   state: string;
 39 |   locked: boolean;
 40 |   assignee: string;
 41 |   assignees: any[];
 42 |   milestone: Milestone;
 43 |   comments: number;
 44 |   created_at: string;
 45 |   updated_at: string;
 46 |   closed_at: string;
 47 |   author_association: string;
 48 |   active_lock_reason: string;
 49 |   body: string;
 50 |   reactions: Reaction;
 51 |   timeline_url: string;
 52 |   performed_via_github_app: string;
 53 |   state_reason: string;
 54 | }
 55 | 
 56 | 
 57 | export interface Label {
 58 |   id: number;
 59 |   node_id: string;
 60 |   url: string;
 61 |   name: string;
 62 |   color: string;
 63 |   default?: boolean;
 64 |   description?: string;
 65 | }
 66 | 
 67 | interface Creator {
 68 |   login: string;
 69 |   id: number;
 70 |   node_id: string;
 71 |   avatar_url: string;
 72 |   gravatar_id: string;
 73 |   url: string;
 74 |   html_url: string;
 75 |   followers_url: string;
 76 |   following_url: string;
 77 |   gists_url: string;
 78 |   starred_url: string;
 79 |   subscriptions_url: string;
 80 |   organizations_url: string;
 81 |   repos_url: string;
 82 |   events_url: string;
 83 |   received_events_url: string;
 84 |   type: string;
 85 |   site_admin: boolean;
 86 | }
 87 | 
 88 | export interface Milestone {
 89 |   url: string;
 90 |   html_url: string;
 91 |   labels_url: string;
 92 |   id: number;
 93 |   node_id: string;
 94 |   number: number;
 95 |   title: string;
 96 |   description: string;
 97 |   creator: Creator;
 98 |   open_issues: number;
 99 |   closed_issues: number;
100 |   state: string;
101 |   created_at: string;
102 |   updated_at: string;
103 |   due_on: string;
104 |   closed_at: string;
105 | }
106 | 
107 | interface Reaction {
108 |   url: string;
109 |   total_count: number;
110 |   '+1': number;
111 |   '-1': number;
112 |   laugh: number;
113 |   hooray: number;
114 |   confused: number;
115 |   heart: number;
116 |   rocket: number;
117 |   eyes: number;
118 | }
119 | 


--------------------------------------------------------------------------------
/README_en.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <div align="center">
 3 | 
 4 | ## Issue-nuxt-blog
 5 | 
 6 | ![Cover.png](https://s2.loli.net/2023/12/08/OINcU36A9tCyFYW.png)
 7 | </div>
 8 | 
 9 | <div align='center' style="margin:2em 0;">
10 | 
11 |   [Chinese](https://github.com/chansee97/issue-nuxt-blog/blob/main/README.md) | <b>English</b>
12 | </div>
13 | 
14 | Issue-nuxt-blog is a blog project based on the GitHub issue. It is faster and more convenient to add and edit articles, and it is easy to deploy. It does not require a server, and can be used by configuring environment variables.
15 | 
16 | This project is based on another [nuxt blog](https://github.com/chansee97/nuxt-blog) that uses local file records, which is not convenient to use, so there is a version that uses issue
17 | 
18 | ##💡 Features
19 | - Nuxt3 technology stack, ssr rendering, more SEO-friendly
20 | - Adaptable to mobile end layouts
21 | - The page is minimalist, and the dark mode transition animation is elegant
22 | - Using GitHub issue as a data source makes article manipulation easier
23 | - Use issue Label to tag articles, Milestone for article classification
24 | - Article search function
25 | - Simply configure simple environment variables to use without changing the code
26 | - Comment function based on [utteranc](https://utteranc.es/), comment and issue binding
27 | - Generate RSS feeds using [rsshub](https://docs.rsshub.app/)
28 | 
29 | 
30 | ## How to use 📖
31 | 
32 | ### Prepare before use
33 | 1. Prepare a new warehouse with a random name, such as "my-blogs", and write down the name of the warehouse.
34 | 2. Write down your github username, such as "chansee97".
35 | 3. Create a [github token](https://github.com/settings/tokens/new) dedicated to reading the issue and save it, configured as follows
36 | ![image.png](https://s2.loli.net/2023/12/08/v91ueNF7HItShA4.png)
37 | 4. Prepare a [vecel](https://vercel.com/) account (take vecel deployment as an example here)
38 | 
39 | ### Project deployment
40 | 1. [Fork this item](https://github.com/chansee97/issue-nuxt-blog/fork) to your own repository
41 | 2. vecel [import](https://vercel.com/new) just fork the project, import your own variables before deployment
42 | ![image.png](https://s2.loli.net/2023/12/08/HiDORUvM64oZy7Y.png)
43 | You should add the following environment variables to the deployment site
44 | - `VITE_OWNER` The owner of the warehouse where the issue is located
45 | - `VITE_BLOGS_REPO` the name of the warehouse where the issue is located
46 | - `VITE_GITHUB_TOKEN` issue account verification token, if not set, it will cause the rate to drop and access is limited
47 | 1. After setting the environment variables, click Deploy and wait patiently for the deployment to be successful.
48 | 2. At this point, all settings are completed, and there is no other place to modify. If you have custom requirements, you can make personal development modifications
49 | 
50 | ### Add article
51 | 
52 | Enter from the newly created warehouse and create a new open issue. All issues will be synchronized on the blog site. If the issue is closed, the article will also be hidden.
53 | 
54 | The title of the issue is the title of the article
55 | The body of the issue is the content of the article
56 | The Labels of the issue are article tags, you can tag multiple tags for an article
57 | Issue Milestone for article classification, you can set a category for an article
58 | 
59 | You can refer to my [blog issue](https://github.com/chansee97/my-blogs/issues)
60 | 
61 | ### Modify the personal introduction
62 | The personal introduction in the blog is the same as the reamde profile file of the issue owner. Please edit the profile file in your name carefully.
63 | The repository for the profile on GitHub is https://github.com/username/username
64 | The profile is the `reamde.md` file under this repository
65 | 
66 | ## 🔎 local development
67 | Make sure to install dependencies:
68 | ```shell
69 | pnpm install
70 | ```
71 | 
72 | Start development services
73 | ```shell
74 | pnpm dev
75 | ```
76 | ## LICENSE
77 | [MIT](LICENSE)
78 | 


--------------------------------------------------------------------------------
/assets/styles/markdown.scss:
--------------------------------------------------------------------------------
  1 | .prose {
  2 | 
  3 |   /* common var */
  4 |   --common-transition: all 0.3s ease;
  5 |   --common-rd: 6px;
  6 |   --common-bg: #69a79429;
  7 |   --common-bd:#c9c7c2;
  8 | 
  9 |   max-width: 65em;
 10 |   margin: auto;
 11 | 
 12 |   /* 代码高亮 */
 13 |   .hljs {
 14 |       background-color: var(--common-bg) !important;
 15 |     }
 16 | 
 17 |   /* toc样式 */
 18 |   .table-of-contents > ul{
 19 |     list-style: none;
 20 |   }
 21 | 
 22 |   /* headings */
 23 |   h1,
 24 |   h2,
 25 |   h3,
 26 |   h4,
 27 |   h5,
 28 |   h6 {
 29 |     position: relative;
 30 |     margin-top: 1em;
 31 |     margin-bottom: 1em;
 32 |     font-weight: bold;
 33 |     line-height: 1.4;
 34 |     cursor: text;
 35 |   }
 36 | 
 37 |   h2,
 38 |   h3,
 39 |   h4 {
 40 |     margin-left: -1em;
 41 |     & > a {
 42 |       opacity: 0;
 43 |       transition: var(--common-transition);
 44 |       text-decoration: none;
 45 |     }
 46 | 
 47 |     &:hover > a {
 48 |       opacity: 0.7;
 49 |     }
 50 |   }
 51 | 
 52 |   h1 {
 53 |     font-size: 2.25em;
 54 |     line-height: 1.2;
 55 |   }
 56 | 
 57 |   h2 {
 58 |     font-size: 1.75em;
 59 |     line-height: 1.225;
 60 |   }
 61 | 
 62 |   h3 {
 63 |     font-size: 1.5em;
 64 |     line-height: 1.43;
 65 |   }
 66 | 
 67 |   h4 {
 68 |     font-size: 1.25em;
 69 |   }
 70 | 
 71 |   h5 {
 72 |     font-size: 1em;
 73 |   }
 74 | 
 75 |   h6 {
 76 |     font-size: 1em;
 77 |   }
 78 | 
 79 |   /* list */
 80 |   ul,
 81 |   ol {
 82 |     padding-left: 2em;
 83 |   }
 84 | 
 85 |   ul {
 86 |     list-style: disc;
 87 |   }
 88 | 
 89 |   ol {
 90 |     list-style-type: decimal;
 91 |   }
 92 | 
 93 |   .contains-task-list {
 94 |     padding-left: 0;
 95 |     list-style-type: none;
 96 | 
 97 |     input[type='checkbox'] {
 98 |       margin: 0 0.5em;
 99 |     }
100 |   }
101 | 
102 |   /* p */
103 |   p {
104 |     margin-block: 0.8em;
105 |     word-break: break-word;
106 |   }
107 | 
108 |   /* anchor */
109 |   a {
110 |     text-decoration: underline var(--common-bd);
111 |     text-decoration-thickness: 1px;
112 |     text-underline-offset: 0.3em;
113 |     transition: var(--common-transition);
114 | 
115 |     &:hover {
116 |       text-decoration-color: currentcolor;
117 |     }
118 |   }
119 | 
120 |   /* code */
121 |   pre,
122 |   code {
123 |     font-family: 'Fira Mono', ui-monospace, monospace;
124 |   }
125 | 
126 |   pre {
127 |     margin: 0.5em 0;
128 |     overflow-x: auto;
129 |     border-radius: var(--common-rd);
130 | 
131 |     .line {
132 |       display: block;
133 |       min-height: 1em;
134 |     }
135 |   }
136 | 
137 |   :not(pre) > code {
138 |     padding-inline: 0.3em;
139 |     font-weight: bold;
140 |     background-color: var(--common-bg);
141 |     border-radius: 3px;
142 |   }
143 | 
144 |   /* blockquote */
145 |   blockquote {
146 |     padding: 5px 1em;
147 |     font-style: italic;
148 |     background-color: var(--common-bg);
149 |     border-color: var(--common-bg);
150 |     border-left-width: 0.4em;
151 |     border-radius: var(--common-rd);
152 | 
153 |     > p {
154 |       margin: 0.5em 0;
155 |     }
156 |   }
157 | 
158 |   /* hr */
159 |   hr {
160 |     width: 200px;
161 |     margin: 2.5em auto;
162 |     border-color: currentcolor;
163 |     border-style: dashed;
164 |     opacity: 0.2;
165 |   }
166 | 
167 |   /* img */
168 |   img {
169 |     margin: 2em auto;
170 |     max-width: 100%;
171 |     border-radius: var(--common-rd);
172 |   }
173 | 
174 |   /* Table */
175 |   table {
176 |     width: 100%;
177 |     margin-block: 1em;
178 |     border-radius: var(--common-rd);
179 |     overflow: hidden;
180 | 
181 |     th {
182 |       text-align: center;
183 |     }
184 | 
185 |     th,
186 |     td {
187 |       padding: 0.3em 0.8em;
188 |     }
189 | 
190 |     thead {
191 |       background-color: var(--common-bg);
192 |     }
193 | 
194 |     tr:nth-child(even) {
195 |       background-color: var(--common-bg);
196 |     }
197 |   }
198 | 
199 |   /* other */
200 |   sup {
201 |     padding: 0 0.3em;
202 | 
203 |     &::before {
204 |       content: '[';
205 |     }
206 | 
207 |     &::after {
208 |       content: ']';
209 |     }
210 |   }
211 | }
212 | 


--------------------------------------------------------------------------------