From cae34329ede9ef10238636e036cbfd9036f668ab Mon Sep 17 00:00:00 2001
From: MattyaDaihuku <87429435+MattyaDaihuku@users.noreply.github.com>
Date: Mon, 9 Dec 2024 04:09:54 +0000
Subject: [PATCH] init commit

---
 locales/ja-JP.yml                             |   1 +
 packages/frontend/src/navbar.ts               |   5 +
 .../src/pages/novel-editor/novel-editor.vue   | 384 +++++++++++++
 packages/frontend/src/pages/novel.vue         | 539 ++++++++++++++++++
 packages/frontend/src/pages/novels.vue        |  95 +++
 packages/frontend/src/router/definition.ts    |  12 +
 6 files changed, 1036 insertions(+)
 create mode 100644 packages/frontend/src/pages/novel-editor/novel-editor.vue
 create mode 100644 packages/frontend/src/pages/novel.vue
 create mode 100644 packages/frontend/src/pages/novels.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d4ef731c9030..b26f3c41c4cf 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -371,6 +371,7 @@ unwatch: "ウォッチ解除"
 accept: "許可"
 reject: "拒否"
 normal: "通常"
+novels: "小説"
 instanceName: "サーバー名"
 instanceDescription: "サーバーの紹介"
 maintainerName: "管理者の名前"
diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index 096d404a572f..dedeeca2aebe 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -89,6 +89,11 @@ export const navbarItemDef = reactive({
 		icon: 'ti ti-news',
 		to: '/pages',
 	},
+	novels: {
+		title: i18n.ts.novels,
+		icon: 'ti ti-book',
+		to: '/novels',
+	},
 	play: {
 		title: 'Play',
 		icon: 'ti ti-player-play',
diff --git a/packages/frontend/src/pages/novel-editor/novel-editor.vue b/packages/frontend/src/pages/novel-editor/novel-editor.vue
new file mode 100644
index 000000000000..a8a8115ca946
--- /dev/null
+++ b/packages/frontend/src/pages/novel-editor/novel-editor.vue
@@ -0,0 +1,384 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="700">
+		<div class="jqqmcavi">
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/novels/${ currentName }`"><i class="ti ti-external-link"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ i18n.ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		</div>
+
+		<div v-if="tab === 'settings'">
+			<div class="_gaps_m">
+				<MkInput v-model="title">
+					<template #label>{{ i18n.ts._pages.title }}</template>
+				</MkInput>
+
+				<MkInput v-model="summary">
+					<template #label>{{ i18n.ts._pages.summary }}</template>
+				</MkInput>
+
+				<MkInput v-model="name">
+					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+					<template #label>{{ i18n.ts._pages.url }}</template>
+				</MkInput>
+
+				<MkSwitch v-model="alignCenter">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
+
+				<MkSelect v-model="font">
+					<template #label>{{ i18n.ts._pages.font }}</template>
+					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
+				</MkSelect>
+
+				<MkSwitch v-model="hideTitleWhenPinned">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
+
+				<div class="eyeCatch">
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
+					<div v-else-if="eyeCatchingImage">
+						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div v-else-if="tab === 'contents'">
+			<div :class="$style.contents">
+				<XBlocks v-model="content" class="content"/>
+
+				<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, watch, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import { v4 as uuid } from 'uuid';
+import XBlocks from './page-editor.blocks.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkInput from '@/components/MkInput.vue';
+import { url } from '@@/js/config.js';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { selectFile } from '@/scripts/select-file.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { $i } from '@/account.js';
+import { mainRouter } from '@/router/main.js';
+import { getPageBlockList } from '@/pages/page-editor/common.js';
+
+const props = defineProps<{
+	initPageId?: string;
+	initPageName?: string;
+	initUser?: string;
+}>();
+
+const tab = ref('settings');
+const author = ref($i);
+const readonly = ref(false);
+const page = ref<Misskey.entities.Page | null>(null);
+const pageId = ref<string | null>(null);
+const currentName = ref<string | null>(null);
+const title = ref('');
+const summary = ref<string | null>(null);
+const name = ref(Date.now().toString());
+const eyeCatchingImage = ref<Misskey.entities.DriveFile | null>(null);
+const eyeCatchingImageId = ref<string | null>(null);
+const font = ref('sans-serif');
+const content = ref<Misskey.entities.Page['content']>([]);
+const alignCenter = ref(false);
+const hideTitleWhenPinned = ref(false);
+
+provide('readonly', readonly.value);
+
+watch(eyeCatchingImageId, async () => {
+	if (eyeCatchingImageId.value == null) {
+		eyeCatchingImage.value = null;
+	} else {
+		eyeCatchingImage.value = await misskeyApi('drive/files/show', {
+			fileId: eyeCatchingImageId.value,
+		});
+	}
+});
+
+function getSaveOptions() {
+	return {
+		title: title.value.trim(),
+		name: name.value.trim(),
+		summary: summary.value,
+		font: font.value,
+		script: '',
+		hideTitleWhenPinned: hideTitleWhenPinned.value,
+		alignCenter: alignCenter.value,
+		content: content.value,
+		variables: [],
+		eyeCatchingImageId: eyeCatchingImageId.value,
+	};
+}
+
+function save() {
+	const options = getSaveOptions();
+
+	const onError = err => {
+		if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
+			if (err.info.param === 'name') {
+				os.alert({
+					type: 'error',
+					title: i18n.ts._pages.invalidNameTitle,
+					text: i18n.ts._pages.invalidNameText,
+				});
+			}
+		} else if (err.code === 'NAME_ALREADY_EXISTS') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts._pages.nameAlreadyExists,
+			});
+		}
+	};
+
+	if (pageId.value) {
+		options.pageId = pageId.value;
+		misskeyApi('pages/update', options)
+			.then(page => {
+				currentName.value = name.value.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.updated,
+				});
+			}).catch(onError);
+	} else {
+		misskeyApi('pages/create', options)
+			.then(created => {
+				pageId.value = created.id;
+				currentName.value = name.value.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId.value}`);
+			}).catch(onError);
+	}
+}
+
+function del() {
+	os.confirm({
+		type: 'warning',
+		text: i18n.tsx.removeAreYouSure({ x: title.value.trim() }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		misskeyApi('pages/delete', {
+			pageId: pageId.value,
+		}).then(() => {
+			os.alert({
+				type: 'success',
+				text: i18n.ts._pages.deleted,
+			});
+			mainRouter.push('/pages');
+		});
+	});
+}
+
+function duplicate() {
+	title.value = title.value + ' - copy';
+	name.value = name.value + '-copy';
+	misskeyApi('pages/create', getSaveOptions()).then(created => {
+		pageId.value = created.id;
+		currentName.value = name.value.trim();
+		os.alert({
+			type: 'success',
+			text: i18n.ts._pages.created,
+		});
+		mainRouter.push(`/pages/edit/${pageId.value}`);
+	});
+}
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		type: null,
+		title: i18n.ts._pages.chooseBlock,
+		items: getPageBlockList(),
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	content.value.push({ id, type });
+}
+
+function setEyeCatchingImage(img) {
+	selectFile(img.currentTarget ?? img.target, null).then(file => {
+		eyeCatchingImageId.value = file.id;
+	});
+}
+
+function removeEyeCatchingImage() {
+	eyeCatchingImageId.value = null;
+}
+
+async function init() {
+	if (props.initPageId) {
+		page.value = await misskeyApi('pages/show', {
+			pageId: props.initPageId,
+		});
+	} else if (props.initPageName && props.initUser) {
+		page.value = await misskeyApi('pages/show', {
+			name: props.initPageName,
+			username: props.initUser,
+		});
+		readonly.value = true;
+	}
+
+	if (page.value) {
+		author.value = page.value.user;
+		pageId.value = page.value.id;
+		title.value = page.value.title;
+		name.value = page.value.name;
+		currentName.value = page.value.name;
+		summary.value = page.value.summary;
+		font.value = page.value.font;
+		hideTitleWhenPinned.value = page.value.hideTitleWhenPinned;
+		alignCenter.value = page.value.alignCenter;
+		content.value = page.value.content;
+		eyeCatchingImageId.value = page.value.eyeCatchingImageId;
+	} else {
+		const id = uuid();
+		content.value = [{
+			id,
+			type: 'text',
+			text: 'Hello World!',
+		}];
+	}
+}
+
+init();
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => [{
+	key: 'settings',
+	title: i18n.ts._pages.pageSetting,
+	icon: 'ti ti-settings',
+}, {
+	key: 'contents',
+	title: i18n.ts._pages.contents,
+	icon: 'ti ti-note',
+}]);
+
+definePageMetadata(() => ({
+	title: props.initPageId ? i18n.ts._pages.editPage
+	: props.initPageName && props.initUser ? i18n.ts._pages.readPage
+	: i18n.ts._pages.newPage,
+	icon: 'ti ti-pencil',
+}));
+</script>
+
+<style lang="scss" module>
+.contents {
+	&:global {
+		> .add {
+			margin: 16px auto 0 auto;
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.jqqmcavi {
+	margin-bottom: 16px;
+
+	> .button {
+		& + .button {
+			margin-left: 8px;
+		}
+	}
+}
+
+.gwbmwxkm {
+	position: relative;
+
+	> header {
+		> .title {
+			z-index: 1;
+			margin: 0;
+			padding: 0 16px;
+			line-height: 42px;
+			font-size: 0.9em;
+			font-weight: bold;
+			box-shadow: 0 1px rgba(#000, 0.07);
+
+			> i {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .buttons {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: 0;
+
+			> button {
+				padding: 0;
+				width: 42px;
+				font-size: 0.9em;
+				line-height: 42px;
+			}
+		}
+	}
+
+	> section {
+		padding: 0 32px 32px 32px;
+
+		@media (max-width: 500px) {
+			padding: 0 16px 16px 16px;
+		}
+
+		> .view {
+			display: inline-block;
+			margin: 16px 0 0 0;
+			font-size: 14px;
+		}
+
+		> .content {
+			margin-bottom: 16px;
+		}
+
+		> .eyeCatch {
+			margin-bottom: 16px;
+
+			> div {
+				> img {
+					max-width: 100%;
+				}
+			}
+		}
+	}
+}
+
+.qmuvgica {
+	padding: 16px;
+
+	> .variables {
+		margin-bottom: 16px;
+	}
+
+	> .add {
+		margin-bottom: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/novel.vue b/packages/frontend/src/pages/novel.vue
new file mode 100644
index 000000000000..67142385914b
--- /dev/null
+++ b/packages/frontend/src/pages/novel.vue
@@ -0,0 +1,539 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="800">
+		<Transition
+			:enterActiveClass="defaultStore.state.animation ? $style.fadeEnterActive : ''"
+			:leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''"
+			:enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''"
+			:leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''"
+			mode="out-in"
+		>
+			<div v-if="page" :key="page.id" class="_gaps">
+				<div :class="$style.pageMain">
+					<div :class="$style.pageBanner">
+						<div :class="$style.pageBannerBgRoot">
+							<MkImgWithBlurhash
+								v-if="page.eyeCatchingImageId"
+								:class="$style.pageBannerBg"
+								:hash="page.eyeCatchingImage?.blurhash"
+								:cover="true"
+								:forceBlurhash="true"
+							/>
+							<img
+								v-else-if="instance.backgroundImageUrl || instance.bannerUrl"
+								:class="[$style.pageBannerBg, $style.pageBannerBgFallback1]"
+								:src="getStaticImageUrl(instance.backgroundImageUrl ?? instance.bannerUrl!)"
+							/>
+							<div v-else :class="[$style.pageBannerBg, $style.pageBannerBgFallback2]"></div>
+						</div>
+						<div v-if="page.eyeCatchingImageId" :class="$style.pageBannerImage">
+							<MkMediaImage
+								:image="page.eyeCatchingImage!"
+								:cover="true"
+								:disableImageLink="true"
+								:class="$style.thumbnail"
+							/>
+						</div>
+						<div :class="$style.pageBannerTitle" class="_gaps_s">
+							<h1>{{ page.title || page.name }}</h1>
+							<div :class="$style.pageBannerTitleSub">
+								<div v-if="page.user" :class="$style.pageBannerTitleUser">
+									<MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA>
+								</div>
+								<div :class="$style.pageBannerTitleSubActions">
+									<MkA v-if="page.userId === $i?.id" v-tooltip="i18n.ts._pages.editThisPage" :to="`/pages/edit/${page.id}`" class="_button" :class="$style.generalActionButton"><i class="ti ti-pencil ti-fw"></i></MkA>
+									<button v-tooltip="i18n.ts.share" class="_button" :class="$style.generalActionButton" @click="share"><i class="ti ti-share ti-fw"></i></button>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div :class="$style.pageContent">
+						<XPage :page="page"/>
+					</div>
+					<div :class="$style.pageActions">
+						<div>
+							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" asLike primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" asLike @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+						</div>
+						<div :class="$style.other">
+							<MkA v-if="page.userId === $i?.id" v-tooltip="i18n.ts._pages.editThisPage" :to="`/pages/edit/${page.id}`" class="_button" :class="$style.generalActionButton"><i class="ti ti-pencil ti-fw"></i></MkA>
+							<button v-tooltip="i18n.ts.copyLink" class="_button" :class="$style.generalActionButton" @click="copyLink"><i class="ti ti-link ti-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" class="_button" :class="$style.generalActionButton" @click="share"><i class="ti ti-share ti-fw"></i></button>
+							<button v-if="$i" v-click-anime class="_button" :class="$style.generalActionButton" @mousedown="showMenu"><i class="ti ti-dots ti-fw"></i></button>
+						</div>
+					</div>
+					<div :class="$style.pageUser">
+						<MkAvatar :user="page.user" :class="$style.avatar" link preview/>
+						<MkA :to="`/@${username}`">
+							<MkUserName :user="page.user" :class="$style.name"/>
+							<MkAcct :user="page.user" :class="$style.acct"/>
+						</MkA>
+						<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user!" :inline="true" :transparent="false" :full="true" :class="$style.follow"/>
+					</div>
+					<div :class="$style.pageDate">
+						<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+						<div v-if="page.createdAt != page.updatedAt"><i class="ti ti-clock-edit"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+					</div>
+				</div>
+				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkContainer :max-height="300" :foldable="true" class="other">
+					<template #icon><i class="ti ti-clock"></i></template>
+					<template #header>{{ i18n.ts.recentPosts }}</template>
+					<MkPagination v-slot="{items}" :pagination="otherPostsPagination" :class="$style.relatedPagesRoot" class="_gaps">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page" :class="$style.relatedPagesItem"/>
+					</MkPagination>
+				</MkContainer>
+			</div>
+			<MkError v-else-if="error" @retry="fetchPage()"/>
+			<MkLoading v-else/>
+		</Transition>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, ref, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import XPage from '@/components/page/page.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { url } from '@@/js/config.js';
+import MkMediaImage from '@/components/MkMediaImage.vue';
+import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { pageViewInterruptors, defaultStore } from '@/store.js';
+import { deepClone } from '@/scripts/clone.js';
+import { $i } from '@/account.js';
+import { isSupportShare } from '@/scripts/navigator.js';
+import { instance } from '@/instance.js';
+import { getStaticImageUrl } from '@/scripts/media-proxy.js';
+import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
+import { useRouter } from '@/router/supplier.js';
+import type { MenuItem } from '@/types/menu.js';
+
+const router = useRouter();
+
+const props = defineProps<{
+	pageName: string;
+	username: string;
+}>();
+
+const page = ref<Misskey.entities.Page | null>(null);
+const error = ref<any>(null);
+const otherPostsPagination = {
+	endpoint: 'users/pages' as const,
+	limit: 6,
+	params: computed(() => ({
+		userId: page.value.user.id,
+	})),
+};
+const path = computed(() => props.username + '/' + props.pageName);
+
+function fetchPage() {
+	page.value = null;
+	misskeyApi('pages/show', {
+		name: props.pageName,
+		username: props.username,
+	}).then(async _page => {
+		page.value = _page;
+
+		// plugin
+		if (pageViewInterruptors.length > 0) {
+			let result = deepClone(_page);
+			for (const interruptor of pageViewInterruptors) {
+				result = await interruptor.handler(result);
+			}
+			page.value = result;
+		}
+	}).catch(err => {
+		error.value = err;
+	});
+}
+
+function share(ev: MouseEvent) {
+	if (!page.value) return;
+
+	const menuItems: MenuItem[] = [];
+
+	menuItems.push({
+		text: i18n.ts.shareWithNote,
+		icon: 'ti ti-pencil',
+		action: shareWithNote,
+	});
+
+	if (isSupportShare()) {
+		menuItems.push({
+			text: i18n.ts.share,
+			icon: 'ti ti-share',
+			action: shareWithNavigator,
+		});
+	}
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
+}
+
+function copyLink() {
+	if (!page.value) return;
+
+	copyToClipboard(`${url}/@${page.value.user.username}/pages/${page.value.name}`);
+	os.success();
+}
+
+function shareWithNote() {
+	if (!page.value) return;
+
+	os.post({
+		initialText: `${page.value.title || page.value.name}\n${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		instant: true,
+	});
+}
+
+function shareWithNavigator() {
+	if (!page.value) return;
+
+	navigator.share({
+		title: page.value.title ?? page.value.name,
+		text: page.value.summary ?? undefined,
+		url: `${url}/@${page.value.user.username}/pages/${page.value.name}`,
+	});
+}
+
+function like() {
+	if (!page.value) return;
+
+	os.apiWithDialog('pages/like', {
+		pageId: page.value.id,
+	}).then(() => {
+		page.value!.isLiked = true;
+		page.value!.likedCount++;
+	});
+}
+
+async function unlike() {
+	if (!page.value) return;
+
+	const confirm = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.unlikeConfirm,
+	});
+	if (confirm.canceled) return;
+	os.apiWithDialog('pages/unlike', {
+		pageId: page.value.id,
+	}).then(() => {
+		page.value!.isLiked = false;
+		page.value!.likedCount--;
+	});
+}
+
+function pin(pin) {
+	if (!page.value) return;
+
+	os.apiWithDialog('i/update', {
+		pinnedPageId: pin ? page.value.id : null,
+	});
+}
+
+function reportAbuse() {
+	if (!page.value) return;
+
+	const pageUrl = `${url}/@${props.username}/pages/${props.pageName}`;
+
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
+		user: page.value.user,
+		initialComment: `Page: ${pageUrl}\n-----\n`,
+	}, {
+		closed: () => dispose(),
+	});
+}
+
+function showMenu(ev: MouseEvent) {
+	if (!page.value) return;
+
+	const menuItems: MenuItem[] = [];
+
+	if ($i && $i.id === page.value.userId) {
+		menuItems.push({
+			icon: 'ti ti-pencil',
+			text: i18n.ts.editThisPage,
+			action: () => router.push(`/pages/edit/${page.value.id}`),
+		});
+
+		if ($i.pinnedPageId === page.value.id) {
+			menuItems.push({
+				icon: 'ti ti-pinned-off',
+				text: i18n.ts.unpin,
+				action: () => pin(false),
+			});
+		} else {
+			menuItems.push({
+				icon: 'ti ti-pin',
+				text: i18n.ts.pin,
+				action: () => pin(true),
+			});
+		}
+	} else if ($i && $i.id !== page.value.userId) {
+		menuItems.push({
+			icon: 'ti ti-code',
+			text: i18n.ts._pages.viewSource,
+			action: () => router.push(`/@${props.username}/pages/${props.pageName}/view-source`),
+		}, {
+			icon: 'ti ti-exclamation-circle',
+			text: i18n.ts.reportAbuse,
+			action: reportAbuse,
+		});
+
+		if ($i.isModerator || $i.isAdmin) {
+			menuItems.push({
+				type: 'divider',
+			}, {
+				icon: 'ti ti-trash',
+				text: i18n.ts.delete,
+				danger: true,
+				action: () => os.confirm({
+					type: 'warning',
+					text: i18n.ts.deleteConfirm,
+				}).then(({ canceled }) => {
+					if (canceled || !page.value) return;
+
+					os.apiWithDialog('pages/delete', { pageId: page.value.id });
+				}),
+			});
+		}
+	}
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
+}
+
+watch(() => path.value, fetchPage, { immediate: true });
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePageMetadata(() => ({
+	title: page.value ? page.value.title || page.value.name : i18n.ts.pages,
+	...page.value ? {
+		avatar: page.value.user,
+		path: `/@${page.value.user.username}/pages/${page.value.name}`,
+		share: {
+			title: page.value.title || page.value.name,
+			text: page.value.summary,
+		},
+	} : {},
+}));
+</script>
+
+<style lang="scss" module>
+.fadeEnterActive,
+.fadeLeaveActive {
+	transition: opacity 0.125s ease;
+}
+.fadeEnterFrom,
+.fadeLeaveTo {
+	opacity: 0;
+}
+
+.generalActionButton {
+	height: 2.5rem;
+	width: 2.5rem;
+	text-align: center;
+	border-radius: 99rem;
+
+	& :global(.ti) {
+		line-height: 2.5rem;
+	}
+
+	&:hover,
+	&:focus-visible {
+		background-color: var(--MI_THEME-accentedBg);
+		color: var(--MI_THEME-accent);
+		text-decoration: none;
+		outline: none;
+	}
+}
+
+.pageMain {
+	border-radius: var(--MI-radius);
+	padding: 2rem;
+	background: var(--MI_THEME-panel);
+	box-sizing: border-box;
+}
+
+.pageBanner {
+	width: calc(100% + 4rem);
+	margin: -2rem -2rem 1.5rem;
+	border-radius: var(--MI-radius) var(--MI-radius) 0 0;
+	overflow: hidden;
+	position: relative;
+
+	> .pageBannerBgRoot {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+
+		.pageBannerBg {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			opacity: .2;
+			filter: brightness(1.2);
+		}
+
+		.pageBannerBgFallback1 {
+			filter: blur(20px);
+		}
+
+		.pageBannerBgFallback2 {
+			background-color: var(--MI_THEME-accentedBg);
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			height: 100px;
+			background: linear-gradient(0deg, var(--MI_THEME-panel), transparent);
+		}
+	}
+
+	> .pageBannerImage {
+		position: relative;
+		padding-top: 56.25%;
+
+		> .thumbnail {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	> .pageBannerTitle {
+		position: relative;
+		padding: 1.5rem 2rem;
+
+		h1 {
+			font-size: 2rem;
+			font-weight: 700;
+			color: var(--MI_THEME-fg);
+			margin: 0;
+		}
+
+		.pageBannerTitleSub {
+			display: flex;
+			align-items: center;
+			width: 100%;
+		}
+
+		.pageBannerTitleUser {
+			--height: 32px;
+			flex-shrink: 0;
+			line-height: var(--height);
+
+			.avatar {
+				height: var(--height);
+				width: var(--height);
+			}
+		}
+
+		.pageBannerTitleSubActions {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			gap: var(--MI-marginHalf);
+			margin-left: auto;
+		}
+	}
+}
+
+.pageContent {
+	margin-bottom: 1.5rem;
+}
+
+.pageActions {
+	display: flex;
+	align-items: center;
+
+	border-top: 1px solid var(--MI_THEME-divider);
+	padding-top: 1.5rem;
+	margin-bottom: 1.5rem;
+
+	> .other {
+		margin-left: auto;
+		display: flex;
+		gap: var(--MI-marginHalf);
+	}
+}
+
+.pageUser {
+	display: flex;
+	align-items: center;
+
+	border-top: 1px solid var(--MI_THEME-divider);
+	padding-top: 1.5rem;
+	margin-bottom: 1.5rem;
+
+	.avatar,
+	.name,
+	.acct {
+		display: block;
+	}
+
+	.avatar {
+		width: 4rem;
+		height: 4rem;
+		margin-right: 1rem;
+	}
+
+	.name {
+		font-size: 110%;
+		font-weight: 700;
+	}
+
+	.acct {
+		font-size: 90%;
+		opacity: 0.7;
+	}
+
+	.follow {
+		margin-left: auto;
+	}
+}
+
+.pageDate {
+	margin-bottom: 1.5rem;
+}
+
+.pageLinks {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--MI-marginHalf);
+}
+
+.relatedPagesRoot {
+	padding: var(--MI-margin);
+}
+
+.relatedPagesItem > article {
+	background-color: var(--MI_THEME-panelHighlight) !important;
+}
+</style>
diff --git a/packages/frontend/src/pages/novels.vue b/packages/frontend/src/pages/novels.vue
new file mode 100644
index 000000000000..4ef9d3b0917f
--- /dev/null
+++ b/packages/frontend/src/pages/novels.vue
@@ -0,0 +1,95 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="700">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<div v-if="tab === 'featured'" key="featured">
+				<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+					</div>
+				</MkPagination>
+			</div>
+
+			<div v-else-if="tab === 'my'" key="my" class="_gaps">
+				<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+				<MkPagination v-slot="{items}" :pagination="myPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+					</div>
+				</MkPagination>
+			</div>
+
+			<div v-else-if="tab === 'liked'" key="liked">
+				<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
+					</div>
+				</MkPagination>
+			</div>
+		</MkHorizontalSwipe>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { useRouter } from '@/router/supplier.js';
+
+const router = useRouter();
+
+const tab = ref('featured');
+
+const featuredPagesPagination = {
+	endpoint: 'pages/featured' as const,
+	noPaging: true,
+};
+const myPagesPagination = {
+	endpoint: 'i/pages' as const,
+	limit: 5,
+};
+const likedPagesPagination = {
+	endpoint: 'i/page-likes' as const,
+	limit: 5,
+};
+
+function create() {
+	router.push('/pages/new');
+}
+
+const headerActions = computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = computed(() => [{
+	key: 'featured',
+	title: i18n.ts._pages.featured,
+	icon: 'ti ti-flare',
+}, {
+	key: 'my',
+	title: i18n.ts._pages.my,
+	icon: 'ti ti-edit',
+}, {
+	key: 'liked',
+	title: i18n.ts._pages.liked,
+	icon: 'ti ti-heart',
+}]);
+
+definePageMetadata(() => ({
+	title: i18n.ts.pages,
+	icon: 'ti ti-note',
+}));
+</script>
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index e248fe93dfa6..ef8f6fe08a0b 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -22,6 +22,9 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/@:username/pages/:pageName',
 	component: page(() => import('@/pages/page.vue')),
+}, {
+	path: '/@:username/novels/:novelName',
+	component: page(() => import('@/pages/novel.vue')),
 }, {
 	path: '/@:acct/following',
 	component: page(() => import('@/pages/user/following.vue')),
@@ -310,6 +313,15 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/pages',
 	component: page(() => import('@/pages/pages.vue')),
+}, {
+	path: '/novels/new',
+	component: page(() => import('@/pages/novel-editor/novel-editor.vue')),
+}, {
+	path: '/novels/edit/:initNovelId',
+	component: page(() => import('@/pages/novel-editor/novel-editor.vue')),
+}, {
+	path: '/novels',
+	component: page(() => import('@/pages/novels.vue')),
 }, {
 	path: '/play/:id/edit',
 	component: page(() => import('@/pages/flash/flash-edit.vue')),