dev.cm/halo-theme
1
0
派生 0
代码 议题 拉取请求 工作流 发布 10 活动

feat(vite): 资源拆分 & 样式优化

浏览代码
这个提交包含在：
rohow
2024-11-29 19:21:06 +08:00
未验证
父节点 41ac5b7998
当前提交 f65f9c7fde
共修改 23 个文件，包含 263 行新增和 229 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
.gitignore
+1
查看文件
@@ -10,6 +10,7 @@ lerna-debug.log*
node_modules
dist
dist-ssr
publish
*.local
# Editor directories and files
dev/docker-compose.yaml
+1 -1
查看文件
@@ -1,6 +1,6 @@
services:
halo:
image: registry.fit2cloud.com/halo/halo:2.18
image: registry.fit2cloud.com/halo/halo:2.20.10
volumes:
- ./data:/root/.halo2
- ../theme-terminal:/root/.halo2/themes/theme-terminal
theme-terminal/package.json
+51 -46
查看文件
@@ -1,48 +1,53 @@
{
"name": "theme-terminal",
"private": true,
"version": "1.0.0",
"description": "A terminal like theme for Halo.",
"scripts": {
"dev": "vite build --watch",
"build": "tsc && vite build",
"lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
"prettier": "prettier --write './src/**/*.{js,ts,css,json,ml,yaml,html}' './templates/**/*.html'"
},
"keywords": [
"halo",
"halo-theme"
],
"homepage": "https://dev/cm",
"author": {
"name": "devcm",
"url": "https://dev/cm"
},
"license": "MIT",
"devDependencies": {
"@iconify/json": "^2.1.132",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.7",
"@types/alpinejs": "^3.7.1",
"@types/node": "^16.18.3",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"postcss": "^8.4.31",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"sass": "^1.56.1",
"tailwindcss": "^3.2.1",
"tailwindcss-plugin-icons": "^2.1.1",
"typescript": "^4.8.4",
"vite": "^3.2.2",
"vite-plugin-purge-icons": "^0.9.1"
},
"dependencies": {
"@iconify/iconify": "^3.0.0",
"alpinejs": "^3.10.5"
}
"name": "theme-terminal",
"private": true,
"version": "1.1.1",
"description": "A terminal like theme for Halo.",
"scripts": {
"dev": "vite build --watch",
"build": "tsc && vite build",
"lint": "eslint ./src --ext .js,.cjs,.mjs,.ts,.cts,.mts --ignore-path .gitignore",
"prettier": "prettier --write './src/**/*.{js,ts,css,json,ml,yaml,html}' './templates/**/*.html'",
"publish": "cp -r theme.yaml settings.yaml templates publish/ && zip -r theme-terminal.zip publish"
},
"keywords": [
"halo",
"halo-theme"
],
"homepage": "https://dev/cm",
"author": {
"name": "devcm",
"url": "https://dev/cm"
},
"license": "MIT",
"repository": {
"url": "https://git.dev.cm/dev.cm/blog/src/branch/main/theme-terminal",
"type": "git"
},
"devDependencies": {
"@iconify/json": "^2.1.132",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.7",
"@types/alpinejs": "^3.7.1",
"@types/node": "^16.18.3",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"postcss": "^8.4.31",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"sass": "^1.56.1",
"tailwindcss": "^3.2.1",
"tailwindcss-plugin-icons": "^2.1.1",
"typescript": "^4.8.4",
"vite": "^3.2.2",
"vite-plugin-purge-icons": "^0.9.1"
},
"dependencies": {
"@iconify/iconify": "^3.0.0",
"alpinejs": "^3.10.5"
}
}
theme-terminal/settings.yaml
+1
查看文件
@@ -27,6 +27,7 @@ spec:
name: title
label: 站点标题
help: 配置后，将展示站点标题。
value: 'Terminal'
- group: index
label: 首页设置
formSchema:
theme-terminal/src/alpine/menu.ts
+12
查看文件
@@ -0,0 +1,12 @@
interface MenuState {
isOpen: boolean;
handleToggleMenu(): void;
}
export const menu = (): MenuState => ({
isOpen: false,
handleToggleMenu() {
this.isOpen = !this.isOpen;
}
})
theme-terminal/src/alpine/themeMode.ts
+29
查看文件
@@ -0,0 +1,29 @@
interface ThemeModeState {
init(): void;
storedTheme: string;
handleToggleThemeMode(): void;
}
export const themeMode = ():ThemeModeState => ({
storedTheme: '',
init() {
const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (!storedTheme) return;
document.documentElement.setAttribute("data-color-scheme", storedTheme);
this.storedTheme = storedTheme;
},
handleToggleThemeMode() {
const targetTheme = this.storedTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-color-scheme", targetTheme);
this.storedTheme = targetTheme;
localStorage.setItem("theme-mode", targetTheme);
},
});
theme-terminal/src/alpine/upvote.ts
+51
查看文件
@@ -0,0 +1,51 @@
interface upvoteState {
init(): void;
upvotedNames: string[];
getIsUpvoted(id: string): boolean;
handleUpvote(name: string): void;
}
export const upvote = (key: string, group: string, plural: string): upvoteState => ({
upvotedNames: [],
init() {
this.upvotedNames = JSON.parse(localStorage.getItem(`walker.upvoted.${key}.names`) || "[]");
},
getIsUpvoted(id: string) {
return this.upvotedNames.includes(id);
},
async handleUpvote(name) {
if (this.getIsUpvoted(name)) return
const xhr = new XMLHttpRequest();
xhr.open("POST", "/apis/api.halo.run/v1alpha1/trackers/upvote");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = () => {
this.upvotedNames = [...this.upvotedNames, name];
localStorage.setItem(`walker.upvoted.${key}.names`, JSON.stringify(this.upvotedNames));
const upvoteNode = document.querySelector("[data-upvote-" + key + '-name="' + name + '"]');
if (!upvoteNode) {
return;
}
const upvoteCount = parseInt(upvoteNode.textContent || "0");
upvoteNode.textContent = upvoteCount + 1 + "";
};
xhr.onerror = function () {
alert("网络请求失败，请稍后再试");
};
xhr.send(
JSON.stringify({
group: group,
plural: plural,
name: name,
})
);
},
});
theme-terminal/src/custom.ts
-45
查看文件
@@ -1,45 +0,0 @@
// 文字打字机效果
export const typewriterEffect = (selectors: string) => {
const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
if (!typedTextContainer) return
const text = typedTextContainer.innerText
// 清楚原有的文本
typedTextContainer.innerText = ''
// 实现打字机效果
let i = 0
const typewriter = () => {
if (i >= text.length) return
typedTextContainer.innerText += text.charAt(i++)
setTimeout(typewriter, Math.random() * 200 + 50)
}
typewriter()
}
// 切换黑白主题
export const handleToggleThemeMode = (selectors: string) => {
const toggleButton = document.querySelector<HTMLDivElement>(selectors);
if(!toggleButton) return
const storedTheme = localStorage.getItem("theme-mode") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme) document.documentElement.setAttribute("data-color-scheme", storedTheme);
toggleButton.onclick = function () {
const currentTheme = document.documentElement.getAttribute("data-color-scheme");
const targetTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-color-scheme", targetTheme);
localStorage.setItem("theme-mode", targetTheme);
};
}
theme-terminal/src/main.ts
+10 -11
查看文件
@@ -1,20 +1,19 @@
import './styles/tailwind.css'
import './styles/style.scss'
import './styles/theme.scss'
import './styles/font-hack.scss'
import "./styles/style.scss";
import "./styles/font-hack.scss";
import "./styles/font-pixel.scss";
import Alpine from 'alpinejs'
import upvote from './upvote'
import {typewriterEffect, handleToggleThemeMode} from './custom'
import {upvote} from './alpine/upvote'
import {themeMode} from './alpine/themeMode'
import {menu} from './alpine/menu'
import {typewriterEffect} from './utils'
window.Alpine = Alpine
Alpine.data('upvote', upvote)
Alpine.data('themeMode', themeMode)
Alpine.data('menu', menu)
Alpine.start()
document.addEventListener('DOMContentLoaded', () => {
typewriterEffect('.typed-text')
handleToggleThemeMode('#theme-toggle')
})
document.addEventListener('DOMContentLoaded', () => typewriterEffect('.typed-text'))
theme-terminal/src/styles/font-hack-subset.scss
+4 -4
查看文件
@@ -7,28 +7,28 @@
@font-face {
font-family: 'Hack';
/* Use full version (not a subset) for unicode icon support */
src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff');
src: url('../fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack-regular.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold-subset.woff?sha=3114f1256') format('woff');
src: url('../fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack-bold-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic-webfont.woff?sha=3114f1256') format('woff');
src: url('../fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack-italic-webfont.woff?sha=3114f1256') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Hack';
src: url('fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
src: url('../fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
font-weight: 700;
font-style: italic;
}
theme-terminal/src/styles/font-pixel.scss
+4
查看文件
@@ -0,0 +1,4 @@
@font-face {
font-family: Ark-Pixel-12-proportional-zh_cn;
src: url("../fonts/fusion-pixel-12px-proportional-zh_hans.woff2");
}
theme-terminal/src/styles/header.scss
+21 -37
查看文件
@@ -1,17 +1,5 @@
@import "variables";
@mixin menu {
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
@@ -25,7 +13,7 @@
.dividing {
flex: 1;
background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 16px);
background: repeating-linear-gradient(90deg, var(--foreground), var(--foreground) 2px, transparent 0, transparent 10px);
display: block;
width: 100%;
height: 25px;
@@ -40,46 +28,42 @@
list-style: none;
margin: 0;
padding: 0;
color: var(--green);
li {
position: relative;
flex: 0 0 auto;
padding-bottom: 10px;
&.active {
color: var(--cyan);
}
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
position: absolute;
z-index: 99;
top: 35px;
left: 0;
margin: 0;
padding: 10px;
list-style: none;
border: 2px solid var(--red);
background: var(--background);
box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
&:not(:only-child) {
margin-left: 20px;
}
li {
padding: 5px;
white-space: nowrap;
text-decoration: underline;
color: var(--green);
&-more {
@include menu;
top: 35px;
left: 0;
&-trigger {
color: var(--foreground);
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
&:not(:last-of-type) {
margin-right: 0;
}
}
}
theme-terminal/src/styles/main.scss
-5
查看文件
@@ -10,11 +10,6 @@ html {
box-sizing: inherit;
}
@font-face {
font-family: Ark-Pixel-12-proportional-zh_cn;
src: url("../fonts/fusion-pixel-12px-proportional-zh_hans.woff2");
}
body {
margin: 0;
padding: 0;
theme-terminal/src/styles/post.scss
+12 -2
查看文件
@@ -52,13 +52,23 @@
}
&-title {
--border: 2px dashed var(--blue);
--border: 3px dotted var(--blue);
position: relative;
color: var(--blue);
margin: 0 0 15px;
padding-bottom: 15px;
border-bottom: var(--border);
font-weight: normal;
border-bottom: var(--border);
&::after {
content: "";
position: absolute;
bottom: 2px;
display: block;
width: 100%;
border-bottom: var(--border);
}
a {
text-decoration: none;
theme-terminal/src/styles/style.scss
+6
查看文件
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind utilities;
@tailwind components;
@import 'buttons';
@import 'header';
@import 'logo';
@@ -6,3 +10,5 @@
@import 'pagination';
@import 'footer';
@import 'typed-text';
@import 'theme';
theme-terminal/src/upvote.ts
-53
查看文件
@@ -1,53 +0,0 @@
interface upvoteState {
upvotedNames: string[];
init(): void;
upvoted(id: string): boolean;
handleUpvote(name: string): void;
}
export default (key: string, group: string, plural: string): upvoteState => ({
upvotedNames: [],
init() {
this.upvotedNames = JSON.parse(localStorage.getItem(`walker.upvoted.${key}.names`) || '[]')
},
upvoted(id: string) {
return this.upvotedNames.includes(id)
},
async handleUpvote(name) {
if (this.upvoted(name)) {
return
}
const xhr = new XMLHttpRequest()
xhr.open('POST', '/apis/api.halo.run/v1alpha1/trackers/upvote')
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.onload = () => {
this.upvotedNames = [...this.upvotedNames, name]
localStorage.setItem(`walker.upvoted.${key}.names`, JSON.stringify(this.upvotedNames))
const upvoteNode = document.querySelector('[data-upvote-' + key + '-name="' + name + '"]')
if (!upvoteNode) {
return
}
const upvoteCount = parseInt(upvoteNode.textContent || '0')
upvoteNode.textContent = upvoteCount + 1 + ''
}
xhr.onerror = function () {
alert('网络请求失败，请稍后再试')
}
xhr.send(
JSON.stringify({
group: group,
plural: plural,
name: name,
}),
)
},
});
theme-terminal/src/utils.ts
+24
查看文件
@@ -0,0 +1,24 @@
// 文字打字机效果
export const typewriterEffect = (selectors: string) => {
const typedTextContainer = document.querySelector<HTMLDivElement>(selectors)
if (!typedTextContainer) return
const text = typedTextContainer.innerText
// 清楚原有的文本
typedTextContainer.innerText = ''
// 实现打字机效果
let i = 0
const typewriter = () => {
if (i >= text.length) return
typedTextContainer.innerText += text.charAt(i++)
setTimeout(typewriter, Math.random() * 200 + 50)
}
typewriter()
}
theme-terminal/templates/modules/footer.html
+1
查看文件
@@ -25,5 +25,6 @@
></a
></span>
</div>
<halo:footer />
</div>
</footer>
theme-terminal/templates/modules/header.html
+11 -8
查看文件
@@ -24,7 +24,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
</th:block>
</button>
<button id="theme-toggle" type="button">
<button type="button" x-data="themeMode()" @click="handleToggleThemeMode()">
<th:block th:unless="${theme.config.basic.pixel_style}">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -46,21 +46,24 @@
</button>
</div>
<nav class="menu">
<ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner menu__inner--desktop">
<li th:each="menuItem : ${menu.menuItems}">
<ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
<li th:each="menuItem : ${menu.menuItems}" x-data="menu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
<a
class="text-gray-600 hover:text-blue-600"
th:href="${menuItem.status.href}"
th:text="${menuItem.status.displayName}"
th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
></a>
<ul
th:if="${not #lists.isEmpty(menuItem.children)}"
@mouseenter="open()"
@mouseleave="close()"
class="menu__sub-inner-more hidden"
class="menu__sub-inner"
:class="{'hidden': !isOpen}"
>
<li th:each="childMenuItem : ${menuItem.children}">
<a th:href="${childMenuItem.status.href} " th:text="${childMenuItem.status.displayName} "></a>
<a
class="text-gray-600 hover:text-blue-600"
th:href="${childMenuItem.status.href} "
th:text="${childMenuItem.status.displayName} "
></a>
</li>
</ul>
</li>
theme-terminal/templates/modules/layout.html
+3 -2
查看文件
@@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
<title th:text="${site.title}"></title>
<link rel="stylesheet" th:href="@{/assets/dist/style.css?version=v1.0.1}" href="./assets/dist/style.css" />
<link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
<link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
</head>
<!-- 根据情况判断是否添加开启像素化样式 -->
<body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
@@ -27,6 +28,6 @@
<th:block th:replace="${footer}" />
</th:block>
</div>
<script th:src="@{/assets/dist/main.iife.js?version=v1.0.1}"></script>
<script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
</body>
</html>
theme-terminal/templates/moments.html
+2 -2
查看文件
@@ -46,7 +46,7 @@
<div class="mt-3 flex items-center gap-4">
<div
class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
x-bind:class="{'text-red-700': upvoted(name)}"
:class="{'text-red-700': getIsUpvoted(name)}"
@click="handleUpvote(name)"
>
<i class="!h-4 !w-4 i-pixelarticons-heart"></i>
@@ -60,7 +60,7 @@
<div
class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
:class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
x-on:click="showComment = !showComment"
@click="showComment = !showComment"
>
<i class="!h-4 !w-4 i-pixelarticons-comment"></i>
<span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>
theme-terminal/theme.yaml
+2 -2
查看文件
@@ -13,5 +13,5 @@ spec:
repo: https://git.dev.cm/theme-terminal
settingName: "theme-terminal-setting"
configMapName: "theme-terminal-configMap"
version: 1.0.1
require: ">=2.8.0"
version: 1.1.1
require: ">=2.20.0"
theme-terminal/vite.config.ts
+14 -8
查看文件
@@ -1,19 +1,25 @@
import path from "path";
import { fileURLToPath } from "url";
import { defineConfig } from "vite";
import PurgeIcons from "vite-plugin-purge-icons";
export default defineConfig({
root: "./src",
base: '/themes/theme-terminal/assets/dist/',
plugins: [PurgeIcons()],
build: {
outDir: fileURLToPath(new URL("./templates/assets/dist", import.meta.url)),
emptyOutDir: true,
lib: {
entry: path.resolve(__dirname, "src/main.ts"),
name: "main",
fileName: "main",
formats: ["iife"],
manifest: true,
rollupOptions: {
input: path.resolve(__dirname, "src/main.ts"),
output: {
entryFileNames: "[name].js",
chunkFileNames: "[name].js",
assetFileNames: "[name][extname]",
},
treeshake: false,
preserveEntrySignatures: "allow-extension",
},
outDir: path.resolve(__dirname, "templates/assets/dist"),
emptyOutDir: true,
},
});