Pari Plus! add default font settings

locales/en-US.yml

@@ -1284,6 +1284,7 @@ clipNoteLimitExceeded: "No more notes can be added to this clip."
 timeTravel: "Time Travel"
 timeTravelDescription: "Show posts before this date."
 pariPlusNoteSettings: "Pari Plus! note settings"
+pariPlusAppearanceSettings: "Pari Plus! appearance settings"
 autoTranslateButton: "Display translation function on notes in different languages"
 showDetailTimeWhenHover: "Hover the timestamp of the note to expand the detailed time"
 noteClickToOpen: "Click to open note details"

locales/zh-CN.yml

@@ -1292,7 +1292,8 @@ passkeyVerificationFailed: "验证通行密钥失败。"
 passkeyVerificationSucceededButPasswordlessLoginDisabled: "通行密钥验证成功，但账户未开启无密码登录。"
 timeTravel: "时光机"
 timeTravelDescription: "显示该日期以前的帖子"
-pariPlusNoteSettings: "Pari Plus! 的帖文设置"
+pariPlusNoteSettings: "Pari Plus! 帖文设置"
+pariPlusAppearanceSettings: "Pari Plus! 外观设置"
 autoTranslateButton: "在不同语言的帖文上显示翻译功能"
 showDetailTimeWhenHover: "悬浮/长按帖文时间戳时，展开详细时间"
 noteClickToOpen: "点击展开帖文详情"

locales/zh-TW.yml

@@ -1292,7 +1292,8 @@ passkeyVerificationFailed: "驗證金鑰失敗。"
 passkeyVerificationSucceededButPasswordlessLoginDisabled: "雖然驗證金鑰成功，但是無密碼登入的方式是停用的。"
 timeTravel: "時光機"
 timeTravelDescription: "回到指定的日期"
-pariPlusNoteSettings: "Pari Plus! 的貼文設定"
+pariPlusNoteSettings: "Pari Plus! 貼文設定"
+pariPlusAppearanceSettings: "Pari Plus! 外觀設定"
 autoTranslateButton: "在不同語言的貼文上顯示翻譯功能"
 showDetailTimeWhenHover: "長按貼文時間戳記時展開詳細時間"
 noteClickToOpen: "點擊展開貼文詳情"

packages/backend/assets/fonts/sharkey-icons/style.css

@@ -0,0 +1,114 @@
+@font-face {
+  font-display: auto;
+  font-family: "shark-font";
+  font-style: normal;
+  font-weight: normal;
+
+  src: url("./shark-font.woff?1722899913909") format("woff"), url("./shark-font.ttf?1722899913909") format("truetype"), url("./shark-font.svg?1722899913909#shark-font") format("svg");
+}
+
+.sk-icons {
+  display: inline-block;
+  font-family: "shark-font";
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sk-icons-lg {
+  font-size: 1.33333em;
+  line-height: 0.75em;
+  vertical-align: -0.0667em;
+}
+
+.sk-icons-xs {
+  font-size: 0.75em;
+}
+
+.sk-icons-sm {
+  font-size: 0.875em;
+}
+
+.sk-icons-1x {
+  font-size: 1em;
+}
+
+.sk-icons-2x {
+  font-size: 2em;
+}
+
+.sk-icons-3x {
+  font-size: 3em;
+}
+
+.sk-icons-4x {
+  font-size: 4em;
+}
+
+.sk-icons-5x {
+  font-size: 5em;
+}
+
+.sk-icons-6x {
+  font-size: 6em;
+}
+
+.sk-icons-7x {
+  font-size: 7em;
+}
+
+.sk-icons-8x {
+  font-size: 8em;
+}
+
+.sk-icons-9x {
+  font-size: 9em;
+}
+
+.sk-icons-10x {
+  font-size: 10em;
+}
+
+.sk-icons-fw {
+  text-align: center;
+  width: 1.25em;
+}
+
+.sk-icons-border {
+  border: solid 0.08em #eee;
+  border-radius: 0.1em;
+  padding: 0.2em 0.25em 0.15em;
+}
+
+.sk-icons-pull-left {
+  float: left;
+}
+
+.sk-icons-pull-right {
+  float: right;
+}
+
+.sk-icons.sk-icons-pull-left {
+  margin-right: 0.3em;
+}
+
+.sk-icons.sk-icons-pull-right {
+  margin-left: 0.3em;
+}
+
+
+.sk-icons.sk-foldermove::before {
+  content: "\ea01";
+}
+
+.sk-icons.sk-misskey::before {
+  content: "\ea02";
+}
+
+.sk-icons.sk-shark::before {
+  content: "\ea03";
+}

packages/backend/src/server/web/boot.js

@@ -127,6 +127,11 @@
 		document.documentElement.classList.add('useSystemFont');
 	}
 
