Improve Pages

Resolve #6654

src/client/components/page-preview.vue

@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _panel" tabindex="-1">
 	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
@@ -35,16 +35,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
-	overflow: hidden;
 	width: 100%;
-	border: solid var(--lineWidth) var(--urlPreviewBorder);
-	border-radius: 4px;
-	overflow: hidden;
-	border: 1px solid var(--divider);
 
 	&:hover {
 		text-decoration: none;
-		border-color: var(--urlPreviewBorderHover);
+		color: var(--accent);
 	}
 
 	> .thumbnail {

src/client/components/page/page.block.vue

@@ -18,10 +18,11 @@ import XPost from './page.post.vue';
 import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
+import XNote from './page.note.vue';
 
 export default defineComponent({
 	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote
 	},
 	props: {
 		value: {

src/client/components/page/page.note.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="voxdxuby">
+	<XNote v-if="note" v-model:note="note" :key="note.id"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XNote from '@/components/note.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XNote
+	},
+	props: {
+		value: {
+			required: true
+		},
+		hpml: {
+			required: true
+		}
+	},
+	data() {
+		return {
+			note: null,
+		};
+	},
+	async mounted() {
+		this.note = await os.api('notes/show', { noteId: this.value.note });
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.voxdxuby {
+	margin: 1em 0;
+}
+</style>