From 7ea64f5596113e03012fdda9daf23b2f0f64749a Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih Date: Tue, 11 Jul 2023 02:54:13 +0900 Subject: [PATCH] (add) blog --- app.vue | 24 ++-- assets/css/tailwind.css | 118 ++++++++++++++++++ components/content/Danger.vue | 15 +++ components/content/GDetails.vue | 21 ++++ components/content/Tip.vue | 15 +++ components/content/Warning.vue | 15 +++ components/docs/ReadersNav.vue | 24 ++++ components/g/LocalNav.vue | 59 +++++++++ content/blog/2021-12-01-inside-misskey-hub.md | 4 +- content/en-US/.docs-legacy/getting-started.md | 2 +- content/en-US/.docs-legacy/install/manual.md | 4 +- content/fr-FR/.docs-legacy/install/manual.md | 4 +- content/it-IT/.docs-legacy/getting-started.md | 2 +- content/ja-JP/.docs-legacy/getting-started.md | 2 +- content/ja-JP/.docs-legacy/install/manual.md | 2 +- content/ko-KR/.docs-legacy/getting-started.md | 2 +- content/pl-PL/.docs-legacy/install/manual.md | 4 +- i18n.config.ts | 20 +++ locales/README.md | 2 +- locales/ja-JP.yml | 11 +- nuxt.config.ts | 17 +++ pages/blog/[slug].vue | 16 ++- pages/blog/index.vue | 19 ++- pages/docs/[...slug].vue | 13 ++ pages/docs/index.vue | 35 +++++- public/img/docs/mi_ai_docs.png | Bin 0 -> 239307 bytes scripts/gen-sitemap.ts | 4 +- 27 files changed, 424 insertions(+), 30 deletions(-) create mode 100644 components/content/Danger.vue create mode 100644 components/content/GDetails.vue create mode 100644 components/content/Tip.vue create mode 100644 components/content/Warning.vue create mode 100644 components/docs/ReadersNav.vue create mode 100644 components/g/LocalNav.vue create mode 100644 pages/docs/[...slug].vue create mode 100644 public/img/docs/mi_ai_docs.png diff --git a/app.vue b/app.vue index 3193f277..ce673446 100644 --- a/app.vue +++ b/app.vue @@ -4,6 +4,7 @@ import type { Graph, Thing } from 'schema-dts'; const { t, locale } = useI18n(); const route = useRoute(); const colorMode = useColorMode(); +const baseUrl = useRuntimeConfig().public.baseUrl as string; const getDescription = (): string => { if (route.meta.description != null && route.meta.description != "") { @@ -19,9 +20,9 @@ const getLdJson = (additionalGraphes: Thing[] = []): string => { "@graph": [ { "@type": "Organization", - "@id": "https://misskey-hub.net/#Organization", + "@id": `${baseUrl}/#Organization`, "name": "Misskey", - "url": `https://misskey-hub.net/`, + "url": `${baseUrl}/`, "sameAs": [ "https://join.misskey.page/", "https://ja.wikipedia.org/wiki/Misskey", @@ -29,18 +30,18 @@ const getLdJson = (additionalGraphes: Thing[] = []): string => { "logo": { "@type": "ImageObject", // TODO - "url": "https://misskey-hub.net/img/logo.png" + "url": `${baseUrl}/img/logo.png` } }, { "@type": "WebSite", - "@id": "https://misskey-hub.net/#WebPage", + "@id": `${baseUrl}/#WebPage`, "name": t('_seo.siteName'), "inLanguage": locale.value, - "url": `https://misskey-hub.net${route.path}`, + "url": `${baseUrl}${route.path}`, "publisher": { "@type": "Organization", - "@id": "https://misskey-hub.net/#Organization" + "@id": `${baseUrl}/#Organization` }, "headline": getTitle(), "description": getDescription() @@ -51,6 +52,10 @@ const getLdJson = (additionalGraphes: Thing[] = []): string => { return JSON.stringify(ldJson); }; +const head = useLocaleHead({ + addSeoAttributes: true +}); + useHead((): Record => ({ htmlAttrs: { lang: locale.value, @@ -73,11 +78,12 @@ useHead((): Record => ({ { property: "og:image", // TODO - content: () => route.meta.thumbnail ? route.meta.thumbnail : "https://misskey-hub.net/img/logo.jpg", - } + content: () => route.meta.thumbnail ? route.meta.thumbnail : `${baseUrl}/img/logo.jpg`, + }, + ...(head.value.meta?.map((e) => ({ property: e.property, content: e.content, })) || []), ], link: [ - { rel: "canonical", href: "https://misskey-hub.net" + route.path }, + ...(head.value.link?.map((e) => ({ rel: e.rel, href: (e.href.endsWith('/') ? e.href : e.href + '/'), hreflang: e.hreflang, })) || []), ], script: [ { type: "application/ld+json", children: getLdJson(route.meta.graph) } diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 29ccace6..c7480251 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -26,3 +26,121 @@ body { @tailwind base; @tailwind components; @tailwind utilities; + + +/* Github Markdown Css Override */ +html.dark .markdown-body { + color-scheme: dark; + --color-prettylights-syntax-comment: #8b949e; + --color-prettylights-syntax-constant: #79c0ff; + --color-prettylights-syntax-entity: #d2a8ff; + --color-prettylights-syntax-storage-modifier-import: #c9d1d9; + --color-prettylights-syntax-entity-tag: #7ee787; + --color-prettylights-syntax-keyword: #ff7b72; + --color-prettylights-syntax-string: #a5d6ff; + --color-prettylights-syntax-variable: #ffa657; + --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; + --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; + --color-prettylights-syntax-invalid-illegal-bg: #8e1519; + --color-prettylights-syntax-carriage-return-text: #f0f6fc; + --color-prettylights-syntax-carriage-return-bg: #b62324; + --color-prettylights-syntax-string-regexp: #7ee787; + --color-prettylights-syntax-markup-list: #f2cc60; + --color-prettylights-syntax-markup-heading: #1f6feb; + --color-prettylights-syntax-markup-italic: #c9d1d9; + --color-prettylights-syntax-markup-bold: #c9d1d9; + --color-prettylights-syntax-markup-deleted-text: #ffdcd7; + --color-prettylights-syntax-markup-deleted-bg: #67060c; + --color-prettylights-syntax-markup-inserted-text: #aff5b4; + --color-prettylights-syntax-markup-inserted-bg: #033a16; + --color-prettylights-syntax-markup-changed-text: #ffdfb6; + --color-prettylights-syntax-markup-changed-bg: #5a1e02; + --color-prettylights-syntax-markup-ignored-text: #c9d1d9; + --color-prettylights-syntax-markup-ignored-bg: #1158c7; + --color-prettylights-syntax-meta-diff-range: #d2a8ff; + --color-prettylights-syntax-brackethighlighter-angle: #8b949e; + --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; + --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; + --color-fg-default: #c9d1d9; + --color-fg-muted: #8b949e; + --color-fg-subtle: #6e7681; + --color-canvas-default: #0d1117; + --color-canvas-subtle: #161b22; + --color-border-default: #30363d; + --color-border-muted: #21262d; + --color-neutral-muted: rgba(110, 118, 129, 0.4); + --color-accent-fg: #58a6ff; + --color-accent-emphasis: #1f6feb; + --color-attention-subtle: rgba(187, 128, 9, 0.15); + --color-danger-fg: #f85149; +} + + +html.light .markdown-body { + color-scheme: light; + --color-prettylights-syntax-comment: #6e7781; + --color-prettylights-syntax-constant: #0550ae; + --color-prettylights-syntax-entity: #8250df; + --color-prettylights-syntax-storage-modifier-import: #24292f; + --color-prettylights-syntax-entity-tag: #116329; + --color-prettylights-syntax-keyword: #cf222e; + --color-prettylights-syntax-string: #0a3069; + --color-prettylights-syntax-variable: #953800; + --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; + --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; + --color-prettylights-syntax-invalid-illegal-bg: #82071e; + --color-prettylights-syntax-carriage-return-text: #f6f8fa; + --color-prettylights-syntax-carriage-return-bg: #cf222e; + --color-prettylights-syntax-string-regexp: #116329; + --color-prettylights-syntax-markup-list: #3b2300; + --color-prettylights-syntax-markup-heading: #0550ae; + --color-prettylights-syntax-markup-italic: #24292f; + --color-prettylights-syntax-markup-bold: #24292f; + --color-prettylights-syntax-markup-deleted-text: #82071e; + --color-prettylights-syntax-markup-deleted-bg: #ffebe9; + --color-prettylights-syntax-markup-inserted-text: #116329; + --color-prettylights-syntax-markup-inserted-bg: #dafbe1; + --color-prettylights-syntax-markup-changed-text: #953800; + --color-prettylights-syntax-markup-changed-bg: #ffd8b5; + --color-prettylights-syntax-markup-ignored-text: #eaeef2; + --color-prettylights-syntax-markup-ignored-bg: #0550ae; + --color-prettylights-syntax-meta-diff-range: #8250df; + --color-prettylights-syntax-brackethighlighter-angle: #57606a; + --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; + --color-prettylights-syntax-constant-other-reference-link: #0a3069; + --color-fg-default: #24292f; + --color-fg-muted: #57606a; + --color-fg-subtle: #6e7781; + --color-canvas-default: #ffffff; + --color-canvas-subtle: #f6f8fa; + --color-border-default: #d0d7de; + --color-border-muted: hsla(210, 18%, 87%, 1); + --color-neutral-muted: rgba(175, 184, 193, 0.2); + --color-accent-fg: #0969da; + --color-accent-emphasis: #0969da; + --color-attention-subtle: #fff8c5; + --color-danger-fg: #cf222e; +} + +.markdown-body { + --color-canvas-default: transparent!important; + @apply font-content-sans; +} + +.markdown-body h1 > a[href^='#'], +.markdown-body h2 > a[href^='#'], +.markdown-body h3 > a[href^='#'], +.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 ul { + list-style: disc; +} +.markdown-body ol { + list-style: decimal; +} \ No newline at end of file diff --git a/components/content/Danger.vue b/components/content/Danger.vue new file mode 100644 index 00000000..fa2c85c1 --- /dev/null +++ b/components/content/Danger.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/components/content/GDetails.vue b/components/content/GDetails.vue new file mode 100644 index 00000000..437fed18 --- /dev/null +++ b/components/content/GDetails.vue @@ -0,0 +1,21 @@ + + + \ No newline at end of file diff --git a/components/content/Tip.vue b/components/content/Tip.vue new file mode 100644 index 00000000..f03c8f18 --- /dev/null +++ b/components/content/Tip.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/components/content/Warning.vue b/components/content/Warning.vue new file mode 100644 index 00000000..6c0e7f0d --- /dev/null +++ b/components/content/Warning.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/components/docs/ReadersNav.vue b/components/docs/ReadersNav.vue new file mode 100644 index 00000000..d0e5d880 --- /dev/null +++ b/components/docs/ReadersNav.vue @@ -0,0 +1,24 @@ + + + + + \ No newline at end of file diff --git a/components/g/LocalNav.vue b/components/g/LocalNav.vue new file mode 100644 index 00000000..27e01dee --- /dev/null +++ b/components/g/LocalNav.vue @@ -0,0 +1,59 @@ + + + \ No newline at end of file diff --git a/content/blog/2021-12-01-inside-misskey-hub.md b/content/blog/2021-12-01-inside-misskey-hub.md index 70520a25..e6d4decc 100644 --- a/content/blog/2021-12-01-inside-misskey-hub.md +++ b/content/blog/2021-12-01-inside-misskey-hub.md @@ -63,7 +63,7 @@ Misskey Hubは、Misskey Hub内のMisskey Hub説明ページにもあるよう 動的サイトを運営する際に発生するそのような諸々の心配から解放されるというのは非常に大きなメリットです。つまり、金銭面においても精神面においても、**ゼロコスト**でMisskey Hubを運用できます。 -:::details さらに技術的な話(危険) +:::g-details{summary="さらに技術的な話(危険)"} ここまで言っておいてなんですが、先ほど言った > もちろんMisskeyは動的サイトということになります。 @@ -239,7 +239,7 @@ SSGはMisskey Hubのようなドキュメントサイトだけでなく、ブロ 静的サイトはいいぞ。vuepressはいいぞ。Misskey Hubに幸あれ🙏 -:::details Webで記事を公開する際に必ず記述しなければならないと法令で定められている言葉 +:::g-details{summary="Webで記事を公開する際に必ず記述しなければならないと法令で定められている言葉"} > いかがでしたか？ ::: diff --git a/content/en-US/.docs-legacy/getting-started.md b/content/en-US/.docs-legacy/getting-started.md index 0b5eedb8..6467fbea 100644 --- a/content/en-US/.docs-legacy/getting-started.md +++ b/content/en-US/.docs-legacy/getting-started.md @@ -8,7 +8,7 @@ You can select an instance of your choice from the [instance list](../instances. :::tip No matter which instance you choose, you will be able to interact with users on other instances. -:::details +:::g-details Misskey has the ability to federate. Misskey has built-in federation support, which allows users in different instances to follow, react, and renote in the same way as users on the same instance. diff --git a/content/en-US/.docs-legacy/install/manual.md b/content/en-US/.docs-legacy/install/manual.md index 44176e0b..8773087e 100644 --- a/content/en-US/.docs-legacy/install/manual.md +++ b/content/en-US/.docs-legacy/install/manual.md @@ -114,7 +114,7 @@ Just `NODE_ENV=production pnpm run start`. GLHF! 2. Edit it, and paste this and save: - :::details + :::g-details ``` [Unit] Description=Misskey daemon @@ -150,7 +150,7 @@ You can check if the service is running with `systemctl status misskey`. 1. Copy the following text to `/etc/init.d/misskey`: - :::details + :::g-details ```sh #!/sbin/openrc-run diff --git a/content/fr-FR/.docs-legacy/install/manual.md b/content/fr-FR/.docs-legacy/install/manual.md index 986f9a7f..b54bdac1 100644 --- a/content/fr-FR/.docs-legacy/install/manual.md +++ b/content/fr-FR/.docs-legacy/install/manual.md @@ -113,7 +113,7 @@ Just `NODE_ENV=production pnpm run start`. GLHF! 2. Edit it, and paste this and save: - :::details + :::g-details ``` [Unit] Description=Misskey daemon @@ -149,7 +149,7 @@ You can check if the service is running with `systemctl status misskey`. 1. Copy the following text to `/etc/init.d/misskey`: - :::details + :::g-details ```sh #!/sbin/openrc-run diff --git a/content/it-IT/.docs-legacy/getting-started.md b/content/it-IT/.docs-legacy/getting-started.md index 12f962eb..8ef859ee 100644 --- a/content/it-IT/.docs-legacy/getting-started.md +++ b/content/it-IT/.docs-legacy/getting-started.md @@ -7,7 +7,7 @@ Per entrare subito nel Fediverso, crea il tuo profilo su una delle [Istanze Miss :::tip Qualsiasi Istanza tu scelga, potrai interagire con i profili delle persone registrate su altre istanze. -:::details +:::g-details Misskey ha la capacità di federarsi e scambiare informazioni tramite protocollo ActivityPub. In questo modo puoi comunicare con istanze di tipo Mastodon, Pixelfed, PeerTube, Soapbox o Pleroma. diff --git a/content/ja-JP/.docs-legacy/getting-started.md b/content/ja-JP/.docs-legacy/getting-started.md index 078da7fe..9cc6c127 100644 --- a/content/ja-JP/.docs-legacy/getting-started.md +++ b/content/ja-JP/.docs-legacy/getting-started.md @@ -8,7 +8,7 @@ Misskeyを利用するには、どこかのサーバーにアカウントを作 :::tip どのサーバーを選んでも、他のサーバーのユーザーとやり取りすることができます。 -:::details +:::g-details Misskeyには連合機能が備わっています。 連合機能によって、別のサーバーのユーザーであっても、同じサーバーのユーザーと同じようにフォローやリアクション、Renoteなどができるようになっています。 diff --git a/content/ja-JP/.docs-legacy/install/manual.md b/content/ja-JP/.docs-legacy/install/manual.md index f1cfffee..f320d8eb 100644 --- a/content/ja-JP/.docs-legacy/install/manual.md +++ b/content/ja-JP/.docs-legacy/install/manual.md @@ -76,7 +76,7 @@ NODE_ENV=production pnpm run start GLHF✨ -::::details systemdを用いた管理 +::::g-details{summary="systemdを用いた管理"} systemdサービスのファイルを作成 diff --git a/content/ko-KR/.docs-legacy/getting-started.md b/content/ko-KR/.docs-legacy/getting-started.md index 0cab2cec..945655bb 100644 --- a/content/ko-KR/.docs-legacy/getting-started.md +++ b/content/ko-KR/.docs-legacy/getting-started.md @@ -8,7 +8,7 @@ Misskey는 프로그램, 그리고 이를 관리하는 프로젝트의 이름입 :::tip 어떤 인스턴스를 선택하더라도, 다른 인스턴스의 유저와 상호작용할 수 있습니다. -:::details +:::g-details Misskey는 '연합' 기능을 갖추고 있습니다. 연합 기능을 통해, 다른 인스턴스에 있는 유저라도 같은 인스턴스의 유저와 동일하게 팔로우 및 리액션, Renote 등을 할 수 있습니다. diff --git a/content/pl-PL/.docs-legacy/install/manual.md b/content/pl-PL/.docs-legacy/install/manual.md index 5b1b10ee..10567e77 100644 --- a/content/pl-PL/.docs-legacy/install/manual.md +++ b/content/pl-PL/.docs-legacy/install/manual.md @@ -124,7 +124,7 @@ Wystarczy `NODE_ENV=production pnpm run start` i GLHF! 2. Edytuj plik i wklej następujący kod: - :::details + :::g-details ``` [Unit] @@ -166,7 +166,7 @@ Możesz sprawdzić działanie usługi wpisując 1. Skopiuj poniższy tekst do `/etc/init.d/misskey`: - :::details + :::g-details ```sh #!/sbin/openrc-run diff --git a/i18n.config.ts b/i18n.config.ts index 7957cfa5..5a7a6d05 100644 --- a/i18n.config.ts +++ b/i18n.config.ts @@ -7,5 +7,25 @@ export default defineI18nConfig(() => ({ messages: { ja, en, + }, + datetimeFormats: { + 'en-US': { + short: { + year: 'numeric', month: 'short', day: 'numeric' + }, + long: { + year: 'numeric', month: 'short', day: 'numeric', + weekday: 'short', hour: 'numeric', minute: 'numeric' + } + }, + 'ja-JP': { + short: { + year: 'numeric', month: 'short', day: 'numeric' + }, + long: { + year: 'numeric', month: 'short', day: 'numeric', + weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true + } + } } })); \ No newline at end of file diff --git a/locales/README.md b/locales/README.md index 029825b0..2c2934b8 100644 --- a/locales/README.md +++ b/locales/README.md @@ -1,4 +1,4 @@ # **DO NOT edit locale files** except `ja-JP.yml`. -When you add text to the ja-JP file (of misskey-dev/misskey), it will automatically be applied to other language files. +When you add text to the ja-JP file (of misskey-dev/misskey-hub), it will automatically be applied to other language files. Translations added in ja-JP file should contain the original Japanese strings. diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 34ed2122..95915a9e 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -105,6 +105,15 @@ _servers: _docs: title: "ドキュメント" description: "Misskeyの上手なつかいかたから、サーバーの運営者・プログラムの開発者向けの情報まで網羅しています。" + _aboutMisskey: + title: "Misskeyについて" + description: "Misskeyをはじめて知ったかたや、これから使うかた向け！基本的なしくみや機能を見ていきましょう。" + _forUsers: + title: "Misskeyユーザー向け" + _forAdmin: + title: "サーバー運営者向け" + _forDevelopers: + title: "開発者向け" _blog: title: "ブログ" - description: "Misskey開発本部から、Misskeyに関する最新情報やTips等をお届けします！" \ No newline at end of file + description: "Misskey開発本部から、Misskeyに関する最新情報やTips等をお届けします！（日本語のみ）" \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index 927a422f..5ee15f13 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -3,8 +3,17 @@ import ViteYaml from '@modyfi/vite-plugin-yaml'; import svgLoader from 'vite-svg-loader'; import genSitemap from './scripts/gen-sitemap'; +// 公開時のドメイン（末尾スラッシュなし） +const baseUrl = 'https://misskey-hub.net'; + export default defineNuxtConfig({ + runtimeConfig: { + public: { + baseUrl, + } + }, css: [ + "github-markdown-css/github-markdown.css", "@/assets/css/tailwind.css", "@/assets/css/bootstrap-forms.scss", ], @@ -23,7 +32,15 @@ export default defineNuxtConfig({ ], }, }, + content: { + navigation: { + fields: [ + 'date', + ] + } + }, i18n: { + baseUrl, vueI18n: './i18n.config.ts', locales: [ { code: 'ja', iso: 'ja-JP', name: '日本語' }, diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue index ed0bea15..68a2fcfb 100644 --- a/pages/blog/[slug].vue +++ b/pages/blog/[slug].vue @@ -1,7 +1,16 @@ \ No newline at end of file diff --git a/pages/docs/index.vue b/pages/docs/index.vue index 2e4dd599..86816e19 100644 --- a/pages/docs/index.vue +++ b/pages/docs/index.vue @@ -15,12 +15,45 @@ - +
+
+ + +
+

{{ $t('_docs._aboutMisskey.title') }}

+

{{ $t('_docs._aboutMisskey.description') }}

+
+ + + + + +
+