Skip to content

Commit

Permalink
feat(关于): 添加changelog
Browse files Browse the repository at this point in the history
  • Loading branch information
@wsvaio
wsvaio committed Apr 13, 2024
1 parent 81b891b commit cc3f6f4
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 98 deletions.
46 changes: 45 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,50 @@

一个个人博客网站，记录一些学习笔记，我的所见所得，锻炼锻炼写作能力。

### 相关技术

#### 前端

主要使用 **Nuxt** 实现了 SSR 服务端渲染。

<img width="48" height="48" src="https://api.iconify.design/logos:nuxt-icon.svg" alt="nuxt" title="nuxt">
<img width="48" height="48" src="https://api.iconify.design/logos:vitejs.svg" alt="vite" title="vite">
<img width="48" height="48" src="https://api.iconify.design/logos:vue.svg" alt="vue" title="vue">
<img width="48" height="48" src="https://api.iconify.design/logos:vueuse.svg" alt="vueuse" title="vueuse">
<img width="48" height="48" src="https://api.iconify.design/logos:pinia.svg" alt="pinia" title="pinia">
<img width="48" height="48" src="https://api.iconify.design/logos:unocss.svg" alt="unocss" title="unocss">
<img width="48" height="48" src="https://api.iconify.design/skill-icons:less-dark.svg" alt="less-dark" title="less-dark">
<img width="48" height="48" src="https://api.iconify.design/logos:eslint.svg" alt="eslint" title="eslint">
<img width="48" height="48" src="https://api.iconify.design/logos:stylelint.svg" alt="stylelint" title="stylelint">
……
<!-- **nuxt、vite、vue、vueuse、pinia、unocss、less、eslint、stylelint……** -->

#### 后端

主要使用 **Nitro** 框架，ORM 使用 **Prisma**，统一采用 JSON 交互，鉴权使用了 **JsonWebToken**。

<img width="48" height="48" src="https://api.iconify.design/logos:nodejs-icon.svg" alt="nodejs" title="nodejs">
<img width="48" height="48" src="https://api.iconify.design/logos:pnpm.svg" alt="pnpm" title="pnpm">
<img width="48" height="48" src="https://nitro.unjs.io/icon.svg" alt="nitro" title="nitro" />
<img width="48" height="48" src="https://api.iconify.design/logos:prisma.svg" alt="prisma" title="vueuse">
<img width="48" height="48" src="https://api.iconify.design/logos:postgresql.svg" alt="postgresql" title="postgresql">
……
<!-- **nodejs、typescript、nitro、prisma、jsonwebtoken、postgresql……** -->

#### 运维部署

所有项目均打包成镜像，上传至 **Docker Hub**，再由 **Kubernetes** 搭建的集群部署，使用 **GitHub Actions** 实现 CI/CD，实现了自动化打包 Docker 镜像、上传、部署。

<img width="48" height="48" src="https://api.iconify.design/logos:git-icon.svg" alt="git" title="git">
<img width="48" height="48" src="https://api.iconify.design/logos:github-icon.svg" alt="github" title="github">
<img width="48" height="48" src="https://api.iconify.design/logos:github-actions.svg" alt="github" title="github">
<img width="48" height="48" src="https://api.iconify.design/logos:docker-icon.svg" alt="docker" title="docker">
<img width="48" height="48" src="https://api.iconify.design/logos:kubernetes.svg" alt="kubernetes" title="kubernetes">
<img width="48" height="48" src="https://api.iconify.design/logos:nginx.svg" alt="nginx" title="nginx">
<img width="48" height="48" src="https://api.iconify.design/logos:ubuntu.svg" alt="ubuntu" title="ubuntu">
……
<!-- **github、github actions、docker、kubernetes、nginx、ubuntu……** -->

## 关于设计

