add changelog page

Author: xhofe

docs/.vuepress/components/Markdown.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="text-formatted" v-html="renderedMarkdown" />
+</template>
+
+<script lang="ts" setup>
+import markdownIt from 'markdown-it';
+
+const props = defineProps<{
+  markdown: string;
+}>();
+let md = new markdownIt({ html: true });
+let renderedMarkdown = md.render(props.markdown);
+</script>

docs/.vuepress/components/NaiveConfig.vue

@@ -24,7 +24,8 @@ observer.observe(document.getElementsByTagName("html")[0], {
 
 const themeOverrides: GlobalThemeOverrides = {
   common: {
-    borderRadius: "8px"
+    borderRadius: "8px",
+    borderRadiusSmall: "6px"
   }
 }
 </script>

docs/.vuepress/components/changelog/index.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { NSpace } from 'naive-ui';
+import { ref } from 'vue';
+import { Releases, Release } from './types'
+import Version from './version.vue'
+
+const core = ref<Releases>();
+const web = ref<Map<string, Release>>();
+
+async function fetchCore() {
+  const resp = await fetch('https://api.github.com/repos/alist-org/alist/releases')
+  core.value = await resp.json()
+}
+async function fetchWeb() {
+  const resp = await fetch('https://api.github.com/repos/alist-org/alist-web/releases')
+  const releases = await resp.json()
+  web.value = new Map(releases.map((release: Release) => [`v${release.tag_name}`, release]))
+}
+
+await Promise.all([fetchCore(), fetchWeb()])
+
+</script>
+<template>
+  <NSpace vertical size="large">
+    <Version v-for="(c, i) in core" :core="c" :web="web?.get(c.tag_name)" :latest="i === 0" />
+  </NSpace>
+</template>

docs/.vuepress/components/changelog/types.ts

@@ -0,0 +1,95 @@
+export type Releases = Release[];
+
+export interface Release {
+  url: string;
+  assets_url: string;
+  upload_url: string;
+  html_url: string;
+  id: number;
+  author: Author;
+  node_id: string;
+  tag_name: string;
+  target_commitish: string;
+  name: string;
+  draft: boolean;
+  prerelease: boolean;
+  created_at: string;
+  published_at: string;
+  assets: Asset[];
+  tarball_url: string;
+  zipball_url: string;
+  body: string;
+  reactions: Reactions;
+  mentions_count: number;
+}
+
+export interface Author {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+}
+
+export interface Asset {
+  url: string;
+  id: number;
+  node_id: string;
+  name: string;
+  label?: string;
+  uploader: Uploader;
+  content_type: string;
+  state: string;
+  size: number;
+  download_count: number;
+  created_at: string;
+  updated_at: string;
+  browser_download_url: string;
+}
+
+export interface Uploader {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+}
+
+export interface Reactions {
+  url: string;
+  total_count: number;
+  "+1": number;
+  "-1": number;
+  laugh: number;
+  hooray: number;
+  confused: number;
+  heart: number;
+  rocket: number;
+  eyes: number;
+}

docs/.vuepress/components/changelog/version.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import Markdown from '../Markdown.vue'
+import { Release } from './types';
+import { NCollapseItem, NCard, NTag, NCollapse, NSpace, NH1, NDropdown, NButton } from 'naive-ui'
+const props = defineProps<{
+  core: Release
+  web?: Release
+  latest?: boolean
+}>()
+const reactions = {
+  '+1': '👍',
+  '-1': '👎',
+  laugh: '😄',
+  hooray: '🎉',
+  confused: '😕',
+  heart: '❤️',
+  rocket: '🚀',
+  eyes: '👀'
+}
+const options = props.core.assets.map(asset => {
+  return {
+    label: asset.name,
+    key: asset.browser_download_url
+  }
+})
+
+function handleSelect(url: string) {
+  window.open(url, "_blank")
+}
+</script>
+
+<template>
+  <NCard>
+    <NSpace vertical size="large">
+      <NSpace size="large" justify="space-between" align="baseline">
+        <NH1>{{ core.name }}</NH1>
+        <NTag v-if="latest" type="info">latest</NTag>
+      </NSpace>
+      <Markdown :markdown="props.core.body" />
+      <NCollapse v-if="props.web">
+        <NCollapseItem title="Web">
+          <Markdown :markdown="props.web.body" />
+        </NCollapseItem>
+      </NCollapse>
+      <NSpace>
+        <template v-for="(reaction, name) in reactions">
+          <NTag style="cursor: pointer;" :bordered="false" round v-if="core.reactions[name]">
+            {{ reaction }} {{ core.reactions[name] }}
+          </NTag>
+        </template>
+      </NSpace>
+    </NSpace>
+  </NCard>
+</template>

docs/.vuepress/config.ts

@@ -127,6 +127,7 @@ export default defineUserConfig({
       "./components/aliyundrive/Callback.vue"
     ),
     "@Pricing": path.resolve(__dirname, "./components/Pricing.vue"),
-    "@Desktop": path.resolve(__dirname, "./components/Desktop.vue")
+    "@Desktop": path.resolve(__dirname, "./components/Desktop.vue"),
+    "@Changelog": path.resolve(__dirname, "./components/changelog/index.vue"),
   },
 });

docs/guide/changelog.md

@@ -0,0 +1,25 @@
+---
+title: Changelog
+toc: false
+icon: change
+order: 13
+# A page can have multiple categories
+category:
+  - Guide
+# A page can have multiple tags
+tag:
+  - Changelog
+  - Guide
+# this page is sticky in article list
+sticky: true
+# this page will appear in starred articles
+star: true
+---
+
+<NaiveClient>
+<Changelog />
+</NaiveClient>
+
+<script setup lang="ts">
+import Changelog from "@Changelog";
+</script>

docs/zh/guide/changelog.md

@@ -0,0 +1,25 @@
+---
+title: 更新日志
+toc: false
+icon: change
+order: 13
+# A page can have multiple categories
+category:
+  - Guide
+# A page can have multiple tags
+tag:
+  - Changelog
+  - Guide
+# this page is sticky in article list
+sticky: true
+# this page will appear in starred articles
+star: true
+---
+
+<NaiveClient>
+<Changelog />
+</NaiveClient>
+
+<script setup lang="ts">
+import Changelog from "@Changelog";
+</script>

package.json

@@ -17,5 +17,8 @@
     "vuepress": "2.0.0-beta.60",
     "vuepress-theme-hope": "^2.0.0-beta.172",
     "vuepress-vite": "2.0.0-beta.60"
+  },
+  "dependencies": {
+    "markdown-it": "^13.0.1"
   }
 }