From 0e4b3c0519ccdaf1f1a3a15e235befb818edacc3 Mon Sep 17 00:00:00 2001 From: DeguchiHiroki Date: Mon, 14 Sep 2026 16:35:54 +0900 Subject: [PATCH 1/2] =?UTF-8?q?design:=20Qiita=20CLI=20Preview=20=E3=81=AE?= =?UTF-8?q?=E6=97=A2=E5=AD=98=E7=94=BB=E9=9D=A2=E3=81=AE=E3=83=87=E3=82=B6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=92=E4=BD=9C=E6=88=90=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `/`（README のプレビュー）と `/items/[id]`（記事詳細）を、実装の現状 （as-is）のまま Pen.dev で起こした。共有ライブラリも新設している。 - design/shared-library.lib.pen — increments/Qiita からコピーした変数 177件に qiita-cli 用の8件を足し、Button / LinkButton / Select / Divider / Sidebar を置く - design/pages/index/index.pen — `/`（5 frame） - design/pages/items/items.pen — `/items/[id]`（6 frame） viewport は 1920px / 1199px / 375px。frame の高さは書き出した実寸で、 本文は article.css の実値に合わせてある。 Co-Authored-By: Claude Opus 5 --- design/pages/index/index.pen | 2053 ++++++++ design/pages/items/items.pen | 5092 ++++++++++++++++++++ design/shared-library.lib.pen | 8511 +++++++++++++++++++++++++++++++++ 3 files changed, 15656 insertions(+) create mode 100644 design/pages/index/index.pen create mode 100644 design/pages/items/items.pen create mode 100644 design/shared-library.lib.pen diff --git a/design/pages/index/index.pen b/design/pages/index/index.pen new file mode 100644 index 0000000..e6f1009 --- /dev/null +++ b/design/pages/index/index.pen @@ -0,0 +1,2053 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "Ix014", + "name": "/ - ideal state(1920px)", + "x": 0, + "y": 0, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix012", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix013", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix011", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix010", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb315", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb269", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `
` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb268", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb273", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb271", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb270", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb272", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb276", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb274", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb275", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb289", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb280", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb278", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb277", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb279", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb284", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb282", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb281", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb283", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb288", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb286", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb285", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb287", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb293", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb291", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb290", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb292", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb306", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb303", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb294", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用されたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb297", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb295", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb296", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb298", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb301", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb299", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポリシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb300", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb302", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したもの", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb305", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb304", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "とみなします。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb308", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb307", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb314", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb313", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb311", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb309", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb310", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb312", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れをまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix019", + "name": "/ - not found state(1920px)", + "x": 0, + "y": 1180, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix017", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix018", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix016", + "name": "Error Message Wrapper (実装 items/index.tsx:66 は

だけ。白カードは出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "Ix015", + "name": "Message（errorMessageStyle は lineHeight 未指定で継承値 1.8）", + "fill": "$lib:high-emphasis-text", + "content": "ファイルが見つかりません", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix024", + "name": "/ - unknown error state(1920px)", + "x": 0, + "y": 2360, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "Ix022", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "Ix023", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix021", + "name": "Error Message Wrapper (実装 items/index.tsx:66 は

だけ。白カードは出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "Ix020", + "name": "Message（errorMessageStyle は lineHeight 未指定で継承値 1.8）", + "fill": "$lib:high-emphasis-text", + "content": "不明なエラーが発生しました", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix038", + "name": "/ - ideal state(1199px)", + "x": 2220, + "y": 0, + "clip": true, + "width": 1199, + "height": 920, + "fill": "$lib:background", + "children": [ + { + "id": "Ix036", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 920 + }, + { + "type": "frame", + "id": "Ix037", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix035", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix034", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb363", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb317", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `

` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb316", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb321", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb319", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb318", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb320", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb324", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb322", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb323", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb337", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb328", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb326", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb325", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb327", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb332", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb330", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb329", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb331", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb336", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb334", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb333", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb335", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb341", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb339", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb338", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb340", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb354", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb351", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb342", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用されたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb345", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb343", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb344", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb346", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb349", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb347", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポリシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb348", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb350", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したも", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb353", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb352", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "のとみなします。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb356", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb355", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb362", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb361", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb359", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb357", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb358", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb360", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れをまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ix057", + "name": "/ - ideal state(375px)", + "x": 3719, + "y": 0, + "clip": true, + "width": 375, + "height": 1172, + "fill": "$lib:background", + "children": [ + { + "type": "frame", + "id": "Ix056", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix055", + "name": "Toolbar (実装 HeaderIndex。mobileSize = 幅 <= 769 のときだけ出る)", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ix053", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Ix051", + "name": "Menu Button", + "width": 40, + "height": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "Ix050", + "name": "Icon", + "width": 24, + "height": 24, + "icon": "menu", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "Ix052", + "name": "Logo", + "width": 118, + "height": 24, + "fill": "$lib:surface-variant", + "cornerRadius": 4, + "children": [] + } + ] + }, + { + "type": "rectangle", + "id": "Ix054", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ix049", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0。viewport.S では 0)", + "width": "fill_container", + "padding": 0, + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "Ix048", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "Mb419", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb365", + "name": "img（article.css: bg gray0 / box-shadow 0 0 0 1px divider / max-width 100%）（README 先頭のバナー。中身は利用者のプロジェクトの README.md 次第）（`.it-MdContent > :first-child { margin-top: 0 }` は効かない。実装は `
` と1枚挟むので、最初の `p` の margin-top 16 が内側の div に相殺されて残る — index.tsx:61-65）", + "width": "fill_container", + "height": 260, + "fill": "$lib:gray-0", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb364", + "name": "Placeholder Label", + "fill": "$lib:medium-emphasis-text", + "content": "README の画像", + "lineHeight": 1.5, + "fontFamily": "$lib:font-sans", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb369", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb367", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb366", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview へようこそ！", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb368", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb372", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb370", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができるツールです。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Mb371", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うことで、普段お使いのエディタなどを使って記事の執筆・投稿がしやすくなります。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb385", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb376", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb374", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb373", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb375", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Markdown で書いてそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb380", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb378", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb377", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb379", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライド（Marp）にも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Mb384", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Mb382", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Mb381", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Mb383", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "投稿・更新も CLI から行える", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb389", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb387", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Mb386", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "ご利用の前に", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Mb388", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ], + "padding": [ + 56, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb408", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb391", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb390", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI、Qiita Preview を利用さ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb400", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb392", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "れたら、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb395", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb393", + "name": "Text", + "fill": "$lib:green-text", + "content": "利用規約", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb394", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb396", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "、", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Mb399", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb397", + "name": "Text", + "fill": "$lib:green-text", + "content": "プライバシーポ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb398", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + } + ] + }, + { + "type": "frame", + "id": "Mb405", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb403", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb401", + "name": "Text", + "fill": "$lib:green-text", + "content": "リシー", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb402", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb404", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "に同意したものとみなします", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb407", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb406", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb410", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb409", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "こちらの記事もご覧ください", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Mb418", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Mb415", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Mb413", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Mb411", + "name": "Text", + "fill": "$lib:green-text", + "content": "Qiita CLI の使い方", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Mb412", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Mb414", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " に基本的な流れ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Mb417", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Mb416", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をまとめています。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "imports": { + "lib": "../../shared-library.lib.pen" + }, + "fileToken": "0063e59a-bd40-4ae8-a056-160179d4755a" +} diff --git a/design/pages/items/items.pen b/design/pages/items/items.pen new file mode 100644 index 0000000..e16f170 --- /dev/null +++ b/design/pages/items/items.pen @@ -0,0 +1,5092 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "It029", + "name": "/items/[id] - ideal state(1920px)", + "x": 0, + "y": 0, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It027", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It028", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It010", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It008", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It004", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It001", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It003", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It002", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It007", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It005", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It006", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It009", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It026", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It025", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It014", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It013", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It011", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It012", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It024", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It015", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It020", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It017", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It016", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It019", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It018", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It023", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma066", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma004", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma002", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma001", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma003", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma016", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma009", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma005", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma007", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma006", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma008", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma015", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma010", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma013", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma011", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma012", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma014", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma029", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma020", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma018", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma017", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma019", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma024", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma022", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma021", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma023", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma028", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma026", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma025", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma027", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma031", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma030", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma035", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma032", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma033", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma034", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma040", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma036", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma039", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma037", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma038", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma042", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma041", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma063", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma047", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma044", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma043", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma046", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma045", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma052", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma049", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma048", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma051", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma050", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma057", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma054", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma053", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma056", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma055", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma062", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma059", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma058", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma061", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma060", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma065", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma064", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It084", + "name": "/items/[id] - article info open state(1920px)", + "x": 0, + "y": 1180, + "clip": true, + "width": 1920, + "height": 1296, + "fill": "$lib:background", + "children": [ + { + "id": "It082", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1296 + }, + { + "type": "frame", + "id": "It083", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It039", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It037", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It033", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It030", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It032", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It031", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It036", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It034", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It035", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It038", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It081", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It080", + "name": "Card (実装 contentsContainerStyle: maxWidth 820 / radius 8 / padding 24)", + "width": 820, + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It069", + "name": "ArticleInfo (open)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It042", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It040", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It041", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_down", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "It048", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It046", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It045", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "公開範囲", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It047", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It044", + "name": "Icon", + "width": 14, + "height": 14, + "icon": "public", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + }, + { + "type": "text", + "id": "It043", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "全体", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It053", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It051", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It050", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事の状態", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It052", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It049", + "name": "Value", + "fill": "$lib:blue-text", + "content": "投稿済み", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It058", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It056", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It055", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "差分", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It057", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It054", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "あり", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It063", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It061", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It060", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Organization", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It062", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It059", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "紐付けなし", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "It068", + "name": "Info Row (実装 infoListStyle: grid 100px + 1fr / gap 12。2行目以降は marginTop 4)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "It066", + "name": "Label Col", + "width": 100, + "children": [ + { + "type": "text", + "id": "It065", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "スライドモード", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + } + ] + }, + { + "type": "frame", + "id": "It067", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It064", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "OFF", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + "$lib:getSpace(1/2)", + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ic006", + "name": "Info Row (実装 infoListStyle: grid 100px / minmax(0,1fr)、gap 12、行間は marginTop 4。postingCampaign があるときだけ出る2行 — ArticleInfo.tsx:97-113)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "Ic001", + "name": "Label Col", + "width": 100, + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ic002", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事投稿キャン", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "text", + "id": "Ic003", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "ペーン", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + } + ] + }, + { + "type": "frame", + "id": "Ic004", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "Ic005", + "name": "Value", + "fill": "$lib:blue-text", + "content": "お題は不問！Qiita Tech Festa 2026で記事投稿！", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ic011", + "name": "Info Row (実装 infoListStyle: grid 100px / minmax(0,1fr)、gap 12、行間は marginTop 4。postingCampaign があるときだけ出る2行 — ArticleInfo.tsx:97-113)", + "width": "fill_container", + "gap": "$lib:getSpace(3/2)", + "children": [ + { + "type": "frame", + "id": "Ic007", + "name": "Label Col", + "width": 100, + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ic008", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "規約同意", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + } + ] + }, + { + "type": "frame", + "id": "Ic009", + "name": "Value Col", + "width": "fill_container", + "gap": "$lib:getSpace(1/2)", + "children": [ + { + "type": "text", + "id": "Ic010", + "name": "Value", + "fill": "$lib:high-emphasis-text", + "content": "同意済み", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It079", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It070", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It075", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It072", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It071", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It074", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It073", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It078", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma132", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma070", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma068", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma067", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma069", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma082", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma075", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma071", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma073", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma072", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma074", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma081", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma076", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma079", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma077", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma078", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma080", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma095", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma086", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma084", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma083", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma085", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma090", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma088", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma087", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma089", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma094", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma092", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma091", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma093", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma097", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma096", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma101", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma098", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma099", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma100", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma106", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma102", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma105", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma103", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma104", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma108", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma107", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma129", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma113", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma110", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma109", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma112", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma111", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma118", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma115", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma114", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma117", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma116", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma123", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma120", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma119", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma122", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma121", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma128", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma125", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma124", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma127", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma126", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma131", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma130", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It089", + "name": "/items/[id] - not found state(1920px)", + "x": 0, + "y": 2576, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It087", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It088", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It086", + "name": "Error Message Wrapper (実装 show.tsx の

。ツールバーも白カードも出ない)", + "width": "fill_container", + "layout": "vertical", + "padding": "$lib:getSpace(2)", + "children": [ + { + "type": "text", + "id": "It085", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "ファイルが見つかりません", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-subhead2", + "fontWeight": "$lib:fontWeight-normal", + "textAlign": "center", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It101", + "name": "/items/[id] - frontmatter error state(1920px)", + "x": 0, + "y": 3756, + "clip": true, + "width": 1920, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It099", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It100", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It098", + "name": "Frontmatter Error Wrapper (実装 errorContentsStyle: red10 / radius 8 / margin 24 auto 0 / width fit-content / padding 16 24)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(3)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It097", + "name": "Error Box", + "fill": "$lib:red-10", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3/2)", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(3)" + ], + "children": [ + { + "type": "text", + "id": "It096", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "記事の設定の入力内容に誤りがあるため、プレビューが表示できません", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-bold" + }, + { + "type": "frame", + "id": "It092", + "name": "Error Row (実装 errorStyle: 2行目以降は marginTop 12)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It090", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "It091", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "titleは必須です", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It095", + "name": "Error Row (実装 errorStyle: 2行目以降は marginTop 12)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It093", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "error", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:red-60" + }, + { + "type": "text", + "id": "It094", + "name": "Message", + "fill": "$lib:high-emphasis-text", + "content": "tagsは1つ以上必要です", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + } + ], + "alignItems": "center" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It130", + "name": "/items/[id] - ideal state(1199px)", + "x": 2220, + "y": 0, + "clip": true, + "width": 1199, + "height": 1080, + "fill": "$lib:background", + "children": [ + { + "id": "It128", + "type": "ref", + "ref": "lib:Z36Vk8", + "name": "Sidebar", + "height": 1080 + }, + { + "type": "frame", + "id": "It129", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It111", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It109", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It105", + "name": "File Path", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It102", + "name": "Path", + "fill": "$lib:high-emphasis-text", + "content": "articles/my-article.md", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "It104", + "name": "Copy Button", + "width": 24, + "height": 24, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It103", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It108", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It106", + "name": "Label", + "fill": "$lib:green-text", + "content": "記事を投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It107", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It110", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It127", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It126", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It115", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It114", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It112", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It113", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It125", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It116", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It121", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It118", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It117", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It120", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It119", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It124", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma198", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma136", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma134", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma133", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma135", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma148", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma141", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma137", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディタで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma139", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma138", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma140", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " でそのまま確認できます", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma147", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma142", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "。詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma145", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma143", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma144", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma146", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma161", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma152", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma150", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma149", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma151", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma156", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma154", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma153", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma155", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma160", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma158", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma157", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma159", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma163", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma162", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma167", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma164", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma165", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma166", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma172", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma168", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma171", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma169", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma170", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma174", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma173", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma195", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma179", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma176", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma175", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma178", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma177", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma184", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma181", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma180", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma183", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma182", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma189", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma186", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma185", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma188", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma187", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma194", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma191", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma190", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma193", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma192", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma197", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma196", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "It160", + "name": "/items/[id] - ideal state(375px)", + "x": 3719, + "y": 0, + "clip": true, + "width": 375, + "height": 1414, + "fill": "$lib:background", + "children": [ + { + "type": "frame", + "id": "It159", + "name": "Contents", + "width": "fill_container", + "height": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It142", + "name": "Toolbar", + "width": "fill_container", + "fill": "$lib:surface", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "It140", + "name": "Toolbar Bar", + "width": "fill_container", + "padding": [ + "$lib:getSpace(1)", + "$lib:getSpace(2)" + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It136", + "name": "Header Item", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "It132", + "name": "Menu Button", + "width": 40, + "height": 40, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon", + "id": "It131", + "name": "Icon", + "width": 24, + "height": 24, + "icon": "menu", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + }, + { + "type": "frame", + "id": "It135", + "name": "Copy Row (実装 mobileHeaderCopyButtonStyle: grid 1fr/16px + gap 4)", + "gap": "$lib:getSpace(1/2)", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It133", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "ファイルパスをコピー", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It134", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "content_copy", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It139", + "name": "Publish Button（実装 headerButtonStyle は padding 4/16 + border 2px が padding の外。pen の stroke は strokeAlignment inner でレイアウトに寄与しないため padding を 6/18 にして寸法を合わせた）", + "fill": "$lib:surface", + "cornerRadius": 8, + "stroke": "$lib:green-60", + "strokeWidth": 2, + "strokeAlignment": "inner", + "gap": "$lib:getSpace(1/2)", + "padding": [ + 6, + 18 + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It137", + "name": "Label", + "fill": "$lib:green-text", + "content": "投稿する", + "lineHeight": "$lib:text-body2-dense-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-semibold" + }, + { + "type": "icon", + "id": "It138", + "name": "Icon", + "width": 16, + "height": 16, + "icon": "publish", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:green-text" + } + ] + } + ] + }, + { + "type": "rectangle", + "id": "It141", + "name": "Toolbar Rule", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "It158", + "name": "Contents Wrapper (実装 contentsWrapperStyle: margin 16/16/0)", + "width": "fill_container", + "padding": [ + "$lib:getSpace(2)", + "$lib:getSpace(2)", + 0, + "$lib:getSpace(2)" + ], + "justifyContent": "center", + "children": [ + { + "type": "frame", + "id": "It157", + "name": "Card (実装 contentsContainerStyle: maxWidth 820（この幅では効かず fill） / radius 8 / padding 24)", + "width": "fill_container", + "fill": "$lib:surface", + "cornerRadius": 8, + "layout": "vertical", + "gap": "$lib:getSpace(3)", + "padding": "$lib:getSpace(3)", + "children": [ + { + "type": "frame", + "id": "It146", + "name": "ArticleInfo (collapsed)", + "width": "fill_container", + "fill": "$lib:background", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + "$lib:getSpace(3/2)", + "$lib:getSpace(2)" + ], + "children": [ + { + "type": "frame", + "id": "It145", + "name": "Summary (実装 infoSummaryStyle は gap も justify も無く ::after のシェブロンがラベル直後)", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "It143", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "記事情報", + "lineHeight": "$lib:text-body1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body1", + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "icon", + "id": "It144", + "name": "Toggle Icon (実装は expand_more / expand_less。pen に字形が無く keyboard_arrow_* で代用)", + "width": 16, + "height": 16, + "icon": "keyboard_arrow_up", + "library": "Material Symbols Outlined", + "weight": 500, + "fill": "$lib:high-emphasis-text" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It156", + "name": "Article", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "It147", + "name": "Title", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI で記事を書く", + "lineHeight": "$lib:text-headline1-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-headline1", + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "frame", + "id": "It152", + "name": "Tag List (実装 tagListWrapStyle: marginTop 8 / gap 8。最後以外のタグは chip の中に \",\" が入る — Article.tsx:31)", + "width": "fill_container", + "gap": "$lib:getSpace(1)", + "padding": [ + "$lib:getSpace(1)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "It149", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It148", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Qiita,", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "It151", + "name": "Tag", + "cornerRadius": 4, + "padding": [ + 0, + "$lib:getSpace(3/4)" + ], + "children": [ + { + "type": "text", + "id": "It150", + "name": "Label", + "fill": "$lib:high-emphasis-text", + "content": "Markdown", + "lineHeight": "$lib:text-body2-line-height", + "fontFamily": "$lib:font-sans", + "fontSize": "$lib:text-body2", + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "It155", + "name": "Body (実装 bodyStyle: marginTop 48。中身は Qiita 側 article.css の .it-MdContent)", + "width": "fill_container", + "layout": "vertical", + "padding": [ + "$lib:getSpace(6)", + 0, + 0, + 0 + ], + "children": [ + { + "type": "frame", + "id": "Ma267", + "name": "MdContent（実装 .it-MdContent = Qiita の article.css。デスクトップの実値をそのまま写している。フォントサイズと行送りは em ベースで デザイントークンに受け口が無いため article.css の値（トークン外）をリテラルで置いている。CSS の margin は隣接で相殺されるので、ブロック間は max(前の margin-bottom, 次の margin-top) を上 padding にしてある）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma202", + "name": "h2（article.css: 1.53em=26px / lh1.4 / margin 56-0-16 / padding-bottom 4 / border-bottom 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma200", + "name": "h2 Inner", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 0, + 0, + 4, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma199", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "はじめに", + "lineHeight": 1.4, + "fontFamily": "$lib:font-sans", + "fontSize": 26, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "rectangle", + "id": "Ma201", + "name": "Border Bottom", + "fill": "$lib:divider", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "frame", + "id": "Ma217", + "name": "p（article.css: margin 16-0。pen に折り返しの指定が無いので、run 混在の行は幅の見積もりで割っている）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma204", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma203", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita CLI を使うと、手元のエディ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma209", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma205", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "タで記事を書いて ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "frame", + "id": "Ma207", + "name": "Inline Code（article.css: bg rgba(0,0,0,.08) / radius4 / 等幅。合成は #ebebeb で、最も近い $lib:gray-20 = #edeeee）", + "fill": "$lib:gray-20", + "cornerRadius": 4, + "padding": [ + 0, + 4 + ], + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma206", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma208", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": " で", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma211", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "Ma210", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "そのまま確認できます。詳しくは ", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "frame", + "id": "Ma216", + "name": "Line", + "width": "fill_container", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "Ma214", + "name": "Link", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma212", + "name": "Text", + "fill": "$lib:green-text", + "content": "公式ガイド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + }, + { + "type": "rectangle", + "id": "Ma213", + "name": "Underline（article.css: text-decoration underline）", + "fill": "$lib:green-text", + "width": "fill_container", + "height": 1 + } + ] + }, + { + "type": "text", + "id": "Ma215", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "をご覧ください。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma230", + "name": "ul（article.css: padding-left 1.5em / margin 16-0 / list-style disc）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma221", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma219", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma218", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma220", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Markdown をそのままプレビューできる", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma225", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma223", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma222", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma224", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事の投稿・更新まで CLI で完結する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma229", + "name": "li", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma227", + "name": "Marker（article.css: ul の padding-left 1.5em = 25.5px の中に disc が入る）", + "width": 26, + "justifyContent": "center", + "alignItems": "start", + "children": [ + { + "type": "text", + "id": "Ma226", + "name": "Bullet", + "fill": "$lib:high-emphasis-text", + "content": "•", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal" + } + ] + }, + { + "type": "text", + "id": "Ma228", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "スライドモードにも対応している", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma232", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma231", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "インストール", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma236", + "name": "code-frame（article.css: radius8 / margin-block 24 / padding 8-16 / bg gray110 / 文字 gray0。pre code は .82em=14 / lh1.5）", + "width": "fill_container", + "fill": "$lib:gray-110", + "cornerRadius": 8, + "layout": "vertical", + "padding": [ + 24, + 0, + 0, + 0 + ], + "children": [ + { + "type": "text", + "id": "Ma233", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npm install @qiita/qiita-cli --save-dev", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma234", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita init", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma235", + "name": "Line", + "fill": "$lib:gray-0", + "content": "$ npx qiita preview", + "lineHeight": 1.5, + "fontFamily": "Noto Sans Mono", + "fontSize": 14, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma241", + "name": "blockquote（article.css: margin 24-0 / padding 8-16 / 左に 4px の bar（gray30・radius4）/ 文字 mediumEmphasis）", + "width": "fill_container", + "children": [ + { + "type": "rectangle", + "id": "Ma237", + "name": "Bar", + "fill": "$lib:gray-30", + "width": 4, + "height": "fill_container", + "cornerRadius": 4 + }, + { + "type": "frame", + "id": "Ma240", + "name": "Body", + "width": "fill_container", + "layout": "vertical", + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "Ma238", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "Node.js 22.22.1 以上が必要です。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + }, + { + "type": "text", + "id": "Ma239", + "name": "Line", + "fill": "$lib:medium-emphasis-text", + "content": "古い環境では qiita preview が起動しません。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ], + "padding": [ + 24, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma243", + "name": "h3（article.css: 1.29em=22px / lh1.6 / margin 40-0-16。罫線なし）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma242", + "name": "Heading Text", + "fill": "$lib:high-emphasis-text", + "content": "よく使うオプション", + "lineHeight": 1.6, + "fontFamily": "$lib:font-sans", + "fontSize": 22, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 40, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma264", + "name": "table（article.css: margin 16-0 / th は bold・bg surface / td は padding 4-12 / 罫線 1px divider）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "Ma248", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma245", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma244", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "コマンド", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma247", + "name": "th", + "width": "fill_container", + "fill": "$lib:surface", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma246", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "説明", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-bold", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma253", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma250", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma249", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita preview", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma252", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma251", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "ブラウザでプレビューを開く", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma258", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma255", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma254", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita publish", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma257", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma256", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "記事を Qiita に投稿する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Ma263", + "name": "tr", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "Ma260", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma259", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "qiita pull", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + }, + { + "type": "frame", + "id": "Ma262", + "name": "td", + "width": "fill_container", + "stroke": "$lib:divider", + "strokeWidth": 1, + "strokeAlignment": "inner", + "padding": [ + 4, + 12 + ], + "children": [ + { + "type": "text", + "id": "Ma261", + "name": "Text", + "fill": "$lib:high-emphasis-text", + "content": "Qiita から記事を取得する", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ] + } + ] + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + }, + { + "type": "frame", + "id": "Ma266", + "name": "p（article.css: margin 16-0）", + "width": "fill_container", + "layout": "vertical", + "children": [ + { + "type": "text", + "id": "Ma265", + "name": "Line", + "fill": "$lib:high-emphasis-text", + "content": "投稿すると記事の状態が「投稿済み」に変わり、差分の表示も消えます。", + "lineHeight": 1.7, + "fontFamily": "$lib:font-sans", + "fontSize": 17, + "fontWeight": "$lib:fontWeight-normal", + "textGrowth": "fixed-width", + "width": "fill_container" + } + ], + "padding": [ + 16, + 0, + 0, + 0 + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "imports": { + "lib": "../../shared-library.lib.pen" + }, + "fileToken": "48d68feb-5b1d-4838-9982-f095268d9e69" +} diff --git a/design/shared-library.lib.pen b/design/shared-library.lib.pen new file mode 100644 index 0000000..4fa4427 --- /dev/null +++ b/design/shared-library.lib.pen @@ -0,0 +1,8511 @@ +{ + "version": "2.17", + "children": [ + { + "type": "frame", + "id": "ueDtR", + "x": 0, + "y": 0, + "name": "Button", + "fill": "$surface", + "cornerRadius": 12, + "layout": "vertical", + "gap": "$getSpace(2)", + "padding": "$getSpace(3)", + "children": [ + { + "type": "text", + "id": "jEQUP", + "name": "Title", + "fill": "$high-emphasis-text", + "content": "Button", + "fontFamily": "$font-sans", + "fontSize": "$text-body1", + "fontWeight": "$fontWeight-bold" + }, + { + "type": "frame", + "id": "omQtk", + "name": "Button", + "reusable": true, + "fill": "$green-container", + "cornerRadius": 8, + "padding": [ + "$getSpace(1/2)", + "$getSpace(2)" + ], + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "yKEzF", + "name": "Label", + "fill": "$on-container-text", + "content": "Button", + "lineHeight": "$text-body2-line-height", + "fontFamily": "$font-sans", + "fontSize": "$text-body2", + "fontWeight": "$fontWeight-bold" + } + ], + "context": "qiita-cli の実装に共通の Button コンポーネントは無く、`