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;

packages/frontend/src/styles-font/chillroundgothic.scss

@@ -0,0 +1,51 @@
+@font-face {
+	font-family: "ChillRoundGothic EL";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_ExtraLight.woff") format("woff");
+}
+@font-face {
+	font-family: "ChillRoundGothic L";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_Light.woff") format("woff");
+}
+@font-face {
+	font-family: "ChillRoundGothic N";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_Normal.woff") format("woff");
+}
+@font-face {
+	font-family: "ChillRoundGothic M";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_Medium.woff") format("woff");
+}
+@font-face {
+	font-family: "ChillRoundGothic R";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_Regular.woff") format("woff");
+}
+@font-face {
+	font-family: "ChillRoundGothic B";
+	font-display: swap;
+	src: url("/static-assets/fonts/ChillRoundGothic/ChillRoundGothic_Bold.woff") format("woff");
+}
+html.default-font-chillroundgothic_EL {
+	font-family: 'ChillRoundGothic EL','Lexend',  'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_L {
+	font-family: 'ChillRoundGothic L', 'Lexend', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_N {
+	font-family: 'Lexend', 'ChillRoundGothic N', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_M {
+	font-family: 'Lexend', 'ChillRoundGothic M', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_R {
+	font-family: 'Lexend', 'ChillRoundGothic R', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_B {
+	font-family: 'Lexend', 'ChillRoundGothic B', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chillroundgothic_H {
+	font-family: 'ChillRoundGothic H', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}

packages/frontend/src/styles-font/clearsans.scss

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: "Clear Han Serif";
+  font-display: swap;
+  src:  local("Clear Han Serif"),
+        url("/static-assets/fonts/clearhanserif.original.v1.07.woff2") format("woff2");
+}
+
+html.default-font-clearsans {
+	font-family: "Clear Han Serif", "Times New Roman", Times, serif
+}

packages/frontend/src/styles-font/fusion-pixel.scss

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "fusion-pixel-8";
+  font-display: swap;
+  src: url("/static-assets/fonts/fusion-pixel/fusion-pixel-8px-proportional-ja.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-8px-proportional-ko.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-8px-proportional-latin.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-8px-proportional-zh_hans.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-8px-proportional-zh_hant.woff2") format("woff2");
+}
+@font-face {
+  font-family: "fusion-pixel-10";
+  font-display: swap;
+  src: url("/static-assets/fonts/fusion-pixel/fusion-pixel-10px-proportional-ja.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-10px-proportional-ko.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-10px-proportional-latin.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-10px-proportional-zh_hans.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-10px-proportional-zh_hant.woff2") format("woff2");
+}
+@font-face {
+  font-family: "fusion-pixel-12";
+  font-display: swap;
+  src: url("/static-assets/fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-12px-proportional-ko.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-12px-proportional-latin.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-12px-proportional-zh_hans.woff2") format("woff2"),
+		url("/static-assets/fonts/fusion-pixel/fusion-pixel-12px-proportional-zh_hant.woff2") format("woff2");
+}
+
+html.default-font-fusion-pixel_8 {
+	font-family: 'fusion-pixel-8', Arial, sans-serif;
+}
+html.default-font-fusion-pixel_10 {
+	font-family: 'fusion-pixel-10', Arial, sans-serif;
+}
+html.default-font-fusion-pixel_12 {
+	font-family: 'fusion-pixel-12', Arial, sans-serif;
+}

packages/frontend/src/styles-font/genryomin2.scss

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: "GenRyuMin2 TC R";
+  font-display: swap;
+  src:  local("GenRyuMin2 TC R"),
+        url("/static-assets/fonts/GenRyuMin/GenRyuMin2TC-R.woff2") format("woff2");
+}
+
+html.default-font-genryomin2 {
+	font-family: "GenRyuMin2 TC R", "Times New Roman", Times, serif
+}

packages/frontend/src/styles-font/genwanmin2.scss

@@ -0,0 +1,4 @@
+html.default-font-genwanmin2 {
+	@import url('https://static.zeoseven.com/cn/301/main/result.css');
+	font-family: "GenWanMin2 TC R", "Times New Roman", Times, serif
+}

packages/frontend/src/styles-font/jinghualaosong.scss

@@ -0,0 +1,4 @@
+html.default-font-jinghualaosong {
+	@import url("https://chinese-fonts-cdn.deno.dev/packages/jhlst/dist/京華老宋体v2_002/result.css");
+	font-family: "KingHwa_OldSong", "Times New Roman", Times, serif
+}

packages/frontend/src/styles-font/lgtw-marker-gothic.scss

@@ -0,0 +1,4 @@
+html.default-font-lxgw-marker-gothic {
+	@import url("https://chinese-fonts-cdn.deno.dev/packages/lxgwmanhei/dist/LXGWMarkerGothic/result.css");
+	font-family: "LXGW Marker Gothic", 'Lexend', Roboto, HelveticaNeue, Arial, sans-serif;
+}

packages/frontend/src/styles-font/lgtw-wenkai.scss

@@ -0,0 +1,9 @@
+html.default-font-lxgw-wenkai {
+	@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css");
+	font-family: "LXGW WenKai", "Times New Roman", Times, serif;
+	&[lang="zh-WY"],
+	&[lang="zh-TW"] {
+		@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@300;400;700&display=swap');
+		font-family: "LXGW WenKai TC", "LXGW WenKai", 'Times New Roman', Times, serif;
+	}
+}

packages/frontend/src/styles-font/maokentangyuan.scss

@@ -0,0 +1,22 @@
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'MaoKenTangYuan';
+	font-style: normal;
+	font-weight: 400;
+	src: url('/static-assets/fonts/MaoKenTangYuan0.12.woff2') format('woff2');
+}
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'jf-openhuninn';
+	font-style: normal;
+	font-weight: 400;
+	src: url('/static-assets/fonts/jf-openhuninn-2.1.woff2') format("woff2");
+}
+
+html.default-font-maokentangyuan {
+	font-family: 'Lexend', 'MaoKenTangYuan', 'jf-openhuninn', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	&[lang="zh-WY"],
+	&[lang="zh-TW"] {
+		font-family: 'Lexend', 'jf-openhuninn', 'MaoKenTangYuan', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	}
+}

packages/frontend/src/styles-font/usual.scss

@@ -0,0 +1,23 @@
+html.default-font-sharkey-default {
+	font-family: 'Lexend', 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+
+html.default-font-system-ui {
+	font-family: system-ui;
+}
+
+html.default-font-misskey-biz {
+	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+
+html.default-font-roboto {
+	font-family: Roboto, Arial, sans-serif;
+}
+
+html.default-font-arial {
+	font-family: Arial, sans-serif;
+}
+
+html.default-font-times {
+	font-family: 'Times New Roman', Times, serif;
+}

packages/frontend/src/styles-font/zhuanti.scss

@@ -0,0 +1,21 @@
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'YiShanBeiZhuanTi';
+	font-style: normal;
+	font-weight: 400;
+	src: url('/static-assets/fonts/YiShanBeiZhuanTi.ttf') format('opentype');
+}
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: "Chong Xi Small Seal";
+	font-style: normal;
+	font-weight: 400;
+	src: url('/static-assets/fonts/chongxi_seal.woff2') format('woff2');
+}
+
+html.default-font-yishanbeizhuan {
+	font-family: 'YiShanBeiZhuanTi', "Chong Xi Small Seal",'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}
+html.default-font-chongxiseal {
+	font-family: "Chong Xi Small Seal", 'YiShanBeiZhuanTi','Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+}