Merge branch 'master' of https://github.com/kakkokari-gtyih/about-misskey

assets/css/tailwind.css

@@ -133,11 +133,19 @@ html.light .markdown-body {
 .markdown-body h4 > a[href^='#'],
 .markdown-body h5 > a[href^='#'],
 .markdown-body h6 > a[href^='#'] {
-	all: unset;
 	color: var(--color-fg-default);
 	cursor: pointer;
 }
 
+.markdown-body h1 > a[href^='#']:hover,
+.markdown-body h2 > a[href^='#']:hover,
+.markdown-body h3 > a[href^='#']:hover,
+.markdown-body h4 > a[href^='#']:hover,
+.markdown-body h5 > a[href^='#']:hover,
+.markdown-body h6 > a[href^='#']:hover {
+	text-decoration: none;
+}
+
 .markdown-body ul {
     list-style: disc;
 }

assets/data/nav.ts

@@ -9,7 +9,7 @@ type NavItem = {
     to: string;
 } | {
     /** アイコン（svgをインポートして貼り付け） */
-    icon: FunctionalComponent;
+    icon: FunctionalComponent | string;
     /** リンク先 */
     to: string;
 };
@@ -36,6 +36,10 @@ export default <{
         {
             i18n: '_nav.blog',
             to: '/blog/',
+        },
+        {
+            i18n: '_nav.other',
+            to: '/learn-more/',
         }
     ],
     right: [

assets/js/misc/index.ts

@@ -11,4 +11,31 @@ export function resolveObjPath(o: object, s: string): any {
         }
     }
     return o;
+}
+
+export function isLocalPath(link: string, base?: string): boolean {
+    let baseUrl;
+    if (base) {
+        baseUrl = base;
+    } else {
+        const runtimeConfig = useRuntimeConfig();
+        baseUrl = runtimeConfig.public.baseUrl;
+    }
+    const rootDomain = new URL(baseUrl);
+    try {
+        const url = new URL(link);
+        if (!url.hostname || rootDomain.hostname === url.hostname) {
+            return true;
+        } else if (rootDomain.hostname !== url.hostname) {
+            return false;
+        }
+        return false;
+    } catch(error) {
+        if(link !== '') {
+            return true;
+        } else {
+            throw error;
+        }
+    }
+    
 }

components/content/MfmPreview.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="rounded-lg border border-slate-200 dark:border-slate-800 p-6 mfm-root mb-4">
+    <div class="rounded-lg border border-slate-200 dark:border-slate-800 p-6 mfm-root mb-4 relative overflow-hidden">
+        <div class="absolute top-0 left-0 px-1 py-0.5 text-xs bg-slate-200 dark:bg-slate-800 rounded-br-lg z-20">{{ $t('_content.preview') }}</div>
         <MkMfm :text="text" />
     </div>
 </template>

components/content/MkIndex.vue

@@ -7,10 +7,10 @@
 				:key="item._path"
 				:to="localePath(item._path)"
 			>
-				<h3 class="font-bold text-lg mb-2">
+				<h3 class="font-bold !text-lg !mt-0 !mb-2">
 					{{ item.navTitle || item.title }}<ArrowRightIco class="ml-1.5" />
 				</h3>
-				<p class="text-sm opacity-80">
+				<p class="text-sm text-slate-500 dark:text-slate-400 !mb-0 truncate-box">
 					{{ item.description ?? "" }}
 				</p>
 			</GNuxtLink>
