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 05ca36f400889456981e89489ae0ae242fa09b67.
* 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 937ae44521cdb0f250796943b20142b65f8ed944.
* 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
* うぃｐ
* 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 12bab1c6fbd3baf753515df760ff19d027b85155.
* Revert "Update preview.ts"
This reverts commit 5c0ce01dbdf2194ffe94aba950f747a9968f29c4.
* Revert "Update preview.ts"
This reverts commit f4863524d7e5ca0f25470808849c24a72bea000a.
* Revert "fix storybook instance imports"
This reverts commit ed8eabb246edf731d31adffbe3c77c539e53ae9e.
* Revert "wip"
This reverts commit d3c1926519878155193a1654f49141e515d49683.
* Revert "Update page.vue"
This reverts commit 27c7900b0c1ae296b56075e8a9c22585d9cd744b.
* Revert "Update branding.vue"
This reverts commit c08ccb65ba66774c3e2b3dcfc6153004b5c0aa16.
* Revert "Update roles.vue"
This reverts commit 1488b670660cb1803d17d8f5c78f2d79e59fa52d.
* Revert "wip"
This reverts commit aab1c769814b08c257cad3025422a0eea3bfba4f.
* 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:
かっこかり
GitHub
parent
0d0cd738f8
commit
2cbe1d1210
236 changed files with 9470 additions and 454 deletions
140
packages/frontend-embed/src/pages/clip.vue
Normal file
140
packages/frontend-embed/src/pages/clip.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MkLoading v-if="loading"/>
|
||||
<EmTimelineContainer v-else-if="clip" :showHeader="embedParams.header">
|
||||
<template #header>
|
||||
<div :class="$style.clipHeader">
|
||||
<div :class="$style.headerClipIconRoot">
|
||||
<i class="ti ti-paperclip"></i>
|
||||
</div>
|
||||
<div :class="$style.headerTitle" @click="top">
|
||||
<div class="_nowrap"><a :href="`/clips/${clip.id}`" target="_blank" rel="noopener">{{ clip.name }}</a></div>
|
||||
<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 { scrollToTop } from '@@/js/scroll.js';
|
||||
import type { Paging } from '@/components/EmPagination.vue';
|
||||
import EmNotes from '@/components/EmNotes.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 { isLink } from '@/to-be-shared/is-link.js';
|
||||
import { defaultEmbedParams } from '@@/js/embed-page.js';
|
||||
import { DI } from '@/di.js';
|
||||
|
||||
const props = defineProps<{
|
||||
clipId: string;
|
||||
}>();
|
||||
|
||||
const embedParams = inject(DI.embedParams, defaultEmbedParams);
|
||||
|
||||
const clip = ref<Misskey.entities.Clip | null>(null);
|
||||
const pagination = computed(() => ({
|
||||
endpoint: 'clips/notes',
|
||||
params: {
|
||||
clipId: props.clipId,
|
||||
},
|
||||
} as Paging));
|
||||
const loading = ref(true);
|
||||
|
||||
const notesEl = shallowRef<InstanceType<typeof EmNotes> | null>(null);
|
||||
|
||||
function top(ev: MouseEvent) {
|
||||
const target = ev.target as HTMLElement | null;
|
||||
if (target && isLink(target)) return;
|
||||
|
||||
if (notesEl.value) {
|
||||
scrollToTop(notesEl.value.$el as HTMLElement, { behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
misskeyApi('clips/show', {
|
||||
clipId: props.clipId,
|
||||
}).then(res => {
|
||||
clip.value = res;
|
||||
loading.value = false;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
loading.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.clipHeader {
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--margin);
|
||||
overflow: hidden;
|
||||
|
||||
.headerClipIconRoot {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue