merge: Link attributions (!1048)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1048

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Hazelnoot <acomputerdog@gmail.com>

packages/frontend/src/components/MkUrlPreview.vue

@@ -65,6 +65,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</footer>
 		</article>
 	</component>
+
+	<I18n v-if="attributionUser" :src="i18n.ts.writtenBy" :class="$style.linkAttribution" tag="p">
+		<template #user>
+			<MkA v-user-preview="attributionUser.id" :to="userPage(attributionUser)">
+				<MkAvatar :class="$style.linkAttributionIcon" :user="attributionUser"/>
+				<MkUserName :user="attributionUser" style="color: var(--MI_THEME-accent)"/>
+			</MkA>
+		</template>
+	</I18n>
+	<p v-else-if="linkAttribution" :class="$style.linkAttribution"><MkEllipsis/></p>
+
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
 			<MkButton :small="true" inline @click="tweetExpanded = true">
@@ -106,6 +117,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { warningExternalWebsite } from '@/utility/warning-external-website.js';
 import DynamicNoteSimple from '@/components/DynamicNoteSimple.vue';
 import { $i } from '@/i';
+import { userPage } from '@/filters/user.js';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
@@ -146,6 +158,10 @@ const player = ref<SummalyResult['player']>({
 	height: null,
 	allow: [],
 });
+const linkAttribution = ref<{
+	userId: string,
+} | null>(null);
+const attributionUser = ref<Misskey.entities.User | null>(null);
 const playerEnabled = ref(false);
 const tweetId = ref<string | null>(null);
 const tweetExpanded = ref(props.detail);
@@ -221,7 +237,12 @@ function refresh(withFetch = false) {
 
 			return res.json();
 		})
-		.then(async (info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
+		.then(async (info: SummalyResult & {
+			haveNoteLocally?: boolean,
+			linkAttribution?: {
+				userId: string,
+			}
+		} | null) => {
 			unknownUrl.value = info == null;
 			title.value = info?.title ?? null;
 			description.value = info?.description ?? null;
@@ -236,6 +257,16 @@ function refresh(withFetch = false) {
 			};
 			sensitive.value = info?.sensitive ?? false;
 			activityPub.value = info?.activityPub ?? null;
+			linkAttribution.value = info?.linkAttribution ?? null;
+			if (linkAttribution.value) {
+				try {
+					const response = await misskeyApi('users/show', { userId: linkAttribution.value.userId });
+					attributionUser.value = response;
+				} catch {
+					// makes the loading ellipsis vanish.
+					linkAttribution.value = null;
+				}
+			}
 
 			theNote.value = null;
 			if (info?.haveNoteLocally) {
@@ -395,6 +426,28 @@ refresh();
 	vertical-align: top;
 }
 
+.linkAttributionIcon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	margin-left: 0.25em;
+	margin-right: 0.25em;
+	vertical-align: middle;
+	border-radius: 50%;
+	* {
+		border-radius: 4px;
+	}
+}
+
+.linkAttribution {
+	width: 100%;
+	font-size: 0.8em;
+	display: inline-block;
+	margin: auto;
+	padding-top: 0.5em;
+	text-align: right;
+}
+
 .action {
 	display: flex;
 	gap: 6px;

packages/frontend/src/pages/settings/mute-block.instance-mute.vue

@@ -15,36 +15,50 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
 import { ensureSignin } from '@/i.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
 
 const $i = ensureSignin();
 
 const instanceMutes = ref($i.mutedInstances.join('\n'));
+const domainArray = computed(() => {
+	return instanceMutes.value
+		.trim().split('\n')
+		.map(el => el.trim().toLowerCase())
+		.filter(el => el);
+});
 const changed = ref(false);
 
 async function save() {
-	let mutes = instanceMutes.value
-		.trim().split('\n')
-		.map(el => el.trim())
-		.filter(el => el);
+	// checks for a full line without whitespace.
+	if (!domainArray.value.every(d => /^\S+$/.test(d))) {
+		os.alert({
+			type: 'error',
+			title: i18n.ts.invalidValue,
+		});
+		return;
+	}
 
 	await misskeyApi('i/update', {
-		mutedInstances: mutes,
+		mutedInstances: domainArray.value,
 	});
 
-	changed.value = false;
-
 	// Refresh filtered list to signal to the user how they've been saved
-	instanceMutes.value = mutes.join('\n');
+	instanceMutes.value = domainArray.value.join('\n');
+
+	changed.value = false;
 }
 
-watch(instanceMutes, () => {
-	changed.value = true;
+watch(domainArray, (newArray, oldArray) => {
+	// compare arrays
+	if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) {
+		changed.value = true;
+	}
 });
 </script>

packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue

@@ -0,0 +1,67 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkTextarea v-model="attributionDomains">
+	<template #label><SearchLabel>{{ i18n.ts.attributionDomains }}</SearchLabel></template>
+	<template #caption>
+		{{ i18n.ts.attributionDomainsDescription }}
+		<br/>
+		<Mfm :text="tutorialTag"/>
+	</template>
+</MkTextarea>
+<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import { host as hostRaw } from '@@/js/config.js';
+import { toUnicode } from 'punycode.js';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkButton from '@/components/MkButton.vue';
+import { ensureSignin } from '@/i.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+const $i = ensureSignin();
+
+const attributionDomains = ref($i.attributionDomains.join('\n'));
+const domainArray = computed(() => {
+	return attributionDomains.value
+		.trim().split('\n')
+		.map(el => el.trim().toLowerCase())
+		.filter(el => el);
+});
+const changed = ref(false);
+const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
+
+async function save() {
+	// checks for a full line without whitespace.
+	if (!domainArray.value.every(d => /^\S+$/.test(d))) {
+		os.alert({
+			type: 'error',
+			title: i18n.ts.invalidValue,
+		});
+		return;
+	}
+
+	await misskeyApi('i/update', {
+		attributionDomains: domainArray.value,
+	});
+
+	// Refresh filtered list to signal to the user how they've been saved
+	attributionDomains.value = domainArray.value.join('\n');
+
+	changed.value = false;
+}
+
+watch(domainArray, (newArray, oldArray) => {
+	// compare arrays
+	if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) {
+		changed.value = true;
+	}
+});
+</script>

packages/frontend/src/pages/settings/profile.vue

@@ -163,6 +163,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<template #caption>{{ i18n.ts.flagAsBotDescription }}</template>
 						</MkSwitch>
 					</SearchMarker>
+
+					<SearchMarker
+						:label="i18n.ts.attributionDomains"
+						:keywords="['attribution', 'domains', 'preview', 'url']"
+					>
+						<AttributionDomainsSettings/>
+					</SearchMarker>
 				</div>
 			</MkFolder>
 		</SearchMarker>
@@ -172,6 +179,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue';
+import AttributionDomainsSettings from './profile.attribution-domains-setting.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';