@@ -47,7 +47,6 @@ const findDeepObject = (obj: Record<string, any>, condition: (v: any) => boolean
 
 	if (obj?.children && obj.children.length > 0) {
 		for (let i = 0; i < obj.children.length; i++) {
-            console.log(obj.children[i]);
 			const result = findDeepObject(obj.children[i], condition);
 			if (result) {
 				return result;
@@ -61,4 +60,13 @@ const findDeepObject = (obj: Record<string, any>, condition: (v: any) => boolean
 const query = queryContent(realBasePath.value);
 </script>
 
-<style scoped></style>
+<style scoped>
+.truncate-box {
+	-webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+}
+</style>

components/content/ProseA.vue

@@ -14,7 +14,7 @@ const props = defineProps({
         type: String,
         default: undefined,
         required: false
-    }
+    },
 })
 
 let realHref = props.href;

components/content/ProseImg.vue

@@ -0,0 +1,34 @@
+<template>
+	<img :src="refinedSrc" :alt="alt" :width="width" :height="height" loading="lazy" />
+</template>
+
+<script setup lang="ts">
+import { withBase } from 'ufo'
+import { useRuntimeConfig, computed } from '#imports'
+
+const props = defineProps({
+	src: {
+		type: String,
+		default: ''
+	},
+	alt: {
+		type: String,
+		default: ''
+	},
+	width: {
+		type: [String, Number],
+		default: undefined
+	},
+	height: {
+		type: [String, Number],
+		default: undefined
+	}
+})
+
+const refinedSrc = computed(() => {
+	if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+		return withBase(props.src, useRuntimeConfig().app.baseURL)
+	}
+	return props.src
+})
+</script>

components/g/Footer.vue

@@ -39,7 +39,7 @@
                                 <GNuxtLink :to="localePath('/brand-assets/')" class="hover:underline">{{ $t('_brandAssets.title') }}</GNuxtLink>
                             </li>
                             <li>
-                                <GNuxtLink :to="localePath('/links/')" class="hover:underline">{{ $t('_links.title') }}</GNuxtLink>
+                                <GNuxtLink :to="localePath('/learn-more/')" class="hover:underline">{{ $t('_links.title') }}</GNuxtLink>
                             </li>
                         </ul>
                     </div>

components/g/Hero.vue

@@ -1,6 +1,6 @@
 <template>
     <header>
-        <div class="container mx-auto max-w-screen-xl px-6 min-h-[330px] py-4 space-y-6 lg:space-y-0 lg:flex items-center justify-between lg:space-x-6">
+        <div class="container mx-auto max-w-screen-xl px-6 lg:min-h-[330px] py-4 space-y-6 lg:space-y-0 lg:flex items-center justify-between lg:space-x-6">
             <div class="max-w-lg mx-auto lg:mx-0">
                 <h1 class="font-title font-bold text-center lg:text-start text-2xl lg:text-4xl mb-4"><slot name="title"></slot></h1>
                 <p class="opacity-90 lg:text-lg lg:leading-relaxed max-w-lg"><slot name="description"></slot></p>

components/g/LargeLinks.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="space-y-6 lg:space-y-8">
+        <GNuxtLink v-for="item in items" :to="item.to" :target="isLocalPath(item.to) ? undefined : '_blank'" class="rounded-xl border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
+            <div class="flex flex-col justify-center">
+                <h2 class="text-xl sm:text-2xl font-bold mb-2">{{ item.title }}<ArrowRightIco v-if="isLocalPath(item.to)" class="ml-2" /><ArrowUpRightIco v-else class="ml-2" /></h2>
+                <p class="text-slate-500 dark:text-slate-300">{{ item.description }}</p>
+            </div>
+            <div :class="['hidden sm:block ml-auto flex-shrink-0 relative h-48 w-auto', (item.cutBottom ? 'pt-4' : 'py-4'), (!item.cutLeft && 'pr-4')]">
+                <GDots class="absolute top-0 right-0 h-20 w-20 text-accent-600" />
+                <GDots class="absolute bottom-0 -left-2 h-14 w-20 text-accent-600" />
+                <img class="relative h-full" :src="item.img" />
+            </div>
+        </GNuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ArrowRightIco from 'bi/arrow-right.svg';
+import ArrowUpRightIco from 'bi/arrow-up-right.svg';
+import { isLocalPath } from 'assets/js/misc';
+
+defineProps<{
+    items: {
+        to: string;
+        title: string;
+        description?: string;
+        img: string;
+        cutBottom?: boolean;
+        cutLeft?: boolean;
+    }[];
+}>();
+</script>
+
+<style scoped>
+
+</style>

components/g/Nav.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['bg-slate-100 dark:bg-gray-900 bg-opacity-80 backdrop-blur-lg sticky top-0 z-[9900] transition-[box-shadow]', { 'shadow': (!disableShadow && scrollPos <= -40) }]">
+    <div :class="['sticky top-0 z-[9900] transition', { 'backdrop-blur-lg shadow bg-opacity-80': (!disableShadow && scrollPos <= -40), 'bg-slate-100 dark:bg-gray-900': (disableShadow || scrollPos <= -40) }]">
         <nav :class="['container mx-auto max-w-screen-xl grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4', (slim ? 'h-16' : 'h-16 lg:h-20')]">
             <div class="">
                 <GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
@@ -20,7 +20,7 @@
             <div>
                 <ul class="hidden lg:col-span-4 lg:space-x-4 lg:flex justify-center">
                     <li>
-                        <button class="hover:opacity-80" @click="rotateColorMode()" aria-label="Change Color Mode">
+                        <button :class="['hover:opacity-80 transition-colors', { 'text-white': (landing && scrollPos >= -40) }]" @click="rotateColorMode()" aria-label="Change Color Mode">
                             <ClientOnly>
                                 <SunIcon class="h-5 w-5" v-if="colorMode.preference === 'light'" />
                                 <MoonIcon class="h-5 w-5" v-else-if="colorMode.preference === 'dark'" />
@@ -28,7 +28,7 @@
                             </ClientOnly>
                         </button>
                     </li>
-                    <li class="relative group">
+                    <li :class="['relative group transition-colors', { 'text-white': (landing && scrollPos >= -40) }]">
                         <a class="hover:opacity-80" href="#"><I18nIcon class="h-5 w-5" /><span class="sr-only">{{ $t('_nav.switchLang') }}</span></a>
                         <div class="absolute top-6 right-0 hidden group-hover:block z-[9955]">
                             <ul class="px-4 py-2 bg-slate-50 dark:bg-slate-800 rounded-lg shadow-lg space-y-1">
@@ -41,7 +41,7 @@
                         </div>
                     </li>
                     <li class="border-l"></li>
-                    <li v-for="item in NavData.right">
+                    <li v-for="item in NavData.right" :class="['transition-colors', { 'text-white': (landing && scrollPos >= -40) }]">
                         <GNuxtLink :to="item.to" class="hover:opacity-80">
                             <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
                             <template v-else>
@@ -66,9 +66,11 @@ import NavData from '@/assets/data/nav';
 const props = withDefaults(defineProps<{
     disableShadow?: boolean;
     slim?: boolean;
+    landing?: boolean;
 }>(), {
     disableShadow: false,
     slim: false,
+    landing: false,
 });
 
 const { locales, locale: currentLocale } = useI18n();

components/index/Features.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="grid features gap-12">
         <div>
-            <div class="sticky top-12">
-                <h2 class="font-title font-bold text-2xl lg:text-4xl mb-6">{{ $t('_landing._features._root.title') }}</h2>
+            <div class="lg:sticky lg:top-32">
+                <h2 class="font-title font-bold text-2xl lg:text-4xl mb-2 lg:mb-6">{{ $t('_landing._features._root.title') }}</h2>
                 <p class="text-lg">{{ $t('_landing._features._root.description') }}</p>
             </div>
         </div>

components/index/Nav.vue

@@ -1,77 +0,0 @@
-<template>
-    <nav class="sticky top-0 z-[9900] md:relative container mx-auto max-w-screen-xl h-16 lg:h-20 grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4 bg-white bg-opacity-80 lg:bg-transparent">
-        <div class="">
-            <GNuxtLink to="/" class="flex items-center space-x-2 hover:opacity-80">
-                <MiIcon class="h-8 w-8" />
-                <div class="font-title font-bold text-lg">{{ $t('_seo.siteName') }}</div>
-            </GNuxtLink>
-        </div>
-        <ul class="hidden lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex justify-center">
-            <li v-for="item in NavData.center">
-                <GNuxtLink :to="localePath(item.to)" class="rounded-full px-4 py-1.5 hover:bg-slate-300 hover:bg-opacity-50 bg-blend-multiply">
-                    <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
-                    <template v-else>
-                        {{ $t(item.i18n) }}
-                    </template>
-                </GNuxtLink>
-            </li>
-        </ul>
-        <div>
-            <ul class="hidden lg:col-span-4 lg:space-x-4 lg:flex justify-center">
-                <li>
-                    <button class="text-white hover:opacity-80" @click="rotateColorMode()" aria-label="Change Color Mode">
-                        <ClientOnly>
-                            <SunIcon class="h-5 w-5" v-if="colorMode.preference === 'light'" />
-                            <MoonIcon class="h-5 w-5" v-else-if="colorMode.preference === 'dark'" />
-                            <DisplayIcon class="h-5 w-5" v-else />
-                        </ClientOnly>
-                    </button>
-                </li>
-                <li class="relative group">
-                    <a class="text-white hover:opacity-80" href="#"><I18nIcon class="h-5 w-5" /><span class="sr-only">{{ $t('_nav.switchLang') }}</span></a>
-                    <div class="absolute top-6 right-0 hidden group-hover:block z-[9955]">
-                        <ul class="px-4 py-2 bg-slate-50 dark:bg-slate-800 rounded-lg shadow-lg space-y-2">
-                            <li v-for="locale in locales">
-                                <GNuxtLink :to="switchLocalePath(locale.code)" :class="['hover:text-accent-600 py-1', {'text-accent-600 font-bold': currentLocale === locale.code}]">
-                                    {{ locale.name }}
-                                </GNuxtLink>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
-                <li class="border-l"></li>
-                <li v-for="item in NavData.right" class="text-white">
-                    <GNuxtLink :to="item.to" class="hover:opacity-80">
-                        <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
-                        <template v-else>
-                            {{ $t(item.i18n) }}
-                        </template>
-                    </GNuxtLink>
-                </li>
-            </ul>
-
-        </div>
-    </nav>
-</template>
-
-<script setup>
-import MiIcon from '@/assets/svg/misskey_mi_bi.svg';
-import I18nIcon from 'bi/translate.svg';
-import SunIcon from 'bi/sun.svg';
-import MoonIcon from 'bi/moon-stars.svg';
-import DisplayIcon from 'bi/display.svg';
-import NavData from '@/assets/data/nav';
-
-const { locales, locale: currentLocale } = useI18n();
-const switchLocalePath = useSwitchLocalePath();
-const localePath = useLocalePath();
-
-const colorMode = useColorMode();
-function rotateColorMode() {
-    const values = ['system', 'light', 'dark'];
-    const index = values.indexOf(colorMode.preference);
-    const next = (index + 1) % values.length;
-
-    colorMode.preference = values[next];
-}
-</script>

components/index/hero/Right.vue

@@ -38,7 +38,7 @@ import { vParallax } from '@/assets/js/parallax';
 }
 
 .screenshot.desktop {
-    width: 800px;
+    width: 750px;
     top: 128px;
     right: 300px;
 }

components/mk/Mfm.ts

@@ -9,8 +9,8 @@ const QUOTE_STYLE = `
 display: block;
 margin: 8px;
 padding: 6px 0 6px 12px;
-color: var(--fg);
-border-left: solid 3px var(--fg);
+color: currentColor;
+border-left: solid 3px currentColor;
 opacity: 0.7;
 `.split('\n').join(' ');
 
@@ -231,7 +231,7 @@ export default function(props: {
 			}
 
 			case 'link': {
-				return [h(NuxtLink, {
+				return [h(ProseAVue, {
 					key: Math.random(),
 					to: token.props.url,
 					rel: 'nofollow noopener',

content/ja/docs/2.for-users/1.index.md

@@ -1,3 +1,4 @@
 # Misskey ユーザー向け
+このセクションでは、Misskeyを初めて利用する方はもちろん、すでに利用されている方にも役立つ一般的な機能についてご紹介しています。
 
 <MkIndex />

content/ja/docs/2.for-users/2.features/1.index.md

@@ -1,3 +1,7 @@
-# 機能
+---
+description: "Misskeyの大きな特徴である、多彩な機能について解説しています。"
+---
+# さまざまな機能
+Misskeyの大きな特徴は、ほかのマイクロブログシステムには見られない多彩な機能にあります。ここでは、それらについて解説していきます。
 
 <MkIndex :sort="(a, b) => b.name - a.name"></MkIndex>

content/ja/docs/2.for-users/2.features/mfm.md

@@ -55,8 +55,16 @@ https://example.com
 [example link](https://example.com)
 ```
 
+:::tip
+リンクテキストの前に`?`をつけると、リンクプレビューを非表示にすることができます。
+```
+?[example link](https://example.com)
+```
+:::
+
 <MfmPreview text="[example link](https://example.com)"></MfmPreview>
 
+
 ### カスタム絵文字
 コロンでカスタム絵文字名を囲むと、カスタム絵文字を表示させることができます。
 :::tip

content/ja/docs/2.for-users/2.features/theme.md

@@ -87,9 +87,9 @@ props: {
 ```
 
 ##### 使用できる関数
-* `lighten` ... 渡された色の輝度(0~100)に対して引数(0~100)を加算した色を返します。
-* `darken` ... 渡された色の輝度(0~100)に対して引数(0~100)を減算した色を返します。
-* `alpha` ... 渡された色の透明度を引数(0.0~1.0)に設定した色を返します。
+* `lighten` ... 渡された色の輝度(0 ~ 100)に対して引数(0 ~ 100)を加算した色を返します。
+* `darken` ... 渡された色の輝度(0 ~ 100)に対して引数(0 ~ 100)を減算した色を返します。
+* `alpha` ... 渡された色の透明度を引数(0.0 ~ 1.0)に設定した色を返します。
 	* 0.0のとき完全に透明、1.0で完全に不透明になります。
-* `hue` ... 渡された色の色相(-360~360)に対して引数(-360~360)の値だけ回転させた色を返します。
-* `saturate` ... 渡された色の彩度(0~100)に対して引数(0~100)を加算した色を返します。
+* `hue` ... 渡された色の色相(-360 ~ 360)に対して引数(-360 ~ 360)の値だけ回転させた色を返します。
+* `saturate` ... 渡された色の彩度(0 ~ 100)に対して引数(0 ~ 100)を加算した色を返します。

locales/ja-JP.yml

@@ -9,6 +9,7 @@ _nav:
   servers: "サーバー"
   docs: "ドキュメント"
   blog: "ブログ"
+  other: "もっと！"
   switchLang: "言語の設定"
 _landing:
   _hero:
@@ -132,15 +133,29 @@ _content:
   tip: "ヒント"
   warning: "注意"
   danger: "警告"
+  preview: "プレビュー"
 _other:
-  title: "お楽しみ"
+  title: "もっと！"
+  description: "Misskeyをもっと楽しめるその他のリソースをご紹介しています。"
 _brandAssets:
   title: "アセット集"
-  description: "Misskeyのロゴ、アイコンなどのアセットのコレクションです。アセットは、CC BY-NC-SAのライセンスの下で自由にお使いいただけます🎉"
+  description: "Misskeyのロゴ、アイコンなどのアセットのコレクションです。一定のライセンスのもとでご自由にお使いいただけます。"
   license: "アセットは、CC BY-NC-SAのライセンスの下で自由にお使いいただけます🎉"
   assetsDirectory: "全てのアセットは、{0}で管理されています。"
   logo: "ロゴ"
   icon: "アイコン"
   banner: "バナー"
 _links:
-  title: "リンク"
+  title: "リンク"
+  _github:
+    title: "Github"
+    description: "Misskeyの開発はGithub上で行われています。機能リクエストやバグ報告などはこちらから行えます。"
+  _crowdin:
+    title: "Crowdin"
+    description: "Misskey本体、およびドキュメントの翻訳はこちらで管理されています。皆さんのご協力をお願いします。"
+  _discord:
+    title: "Discordサーバー"
+    description: "Misskeyに関する質問や会話などをお楽しみいただけます。"
+  _aiChan:
+    title: "藍"
+    description: "Misskeyの看板娘、藍のウェブサイトです。"

nuxt.config.ts

@@ -44,10 +44,10 @@ export default defineNuxtConfig({
 		},
 	},
 	content: {
-		//sources: Object.fromEntries(locales.map((e) => [e.code, { driver: 'fs', prefix: `/${e.code}`, base: resolve(__dirname, `content/${e.iso}`), }])),
 		navigation: {
 			fields: [
 				'date',
+				'description',
 			]
 		}
 	},
@@ -107,5 +107,6 @@ export default defineNuxtConfig({
 	},
 	experimental: {
 		inlineSSRStyles: false,
+		payloadExtraction: true,
 	},
 })

pages/blog/index.vue

@@ -9,7 +9,7 @@
                 <div class="hidden lg:block relative px-6 py-8">
                     <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
                     <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
-                    <div class="relative lg:w-72">
+                    <div class="relative lg:w-64">
                         <img class="drop-shadow-xl" src="/img/emojis/open_mailbox_with_raised_flag_3d.png" />
                     </div>
                 </div>
@@ -35,7 +35,3 @@
 const { data } = await useAsyncData('blog', () => queryContent('blog').sort({ date: -1 }).find());
 const localePath = useLocalePath();
 </script>
-
-<style scoped>
-
-</style>

pages/brand-assets.vue

@@ -9,7 +9,7 @@
                 <div class="hidden lg:block relative px-6 py-8">
                     <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
                     <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
-                    <div class="relative lg:w-72">
+                    <div class="relative lg:w-64">
                         <img class="drop-shadow-xl" src="/img/emojis/artist_palette_3d.png" />
                     </div>
                 </div>

pages/docs/index.vue

@@ -9,7 +9,7 @@
                 <div class="hidden lg:block relative px-6 py-8">
                     <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
                     <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
-                    <div class="relative lg:w-72 rotate-6">
+                    <div class="relative lg:w-64 rotate-6">
                         <img class="drop-shadow-xl" src="/img/emojis/green_book_3d.png" />
                     </div>
                 </div>
@@ -31,28 +31,21 @@
                         anchor: '#forDevelopers',
                     }
                 ]" />
-                <GNuxtLink :to="localePath(`/docs/about-misskey`)" class="rounded-xl border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
-                    <div class="flex flex-col justify-center">
-                        <h2 class="text-xl sm:text-2xl font-bold mb-2">{{ $t('_docs._aboutMisskey.title') }}<ArrowRightIco class="ml-2" /></h2>
-                        <p class="text-slate-500 dark:text-slate-300">{{ $t('_docs._aboutMisskey.description') }}</p>
-                    </div>
-                    <div class="hidden sm:block ml-auto flex-shrink-0 relative pt-4 pr-4 h-48 w-auto">
-                        <GDots class="absolute top-0 right-0 h-20 w-20 text-accent-600" />
-                        <GDots class="absolute bottom-0 -left-2 h-14 w-20 text-accent-600" />
-                        <img class="relative h-full" src="/img/docs/mi_ai_docs.png" />
-                    </div>
-                </GNuxtLink>
-                <GNuxtLink :to="localePath(`/docs/releases`)" class="rounded-xl border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
-                    <div class="flex flex-col justify-center">
-                        <h2 class="text-xl sm:text-2xl font-bold mb-2">{{ $t('_docs._changelog.title') }}<ArrowRightIco class="ml-2" /></h2>
-                        <p class="text-slate-500 dark:text-slate-300">{{ $t('_docs._changelog.description') }}</p>
-                    </div>
-                    <div class="hidden sm:block ml-auto flex-shrink-0 relative py-4 pr-4 h-48 w-auto">
-                        <GDots class="absolute top-0 right-0 h-20 w-20 text-accent-600" />
-                        <GDots class="absolute bottom-0 -left-2 h-14 w-20 text-accent-600" />
-                        <img class="relative h-full" src="/img/emojis/rocket_3d.png" />
-                    </div>
-                </GNuxtLink>
+                <GLargeLinks :items="[
+                    {
+                        to: localePath('/docs/about-misskey/'),
+                        title: $t('_docs._aboutMisskey.title'),
+                        description: $t('_docs._aboutMisskey.description'),
+                        img: '/img/docs/mi_ai_docs.png',
+                        cutBottom: true,
+                    },
+                    {
+                        to: localePath('/docs/releases'),
+                        title: $t('_docs._changelog.title'),
+                        description: $t('_docs._changelog.description'),
+                        img: '/img/emojis/rocket_3d.png',
+                    }
+                ]" />
                 <DocsReadersNav section-id="forUsers" id="forUsers" />
                 <!--<DocsReadersNav section-id="forAdmin" id="forAdmin" />
                 <DocsReadersNav section-id="forDevelopers" id="forDevelopers" />-->
@@ -63,6 +56,7 @@
 
 <script setup lang="ts">
 import ArrowRightIco from 'bi/arrow-right.svg';
+import { title } from 'process';
 
 const localePath = useLocalePath();
 </script>

pages/index.vue

@@ -2,7 +2,7 @@
     <div class="relative min-h-full">
         <IndexHeroBg />
         <IndexHeroParticles />
-        <IndexNav />
+        <GNav :landing="true" />
         <IndexHeroRight />
         <div class="relative container mx-auto p-6 md:p-8 max-w-screen-sm lg:max-w-screen-xl">
             <IndexHeroLeft />

pages/learn-more.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <GHero>
+            <template #title>{{ $t('_other.title') }}</template>
+            <template #description>
+                {{ $t('_other.description') }}
+            </template>
+            <template #icon>
+                <div class="hidden lg:block relative px-6 py-8">
+                    <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
+                    <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
+                    <div class="relative lg:w-64 h-64 flex items-center">
+                        <img class="drop-shadow-xl learnMoreHeroPudding" src="/img/emojis/custard_3d.png" />
+                    </div>
+                </div>
+            </template>
+        </GHero>
+        <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
+            <div class="container mx-auto max-w-screen-xl px-6 space-y-6 lg:space-y-8">
+                <GLargeLinks :items="[
+                    {
+                        to: localePath('/brand-assets/'),
+                        title: $t('_brandAssets.title'),
+                        description: $t('_brandAssets.description'),
+                        img: '/img/emojis/artist_palette_3d.png',
+                    },
+                    {
+                        to: 'https://github.com/misskey-dev',
+                        title: $t('_links._github.title'),
+                        description: $t('_links._github.description'),
+                        img: '/img/links/github.png',
+                    },
+                    {
+                        to: 'https://crowdin.com/project/misskey',
+                        title: $t('_links._crowdin.title'),
+                        description: $t('_links._crowdin.description'),
+                        img: '/img/links/crowdin.svg',
+                    },
+                    {
+                        to: 'https://discord.com/invite/Wp8gVStHW3',
+                        title: $t('_links._discord.title'),
+                        description: $t('_links._discord.description'),
+                        img: '/img/links/discord.png',
+                    },
+                    {
+                        to: 'https://藍.moe/',
+                        title: $t('_links._aiChan.title'),
+                        description: $t('_links._aiChan.description'),
+                        img: '/img/links/ai.png',
+                        cutBottom: true,
+                        cutLeft: true,
+                    },
+                ]" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const localePath = useLocalePath();
+</script>
+
+<style>
+.learnMoreHeroPudding:hover {
+animation: .75s linear 0s 1 normal both running mfm-rubberBand;
+}
+</style>

pages/servers.vue

@@ -12,7 +12,7 @@
                 <div class="relative px-6 py-8">
                     <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
                     <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
-                    <div class="relative bg-white dark:bg-slate-800 shadow-lg rounded-lg lg:w-72 p-6 space-y-4">
+                    <div class="relative bg-white dark:bg-slate-800 shadow-lg rounded-lg lg:w-64 p-6 space-y-4">
                         <dl>
                             <dt>{{ $t('_servers._statistics.notes') }}</dt>
                             <dd class="font-bold text-accent-600 text-2xl">{{ instancesStats?.notesCount?.toLocaleString() || $t('loading') }}</dd>
@@ -50,7 +50,6 @@ type InstancesStatsObj = {
 const instancesStats = ref<InstancesStatsObj>();
 
 function setServerStats(val: InstancesStatsObj) {
-    console.log(val);
     instancesStats.value = val;
 }
 

public/img/links/crowdin.svg

@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 1311 1311" xmlns="http://www.w3.org/2000/svg"><circle cx="655.5" cy="655.5" r="653.46" fill="#fff" fill-rule="evenodd" style="paint-order:stroke fill markers"/><g transform="matrix(.77322 0 0 .77322 148.59 268.89)" fill="#263238"><path d="m1141.9 341.44c-38.89-4.773-77.14-7.193-113.82-7.103-119.07 0.295-322.54 38.004-322.54 196.27l37.998 7.38c-0.508 6.859-0.508 13.748 0 20.606v35.929l-37.998-2.69c10.08 142.86 93.811 182.33 172.66 184.44 37.723 0 73.254-4.042 108.04-20.077 1.188-0.559 2.151-1.526 2.724-2.736s0.721-2.588 0.419-3.899c-0.303-1.31-1.037-2.471-2.077-3.285s-2.322-1.229-3.626-1.176c-72.71 10.567-147.11-48.46-147.11-173.68 0-158.51 126.12-219.42 306.87-219.42 4.1 0.528 4.61-9.51-1.54-10.567zm-396.04 281.01h60.477c4.945 42.515 21.985 91.957 52.412 121.08-28.364-3.599-54.688-17.083-74.614-38.221-19.926-21.137-35.573-53.498-38.275-82.854zm67.317-133.59c0 5.284-4.096 14.794-6.145 24.305h-24.065c-12.873-0.601-25.698-2.013-38.404-4.227 0.183-1.226 0.183-2.473 0-3.699 15.874-85.066 97.288-120.47 176.14-135.26-25.382 10.285-48.212 26.3-66.818 46.87-18.605 20.57-32.516 45.174-40.711 72.011z"/><path d="m1224.1 214.81c-159.47-46.29-830.99-102.41-830.99 285.34 22.606 3.312 38.306 8.393 50.398 10.049-1.61 29.523 0 61.872 0 91.837l-60.478-10.204c0 224.49 157.94 295.22 282.54 295.22 20.572-0.097 41.117-1.572 61.51-4.416 51.324-5.885 101.11-21.999 146.68-47.476 0.994-0.733 1.744-1.777 2.142-2.982 0.398-1.206 0.424-2.512 0.075-3.734-0.349-1.223-1.056-2.298-2.02-3.075-0.964-0.776-2.137-1.214-3.352-1.251-105.15 22.082-249.2-7.728-249.2-268.3 0-346.69 468.12-323.91 604.28-329.43 1.16-0.53 2.13-1.447 2.74-2.608 0.62-1.161 0.86-2.503 0.68-3.82-0.18-1.316-0.76-2.535-1.67-3.468-0.9-0.933-2.07-1.529-3.33-1.697zm-558.01 642.99c-60.472 4.03-120.08-16.734-166.26-57.921s-75.353-99.585-81.358-162.9c39.955 5.52 90.951 9.937 133.54 12.145 2.114 43.6 15.134 85.844 37.746 122.48 22.613 36.634 54.02 66.364 91.058 86.196zm-97.786-419.01c-3.154 12.145-7.886 33.675-12.092 52.445l-63.087-6.625-63.614-8.28c0-202.73 316.38-272.25 437.34-272.25-164.03 40.3-271.73 123.2-298.55 233.06z"/><path d="m1306.2 100.14c-194.31-68.872-414.75-102.72-620.75-99.984-297.81 0-675.33 91.837-685.41 408.16l80.637 20.408c-10.08 40.816-10.08 122.45-10.08 122.45s-45.974-14.094-70.557-20.408c0 374.15 211.42 469.23 414.88 469.23 82.171 0.253 163.7-14.545 240.6-43.678 1.213-0.556 2.197-1.519 2.782-2.725 0.586-1.205 0.737-2.577 0.428-3.882s-1.058-2.462-2.121-3.272c-1.063-0.811-2.372-1.225-3.704-1.172-63.289 0-113.5 21.05-213.93-52.623-195.1-141.56-171.04-509.92 52.305-670.42 230.14-169.45 727.56-116.82 812.82-111.56 0.68 0.139 1.39 0.139 2.08 3e-3 0.69-0.137 1.34-0.409 1.92-0.8 0.59-0.391 1.09-0.893 1.48-1.479 0.39-0.585 0.66-1.242 0.79-1.933 0.14-0.692 0.14-1.403 0.01-2.094-0.14-0.692-0.41-1.349-0.8-1.936-0.39-0.586-0.89-1.09-1.47-1.482s-1.23-0.665-1.92-0.803zm-889.19 868.28c-241.65 0-365.15-135.83-376.66-396.84 65.62 17.123 127.51 34.219 194.63 43.737-4.044 102.29 30.95 202.26 97.811 279.43 34.19 34.383 76.203 59.853 122.39 74.199zm547.63-908.81c-294.49 0-635.66 36.966-702.54 369.11 0 0-181.43-30.612-221.75-40.816 50.398-418.37 745.89-386.8 1028.1-328.29z"/></g></svg>