Skip to content

Latest commit

 

History

History
116 lines (86 loc) · 4.97 KB

quickstart.ja.md

File metadata and controls

116 lines (86 loc) · 4.97 KB

Quick Start

English

.NET 10 SDKを用意します。最低対応版は10.0.300です。MDXにはNode.js 24.13.0も必要ですが、 Markdownだけなら不要です。serveが使うASP.NET Core shared frameworkはSDKに含まれます。 新しいディレクトリで作業してください。以下はNuGetで公開した2.0.0の手順です。

InstallとMarkdown Docsの作成

dotnet new install LithoSharp.ProjectTemplates::2.0.0
dotnet tool install LithoSharp.Tool --version 2.0.0 --tool-path .tools
.tools/lithosharp new docs MyDocs -o MyDocs
.tools/lithosharp build MyDocs -c Release
.tools/lithosharp serve MyDocs -c Release --port 4317

Windowsでは.tools/lithosharp.exeを使います。http://localhost:4317/を開き、確認後は Ctrl+Cでserverを止めます。templateのinstallは利用者のtemplate catalogへ反映されます。 ツールは.tools内だけに入ります。

MyDocs/content/hello.mdを追加します。

---
title: Hello
date: 2026-01-02T09:00:00Z
summary: My first page.
---

# Hello

This is **Markdown** rendered by .NET.

再buildするとMyDocs/dist/posts/hello.htmlが生成されます。title、base URL、content directoryは MyDocs/DocsSiteFactory.csで設定します。公開前に実際の配置先URLへ変更してください。 従来のreaderにはtitleとdateが必要です。既定のsummary validatorはvalidationを要求したときに動きます。 次のtyped documentation loaderは別schemaを持ち、従来のdate/summary fieldを必須にしません。

MDXと対話componentの追加

install済みのtoolとtemplateで別のMDXサイトを作ります。

.tools/lithosharp new mdx MyMdx -o MyMdx
dotnet build MyMdx -c Release
.tools/lithosharp restore-mdx MyMdx/bin/Release/net10.0/worker
.tools/lithosharp build MyMdx -c Release

worker restoreは同梱lockfileを使う明示的なnetwork操作です。通常の生成ではnpm依存をinstallしません。 npm importを追加した場合はprojectの依存を別途restoreしてください。MDXとcomponentには信頼できるコードだけを使います。

MyMdx/content/_components/Counter.tsxを作ります。

import {useState} from 'react';

export default function Counter({initial = 0}: {initial?: number}) {
  const [count, setCount] = useState(initial);
  return <button onClick={() => setCount(count + 1)}>Count {count}</button>;
}

MyMdx/content/counter.mdxを作ります。

---
title: Counter
---
import Counter from './_components/Counter.tsx';

# Counter

The heading and button are rendered at build time.

<Island component={Counter} props={{initial: 3}}
  schema={{type: 'object', properties: {initial: {type: 'integer'}}, additionalProperties: false}}
  strategy="load" />

templateはHydration = "selective"を選びます。このislandはload時に起動します。 通常の<Counter initial={3} />はpage hydrationへfallbackします。TypeScriptはtranspileのみなので、 型検査が必要なら別途type checkerを実行してください。

.tools/lithosharp build MyMdx -c Release
.tools/lithosharp check MyMdx -c Release --format json
.tools/lithosharp serve MyMdx -c Release --port 4317

http://localhost:4317/guide/counter/を開き、Count 3を押すとCount 4になります。 生成ファイルはMyMdx/dist/guide/counter/index.htmlです。本番ファイルの配信にNode processは不要です。

本番出力

開発serverを止め、SiteSettings.BaseUrlを配置先URLへ変更してRelease buildを実行します。 dist一式を静的HTTP hostへ配置し、内部用の.lithosharp-* ownership metadataは除外してください。 cache directoryは公開出力の外に置きます。開発用reload scriptはHTTP応答へ挿入し、本番HTMLには書き込みません。 更新時は、古いbrowser sessionが参照するhash付きassetを保持してください。

使用例と次の手順

目的 既存のsampleまたは検証fixture
Markdown、typed generator、集約ページ、画像 Docs sample、--asset-demo --check
従来のBlog、feed、search Blog sample
React island、progressive navigation、live code、PWA MDX sample
複数version/locale、Blog/Pages、API reference MDXガイドと実行可能な統合fixture
XML API buildと検証済みコード例 documentation verification
独自C# layout lithosharp new empty MySite -o MySite

testは高度な設定を実行できる例であり、追加のtemplate製品ではありません。 2.0.0への更新、Testing、性能、既知の制約も参照してください。