This commit is contained in:
kakkokari-gtyih 2023-09-29 20:30:13 +09:00
parent 228c80830b
commit fbb23b9001
18 changed files with 74 additions and 31 deletions

View File

@ -100,10 +100,6 @@ useHead((): Record<string, any> => ({
<NuxtIsland name="commonNoScript">
<noscript class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">Please turn on Javascript from your browser's settings.</noscript>
</NuxtIsland>
<div class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">
このウェブサイトはMisskeyプロジェクト公式ではありません<br>
<GNuxtLink to="https://misskey-hub.net" target="_blank" class="hover:underline text-accent-200">公式のMisskey Hubはこちら<ExtIco class="ml-0.5" /></GNuxtLink>
</div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>

View File

@ -5,10 +5,10 @@ defineProps<{
</script>
<template>
<details class="group my-4">
<summary class="cursor-pointer outline-none p-2 border dark:border-slate-800 rounded-lg bg-white dark:bg-slate-700 shadow-md group-open:rounded-b-none group-open:bg-slate-200 dark:group-open:bg-slate-800 group-open:shadow-none group-open:border-b-0">
<summary class="cursor-pointer outline-none p-2 border dark:border-slate-700 rounded-lg bg-white dark:bg-slate-700 shadow-md group-open:rounded-b-none group-open:bg-slate-200 dark:group-open:bg-slate-800 group-open:shadow-none group-open:border-b-0">
{{summary}}
</summary>
<div class="rounded-b-lg border dark:border-slate-800 p-3 bg-white dark:bg-slate-900 space-y-2">
<div class="rounded-b-lg border dark:border-slate-700 p-3 bg-white dark:bg-slate-900 space-y-2">
<slot></slot>
</div>
</details>

View File

@ -1,5 +1,5 @@
<template>
<div class="rounded-lg border border-slate-200 dark:border-slate-800 p-6 mfm-root mb-4 relative overflow-hidden">
<div class="rounded-lg border border-slate-200 dark:border-slate-700 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>
<div class="ignore" :class="$style.mfmRoot">
<MkMfm :text="text" baseHost="misskey.io" />

View File

@ -1,5 +1,5 @@
<template>
<img :src="refinedSrc" :alt="alt" :width="width" :height="height" loading="lazy" />
<img class="rounded-lg" :src="refinedSrc" :alt="alt" :width="width" :height="height" loading="lazy" />
</template>
<script setup lang="ts">

View File

@ -13,7 +13,7 @@
>
<GNuxtLink
:to="link._path"
@click.passive="emit('child-click');"
@click.passive="isAsideNavOpen = false"
:class="[
'block hover:text-accent-600',
depth === 1 && 'text-base',
@ -49,6 +49,8 @@ import { findDeepObject } from '@/assets/js/misc';
import { isSamePath } from 'ufo';
import ArrowIco from "bi/chevron-right.svg";
const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false);
const props = withDefaults(defineProps<{
links: NavItem[];
depth?: number;

View File

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col lg:flex-row justify-between items-center">
<div class="order-2 mt-4 lg:mt-0 lg:order-1 w-full lg:w-2/5">
<GNuxtLink v-if="prev && prev._path.includes(currentDirectory)" :to="prev._path" class="rounded-lg transition-colors p-4 border dark:border-slate-800 hover:bg-slate-200 dark:hover:bg-slate-800 text-start flex justify-start items-center">
<GNuxtLink v-if="prev && prev._path.includes(currentDirectory)" :to="prev._path" class="rounded-lg transition-colors p-4 border dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-800 text-start flex justify-start items-center">
<div class="mr-3"><LeftIco /></div>
<div>
<div class="mb-1 text-sm">{{ $t('_docs._prevNext.prev') }}</div>
@ -10,7 +10,7 @@
</GNuxtLink>
</div>
<div class="order-1 lg:order-2 w-full lg:w-2/5">
<GNuxtLink v-if="next && next._path.includes(currentDirectory)" :to="next._path" class="rounded-lg transition-colors p-4 border dark:border-slate-800 hover:bg-slate-200 dark:hover:bg-slate-800 text-end flex justify-end items-center">
<GNuxtLink v-if="next && next._path.includes(currentDirectory)" :to="next._path" class="rounded-lg transition-colors p-4 border dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-800 text-end flex justify-end items-center">
<div>
<div class="mb-1 text-sm">{{ $t('_docs._prevNext.next') }}</div>
<div class="font-bold text-lg">{{ next.title }}</div>

View File

@ -1,6 +1,6 @@
<template>
<section>
<h2 class="text-2xl lg:text-3xl font-bold mb-4">
<h2 class="text-2xl lg:text-3xl font-title font-bold mb-4">
{{ $t(`_docs._${sectionId}.title`) }}
</h2>
<MkIndex :wide="true" :base-path="basePath" />

View File

@ -1,5 +1,5 @@
<template>
<div :class="['sticky top-0 z-[9900] transition', { 'shadow bg-opacity-90': (!disableShadow && scrollPos <= -40), 'bg-white dark:bg-gray-950': (disableShadow || scrollPos <= -40)}, (slim ? 'h-16 border-b border-slate-300' : 'h-16 lg:h-20')]">
<div :class="['sticky top-0 z-[9900] transition', { 'shadow bg-opacity-90': (!disableShadow && scrollPos <= -40), 'bg-white dark:bg-gray-950': (disableShadow || scrollPos <= -40)}, (slim ? 'h-16 border-b border-slate-300 dark:border-slate-800' : 'h-16 lg:h-20')]">
<nav class="container mx-auto max-w-screen-xl grid items-center grid-cols-2 lg:grid-cols-6 p-4 h-full transition-[height]">
<div class="">
<GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
@ -8,11 +8,11 @@
</GNuxtLink>
</div>
<ul
class="fixed z-[9902] top-16 right-0 text-right p-4 w-[80vw] sm:w-[50vw] bg-slate-300/90 dark:bg-slate-950/90 shadow-lg space-y-2 transition-[transform,border-radius] lg:transition-none lg:translate-x-0 lg:backdrop-blur-none lg:w-auto lg:rounded-none lg:shadow-none lg:space-y-0 lg:p-0 lg:relative lg:top-0 lg:right-auto lg:bg-transparent dark:lg:bg-transparent lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex lg:justify-center"
class="fixed z-[9902] top-16 right-0 text-right p-4 w-[80vw] sm:w-[50vw] bg-slate-100/90 dark:bg-slate-950/90 shadow-lg space-y-2 transition-[transform,border-radius] lg:transition-none lg:translate-x-0 lg:backdrop-blur-none lg:w-auto lg:rounded-none lg:shadow-none lg:space-y-0 lg:p-0 lg:relative lg:top-0 lg:right-auto lg:bg-transparent dark:lg:bg-transparent lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex lg:justify-center"
:class="[(scrollPos <= -40) ? 'rounded-bl-lg' : 'rounded-l-lg', navOpen ? 'translate-x-0' : 'translate-x-full']"
>
<li v-for="item in NavData.center">
<GNuxtLink :to="localePath(item.to)" @click.native="navOpen = !navOpen" :class="['block rounded-full px-4 py-2 lg:px-4 lg:py-1.5 hover:bg-slate-100 dark:hover:bg-slate-800 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800 font-bold': currentPath.includes(item.to) }]">
<GNuxtLink :to="localePath(item.to)" @click.native="navOpen = !navOpen" :class="['block rounded-full px-4 py-2 lg:px-4 lg:py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800', { 'bg-slate-300 dark:bg-slate-800 font-bold': currentPath.includes(item.to) }]">
<component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
<template v-else>
{{ $t(item.i18n) }}
@ -20,7 +20,7 @@
</GNuxtLink>
</li>
<li class="lg:hidden px-4 py-2 flex justify-end items-center space-x-4">
<button class="hover:opacity-80 relative before:absolute before:-z-10 before:-top-2 before:-left-2 before:w-9 before:h-9 before:rounded-full hover:before:bg-slate-100 dark:hover:before:bg-slate-600 h-5 w-5" @click="rotateColorMode()" aria-label="Change Color Mode">
<button class="hover:opacity-80 relative before:absolute before:-z-10 before:-top-2 before:-left-2 before:w-9 before:h-9 before:rounded-full hover:before:bg-slate-300 dark:hover:before:bg-slate-600 h-5 w-5" @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'" />

View File

@ -28,6 +28,7 @@ export default function(props: {
isNote?: boolean;
emojiUrls?: string[];
rootScale?: number;
/** 表示の基準にするMisskeyサーバーのドメイン */
baseHost?: string;
}) {
const isNote = props.isNote !== undefined ? props.isNote : true;

View File

@ -9,6 +9,10 @@ useHead({
</script>
<template>
<div class="">
<div class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">
このウェブサイトはMisskeyプロジェクト公式ではありません<br>
<GNuxtLink to="https://misskey-hub.net" target="_blank" class="hover:underline text-accent-200">公式のMisskey Hubはこちら<ExtIco class="ml-0.5" /></GNuxtLink>
</div>
<GNav @toggleNav="isNavOpen = !isNavOpen" :is-open="isNavOpen" />
<div class="main-content">
<slot></slot>

View File

@ -1,5 +1,6 @@
<script setup lang="ts">
const isNavOpen = ref<boolean>(false);
const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false);
useHead({
htmlAttrs: {
@ -16,12 +17,22 @@ const { data: navigation } = await useAsyncData('navigation', () => fetchContent
<GNav @toggleNav="isNavOpen = !isNavOpen" :is-open="isNavOpen" :slim="true" :disable-shadow="true" />
<div class="main-content">
<div class="relative container mx-auto max-w-screen-xl p-6 lg:py-0 grid docs-root pb-12">
<div class="hidden lg:block">
<div class="sticky top-16 h-[calc(100vh-4rem)] overflow-y-scroll border-r border-slate-200 dark:border-slate-700 py-6 pr-3">
<div
class="fixed top-[7.25rem] left-0 z-20 w-64 pl-6 transition-transform bg-slate-50 dark:bg-slate-900 lg:top-auto lg:bg-transparent dark:lg:bg-transparent lg:pl-0 lg:transform-none lg:relative"
:class="isAsideNavOpen ? 'translate-x-0' : '-translate-x-64'"
>
<div class="lg:sticky lg:top-16 h-[calc(100vh-7.25rem)] lg:h-[calc(100vh-4rem)] overflow-y-scroll border-r border-slate-200 dark:border-slate-700 py-6 pr-3">
<DocsAsideNav :links="navigation ?? []" />
</div>
</div>
<slot />
<div
:class="[
'relative after:fixed after:top-16 after:z-10 after:w-full after:h-full lg:after:hidden',
isAsideNavOpen ? 'after:bg-black/70' : 'after:invisible',
]"
>
<slot></slot>
</div>
</div>
</div>
<GFooter class="bg-slate-100 dark:bg-gray-900" />

View File

@ -10,6 +10,10 @@ useHead({
<template>
<div>
<div class="main-content">
<div class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">
このウェブサイトはMisskeyプロジェクト公式ではありません<br>
<GNuxtLink to="https://misskey-hub.net" target="_blank" class="hover:underline text-accent-200">公式のMisskey Hubはこちら<ExtIco class="ml-0.5" /></GNuxtLink>
</div>
<slot></slot>
</div>
</div>

View File

@ -160,6 +160,24 @@ _links:
_aiChan:
title: "AI-chan"
description: "Visit the website of AI-chan, the mascot of Misskey."
_tools:
title: "Tool Collection"
index: "Tool Collection Home"
description: "Discover handy tools for Misskey, crafted by the original developers!"
menuToggle: "Menu"
_forUsers:
title: "For Misskey Users"
_mfmPlayground:
title: "MFM Playground"
description: "Practice MFM freely!"
preview: "Preview"
disclaimer: "It may not render exactly as shown here. Syntax highlighting for code is not supported for performance reason."
mfm: "MFM"
character: "{0} characters"
domain: "Server to replicate the appearance (e.g. custom emojis)"
noteIt: "Note It"
clearEmojiCacheDescription: "When emojis are not displayed:"
clearEmojiCache: "Clear Emoji Cache"
_api:
_permissions:
title: "Permissions"

View File

@ -188,6 +188,7 @@ _mfmPlayground:
character: "{0} 文字"
domain: "表示を再現するサーバー"
noteIt: "ノート"
clearEmojiCacheDescription: "絵文字が表示されないとき"
clearEmojiCache: "絵文字のキャッシュを削除"
_api:

View File

@ -36,20 +36,20 @@
<GNuxtLink class="inline-block" to="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><img src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png" /></GNuxtLink>
</Tip>
<div id="logo">
<h2 class="text-2xl lg:text-3xl font-bold mb-4">{{ $t(`_brandAssets.logo`) }}</h2>
<h2 class="text-2xl lg:text-3xl font-title font-bold mb-4">{{ $t(`_brandAssets.logo`) }}</h2>
<BrandAssetsImgPreview src="https://raw.githubusercontent.com/misskey-dev/assets/main/misskey.svg" />
</div>
<div id="icon">
<h2 class="text-2xl lg:text-3xl font-bold mb-4">{{ $t(`_brandAssets.icon`) }}</h2>
<h2 class="text-2xl lg:text-3xl font-title font-bold mb-4">{{ $t(`_brandAssets.icon`) }}</h2>
<BrandAssetsImgPreview src="https://raw.githubusercontent.com/misskey-dev/assets/main/icon.png" />
</div>
<div id="banner">
<h2 class="text-2xl lg:text-3xl font-bold mb-4">{{ $t(`_brandAssets.banner`) }}</h2>
<h2 class="text-2xl lg:text-3xl font-title font-bold mb-4">{{ $t(`_brandAssets.banner`) }}</h2>
<a class="mb-4 block mx-auto" href="https://raw.githubusercontent.com/misskey-dev/assets/main/banner.png" target="_blank">
<img class="border border-slate-200 dark:border-slate-800" src="https://raw.githubusercontent.com/misskey-dev/assets/main/banner.png" />
<img class="border border-slate-200 dark:border-slate-700" src="https://raw.githubusercontent.com/misskey-dev/assets/main/banner.png" />
</a>
<a class="block mx-auto" href="https://raw.githubusercontent.com/misskey-dev/assets/main/banner-2.png" target="_blank">
<img class="border border-slate-200 dark:border-slate-800" src="https://raw.githubusercontent.com/misskey-dev/assets/main/banner-2.png" />
<img class="border border-slate-200 dark:border-slate-700" src="https://raw.githubusercontent.com/misskey-dev/assets/main/banner-2.png" />
</a>
</div>
</div>

View File

@ -1,14 +1,17 @@
<template>
<div class="grid docs-main">
<div v-if="data?.body" class="lg:hidden sticky top-16 -mx-6 -mt-6 overflow-y-auto bg-white bg-opacity-60 backdrop-blur-lg z-[9890] border-b text-sm">
<details :open="openState">
<summary class="py-4 px-6 cursor-pointer">
<div class="lg:hidden sticky top-16 -mx-6 -mt-6 overflow-y-auto bg-slate-50 dark:bg-slate-900 z-[9890] border-b dark:border-slate-700 text-sm flex items-start">
<details v-if="data?.body && data.body.toc.links.length > 0" class="peer order-2 flex-grow flex-shrink-0" :open="openState">
<summary class="py-4 cursor-pointer">
{{ $t('_docs._toc.title') }}
</summary>
<div class="pb-4 px-6 max-h-[65vh] overflow-y-auto">
<DocsTocLinks :links="data?.body.toc.links" @child-click="openState = false" />
</div>
</details>
<button @click="isAsideNavOpen = !isAsideNavOpen" class="p-4 order-1 dark:border-slate-800 border-r peer-open:border-b mr-2">
<AsideNavIco class="block w-5 h-5" />
</button>
</div>
<div class="pt-6 lg:p-6 w-full overflow-x-hidden">
<template v-if="data?.body">
@ -34,6 +37,9 @@
<script setup lang="ts">
import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
import AsideNavIco from 'bi/text-indent-left.svg';
const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false);
const { locale, locales } = useI18n();
const openState = ref<boolean>(false);

View File

@ -22,7 +22,7 @@
anchor: '#' + v.title.replaceAll('.', '_'),
}))" />
<section :id="section.title.replaceAll('.', '_')" v-for="section in sections">
<h2 class="text-2xl lg:text-3xl font-bold mb-4">
<h2 class="text-2xl lg:text-3xl font-title font-bold mb-4">
{{ $t(section.title) }}
</h2>
<GLinks :wide="true" :items="section.items.map((e) => ({

View File

@ -38,10 +38,10 @@
</div>
<div>
<div class="flex">
<div class="w-1/2 md:w-1/3 pr-2 col-form-label">
絵文字が表示されないとき
<div class="w-1/2 pr-2 col-form-label">
{{ $t('_mfmPlayground.clearEmojiCacheDescription') }}
</div>
<div class="w-1/2 md:w-2/3">
<div class="w-1/2">
<button @click="clearEmojiCache()" class="btn w-full btn-outline-primary hover:!text-white">{{ $t('_mfmPlayground.clearEmojiCache') }}</button>
</div>
</div>