Add docs #61

README.md

@@ -38,7 +38,7 @@ Yaku Han JP（ヤクハンジェイピー）は、日本語テキストに含ま
 - Yaku Han JP : SIL OFL 1.1 AND MIT
 - Gothic fonts : Based on [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP) licensed under the SIL OFL 1.1
 - Mincho fonts : Based on [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP) licensed under the SIL OFL 1.1
-- Round Gothic fonts : Based on [M PLUS Rounded 1c](https://fonts.google.com/specimen/M+PLUS+Rounded+1c) licensed under the M+ FONTS LICENSE
+- Round Gothic fonts : Based on [M PLUS Rounded 1c](https://fonts.google.com/specimen/M+PLUS+Rounded+1c) licensed under the SIL OFL 1.1
 
 ## Credit
 

docs/minista.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "minista"
+
+export default defineConfig({
+  assets: {
+    partial: {
+      usePreact: true,
+    },
+  },
+})

docs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "docs",
+  "private": true,
+  "dependencies": {
+    "preact": "^10.17.1"
+  }
+}

docs/src/assets/data/site.json

@@ -0,0 +1,18 @@
+{
+  "title": "Yaku Han JP",
+  "subTitle": "約物半角専用のフォント",
+  "description": "Yaku Han JP（ヤクハンジェイピー）は、日本語テキストに含まれる約物を半角にするフォントです。",
+  "shortDescription": "約物半角専用のフォント",
+  "url": "https://yakuhanjp.qranoko.jp",
+  "twitter": {
+    "id": "Qrac_JP"
+  },
+  "github": {
+    "url": "https://github.com/qrac/yakuhanjp"
+  },
+  "copyright": {
+    "name": "QRANOKO",
+    "url": "https://qranoko.jp",
+    "startYear": 2016
+  }
+}

docs/src/assets/entries/css/base.css

@@ -0,0 +1,100 @@
+html {
+  font-family: var(--theme-font-sans);
+  word-break: break-word;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  background: linear-gradient(
+    90deg,
+    var(--theme-bg-3) 50%,
+    var(--theme-bg-2) 50%
+  );
+  color: var(--theme-tx-2);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+a {
+  color: var(--theme-lk-1);
+  text-decoration: underline;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+table {
+  display: block;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+table th,
+table td {
+  padding: 0.75rem 1rem;
+  background: var(--theme-bg-1);
+  border: 2px solid var(--theme-tx-3);
+  vertical-align: top;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+:not(pre) > code {
+  padding: 0.2rem 0.5rem;
+  background-color: var(--theme-code-bg);
+  border-radius: 3px;
+  color: var(--theme-code-tx);
+  font-size: 0.875em;
+  font-family: var(--theme-font-mono);
+  word-break: keep-all;
+}
+
+pre {
+  background: var(--theme-code-bg);
+  padding: 1.25rem 1.5rem;
+  color: var(--theme-code-tx);
+  font-size: 1rem;
+  font-family: var(--theme-font-mono);
+  word-break: normal;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.token.comment {
+  color: var(--theme-token-comment);
+}
+
+.token.tag {
+  color: var(--theme-token-tag);
+}
+
+.token.attr-name {
+  color: var(--theme-token-attr-name);
+}
+
+.token.attr-value {
+  color: var(--theme-token-attr-value);
+}
+
+.token.keyword {
+  color: var(--theme-token-keyword);
+}

docs/src/assets/entries/css/color.css

@@ -0,0 +1,48 @@
+:root {
+  --theme-tx-1: #333333;
+  --theme-tx-2: #4b4b4b;
+  --theme-tx-3: #7b7b7b;
+  --theme-bg-1: #fcfcfc;
+  --theme-bg-2: #f2f2f2;
+  --theme-bg-3: #e6e6e6;
+  --theme-bg-4: #d9d9d9;
+  --theme-lk-1: #966c01;
+  --theme-lk-2: #e0c06d;
+  --theme-lk-tx: #333333;
+  --theme-ac-1: #cfcfcf;
+  --theme-code-bg: #2e3440;
+  --theme-code-tx: #d8dee9;
+  --theme-token-comment: #616e88;
+  --theme-token-tag: #81a1c1;
+  --theme-token-attr-name: #8fbcbb;
+  --theme-token-attr-value: #a3be8c;
+  --theme-token-keyword: #78a2c4;
+  --theme-reverse-tx-1: #e8e8e8;
+  --theme-reverse-tx-3: #515151;
+  --theme-reverse-bg-1: #242424;
+  --theme-reverse-bg-2: #1c1c1c;
+  --theme-reverse-bg-3: #141414;
+}
+
+/*@media (prefers-color-scheme: dark) {
+  :root {
+    --theme-tx-1: #e8e8e8;
+    --theme-tx-2: #aaaaaa;
+    --theme-tx-3: #515151;
+    --theme-bg-1: #242424;
+    --theme-bg-2: #1c1c1c;
+    --theme-bg-3: #141414;
+    --theme-bg-4: #0d0d0d;
+    --theme-lk-1: #d19600;
+    --theme-lk-2: #d19600;
+    --theme-lk-tx: #141414;
+    --theme-ac-1: #2f2f2f;
+    --theme-code-bg: #181b21;
+    --theme-code-tx: #aaaaaa;
+    --theme-reverse-tx-1: #333333;
+    --theme-reverse-tx-3: #7b7b7b;
+    --theme-reverse-bg-1: #fcfcfc;
+    --theme-reverse-bg-2: #f2f2f2;
+    --theme-reverse-bg-3: #e6e6e6;
+  }
+}*/

docs/src/assets/entries/css/reset.css

@@ -0,0 +1,8 @@
+*,
+::before,
+::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+}

docs/src/assets/entries/css/variable.css

@@ -0,0 +1,20 @@
+:root {
+  --theme-font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
+    "Noto Sans Japanese", Meiryo, "Yu Gothic Medium", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --theme-font-sans-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --theme-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, monospace, serif;
+  --theme-font-yakuhanjp: YakuHanJP, "Hiragino Sans",
+    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
+  --theme-font-yakuhanjps: YakuHanJPs, "Hiragino Sans",
+    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
+  --theme-font-yakuhanmp: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP",
+    "Yu Mincho", YuMincho, serif;
+  --theme-font-yakuhanmps: YakuHanMPs, "Hiragino Mincho ProN", "Noto Serif JP",
+    "Yu Mincho", YuMincho, serif;
+  --theme-font-yakuhanrp: YakuHanRP, "M PLUS Rounded 1c", sans-serif;
+  --theme-font-yakuhanrps: YakuHanRPs, "M PLUS Rounded 1c", sans-serif;
+  --theme-site-width: 852px;
+}

docs/src/assets/entries/style.css

@@ -0,0 +1,18 @@
+@import "yakuhanjp/dist/css/yakuhanjp.css";
+@import "yakuhanjp/dist/css/yakuhanjp_s.css";
+@import "yakuhanjp/dist/css/yakuhanmp.css";
+@import "yakuhanjp/dist/css/yakuhanmp_s.css";
+@import "yakuhanjp/dist/css/yakuhanrp.css";
+@import "yakuhanjp/dist/css/yakuhanrp_s.css";
+
+@import "./css/variable.css";
+@import "./css/color.css";
+@import "./css/reset.css";
+@import "./css/base.css";
+@import "../../components/AppFooter/index.css";
+@import "../../components/SectionHero/index.css";
+@import "../../components/SectionBasic/index.css";
+@import "../../components/BlockFontsGrid/index.css";
+@import "../../components/BlockCard/index.css";
+@import "../../components/BlockMarkdown/index.css";
+@import "../../components/BlockSimulator/index.css";

docs/src/assets/markdown/cdn.mdx

@@ -0,0 +1,5 @@
+### [CDN](https://cdn.jsdelivr.net/npm/yakuhanjp/)
+
+1. [シミュレーター](#simulator)で使用するフォントの種類を選択
+2. 表示された `<link>` タグをサイトの `<head>` タグ内に配置
+3. CSS を記述：`font-family` の日本語フォントより前に `YakuHanJP` などを優先指定

docs/src/assets/markdown/license.mdx

@@ -0,0 +1,6 @@
+- Yaku Han JP : SIL OFL 1.1 AND MIT
+- Gothic fonts : Based on [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP) licensed under the SIL OFL 1.1
+- Mincho fonts : Based on [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP) licensed under the SIL OFL 1.1
+- Round Gothic fonts : Based on [M PLUS Rounded 1c](https://fonts.google.com/specimen/M+PLUS+Rounded+1c) licensed under the SIL OFL 1.1
+- Author : [Qrac](https://qrac.jp/)
+- Organization : [QRANOKO](https://qranoko.jp/)

docs/src/assets/markdown/npm.mdx

@@ -0,0 +1,18 @@
+### [npm](https://www.npmjs.com/package/yakuhanjp)
+
+1. npm でパッケージをインストール
+
+```sh
+$ npm install yakuhanjp
+```
+
+2. 使用する CSS ファイルへのパスを記述
+
+```
+YakuHanJP:  import "yakuhanjp"
+YakuHanJPs: import "yakuhanjp/dist/css/yakuhanjp_s.css"
+YakuHanMP:  import "yakuhanjp/dist/css/yakuhanmp.css"
+YakuHanMPs: import "yakuhanjp/dist/css/yakuhanmp_s.css"
+YakuHanRP:  import "yakuhanjp/dist/css/yakuhanrp.css"
+YakuHanRPs: import "yakuhanjp/dist/css/yakuhanrp_s.css"
+```

docs/src/assets/markdown/other.mdx

@@ -0,0 +1,8 @@
+### OGP・GAME
+
+CSS のようなフォールバック機能が使えない OG 画像生成やゲーム開発には、YakuHanJP を元の Google フォントに組み込んだマージフォントを使用してください。
+
+1. リポジトリの[マージディレクトリ](https://github.com/qrac/yakuhanjp/tree/main/packages/merged)から必要なフォントをダウンロード
+2. 使用環境に配置してパスを設定
+
+例: `satori` と `@resvg/resvg-js` を使用した OG 画像生成の実装例は [Playground](https://github.com/qrac/yakuhanjp/blob/main/playground/ogp/src/ogp.ts) にあります

docs/src/components/AppFooter/index.css

@@ -0,0 +1,8 @@
+.app-footer {
+  padding: 7.5vh 20px;
+}
+
+.app-footer-copyright {
+  font-family: var(--theme-font-sans-en);
+  text-align: center;
+}

docs/src/components/AppFooter/index.tsx

@@ -0,0 +1,24 @@
+import site from "../../assets/data/site.json"
+
+export default function () {
+  const copyright = site.copyright
+  const startYear = copyright.startYear
+  const nowYear = new Date().getFullYear()
+  const rangeYear =
+    startYear === nowYear
+      ? String(nowYear)
+      : `${String(startYear)} - ${String(nowYear)}`
+  return (
+    <footer className="app-footer">
+      <p className="app-footer-copyright">
+        {"©️ "}
+        {copyright.url ? (
+          <a href={copyright.url}>{copyright.name}</a>
+        ) : (
+          <span>{copyright.name}</span>
+        )}
+        {` ${rangeYear}`}
+      </p>
+    </footer>
+  )
+}

docs/src/components/AppLayout/index.tsx

@@ -0,0 +1,11 @@
+import AppMain from "../AppMain"
+import AppFooter from "../AppFooter"
+
+export default function ({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="app-layout">
+      <AppMain>{children}</AppMain>
+      <AppFooter />
+    </div>
+  )
+}

docs/src/components/AppMain/index.tsx

@@ -0,0 +1,3 @@
+export default function ({ children }: { children: React.ReactNode }) {
+  return <div className="app-main">{children}</div>
+}

docs/src/components/BlockCard/index.css

@@ -0,0 +1,44 @@
+.block-card {
+  position: relative;
+  margin: 0 auto;
+  padding: min(5vw, 32px);
+  background: var(--theme-bg-1);
+  overflow: hidden;
+}
+
+.block-card + .block-card {
+  margin-top: 1rem;
+}
+
+.block-card > *:not(:first-child) {
+  margin-top: 1rem;
+}
+
+.block-card .block-markdown {
+  z-index: 2;
+}
+
+.block-card .block-card-end-cover {
+  margin: 0;
+}
+
+.block-card .svg-yakuhan-kun {
+  position: absolute;
+  top: 45%;
+  right: 5%;
+  width: 28%;
+  height: 82%;
+  margin: 0;
+  transform: rotate(20deg) translateY(-50%);
+  z-index: 1;
+}
+
+.block-card .svg-yakuhan-kun path {
+  fill: var(--theme-ac-1);
+}
+
+@media (max-width: 800px) {
+  .block-card .svg-yakuhan-kun {
+    display: none;
+  }
+}