feat(frontend): ノート・ユーザータイムライン埋め込み (#13929)

* fix

* navhookをbootに移動

* サーバーサイドのbootも分けるように

* 埋め込みページかどうかの判定は最初の一回だけに

* tooltipは出せるように

* fix design

* 埋め込み独自のtooltipを削除

* ロジックの分岐が多かったMkNoteDetailedを分離

* fix indent

* プレビュー用iframeにフォーカスが当たるのを修正

* popupの制御を出す側で行うように

* パラメータが逆になっていたのを修正

* Update MkEmbedCodeGenDialog.vue

* fix

* eliminate misskey-js lint warns

* fix

* add appropriate attributes to embed html

* enhance: サーバーサイドのembed系をさらに分離

* enhance: embed routerを分離(route定義をboot時に変更できるようにする改修を含む)

* type

* lint

* fix indent

* server-side styleを完全に分離

* Revert "refactor: 画面サイズのしきい値をconstにまとめる"

This reverts commit 05ca36f400.

* fix

* revert all changes in base.pug

* embedドメインをまとめた

* embedドメインをまとめた

* prevent calling contextmenu in embed page by stopping at the caller

* fix import

* fix import

* improve directory structure

* fix import

* register timeline ui as a container

* wa-

* rename

* wa-

* Update EmMediaList.vue

* Update EmMediaList.vue

* Update EmMediaList.vue

* Update EmMediaImage.vue

* Update EmNote.vue

* revert mkmedialist changes

* 戻し漏れ

* wip

* tweak embed media ui

* revert original media components

* Update boot.embed.js

* rename

* wip

* Update MkNote.vue

* wip

* Update MkSubNoteContent.vue

* Update EmNote.vue

* Update packages/frontend/src/router/definition.ts

* Revert "Update packages/frontend/src/router/definition.ts"

This reverts commit 937ae44521.

* refactor EmMediaImage

* fix import

* remove unused imports

* Update router.ts

* wip

* Update boot.ts

* wip

* wip

* wip

* wip

* Update EmNote.vue

* Update EmNote.vue

* Create EmA.vue

* Create EmAvatar.vue

* Update EmAvatar.vue

* wip

* wip

* wip

* Create EmImgWithBlurhash.vue

* Update EmImgWithBlurhash.vue

* Create EmPagination.vue

* wip

* Update boot.ts

* wip

* wip

* wi@p

* wip

* wip

* wiop

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update boot.ts

* wip

* Update MkMisskeyFlavoredMarkdown.ts

* wip

* wip

* wip

* wip

* wip

* Update post-message.ts

* wip

* Update EmNoteDetailed.vue

* Update EmNoteDetailed.vue

* Create instance.ts

* Update EmNoteDetailed.vue

* wip

* Update EmNoteDetailed.vue

* wip

* wip

* wip

* Update pnpm-lock.yaml

* wip

* wip

* wp

* wip

* Update ClientServerService.ts

* wip

* Update boot.ts

* Update vite.config.local-dev.ts

* Update vite.config.ts

* Create index.html

* wa-

* wip

* Update boot.ts

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Create EmLink.vue

* Create EmMention.vue

* Update EmMfm.ts

* wip

* wip

* wip

* wip

* Update vite.config.ts

* Update boot.ts

* Update EmA.vue

* うぃp

* wip

* wip

* Create EmError.vue

* wip

* Update MkEmbedCodeGenDialog.vue

* Update EmNote.vue

* wip

* wip

* Update user-timeline.vue

* Update check-spdx-license-id.yml

* wip

* wip

* style(frontend-shared): lint fixes on build.js

* fix(frontend-shared): include `*.{js,json}` files in js-built

* wip

* use alias

* refactor

* refactor

* Update scroll.ts

* refactor

* refactor

* refactor

* wip

* wip

* wip

* wip

* Update roles.vue

* Update branding.vue

* wip

* wip

* wip

* Update page.vue

* wip

* fix import

* add missing css variables

* 絵文字をtwemojiに変更

クライアントデフォルトにあわせるため

* force empoll readonly

* fix compiler error

* fix broken imports

* tweak button style

* run api extractor

* fix storybook theme preloads

* fix storybook instance imports

* Update preview.ts

* Update preview.ts

* Update preview.ts

* Revert "Update preview.ts"

This reverts commit 12bab1c6fb.

* Revert "Update preview.ts"

This reverts commit 5c0ce01dbd.

* Revert "Update preview.ts"

This reverts commit f4863524d7.

* Revert "fix storybook instance imports"

This reverts commit ed8eabb246.

* Revert "wip"

This reverts commit d3c1926519.

* Revert "Update page.vue"

This reverts commit 27c7900b0c.

* Revert "Update branding.vue"

This reverts commit c08ccb65ba.

* Revert "Update roles.vue"

This reverts commit 1488b67066.

* Revert "wip"

This reverts commit aab1c76981.

* refactor: use common media proxy

* fix imports

* fix

* fix: MediaProxyの初期化を保証する(storybook対策?)

* enhance(frontend-embed): improve embedParams provide

* fix(backend): MK_DEV_PREFER=backendのときにembed viteが読み込めないのを修正

* fix

* embed-pageを共通化

* fix import

* fix import

* fix import

* const.jsを共通化

(たぶんrevertしすぎた)

* fix type error

* fix duplicated import

* fix lint

* fix

* コメントとして残す

* sharedとembedをlint対象にする

* lint

* attempt to fix eslint (frontend-shared)

* lint fixes

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
Co-authored-by: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
This commit is contained in:
かっこかり
2024-09-09 20:57:36 +09:00
committed by GitHub
parent 0d0cd738f8
commit 2cbe1d1210
236 changed files with 9470 additions and 454 deletions

View File

@@ -0,0 +1,138 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<EmLoading v-if="loading"/>
<EmTimelineContainer v-else-if="user" :showHeader="embedParams.header">
<template #header>
<div :class="$style.userHeader">
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
<EmAvatar :class="$style.avatar" :user="user"/>
</a>
<div :class="$style.headerTitle">
<I18n :src="i18n.ts.noteOf" tag="div" class="_nowrap">
<template #user>
<a v-if="user != null" :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
<EmUserName :user="user"/>
</a>
<span v-else>{{ i18n.ts.user }}</span>
</template>
</I18n>
<div :class="$style.sub">{{ i18n.tsx.fromX({ x: instanceName }) }}</div>
</div>
<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
<img
:class="$style.instanceIcon"
:src="serverMetadata.iconUrl || '/favicon.ico'"
/>
</a>
</div>
</template>
<template #body>
<EmNotes
ref="notesEl"
:pagination="pagination"
:disableAutoLoad="!embedParams.autoload"
:noGap="true"
:ad="false"
/>
</template>
</EmTimelineContainer>
<XNotFound v-else/>
</div>
</template>
<script setup lang="ts">
import { ref, computed, shallowRef, inject } from 'vue';
import * as Misskey from 'misskey-js';
import type { Paging } from '@/components/EmPagination.vue';
import EmNotes from '@/components/EmNotes.vue';
import EmAvatar from '@/components/EmAvatar.vue';
import EmLoading from '@/components/EmLoading.vue';
import EmUserName from '@/components/EmUserName.vue';
import I18n from '@/components/I18n.vue';
import XNotFound from '@/pages/not-found.vue';
import EmTimelineContainer from '@/components/EmTimelineContainer.vue';
import { misskeyApi } from '@/misskey-api.js';
import { i18n } from '@/i18n.js';
import { serverMetadata } from '@/server-metadata.js';
import { url, instanceName } from '@/config.js';
import { defaultEmbedParams } from '@@/js/embed-page.js';
import { DI } from '@/di.js';
const props = defineProps<{
userId: string;
}>();
const embedParams = inject(DI.embedParams, defaultEmbedParams);
const user = ref<Misskey.entities.UserLite | null>(null);
const pagination = computed(() => ({
endpoint: 'users/notes',
params: {
userId: user.value?.id,
},
} as Paging));
const loading = ref(true);
const notesEl = shallowRef<InstanceType<typeof EmNotes> | null>(null);
misskeyApi('users/show', {
userId: props.userId,
}).then(res => {
user.value = res;
loading.value = false;
}).catch(err => {
console.error(err);
loading.value = false;
});
</script>
<style lang="scss" module>
.userHeader {
padding: 8px 16px;
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
overflow: hidden;
.avatarLink {
display: block;
}
.avatar {
display: inline-block;
width: 32px;
height: 32px;
}
.headerTitle {
flex-grow: 1;
font-weight: 700;
line-height: 1.1;
min-width: 0;
.sub {
font-size: 0.8em;
font-weight: 400;
opacity: 0.7;
}
}
.instanceIconLink {
flex-shrink: 0;
display: block;
margin-left: auto;
height: 24px;
}
.instanceIcon {
height: 24px;
border-radius: 4px;
}
}
</style>