diff --git a/README.md b/README.md index 76d6793..b4246e8 100644 --- a/README.md +++ b/README.md @@ -83,10 +83,13 @@ npm run lint - [Next.js](https://nextjs.org/docs) - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。 +- [OpenNext](https://opennext.js.org/cloudflare) - [DaisyUI](https://daisyui.com/docs/use/) / [Tailwind CSS](https://tailwindcss.com/docs) - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける) - よくわからなかったらstyle直接指定でも良い +- [SWR](https://swr.vercel.app/ja) - [react-markdown](https://www.npmjs.com/package/react-markdown) - - オプションがいろいろあり、今はほぼデフォルト設定で突っ込んでいるがあとでなんとかする -- [OpenNext](https://opennext.js.org/cloudflare) +- REPL・実行結果表示: [xterm.js](https://xtermjs.org/) +- コードエディター: [react-ace](https://github.com/securingsincity/react-ace) +- それ以外のコードブロック: [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) diff --git a/app/[docs_id]/markdown.tsx b/app/[docs_id]/markdown.tsx index cacf58f..8c6c252 100644 --- a/app/[docs_id]/markdown.tsx +++ b/app/[docs_id]/markdown.tsx @@ -1,10 +1,11 @@ import Markdown, { Components } from "react-markdown"; import remarkGfm from "remark-gfm"; -import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; +import SyntaxHighlighter from "react-syntax-highlighter"; import { PythonEmbeddedTerminal } from "../terminal/python/embedded"; import { Heading } from "./section"; import { AceLang, EditorComponent } from "../terminal/editor"; import { ExecFile, ExecLang } from "../terminal/exec"; +import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs"; export function StyledMarkdown({ content }: { content: string }) { return ( @@ -138,8 +139,8 @@ const components: Components = { {String(props.children || "").replace(/\n$/, "")} @@ -150,8 +151,8 @@ const components: Components = { return ( {String(props.children || "").replace(/\n$/, "")} diff --git a/app/globals.css b/app/globals.css index b9dbd27..82b1549 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,20 +1,7 @@ @import "tailwindcss"; @plugin "daisyui"; -/* inconsolata-latin-wght-normal */ -@font-face { - font-family: "Inconsolata Variable"; - font-style: normal; - font-display: swap; - font-weight: 200 900; - src: url(https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2) - format("woff2-variations"); - unicode-range: - U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, - U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, - U+2215, U+FEFF, U+FFFD; -} - +/* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */ @theme { - --font-mono: "Inconsolata Variable", monospace; + --font-mono: "Inconsolata Variable", "Noto Sans JP Variable", monospace; } diff --git a/app/layout.tsx b/app/layout.tsx index fdf20a1..f6607e2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,6 @@ import type { Metadata } from "next"; +import "@fontsource-variable/noto-sans-jp"; +import "@fontsource-variable/inconsolata"; import "./globals.css"; import { Navbar } from "./navbar"; import { Sidebar } from "./sidebar"; diff --git a/app/terminal/editor.tsx b/app/terminal/editor.tsx index 57d8c38..92e6e98 100644 --- a/app/terminal/editor.tsx +++ b/app/terminal/editor.tsx @@ -87,7 +87,7 @@ export function EditorComponent(props: EditorProps) { { const abortController = new AbortController(); - (async () => { - // globals.cssでフォントを指定し読み込んでいるが、 - // それが読み込まれる前にterminalを初期化してしまうとバグる。 - // なのでここでフォントをfetchし成功するまでterminalの初期化は待つ - try { - await fetch( - "https://cdn.jsdelivr.net/fontsource/fonts/inconsolata:vf@latest/latin-wght-normal.woff2", - { signal: abortController.signal } - ); - } catch { - // ignore - } - + // globals.cssでフォントを指定し読み込んでいるが、 + // それが読み込まれる前にterminalを初期化してしまうとバグる。 + document.fonts.load("0.875rem Inconsolata Variable").then(() => { if (!abortController.signal.aborted) { const fromCSS = (varName: string) => window.getComputedStyle(document.body).getPropertyValue(varName); @@ -96,7 +86,7 @@ export function useTerminal(props: TerminalProps) { fontSize: 14, lineHeight: 1.4, letterSpacing: 0, - fontFamily: "Inconsolata Variable", + fontFamily: "'Inconsolata Variable','Noto Sans JP Variable'", theme: { // DaisyUIの変数を使用してテーマを設定している // TODO: ダークテーマ/ライトテーマを切り替えたときに再設定する? @@ -134,7 +124,7 @@ export function useTerminal(props: TerminalProps) { setTermReady(true); onReadyRef.current?.(); } - })(); + }); const observer = new ResizeObserver(() => { // fitAddon.fit(); diff --git a/package-lock.json b/package-lock.json index af61fd9..a3afef1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "my-code", "version": "0.1.0", "dependencies": { + "@fontsource-variable/inconsolata": "^5.2.6", + "@fontsource-variable/noto-sans-jp": "^5.2.6", "@google/generative-ai": "^0.24.1", "@opennextjs/cloudflare": "^1.6.3", "@xterm/addon-fit": "^0.11.0-beta.115", @@ -8386,6 +8388,24 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource-variable/inconsolata": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inconsolata/-/inconsolata-5.2.6.tgz", + "integrity": "sha512-lODgGNXKm7/PkAwnqDwiMrRbct/Lg4NqlcBwSXpaqFHmrVycLSS7oPZ/AshbDkLNJXv8yjGkqAr5oOGsgUE1QA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource-variable/noto-sans-jp": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.6.tgz", + "integrity": "sha512-YjN8UF1hX8ZFkYx95NMz8XeojsCIF5dGPu1htoWkbXyTZj3Z29cxDT8glaT/cOg1BstyOlmtvNC8crPF5Csj/w==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@google/generative-ai": { "version": "0.24.1", "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.24.1.tgz", diff --git a/package.json b/package.json index 7c60a9c..7807485 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts" }, "dependencies": { + "@fontsource-variable/inconsolata": "^5.2.6", + "@fontsource-variable/noto-sans-jp": "^5.2.6", "@google/generative-ai": "^0.24.1", "@opennextjs/cloudflare": "^1.6.3", "@xterm/addon-fit": "^0.11.0-beta.115",