Improve Page

* ページをピン留めできるように
* デッキでカラム内でページを見れるように

2 files changed, 76 insertions, 0 deletions

diff --git a/src/client/app/common/views/deck/deck.page-column.vue b/src/client/app/common/views/deck/deck.page-column.vue
new file mode 100644
index 0000000000..0ef391a51d
--- /dev/null
+++ b/src/client/app/common/views/deck/deck.page-column.vue
@@ -0,0 +1,69 @@
+<template>
+<x-column>
+	<template #header>
+		<fa :icon="faStickyNote"/>{{ page ? page.name : '' }}
+	</template>
+
+	<div v-if="page">
+		<x-page :page="page" :key="page.id"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XPage from '../../../common/views/components/page/page.vue';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	components: {
+		XColumn,
+		XPage
+	},
+
+	props: {
+		pageName: {
+			type: String,
+			required: true
+		},
+		username: {
+			type: String,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			page: null,
+			faStickyNote
+		};
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		fetch() {
+			this.$root.api('pages/show', {
+				name: this.pageName,
+				username: this.username,
+			}).then(page => {
+				this.page = page;
+				this.$emit('init', {
+					title: this.page.title,
+					icon: faStickyNote
+				});
+			});
+		}
+	}
+});
+</script>
diff --git a/src/client/app/common/views/deck/deck.user-column.home.vue b/src/client/app/common/views/deck/deck.user-column.home.vue
index 56b117a7dd..9fb50a6672 100644
--- a/src/client/app/common/views/deck/deck.user-column.home.vue
+++ b/src/client/app/common/views/deck/deck.user-column.home.vue
@@ -1,5 +1,11 @@
 <template>
 <div>
+	<ui-container v-if="user.pinnedPage" :body-togglable="true">
+		<template #header><fa icon="thumbtack"/> {{ $t('pinned-page') }}</template>
+		<div>
+			<x-page :page="user.pinnedPage" :key="user.pinnedPage.id" :show-title="!user.pinnedPage.hideTitleWhenPinned"/>
+		</div>
+	</ui-container>
 	<ui-container v-if="user.pinnedNotes && user.pinnedNotes.length > 0" :body-togglable="true">
 		<template #header><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</template>
 		<div>
@@ -48,6 +54,7 @@ export default Vue.extend({
 
 	components: {
 		XNotes,
+		XPage: () => import('../../../common/views/components/page/page.vue').then(m => m.default),
 	},
 
 	props: {