参考了很多博客主题，包括但不限：[butterfly](https://github.com/jerryc127/hexo-theme-butterfly)、[sakura](https://github.com/mashirozx/Sakura)、[cuteen](https://blog.zwying.com/)、[volantis](https://github.com/volantis-x/hexo-theme-volantis)
Expand All @@ -14,4 +58,4 @@

## 关于我

一位码农，喜欢撸代码、玩游戏、骑自行车、听音乐、吃和睡觉。
一位码农，喜欢撸代码、玩游戏、骑自行车、听音乐、吃和睡觉。
119 changes: 81 additions & 38 deletions components/layout-footer/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,52 +6,95 @@ let h = $ref(0);
let m = $ref(0);
let s = $ref(0);
useIntervalFn(() => {
const t = Math.floor((new Date().getTime() - DATE.getTime()) / 1000);
const t = Math.floor((new Date().getTime() - DATE.getTime()) / 1000);
d = Math.floor(t / 86400);
h = Math.floor((t % 86400) / 3600);
m = Math.floor((t % 3600) / 60);
s = Math.floor(t % 60);
d = Math.floor(t / 86400);
h = Math.floor((t % 86400) / 3600);
m = Math.floor((t % 3600) / 60);
s = Math.floor(t % 60);
}, 1000);
const { data: message, execute: executeMessage } = await useFetch<any>("/api/common/wenan");
const nextMessage = () => setTimeout(() => executeMessage(), 5000);
</script>

<template>
<footer
text="14px center" p="2em" lh="[1]" flex="~ col"
items="center"
>
<music-icon-lines />

<typewriter m="1em" :content="message?.content" @finish="nextMessage" />
<p class="runtime">本站目前勉强运行了{{ d }}天{{ h }}时{{ m }}分{{ s }}秒</p>
<p>
<nuxt-link href="https://www.travellings.cn/go.html" target="_blank" rel="noopener" title="开往-友链接力">
<img src="https://www.travellings.cn/assets/logo.gif" alt="开往-友链接力" width="120" />
</nuxt-link>
</p>
<div flex="~" gap=".5em">
<p>
©2023-{{ new Date().getFullYear() }} By
<nuxt-link un-text="[var(--text-color)]" underline="transparent" to="mailto:wsvaio@qq.com">WSVAIO</nuxt-link>
</p>
<p>|</p>
<p>
<nuxt-link
un-text="[var(--text-color)]"
underline="transparent"
to="https://beian.miit.gov.cn/"
target="_blank"
>
豫ICP备2023030609号-1
</nuxt-link>
</p>
</div>
</footer>
<footer
text="14px center" p="2em" lh="[1]" flex="~ col"
items="center"
>
<music-icon-lines />

<typewriter m="1em" :content="message?.content" @finish="nextMessage" />
<p class="runtime">本站目前勉强运行了{{ d }}天{{ h }}时{{ m }}分{{ s }}秒</p>
<p>
<nuxt-link href="https://www.travellings.cn/go.html" target="_blank" rel="noopener" title="开往-友链接力">
<img src="https://www.travellings.cn/assets/logo.gif" alt="开往-友链接力" width="120" />
</nuxt-link>
</p>
<!-- <ul
list="none" flex="~" gap=".25em" p="0"
m="0 t-.5em"
>
<li><button text="2em" border="none" class="i-logos:nuxt-icon" title="NUXT" /></li>
<li><button text="2em" border="none" class="i-logos:vitejs" title="VITE" /></li>
<li><button text="2em" border="none" class="i-logos:vue" title="VUE" /></li>
<li><button text="2em" border="none" class="i-logos:vueuse" title="VUEUSE" /></li>
<li><button text="2em" border="none" class="i-logos:pinia" title="PINIA" /></li>
<li><button text="2em" border="none" class="i-logos:unocss" title="UNOCSS" /></li>
<li><button text="2em" border="none" class="i-skill-icons:less-dark" title="LESS" /></li>
<li><button text="2em" border="none" class="i-logos:eslint" title="ESLINT" /></li>
<li><button text="2em" border="none" class="i-logos:stylelint" title="STYLELINT" /></li>
</ul> -->
<!-- <ul
list="none" flex="~" gap=".25em" p="0"
m="0 t-.5em"
>
<li><button text="2em" border="none" class="i-logos:nodejs-icon" title="NODEJS" /></li>
<li><button text="2em" border="none" class="i-logos:bun" title="BUNJS" /></li>
<li><button text="2em" border="none" class="i-logos:pnpm" title="PNPM" /></li>
<li><button text="2em" border="none" class="i-logos:typescript-icon" title="TYPESCRIPT" /></li>
<li><img src="https://nitro.unjs.io/icon.svg" w="2em" h="2em" title="NITRO" /></li>
<li><button text="2em" border="none" class="i-logos:prisma" title="PRISMA" /></li>
<li><button text="2em" border="none" class="i-logos:postgresql" title="POSTGRESQL" /></li>
</ul> -->
<!-- <ul
list="none" flex="~" gap=".25em" p="0"
m="0 t-.5em b-.5em"
>
<li><button text="2em" border="none" class="i-logos:git-icon" title="GIT" /></li>
<li><button text="2em" border="none" class="i-logos:github-icon" title="GITHUB" /></li>
<li><button text="2em" border="none" class="i-logos:github-actions" title="GITHUB ACTIONS" /></li>
<li><button text="2em" border="none" class="i-logos:docker-icon" title="DOCKER" /></li>
<li><button text="2em" border="none" class="i-logos:kubernetes" title="KUBERNETES" /></li>
<li><button text="2em" border="none" class="i-logos:nginx" title="NGINX" /></li>
<li><button text="2em" border="none" class="i-logos:ubuntu" title="UBUNTU" /></li>
</ul> -->
<div flex="~" gap=".5em">
<p>
©2023-{{ new Date().getFullYear() }} By
<nuxt-link un-text="[var(--text-color)]" underline="transparent" to="mailto:wsvaio@qq.com">WSVAIO</nuxt-link>
</p>
<p>|</p>
<p>
<nuxt-link
un-text="[var(--text-color)]"
underline="transparent"
to="https://beian.miit.gov.cn/"
target="_blank"
>
豫ICP备2023030609号-1
</nuxt-link>
</p>
</div>
</footer>
</template>
<style lang="less" scoped>
Expand Down
134 changes: 75 additions & 59 deletions pages/about/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,88 @@
<script setup lang='ts'>
import { dateFormat } from "@wsvaio/utils";
import READMD from "/README.md?raw";
const { data, refresh } = await useFetch<any>("/api/article/19");
const { data: commits } = await useFetch<any>("https://api.github.com/repos/wsvaio/blog/commits");
useFetch("/api/article/reads/19");
useSeoMeta({
title: data.value.title,
title: data.value.title,
});
</script>

<template>
<nuxt-layout banner-title="关于" banner-height="38.2dvh">
<template #banner>
<ul
m="0 t-1.5em" p="0" list="none" flex="~"
gap=".5em"
>
<li flex="~">
<div class="i-material-symbols-calendar-month" />
<span>发表于 {{ new Date(data.createAt).toLocaleString() }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-ic-twotone-update" />
<span>更新于 {{ new Date(data.updateAt).toLocaleString() }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-carbon-category" />
<span>{{ data.type.name }}</span>
</li>
</ul>
<ul
m="0 t-1em" p="0" list="none" flex="~"
gap=".5em"
>
<li flex="~">
<div class="i-mdi-file-word-outline" />
<span>字数总计: {{ data.content.length }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-carbon-view" />
<span>阅读量: {{ data.reads }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-majesticons-comment-2-text-line" />
<span>评论数: {{ data.comments?.length }}</span>
</li>
</ul>
</template>
<nuxt-layout banner-title="关于" banner-height="38.2dvh">
<template #banner>
<ul
m="0 t-1.5em" p="0" list="none" flex="~"
gap=".5em"
>
<li flex="~">
<div class="i-material-symbols-calendar-month" />
<span>发表于 {{ new Date(data.createAt).toLocaleString() }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-ic-twotone-update" />
<span>更新于 {{ new Date(data.updateAt).toLocaleString() }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-carbon-category" />
<span>{{ data.type.name }}</span>
</li>
</ul>
<ul
m="0 t-1em" p="0" list="none" flex="~"
gap=".5em"
>
<li flex="~">
<div class="i-mdi-file-word-outline" />
<span>字数总计: {{ data.content.length }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-carbon-view" />
<span>阅读量: {{ data.reads }}</span>
</li>
<li>|</li>
<li flex="~">
<div class="i-majesticons-comment-2-text-line" />
<span>评论数: {{ data.comments?.length }}</span>
</li>
</ul>
</template>

<markdown-preview :model-value="READMD" />

<div class="card">
<h2>CHANGELOG</h2>
<ul m="0" p="0" lh="[1.5]">
<li v-for="item in commits" flex="~ justify-between">
<span>{{ item?.commit?.message }}</span>
<span>{{ dateFormat(new Date(item?.commit?.committer?.date).toLocaleString()) }}</span>
</li>
</ul>
</div>

<markdown-preview :model-value="data.content" />
<comments
:list="
map(data?.comments, (item: any) => ({
...item,
id: item.id,
avatar: item.user.avatar,
name: item.user.name,
site: item.user.site,
content: item.content,
comments: item.comments,
<comments
:list="
map(data?.comments, (item: any) => ({
...item,
id: item.id,
avatar: item.user.avatar,
name: item.user.name,
site: item.user.site,
content: item.content,
comments: item.comments,
}), { childrenKey: 'comments' })
"
:article-id="19"
@submit="refresh()"
/>
</nuxt-layout>
}), { childrenKey: 'comments' })
"
:article-id="19"
@submit="refresh()"
/>
</nuxt-layout>
</template>

<style lang='less' scoped>
Expand Down

0 comments on commit cc3f6f4

Please sign in to comment.