+	const defaultFontFace = localStorage.getItem('defaultFontFace');
+	if (defaultFontFace) {
+		document.documentElement.classList.add(`default-font-${defaultFontFace}`);
+	}
+
 	const wallpaper = localStorage.getItem('wallpaper');
 	if (wallpaper) {
 		document.documentElement.style.backgroundImage = `url(${wallpaper})`;

packages/frontend/src/local-storage.ts

@@ -22,6 +22,7 @@ export type Keys =
 	'theme' |
 	'colorScheme' |
 	'useSystemFont' |
+	'defaultFontFace' |
 	'fontSize' |
 	'ui' |
 	'ui_temp' |

packages/frontend/src/pages/settings/pari.vue

@@ -4,6 +4,37 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+	<div class="_gaps_m">
+		<div class="label">{{ i18n.ts.pariPlusAppearanceSettings }}</div>
+		<div class="_gaps_s">
+			<MkSelect v-model="defaultFont.fontFace">
+				<template #label>Font face</template>
+				<template #caption>
+					Default font
+				</template>
+				<option
+					v-for="item in defaultFont.fontList"
+					:key="item.id"
+					:value="item.id"
+				>
+					{{ item.name }}
+				</option>
+			</MkSelect>
+			<MkRadios v-if="defaultFont.availableTypes.length > 0" v-model="defaultFont.fontFaceType">
+				<template #label>Testing feature, may cause slow loading.</template>
+				<template #caption>
+					Properties
+				</template>
+				<option
+					v-for="item in defaultFont.availableTypes"
+					:key="item.id"
+					:value="item.id"
+				>
+					{{ item.name }}
+				</option>
+			</MkRadios>
+        </div>
+    </div>
 	<div class="_gaps_m">
 		<div class="label">{{ i18n.ts.pariPlusNoteSettings }}</div>
 		<MkSwitch v-model="autoTranslateButton">{{ i18n.ts.autoTranslateButton }}</MkSwitch>
@@ -22,12 +53,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { defaultStore } from '@/store.js';
+import { miLocalStorage } from '@/local-storage.js';
+import { getDefaultFontSettings } from '@/scripts/font-settings.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
+import MkRadios from '@/components/MkRadios.vue';
+
+const defaultFont = getDefaultFontSettings();
+console.log(defaultFont);
 
 const autoTranslateButton = computed(defaultStore.makeGetterSetter('autoTranslateButton'));
 const showDetailTimeWhenHover = computed(defaultStore.makeGetterSetter('showDetailTimeWhenHover'));

packages/frontend/src/scripts/font-settings.ts

@@ -0,0 +1,103 @@
+import { computed, ref, watch } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
+import { miLocalStorage } from '@/local-storage.js';
+import { i18n } from '@/i18n.js';
+
+const fontList = [
+	{ id: 'system-ui', name: i18n.ts.useSystemFont },
+	{ id: 'maokentangyuan', name: '猫啃糖圆' },
+	{ id: 'chillroundgothic', name: '寒蝉圆黑' },
+	{ id: 'lxgw-wenkai', name: '霞鹜文楷' },
+	{ id: 'lxgw-marker-gothic', name: '霞鹜漫黑' },
+	{ id: 'clearsans', name: '思源屏显臻宋' },
+	{ id: 'genryomin2', name: '源流明體' },
+	{ id: 'genwanmin2', name: '源雲明體' },
+	{ id: 'jinghualaosong', name: '京華老宋體' },
+	{ id: 'fusion-pixel', name: '缝合像素体' },
+	{ id: 'misskey-biz', name: 'BIZ UDGothic' },
+	{ id: 'roboto', name: 'Roboto' },
+	{ id: 'arial', name: 'Arial' },
+	{ id: 'times', name: 'Times' },
+	{ id: 'yishanbeizhuan', name: '峄山碑篆体' },
+	{ id: 'chongxiseal', name: '崇羲篆體' },
+];
+
+function getFontOptionsList(val: string): { id: string, name: string, default?: boolean }[] {
+	switch (val) {
+		case 'fusion-pixel':
+			return [
+				{ name: '8px', id: '8' },
+				{ name: '10px', id: '10' },
+				{ name: '12px', id: '12', default: true },
+			];
+		case 'chillroundgothic':
+			return [
+				{ name: 'Extra Light', id: 'EL' },
+				{ name: 'Light', id: 'L' },
+				{ name: 'Normal', id: 'N', default: true },
+				{ name: 'Regular', id: 'R' },
+				{ name: 'Middle', id: 'M' },
+				{ name: 'Bold', id: 'B' },
+			];
+		default:
+			return [];
+	}
+}
+
+function getFontId(name: string, option: string) {
+	if (getFontOptionsList(name).length === 0) {
+		return `${name}`;
+	} else {
+		return `${name}_${option}`;
+	}
+}
+
+export function getDefaultFontSettings() {
+	const def_arr = miLocalStorage.getItem('defaultFontFace')?.split('_');
+	const fontFace = ref(def_arr?.[0] ?? 'maokentangyuan');
+	const fontFaceType = ref(def_arr?.[1] ?? '');
+	const availableTypes = computed(() => getFontOptionsList(fontFace.value));
+
+	function setDafaultFont() {
+		for (const klass of [...document.documentElement.classList.values()]) {
+			if (klass.startsWith('default-font-')) {
+				document.documentElement.classList.remove(klass);
+			}
+		}
+		const newFontId = getFontId(fontFace.value, fontFaceType.value);
+		miLocalStorage.setItem('defaultFontFace', newFontId);
+		document.documentElement.classList.add(`default-font-${newFontId}`);
+		console.log(newFontId);
+	}
+
+	watch(fontFace, (newVal) => {
+		const optionsList = getFontOptionsList(newVal);
+		if (optionsList.length !== 0) {
+			fontFaceType.value = optionsList.find((v) => v.default)?.id ?? '';
+		} else {
+			setDafaultFont();
+		}
+	});
+	watch(fontFaceType, () => {
+		setDafaultFont();
+	});
+
+	return ref({
+		fontList,
+		fontFace,
+		fontFaceType,
+		availableTypes,
+	}) as Ref<{
+		fontList: {
+			id: string;
+			name: string;
+		}[];
+		fontFace: string;
+		fontFaceType: string;
+		availableTypes: {
+			id: string;
+			name: string;
+			default?: boolean;
+		}[];
+	}>;
+}

packages/frontend/src/style.scss

@@ -113,6 +113,18 @@ html {
 	}
 }
 
+@import "./styles-font/usual.scss";
+@import "./styles-font/maokentangyuan.scss";
+@import "./styles-font/chillroundgothic.scss";
+@import "./styles-font/clearsans.scss";
+@import "./styles-font/lgtw-wenkai.scss";
+@import "./styles-font/lgtw-marker-gothic.scss";
+@import "./styles-font/genryomin2.scss";
+@import "./styles-font/genwanmin2.scss";
+@import "./styles-font/jinghualaosong.scss";
+@import "./styles-font/fusion-pixel.scss";
+@import "./styles-font/zhuanti.scss";
+
 html._themeChanging_ {
 	&, * {
 		transition: background 1s ease, border 1s ease !important;