client: siplify page display

packages/client/src/pages/page.vue

@@ -1,20 +1,15 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader/></template>
 	<MkSpacer :content-max="700">
 		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
 				<div class="_block main">
-					<!--
-				<div class="header">
-					<h1>{{ page.title }}</h1>
-				</div>
-				-->
 					<div class="banner">
 						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
-					<div class="content">
-						<XPage :page="page"/>
+					<div class="content" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
+						<Mfm :text="page.text" :is-note="false"/>
 					</div>
 					<div class="actions">
 						<div class="like">
@@ -63,7 +58,6 @@
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { url } from '@/config';
@@ -196,6 +190,16 @@ definePageMetadata(computed(() => page ? {
 		> .content {
 			margin-top: 1em;
 			padding: 1em;
+
+		    &.serif {
+		        > div {
+		            font-family: serif;
+		        }
+		    }
+
+		    &.center {
+		        text-align: center;
+		    }
 		}
 
 		> .actions {