From 8b1c98234d6b74f852631014e926c3cce762a440 Mon Sep 17 00:00:00 2001 From: faithia-anastasia <211831874+faithia-anastasia@users.noreply.github.com> Date: Mon, 20 Apr 2026 10:33:17 +0900 Subject: [PATCH 1/9] fix: enable Tailwind directives in CSS parser at biome.json --- biome.json | 5 ++ src/index.css | 226 +++++++++++++++++++++++++------------------------- 2 files changed, 118 insertions(+), 113 deletions(-) diff --git a/biome.json b/biome.json index 09945d2..8e2e579 100644 --- a/biome.json +++ b/biome.json @@ -30,5 +30,10 @@ "organizeImports": "on" } } + }, + "css": { + "parser": { + "tailwindDirectives": true + } } } diff --git a/src/index.css b/src/index.css index fb3c7e9..e35af17 100644 --- a/src/index.css +++ b/src/index.css @@ -6,125 +6,125 @@ @custom-variant dark (&:is(.dark *)); @theme inline { - --font-heading: var(--font-sans); - --font-sans: 'Geist Variable', sans-serif; - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); - --color-card: var(--card); - --color-foreground: var(--foreground); - --color-background: var(--background); - --radius-sm: calc(var(--radius) * 0.6); - --radius-md: calc(var(--radius) * 0.8); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) * 1.4); - --radius-2xl: calc(var(--radius) * 1.8); - --radius-3xl: calc(var(--radius) * 2.2); - --radius-4xl: calc(var(--radius) * 2.6); + --font-heading: var(--font-sans); + --font-sans: "Geist Variable", sans-serif; + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --color-foreground: var(--foreground); + --color-background: var(--background); + --radius-sm: calc(var(--radius) * 0.6); + --radius-md: calc(var(--radius) * 0.8); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) * 1.4); + --radius-2xl: calc(var(--radius) * 1.8); + --radius-3xl: calc(var(--radius) * 2.2); + --radius-4xl: calc(var(--radius) * 2.6); } :root { - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --radius: 0.625rem; - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.87 0 0); - --chart-2: oklch(0.556 0 0); - --chart-3: oklch(0.439 0 0); - --chart-4: oklch(0.371 0 0); - --chart-5: oklch(0.269 0 0); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.87 0 0); + --chart-2: oklch(0.556 0 0); + --chart-3: oklch(0.439 0 0); + --chart-4: oklch(0.371 0 0); + --chart-5: oklch(0.269 0 0); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); } @layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } - html { - @apply font-sans; - } -} \ No newline at end of file + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } + html { + @apply font-sans; + } +} From d251170ccdb1d82f8dca5de155f437faf0f4fad6 Mon Sep 17 00:00:00 2001 From: faithia-anastasia <211831874+faithia-anastasia@users.noreply.github.com> Date: Mon, 20 Apr 2026 11:12:26 +0900 Subject: [PATCH 2/9] feat: add contents about binary star --- package-lock.json | 6 +- .../data/contents/BinaryStarContent.tsx | 132 ++++++++++++++++++ src/pages/Tutotial/components/data/index.ts | 11 +- 3 files changed, 145 insertions(+), 4 deletions(-) create mode 100644 src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx diff --git a/package-lock.json b/package-lock.json index fab07da..394854b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5920,9 +5920,9 @@ "license": "Apache-2.0" }, "node_modules/hono": { - "version": "4.12.12", - "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.12.tgz", - "integrity": "sha512-p1JfQMKaceuCbpJKAPKVqyqviZdS0eUxH9v82oWo1kb9xjQ5wA6iP3FNVAPDFlz5/p7d45lO+BpSk1tuSZMF4Q==", + "version": "4.12.14", + "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.14.tgz", + "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==", "license": "MIT", "engines": { "node": ">=16.9.0" diff --git a/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx b/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx new file mode 100644 index 0000000..7993d4e --- /dev/null +++ b/src/pages/Tutotial/components/data/contents/BinaryStarContent.tsx @@ -0,0 +1,132 @@ +// BinaryStarContent.tsx +import { BlockMath } from "react-katex"; + +export default function BinaryStarContent() { + return ( +
+ 夜空に輝く星の多くは、実は1つではなく、2つ以上の星がお互いの周りをぐるぐると回り合っています。 + このように、重力で結びついたペアの星を「連星」 + と呼びます。 + 太陽のように1つポツンと存在している星よりも、宇宙では連星の方がメジャーな存在なのです。 +
++ 連星は、一方がもう一方の周りを回っているように見えますが、正確には2つの星の + 「重心(重さのバランスが取れる点)」 + を中心に回っています。 +
++ これは公園のシーソーと同じです。 + 同じ体重の二人が乗れば真ん中が中心になりますが、一方が重い場合は、中心は重い人の方に寄ります。 +
++ 重心のバランスの式 +
++ 2つの星の重さと、重心からの距離 + には次の関係があります。 +
++ 直感的な解釈:{" "} + 2つの星は同じ時間で1周する関係になっています。 + そのため、重心から遠い星ほど大きな円を回り、同じ時間でもより長い道のりを進みます。 +
++ 星が円を描いて回り続けるには、常に中心に向かって引っ張る力(向心力)が必要です。連星の場合、この役割をお互いに引き合う「万有引力」が果たしています。 +
++ ※回転している星の上から見ると、外側に逃げようとする「遠心力」と「万有引力」が釣り合っているように見えます(遠心力は見かけの力です)。 +
++ 力のつり合いの式(星1の場合) +
++ 星1にかかる「見かけの遠心力」と「相手から受ける万有引力」のバランスはこう書けます。 +
++ 直感的な解釈: +
++ シミュレーションで綺麗な円軌道の連星を作るためのステップを紹介します。 +
++ 連星がうまくできたら、今度は星の大きさ(質量)をいろいろ変えてみましょう。 + 重さの違いを大きくすると、2つの星の動き方や回る中心の位置(重心)がどう変わるか観察できます。 + 「重い星と軽い星では、どちらがどんな動きをするのか?」 + 実際に動かして確かめてみることが大切です。 +
+💡 ヒント
++ もし星が衝突してしまったら「初速度が足りない」サインです。逆に、お互い離れていってしまったら「速すぎる」ことになります。 + 絶妙なバランスを見つけて、宇宙のダンスを完成させてください! +
++ ※ M: 星の重さ、r: 重心からの距離 +
直感的な解釈:{" "} - 2つの星は同じ時間で1周する関係になっています。 - そのため、重心から遠い星ほど大きな円を回り、同じ時間でもより長い道のりを進みます。 + これは「重い星ほど重心の近くに、軽い星ほど重心から遠くに位置する」というバランスを示しています。 + + 「重い星はどっしりと構え、軽い星がその周りを大きく振り回される」 + + イメージです。
@@ -70,11 +76,25 @@ export default function BinaryStarContent() { math={"M_1 \\frac{v_1^2}{r_1} = G \\frac{M_1 M_2}{(r_1 + r_2)^2}"} /> ++ 左辺:外へ逃げようとする力(遠心力) / + 右辺:相手に引かれる力(万有引力) +
+※ v: 速度、(r₁+r₂): 星と星の間の合計距離
+直感的な解釈:
※太陽を使うと変化がわかりやすく、楽しく遊べます。。
💡 ヒント
もし星が衝突してしまったら「初速度が足りない」サインです。逆に、お互い離れていってしまったら「速すぎる」ことになります。 - 絶妙なバランスを見つけて、宇宙のダンスを完成させてください! + 絶妙なバランスを見つけて、条件を少し変えるだけで軌道が安定しなくなることを観察してみましょう。
+ 多くの人は、惑星は太陽の周りを「きれいな円」で回っていると思っているかもしれません。 + でも実は、ほとんどの天体は少しつぶれた円、つまり + 「楕円(だえん)」の形で動いています。 + この「どれくらい円からつぶれているか」を表す数字を + 「軌道離心率(きどうりしんりつ)」と呼びます。 +
+
+ 離心率はアルファベットの
e = 0
+真ん丸な円
+0 < e < 1
+楕円(つぶれた円)
+e ≧ 1
++ 重力に引かれても戻ってこない軌道(放物線・双曲線) +
++ 地球の離心率は約 0.017 なので、かなり円に近いです。 + 一方で、遠くからやってくる彗星(すいせい)などは 0.9{" "} + を超えるような、ものすごく細長い楕円を描くことがあります。 +
++ なぜ軌道が楕円になるのでしょうか? それは、天体の + 「速さ」が関係しています。 +
++ 円軌道になるための速度 +
+
+ この速度ぴったりだと
+ 速度が
+ 楕円軌道では、天体は「速くなったり遅くなったり」 + しながら回ります。太陽に近いときは速く、遠いときはゆっくり動くのが特徴です。 +
++ シミュレーションを使って、軌道のカタチをコントロールしてみましょう。 +
+💡 ヒント
++ 天体が太陽に一番近づく点を「近日点(きんじつてん)」、一番遠ざかる点を「遠日点(えんにちてん)」と言います。 + 離心率が大きければ大きいほど、この2つの地点でのスピードの差が激しくなるのを観察してみてください。 +
++ 太陽系は、中心にある巨大な星「太陽」 + と、その周りを回る惑星や彗星たちの集まりです。 + 太陽系全体の重さ(質量)のうち、なんと 99.8%{" "} + を太陽が占めています。 + この圧倒的な重力によって、遠くの惑星たちも逃げ出さずに太陽の周りを回り続けているのです。 +
++ 太陽に近い順に並べてみよう +
++ 水星 → 金星 → 地球 → 火星 → 木星 → 土星 → 天王星 → 海王星 +
++ 「すい・きん・ち・か・もく・ど・てん・かい」で覚えよう! +
++ 太陽系の8つの惑星は、その特徴から大きく2つのグループに分けられます。 +
+地球型惑星
++ (水星・金星・地球・火星) +
++ 岩石でできていて、地面がある惑星。サイズは小さめだけど、密度がぎゅっと詰まっています。 +
+木星型・天王星型惑星
++ (木星・土星・天王星・海王星) +
++ ガスや氷でできていて、巨大な惑星。地球のような固い地面はなく、雲が渦巻いています。 +
++ 太陽から遠い惑星ほど、1周(公転)するのにかかる時間が長くなります。 + これを発見したのはケプラーという科学者で、 + 「ケプラーの第3法則」と呼ばれます。 +
++ ケプラーの第3法則(イメージ) +
++ T: 1周する時間, a: 太陽からの距離 +
++ 例えば、地球は1年で太陽を1周しますが、一番外側の海王星は{" "} + 約165年 もかけてゆっくりと1周します。 + 太陽から遠い惑星ほど軌道が大きくなるため、1周するのに長い時間がかかります。 +
+シミュレーションを使って、太陽系の惑星たちを配置してみましょう。
++ ヒント:太陽系は「平らな円盤」のような形をしています。真横から見たときに惑星が一直線に並ぶように配置すると、きれいな太陽系が作れますよ! +
++ 宇宙探査機が、燃料をほとんど使わずにスピードをグンと上げる魔法のような技術、それが + 「スイングバイ」(重力アシスト)です。 + 惑星の横をギリギリですれ違うことで、その惑星の重力を利用して自分を弾き飛ばしてもらう仕組みです。 +
++ ※「はやぶさ」や「ボイジャー」などの探査機が遠い宇宙へ行くためによく使われます。 +
++ なぜ、そばを通るだけで速くなるのでしょうか? それは、通りすがる惑星が + 「動いているから」です。 +
++ 止まっている天体のそばを通っても、近づくときに加速した分、離れるときに同じだけ減速してしまいます。 + しかし、動いている惑星に向かっていくと、惑星の移動スピードの一部を「もらう」ことができるのです。 +
++ エネルギーのやり取り(イメージ) +
++ 相対速度が変化 → 観測すると加速したように見える +
++ 動いているトラックにロープを投げて、引っ張ってもらうようなイメージです! +
++ スイングバイは人工衛星だけの技術ではありません。 + このシミュレーターのように + 惑星同士、天体同士でも全く同じことが起こります。 +
++ 物理学では、これを「運動量保存の法則」で説明します。 +
++ 運動量保存の法則 +
++ m: 重さ, v: 速度(1番が飛んできた天体、2番が待ち構える惑星) +
++ 軽い天体が重い惑星に近づくと、軽い方は猛烈に加速し、重い惑星はほんの、ほんの少しだけ減速します(質量が大きすぎるため、ほとんど変化は観測できません)。 + 宇宙ではこのように、天体同士が重力でエネルギーをやり取りしながら、お互いの軌道を変え合っているのです(これを「重力散乱」と呼びます)。 +
++ このシミュレーターを使えば、あなたも宇宙ナビゲーターです。 + 惑星を配置して、別の天体をその「後ろ側」から追い越すように投げてみましょう。 +
+💡 ヒント
++ 天体が描く「軌道の曲がり角」が急であればあるほど、大きなエネルギーがやり取りされています。 + 太陽系を旅する探査機になったつもりで、自分だけの「最強ルート」をシミュレーションで見つけ出しましょう! +
+