MisskeyPagesをホームUIに統合

src/client/app/common/views/components/mfm.ts

@@ -8,7 +8,7 @@ import { concat, sum } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../../../config';
+import { host, url } from '../../../config';
 import { preorderF, countNodesF } from '../../../../../prelude/tree';
 
 function sumTextsLength(ts: MfmForest): number {
@@ -175,7 +175,9 @@ export default Vue.component('misskey-flavored-markdown', {
 						props: {
 							url: token.node.props.url,
 							rel: 'nofollow noopener',
-							target: '_blank'
+							...(token.node.props.url.startsWith(url) ? {} : {
+								target: '_blank'
+							})
 						},
 						attrs: {
 							style: 'color:var(--mfmUrl);'

src/client/app/common/views/components/url-preview.vue

@@ -9,7 +9,7 @@
 	</blockquote>
 </div>
 <div v-else class="mk-url-preview">
-	<a :class="{ mini: narrow, compact }" :href="url" rel="nofollow noopener" target="_blank" :title="url" v-if="!fetching">
+	<component :is="self ? 'router-link' : 'a'" :class="{ mini: narrow, compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="self ? null : '_blank'" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
 			<button v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enable-player')"><fa :icon="['far', 'play-circle']"/></button>
 		</div>
@@ -23,17 +23,18 @@
 				<p :title="sitename">{{ sitename }}</p>
 			</footer>
 		</article>
-	</a>
+	</component>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { url as misskeyUrl } from '../../../config';
+import { url as local } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/url-preview.vue'),
+
 	props: {
 		url: {
 			type: String,
@@ -74,7 +75,9 @@ export default Vue.extend({
 			},
 			tweetUrl: null,
 			playerEnabled: false,
-			misskeyUrl,
+			local,
+			self: this.url.startsWith(local),
+			attr: this.url.startsWith(local) ? 'to' : 'href'
 		};
 	},
 

src/client/app/common/views/components/url.vue

@@ -1,29 +1,33 @@
 <template>
-<a class="mk-url" :href="url" :rel="rel" :target="target">
+<component :is="self ? 'router-link' : 'a'" class="mk-url" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target">
 	<span class="schema">{{ schema }}//</span>
 	<span class="hostname">{{ hostname }}</span>
 	<span class="port" v-if="port != ''">:{{ port }}</span>
 	<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<fa icon="external-link-square-alt"/>
-</a>
+	<fa icon="external-link-square-alt" v-if="!self"/>
+</component>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { toUnicode as decodePunycode } from 'punycode';
+import { url as local } from '../../../config';
 
 export default Vue.extend({
 	props: ['url', 'rel', 'target'],
 	data() {
 		return {
+			local,
 			schema: null,
 			hostname: null,
 			port: null,
 			pathname: null,
 			query: null,
-			hash: null
+			hash: null,
+			self: this.url.startsWith(local),
+			attr: this.url.startsWith(local) ? 'to' : 'href'
 		};
 	},
 	created() {

src/client/app/common/views/pages/page-editor/els/page-editor.el.image.vue

@@ -19,7 +19,7 @@ import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../../../../../i18n';
 import XContainer from '../page-editor.container.vue';
-import XFileThumbnail from '../../drive-file-thumbnail.vue';
+import XFileThumbnail from '../../../components/drive-file-thumbnail.vue';
 
 export default Vue.extend({
 	i18n: i18n('pages'),

src/client/app/common/views/pages/page-editor/page-editor.vue

@@ -11,7 +11,7 @@
 		</header>
 
 		<section>
-			<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
+			<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</router-link>
 
 			<ui-input v-model="title">
 				<span>{{ $t('title') }}</span>
@@ -111,20 +111,25 @@ export default Vue.extend({
 	},
 
 	props: {
-		page: {
-			type: Object,
+		initPageId: {
+			type: String,
 			required: false
 		},
-		readonly: {
-			type: Boolean,
-			required: false,
-			default: false
+		initPageName: {
+			type: String,
+			required: false
+		},
+		initUser: {
+			type: String,
+			required: false
 		},
 	},
 
 	data() {
 		return {
 			author: this.$store.state.i,
+			readonly: false,
+			page: null,
 			pageId: null,
 			currentName: null,
 			title: '',
@@ -156,7 +161,7 @@ export default Vue.extend({
 		},
 	},
 
-	created() {
+	async created() {
 		this.aiScript = new ASTypeChecker();
 
 		this.$watch('variables', () => {
@@ -167,6 +172,18 @@ export default Vue.extend({
 			this.aiScript.pageVars = collectPageVars(this.content);
 		}, { deep: true });
 
+		if (this.initPageId) {
+			this.page = await this.$root.api('pages/show', {
+				pageId: this.initPageId,
+			});
+		} else if (this.initPageName && this.initUser) {
+			this.page = await this.$root.api('pages/show', {
+				name: this.initPageName,
+				username: this.initUser,
+			});
+			this.readonly = true;
+		}
+
 		if (this.page) {
 			this.author = this.page.user;
 			this.pageId = this.page.id;

src/client/app/common/views/pages/page/page.vue

@@ -148,8 +148,8 @@ export default Vue.extend({
 		> .title
 			z-index 1
 			margin 0
-			padding 32px 64px
-			font-size 24px
+			padding 16px 32px
+			font-size 20px
 			font-weight bold
 			color var(--text)
 			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
@@ -160,8 +160,8 @@ export default Vue.extend({
 
 	> div
 		color var(--text)
-		padding 48px 64px
-		font-size 18px
+		padding 24px 32px
+		font-size 16px
 
 		@media (max-width 600px)
 			padding 24px 32px
@@ -169,7 +169,7 @@ export default Vue.extend({
 
 	> footer
 		color var(--text)
-		padding 0 64px 38px 64px
+		padding 0 32px 28px 32px
 
 		@media (max-width 600px)
 			padding 0 32px 28px 32px