docs: add brandIcons & fix code highlight lines

docs/components/BrandIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+  link: string
+}>()
+</script>
+
+<template>
+  <p class="leading-0!">
+    <a class="inline text-xl leading-0" :href="link" target="_blank" rel="noopener noreferrer">
+      <div :class="icon" />
+    </a>
+  </p>
+</template>

docs/package.json

@@ -19,6 +19,7 @@
     "valaxy-theme-press": "link:../packages/valaxy-theme-press"
   },
   "devDependencies": {
+    "@iconify-json/simple-icons": "^1.1.73",
     "nodemon": "^3.0.1",
     "vite": "^4.4.10",
     "vitepress": "1.0.0-rc.20",

docs/pages/guide/deploy.md

@@ -45,13 +45,13 @@ npm run build
 
 #### GitHub Pages
 
+<BrandIcon icon="i-simple-icons-github" link="https://pages.github.com/" />
+
 ::: zh-CN
 在使用 `pnpm create valaxy` 创建模版项目时，已内置文件[`.github/workflows/gh-pages.yml`](https://github.com/YunYouJun/valaxy/blob/main/packages/create-valaxy/template-blog/.github/workflows/gh-pages.yml) 以实现 GitHub Actions 的自动部署工作流。
 
-
+- 选择 Github Repo，打开 `Settings`-> `Action` -> `General` -> `Workflow permissions`，选择 `read and write permissions`。
-选择 Github Repo，打开 `Settings`-> `Action` -> `General` -> `Workflow permissions`，选择 `read and write permissions`。
+- 上传至 GitHub Repo，打开 `Settings` -> `Pages`，选择 `gh-pages` 分支。
-
-上传至 GitHub Repo，打开 `Settings` -> `Pages`，选择 `gh-pages` 分支。
 
 > `gh-pages` 已由 `.github/workflows/gh-pages.yml` 自动部署。
 
@@ -64,10 +64,8 @@ npm run build
 ::: en
 When you use `pnpm create valaxy` to create a template project, it contains the file [`.github/workflows/gh-pages.yml`](https://github.com/YunYouJun/valaxy/blob/main/packages/create-valaxy/template-blog/.github/workflows/gh-pages.yml) for the CI workflow of GitHub Actions.
 
-
+- Select the Github repository, go to `Settings`-> `Action` -> `General` -> `Workflow permissions`, and select `read and write permissions`。
-Select the Github repository, go to `Settings`-> `Action` -> `General` -> `Workflow permissions`, and select `read and write permissions`。
+- Push to your GitHub repository, and go to `Settings` -> `Pages`. Select `gh-pages` branch.
-
-Push to your GitHub repository, and go to `Settings` -> `Pages`. Select `gh-pages` branch.
 
 > `gh-pages` has been automatically deployed by `.github/workflows/gh-pages.yml`.
 
@@ -77,10 +75,12 @@ Push to your GitHub repository, and go to `Settings` -> `Pages`. Select `gh-page
 
 #### Netlify
 
+<BrandIcon icon="i-simple-icons-netlify" link="https://www.netlify.com/" />
+
 ::: zh-CN
 已内置 `netlify.toml`。
 
-连接 GitHub 仓库，可以自动部署。
+- 连接 GitHub 仓库，可自动部署。
 :::
 
 ::: en
@@ -89,50 +89,45 @@ Push to your GitHub repository, and go to `Settings` -> `Pages`. Select `gh-page
 
 #### Vercel
 
+<BrandIcon icon="i-simple-icons-vercel" link="https://vercel.com/" />
+
 ::: zh-CN
-在 Vercel 的 Dashboard 上，点击 `Add New...`，随后点击 `Project` 新建一个项目。
+- 在 Vercel 的 Dashboard 上，点击 `Add New...`，随后点击 `Project` 新建一个项目。
-
+- 在左侧选择要部署的仓库，点击 `Import`，随后将 `Framework Preset` 设置为 `Other` 并更改 `Build and Output Settings`。
-在左侧选择要部署的仓库，点击 `Import`，随后将 `Framework Preset` 设置为 `Other` 并更改 `Build and Output Settings`。
+- 将 `Output Directory` 设置为 `dist` 后，点击 `Deploy`。
-
+- 等待屏幕上撒下彩带后访问即可。
-将 `Output Directory` 设置为 `dist` 后，点击 `Deploy`。
-
-等待屏幕上撒下彩带后访问即可。
 :::
 
 ::: en
-On Vercel Dashboard, click `Add New...`, then click `Project` to create a project.
+- On Vercel Dashboard, click `Add New...`, then click `Project` to create a project.
-
+- Select the repository you want to deploy and click `Import` and then set `Framework Preset` to `Other` and modify `Build and Output Settings`.
-Select the repository you want to deploy and click `Import` and then set `Framework Preset` to `Other` and modify `Build and Output Settings`.
+- Turn on the switch on the right of the textbox and type `dist`, click `Deploy`.
-
+- Wait for ribbons to drop on the screen, then visit your website.
-Turn on the switch on the right of the textbox and type `dist`, click `Deploy`.
-
-Wait for ribbons to drop on the screen, then visit your website.
 :::
 
 #### Cloudflare Pages
 
+<BrandIcon icon="i-simple-icons-cloudflare" link="https://pages.cloudflare.com/" />
+
 ::: zh-CN
-登录你的 Cloudflare 账号，导航到 “Pages” 页面。
 
-点击 `创建项目`、`连接到 Git`，选择你的 GitHub 或者 GitLab 仓库，并点击 `开始设置`。
+- 登录你的 Cloudflare 账号，导航到 “Pages” 页面。
-
+- 点击 `创建项目`、`连接到 Git`，选择你的 GitHub 或者 GitLab 仓库，并点击 `开始设置`。
-选择你的部署分支，将 `构建输出目录` 设置为 `dist` 后添加一个环境变量。
+- 选择你的部署分支，将 `构建输出目录` 设置为 `dist` 后添加一个环境变量。
 
 > `NODE_VERSION`: `16` （设置 Node 版本）
 
-点击 `保存并部署`。
+- 点击 `保存并部署`。
 :::
 
 ::: en
-Login to your Cloudflare account and navigate to "Pages" page.
+- Login to your Cloudflare account and navigate to "Pages" page.
-
+- Click `Create a project` and `Connect to Git`, then select your GitHub or GitLab repository and click `Begin setup`.
-Click `Create a project` and `Connect to Git`, then select your GitHub or GitLab repository and click `Begin setup`.
+- Select your Production branch, set `Build output directory` to `dist` and add an environment variable.
-
-Select your Production branch, set `Build output directory` to `dist` and add an environment variable.
 
 > `NODE_VERSION`: `16` (Set Node version)
 
-Then click "Save and Deploy".
+- Then click "Save and Deploy".
 :::
 
 #### 其他 {lang="zh-CN"}
@@ -141,6 +136,8 @@ Then click "Save and Deploy".
 
 TODO
 
+<BrandIcon icon="i-simple-icons-render" link="https://render.com/" />
+
 ::: zh-CN
 你还可以使用 [Render](https://render.com/) 等进行托管。
 :::

packages/valaxy/client/styles/css-vars.scss

@@ -72,7 +72,7 @@ $c-primary: #0078e7 !default;
 
   --va-code-lang-color: var(--va-c-text-3);
 
-  --va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+  --va-code-line-highlight-color: var(--va-c-default-soft);
   --va-code-line-number-color: var(--va-c-text-dark-3);
 
   // copy

pnpm-lock.yaml

@@ -157,6 +157,9 @@ importers:
         specifier: link:../packages/valaxy-theme-press
         version: link:../packages/valaxy-theme-press
     devDependencies:
+      '@iconify-json/simple-icons':
+        specifier: ^1.1.73
+        version: 1.1.73
       nodemon:
         specifier: ^3.0.1
         version: 3.0.1
@@ -2404,11 +2407,9 @@ packages:
     resolution: {integrity: sha512-L9ShYHhAkJ7KHx+6wM5HK2tnCkAIKjSIyDUtTexoG8LcZF7MgiUloNfDGPDa4Vt0Oy5yHlnFBiOvqy2ojKB/8Q==}
     dependencies:
       '@iconify/types': 2.0.0
-    dev: false
 
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: false
 
   /@iconify/utils@2.1.11:
     resolution: {integrity: sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==}