Skip to content

Commit

Permalink
improve(frontend): サーバー情報・お問い合わせページを改修 (#238)
Browse files Browse the repository at this point in the history
* Revert "Revert "enhance(frontend): add contact page" (#208)" (This reverts commit 5a329a0.)

* improve(frontend): サーバー情報・お問い合わせページを改修
  • Loading branch information
taiyme authored Jul 1, 2024
1 parent 924361e commit e72758d
Show file tree
Hide file tree
Showing 9 changed files with 279 additions and 218 deletions.
8 changes: 8 additions & 0 deletions locales/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4980,6 +4980,10 @@ export interface Locale extends ILocale {
* フォローの際常に確認する
*/
readonly "alwaysConfirmFollow": string;
/**
* お問い合わせ
*/
readonly "inquiry": string;
readonly "_delivery": {
/**
* 配信状態
Expand Down Expand Up @@ -10167,6 +10171,10 @@ export interface Locale extends ILocale {
* リモートサーバーに転送済み
*/
readonly "forwardedReport": string;
/**
* まだ提供されていません
*/
readonly "notYetProvided": string;
readonly "_about": {
/**
* taiymeについて
Expand Down
2 changes: 2 additions & 0 deletions locales/ja-JP.yml
Original file line number Diff line number Diff line change
Expand Up @@ -1241,6 +1241,7 @@ keepOriginalFilename: "オリジナルのファイル名を保持"
keepOriginalFilenameDescription: "この設定をオフにすると、アップロード時にファイル名が自動でランダム文字列に置き換えられます。"
noDescription: "説明文はありません"
alwaysConfirmFollow: "フォローの際常に確認する"
inquiry: "お問い合わせ"

_delivery:
status: "配信状態"
Expand Down Expand Up @@ -2711,6 +2712,7 @@ _tms:
didNumberquote: "数字引用しました"
resolvedBy: "{user}によって解決済み"
forwardedReport: "リモートサーバーに転送済み"
notYetProvided: "まだ提供されていません"
_about:
title: "taiymeについて"
description: "taiymeは、Misskeyから派生したオープンソースのソフトウェアです。"
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/components/MkMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
</div>
</MkA>
<a v-else-if="item.type === 'a'" role="menuitem" tabindex="0" :class="['_button', $style.item]" :href="item.href" :target="item.target" :download="item.download" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter" @mouseleave.passive="onItemMouseLeave">
<a v-else-if="item.type === 'a'" role="menuitem" tabindex="0" :class="['_button', $style.item]" :href="item.href" :target="item.target" rel="nofollow noopener" :download="item.download" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter" @mouseleave.passive="onItemMouseLeave">
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
<div :class="$style.item_content">
<span :class="$style.item_content_text">{{ item.text }}</span>
Expand Down
93 changes: 56 additions & 37 deletions packages/frontend/src/components/MkVisitorDashboard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="_gaps_s" :class="$style.mainActions">
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
<MkButton :class="$style.mainAction" full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton>
<MkButton :class="$style.mainAction" full rounded link to="https://misskey-hub.net/servers/">{{ i18n.ts.exploreOtherServers }}</MkButton>
<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
</div>
</div>
Expand Down Expand Up @@ -65,6 +65,7 @@ import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import MkNumber from '@/components/MkNumber.vue';
import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
import type { MenuItem } from '@/types/menu.js';

const stats = ref<Misskey.entities.StatsResponse | null>(null);

Expand All @@ -84,48 +85,66 @@ function signup() {
}, {}, 'closed');
}

function showMenu(ev) {
os.popupMenu([{
function showMenu(ev: MouseEvent) {
const menu: MenuItem[] = [];
menu.push({
type: 'link',
text: i18n.ts.instanceInfo,
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/about');
},
}, {
to: '/about',
});
menu.push({
type: 'link',
text: i18n.ts._tms.aboutTaiyme,
icon: 'ti ti-info-circle',
action: () => {
os.pageWindow('/tms/about');
},
}, { type: 'divider' }, (instance.impressumUrl) ? {
text: i18n.ts.impressum,
icon: 'ti ti-file-invoice',
action: () => {
window.open(instance.impressumUrl!, '_blank', 'noopener');
},
} : undefined, (instance.tosUrl) ? {
text: i18n.ts.termsOfService,
icon: 'ti ti-notebook',
action: () => {
window.open(instance.tosUrl!, '_blank', 'noopener');
},
} : undefined, (instance.privacyPolicyUrl) ? {
text: i18n.ts.privacyPolicy,
icon: 'ti ti-shield-lock',
action: () => {
window.open(instance.privacyPolicyUrl!, '_blank', 'noopener');
},
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
text: i18n.ts.help,
to: '/tms/about',
});
menu.push({ type: 'divider' });
menu.push({
type: 'link',
text: i18n.ts.inquiry,
icon: 'ti ti-help-circle',
action: () => {
window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener');
},
}], ev.currentTarget ?? ev.target);
}
to: '/contact',
});
if (instance.impressumUrl) {
menu.push({
type: 'a',
text: i18n.ts.impressum,
icon: 'ti ti-file-invoice',
href: instance.impressumUrl,
target: '_blank',
});
}
if (instance.tosUrl) {
menu.push({
type: 'a',
text: i18n.ts.termsOfService,
icon: 'ti ti-notebook',
href: instance.tosUrl,
target: '_blank',
});
}
if (instance.privacyPolicyUrl) {
menu.push({
type: 'a',
text: i18n.ts.privacyPolicy,
icon: 'ti ti-shield-lock',
href: instance.privacyPolicyUrl,
target: '_blank',
});
}
if (instance.impressumUrl || instance.tosUrl || instance.privacyPolicyUrl) {
menu.push({ type: 'divider' });
}
menu.push({
type: 'a',
text: i18n.ts.document,
icon: 'ti ti-bulb',
href: 'https://misskey-hub.net/docs/for-users/',
target: '_blank',
});

function exploreOtherServers() {
window.open('https://misskey-hub.net/servers/', '_blank', 'noopener');
os.popupMenu(menu, ev.currentTarget ?? ev.target);
}
</script>

Expand Down
169 changes: 169 additions & 0 deletions packages/frontend/src/pages/about.overview.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div class="_gaps_m">
<TmsServerBanner/>

<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value><div v-html="instance.description || i18n.ts.headlineMisskey"></div></template>
</MkKeyValue>

<FormSection>
<div class="_gaps_m">
<TmsSoftwareVersions/>
<div v-html="i18n.tsx._tms.poweredByTaiyme({ name: instance.name ?? host })"></div>
<div class="_gaps_s">
<FormLink to="/tms/about">
<template #icon><i class="ti ti-info-circle"></i></template>
<template #default>{{ i18n.ts._tms.aboutTaiyme }}</template>
</FormLink>
<TmsSoftwareRepository/>
</div>
</div>
</FormSection>

<FormSection>
<div class="_gaps_m">
<FormSplit>
<MkKeyValue :copy="instance.maintainerName">
<template #key>{{ i18n.ts.administrator }}</template>
<template #value>
<template v-if="instance.maintainerName">{{ instance.maintainerName }}</template>
<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
</template>
</MkKeyValue>
<MkKeyValue :copy="instance.maintainerEmail">
<template #key>{{ i18n.ts.contact }}</template>
<template #value>
<template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template>
<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.inquiry }}</template>
<template #value>
<MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
<span v-else style="opacity: 0.7;">({{ i18n.ts._tms.notYetProvided }})</span>
</template>
</MkKeyValue>
</FormSplit>
<div class="_gaps_s">
<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>
<template #icon><i class="ti ti-user-shield"></i></template>
<template #default>{{ i18n.ts.impressum }}</template>
</FormLink>
<MkFolder v-if="instance.serverRules.length > 0">
<template #icon><i class="ti ti-checkup-list"></i></template>
<template #label>{{ i18n.ts.serverRules }}</template>
<ol class="_gaps_s" :class="$style.rules">
<li v-for="item in instance.serverRules" :key="item" :class="$style.rule">
<div :class="$style.ruleText" v-html="item"></div>
</li>
</ol>
</MkFolder>
<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>
<template #icon><i class="ti ti-license"></i></template>
<template #default>{{ i18n.ts.termsOfService }}</template>
</FormLink>
<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>
<template #icon><i class="ti ti-shield-lock"></i></template>
<template #default>{{ i18n.ts.privacyPolicy }}</template>
</FormLink>
<FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external>
<template #icon><i class="ti ti-message"></i></template>
<template #default>{{ i18n.ts.feedback }}</template>
</FormLink>
</div>
</div>
</FormSection>

<FormSuspense :p="initStats" v-slot="{ result: stats }">
<FormSection>
<template #label>{{ i18n.ts.statistics }}</template>
<FormSplit>
<MkKeyValue>
<template #key>{{ i18n.ts.users }}</template>
<template #value>{{ number(stats.originalUsersCount) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.notes }}</template>
<template #value>{{ number(stats.originalNotesCount) }}</template>
</MkKeyValue>
</FormSplit>
</FormSection>
</FormSuspense>

<FormSection>
<template #label>Well-known resources</template>
<div class="_gaps_s">
<FormLink to="/.well-known/host-meta" external>host-meta</FormLink>
<FormLink to="/.well-known/host-meta.json" external>host-meta.json</FormLink>
<FormLink to="/.well-known/nodeinfo" external>nodeinfo</FormLink>
<FormLink to="/robots.txt" external>robots.txt</FormLink>
<FormLink to="/manifest.json" external>manifest.json</FormLink>
</div>
</FormSection>
</div>
</template>

<script lang="ts" setup>
import { host } from '@/config.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import number from '@/filters/number.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import FormSplit from '@/components/form/split.vue';
import FormSuspense from '@/components/form/suspense.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkLink from '@/components/MkLink.vue';
import TmsServerBanner from '@/components/TmsServerBanner.vue';
import TmsSoftwareRepository from '@/components/TmsSoftwareRepository.vue';
import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';

const initStats = () => misskeyApi('stats', {});
</script>

<style lang="scss" module>
.rules {
counter-reset: item;
list-style: none;
padding: 0;
margin: 0;
}

.rule {
display: flex;
gap: 8px;
word-break: break-word;

&::before {
flex-shrink: 0;
display: flex;
position: sticky;
top: calc(var(--stickyTop, 0px) + 8px);
counter-increment: item;
content: counter(item);
width: 32px;
height: 32px;
line-height: 32px;
background-color: var(--accentedBg);
color: var(--accent);
font-size: 13px;
font-weight: bold;
align-items: center;
justify-content: center;
border-radius: 999px;
}
}

.ruleText {
padding-top: 6px;
}
</style>
Loading

0 comments on commit e72758d

Please sign in to comment.