@d-zero/scaffold 5.0.0-alpha.10

package/__assets/_libs/data/blocks.cjs

@@ -0,0 +1,6 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+module.exports = fs.readFileSync(path.resolve(__dirname, './blocks.html'), {
+	encoding: 'utf8',
+});

package/__assets/_libs/data/blocks.html

@@ -0,0 +1,101 @@
+<h3>中見出し(テキストブロック内)</h3>
+
+<h4>小見出し(Lv.4)</h4>
+<h5>小見出し(Lv.5)</h5>
+<h6>小見出し(Lv.6)</h6>
+
+<ul>
+	<li>リスト</li>
+	<li>リスト</li>
+	<li>
+		リスト
+		<ul>
+			<li>リスト Lv.2</li>
+			<li>
+				リスト Lv.2
+				<ul>
+					<li>リスト Lv.3</li>
+					<li>リスト Lv.3</li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+</ul>
+
+<ol>
+	<li>番号順リスト</li>
+	<li>番号順リスト</li>
+	<li>番号順リスト</li>
+	<li>番号順リスト</li>
+	<li>
+		番号順リスト
+		<ol>
+			<li>番号順リスト Lv.2</li>
+			<li>番号順リスト Lv.2</li>
+			<li>番号順リスト Lv.2</li>
+			<li>番号順リスト Lv.2</li>
+		</ol>
+	</li>
+</ol>
+
+<blockquote>
+	<p>ブロック引用</p>
+
+	<p>blockquote</p>
+</blockquote>
+
+<p>
+	通常テキスト<strong>太字テキスト</strong><u>下線</u><s>取り消し線</s
+	><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>通常テキスト<strong>太字テキスト</strong><u>下線</u
+	><s>取り消し線</s><sub>下付き文字</sub><sup>上付き文字</sup
+	><a href="./">リンクテキスト</a>
+</p>
+
+<table>
+	<caption>
+		表のキャプション
+	</caption>
+	<tbody>
+		<tr>
+			<th>表の見出し</th>
+			<th>表の見出し</th>
+		</tr>
+		<tr>
+			<td>表のセル</td>
+			<td>表のセル</td>
+		</tr>
+		<tr>
+			<td>表のセル</td>
+			<td>表のセル</td>
+		</tr>
+		<tr>
+			<td>表のセル</td>
+			<td>表のセル</td>
+		</tr>
+	</tbody>
+</table>

package/__assets/_libs/data/data.yml

@@ -0,0 +1,27 @@
+articles:
+  - title: リンゴ
+    # spell-checker:disable-next-line
+    desc: リンゴ（林檎、学名：Malus pumila）は、バラ科リンゴ属の落葉高木樹。またはその果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。
+    time: 2019-01-01
+    url: https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%B3%E3%82%B4
+    img: //upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/250px-Red_Apple.jpg
+    cat:
+      - id: fruit
+        name: 果物
+    tag:
+      - 甘い
+      - 赤
+  - title: みかん
+    # spell-checker:disable-next-line
+    desc: ウンシュウミカン（温州蜜柑、学名：Citrus unshiu）は、ミカン科の常緑低木またはその果実のこと。様々な栽培品種があり、食用として利用される。
+    time: 2019-02-01
+    url: https://ja.wikipedia.org/wiki/%E3%82%A6%E3%83%B3%E3%82%B7%E3%83%A5%E3%82%A6%E3%83%9F%E3%82%AB%E3%83%B3
+    # spell-checker:disable-next-line
+    img: //upload.wikimedia.org/wikipedia/commons/thumb/3/31/Citrus_unshiu_20101127_c.jpg/250px-Citrus_unshiu_20101127_c.jpg
+    cat:
+      - id: fruit
+        name: 果物
+    tag:
+      - 甘い
+      - 酸っぱい
+      - オレンジ

package/__assets/_libs/img/bg-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>

package/__assets/_libs/mixin/meta.pug

@@ -0,0 +1,21 @@
+mixin meta(title)
+	meta(charset="UTF-8")
+	meta(name="viewport" content="width=device-width")
+	title= title
+	meta(name="format-detection" content="telephone=no")
+	meta(name="description" content="__ディスクリプション__")
+	meta(property="og:type" content="website")
+	meta(property="og:title" content="__サイトタイトル__")
+	meta(property="og:site_name" content="__サイトタイトル__")
+	meta(property="og:description" content="__ディスクリプション__")
+	meta(property="og:url" content="__SNSからリンクさせるURL__")
+	meta(property="og:image" content="__OGP用画像__")
+	meta(name="twitter:card" content="summary_large_image")
+	meta(name="twitter:url" content="__SNSからリンクさせるURL__")
+	meta(name="twitter:title" content="__サイトタイトル__")
+	meta(name="twitter:description" content="__ディスクリプション__")
+	meta(name="twitter:image" content="__OGP用画像__")
+	link(rel="shortcut icon" href="/favicon.png")
+	link(rel="apple-touch-icon" href="/img/apple-touch-icon.png")
+	link(href="/css/style.scss" rel="stylesheet")
+	script(src="/js/script.ts" type="module")

package/__assets/_libs/script/index.ts

@@ -0,0 +1,3 @@
+export function helloWorld() {
+	console.log('Hello, world!'); // eslint-disable-line no-console
+}

package/__assets/_libs/style/base/_root.scss

@@ -0,0 +1,30 @@
+@use 'sass:math';
+@use '../theme' as *;
+
+:root {
+	// 配色
+	--base-font-color: #{$darkest-color};
+	--base-font-size: #{$base-font-size * 1px};
+	--base-line-height: #{$base-line-height};
+	--border-color: #{$darkest-color};
+
+	// コンテンツ幅
+	--content-width: #{math.div($breakpoint-sm, $base-font-size) * 1rem};
+	--wide-layout-width: #{math.div($breakpoint-md, $base-font-size) * 1rem};
+
+	// フォントファミリー
+	--font-family-body: #{$font-family-body};
+	--font-family-heading: #{$font-family-heading};
+
+	// 見出し調和数列スケーリング
+	// @see https://standard.shiftbrain.com/blog/music-math-typography
+	--font-size-h1: calc(1em * 8 / 2);
+	--font-size-h2: calc(1em * 8 / 3);
+	--font-size-h3: calc(1em * 8 / 4);
+	--font-size-h4: calc(1em * 8 / 5);
+	--font-size-h5: calc(1em * 8 / 6);
+	--font-size-h6: calc(1em * 8 / 7);
+
+	// 定義
+	font-size: var(--base-font-size);
+}

package/__assets/_libs/style/general/_all.scss

@@ -0,0 +1,11 @@
+@use '../theme' as *;
+
+/* stylelint-disable selector-max-universal -- this is universal selector rules */
+* {
+	&,
+	&::before,
+	&::after {
+		box-sizing: border-box;
+	}
+}
+/* stylelint-enable selector-max-universal */

package/__assets/_libs/style/general/_body.scss

@@ -0,0 +1,10 @@
+@use '../theme' as *;
+
+body {
+	padding: 0;
+	margin: 0;
+	font-family: var(--font-family-body);
+	font-size: 1rem;
+	line-height: var(--base-line-height);
+	color: var(--base-font-color);
+}

package/__assets/_libs/style/general/_button.scss

@@ -0,0 +1,5 @@
+@use '../theme' as *;
+
+button {
+	border-radius: 0;
+}

package/__assets/_libs/style/general/_img.scss

@@ -0,0 +1,6 @@
+@use '../theme' as *;
+
+img {
+	min-inline-size: 0;
+	min-block-size: 0;
+}

package/__assets/_libs/style/theme/_color.scss

@@ -0,0 +1,4 @@
+// サイトで最も明るい色
+$lightest-color: #fff;
+// サイトで最も暗い色
+$darkest-color: #333;

package/__assets/_libs/style/theme/_dimension.scss

@@ -0,0 +1,53 @@
+// # タイポグラフィ
+// @see https://techblog.yahoo.co.jp/entry/2023052430423559/
+$base-font-size: 17;
+$base-line-height: 1.8;
+
+// # 寸法
+//
+$breakpoint-xs: 576;
+$breakpoint-sm: 768;
+$breakpoint-md: 992;
+$breakpoint-lg: 1200;
+
+// xsのみ
+@custom-media --xs (max-width: #{$breakpoint-xs * 1px});
+
+// smのみ
+@custom-media --sm (min-width: #{$breakpoint-xs * 1px}) and (max-width: #{$breakpoint-sm * 1px - 1px});
+
+// mdのみ
+@custom-media --md (min-width: #{$breakpoint-sm * 1px}) and (max-width: #{$breakpoint-md * 1px - 1px});
+
+// lgのみ
+@custom-media --lg (min-width: #{$breakpoint-md * 1px}) and (max-width: #{$breakpoint-lg * 1px - 1px});
+
+// xlのみ
+@custom-media --xl (min-width: #{$breakpoint-lg * 1px});
+
+// xs以下 = xsのみ
+@custom-media --xs-lte (max-width: #{$breakpoint-xs * 1px - 1px});
+
+// sm以下
+@custom-media --sm-lte (max-width: #{$breakpoint-sm * 1px - 1px});
+
+// md以下
+@custom-media --md-lte (max-width: #{$breakpoint-md * 1px - 1px});
+
+// lg以下
+@custom-media --lg-lte (max-width: #{$breakpoint-lg * 1px - 1px});
+
+// xs超え
+@custom-media --xs-gt (min-width: #{$breakpoint-xs * 1px});
+
+// sm超え
+@custom-media --sm-gt (min-width: #{$breakpoint-sm * 1px});
+
+// md超え
+@custom-media --md-gt (min-width: #{$breakpoint-md * 1px});
+
+// lg超え
+@custom-media --lg-gt (min-width: #{$breakpoint-lg * 1px});
+
+// high resolution
+@custom-media --hr (min-resolution: 2dppx);

package/__assets/_libs/style/theme/_font.scss

@@ -0,0 +1,2 @@
+$font-family-body: sans-serif;
+$font-family-heading: Helvetica, $font-family-body;

package/__assets/_libs/style/theme/_index.scss

@@ -0,0 +1,3 @@
+@forward 'color';
+@forward 'dimension';
+@forward 'font';

package/__assets/htdocs/.eslintrc

@@ -0,0 +1,10 @@
+{
+	"extends": ["../../.eslintrc.cjs"],
+	"env": {
+		"node": false,
+		"browser": true,
+		"jquery": true,
+		"es6": true,
+		"commonjs": true
+	}
+}

package/__assets/htdocs/__tmpl/.markuplintrc

@@ -0,0 +1,19 @@
+{
+	"extends": ["../../../.markuplintrc"],
+	"nodeRules": [
+		{
+			"selector": "link, script",
+			"rules": {
+				"invalid-attr": {
+					"options": {
+						"allowAttrs": {
+							"⚠️": {
+								"type": "Any"
+							}
+						}
+					}
+				}
+			}
+		}
+	]
+}

package/__assets/htdocs/__tmpl/000_home.pug

@@ -0,0 +1,20 @@
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__サイトタイトル__')
+	body.c-page-home
+		.c-page-home__base
+			.c-page-home__header
+				- const isHome = true;
+				include /component/_c-header.pug
+			.c-page-home__nav-global
+				include /component/_c-nav-global.pug
+
+			.c-page-home__main
+				main
+					h2 メイン
+
+			.c-page-home__nav-sitemap
+				include /component/_c-nav-sitemap.pug
+			.c-page-home__footer
+				include /component/_c-footer.pug

package/__assets/htdocs/__tmpl/100_sub.pug

@@ -0,0 +1,23 @@
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__ページタイトル__ | __サイトタイトル__')
+	body.c-page-sub
+		.c-page-sub__base
+			.c-page-sub__header
+				include /component/_c-header.pug
+			.c-page-sub__nav-global
+				include /component/_c-nav-global.pug
+			.c-page-sub__main
+				main
+					article.c-page-sub__content
+						.c-page-sub__title-page
+							include /component/_c-title-page.pug
+						.c-page-sub__nav-breadcrumb
+							include /component/_c-nav-breadcrumb.pug
+						.c-page-sub__content-main
+							.c-content-main !{ blocks }
+			.c-page-sub__nav-sitemap
+				include /component/_c-nav-sitemap.pug
+			.c-page-sub__footer
+				include /component/_c-footer.pug

package/__assets/htdocs/__tmpl/200_blog_index.pug

@@ -0,0 +1,40 @@
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__ページタイトル__ | __サイトタイトル__')
+	body.c-page-sub
+		.c-page-sub__base
+			.c-page-sub__header
+				include /component/_c-header.pug
+			.c-page-sub__nav-global
+				include /component/_c-nav-global.pug
+
+			.c-page-sub__main
+				main
+					article.c-page-sub__content
+						.c-page-sub__title-page
+							include /component/_c-title-page.pug
+						.c-page-sub__nav-breadcrumb
+							include /component/_c-nav-breadcrumb.pug
+						.c-page-sub__content-index
+							.c-content-index
+								.c-content-index__categories
+									// ⚠️ CMS要件:
+									// - ページがカテゴリーインデックスの場合は aria-current="page" を付加する
+									// - カテゴリーインデックスではなく、カテゴリーに属するページでは aria-current="page" は付加しない
+									ul
+										li: a(href="__PATH_TO__"): span ALL
+										li: a(href="__PATH_TO__" aria-current="page"): span カテゴリー1
+										li: a(href="__PATH_TO__"): span カテゴリー2
+										li: a(href="__PATH_TO__"): span カテゴリー3
+								.c-content-index__body
+									.c-media-list
+										each article in data.articles
+											include /component/_c-media.pug
+						.c-page-sub__pagination
+							include /component/_c-pagination.pug
+
+			.c-page-sub__nav-sitemap
+				include /component/_c-nav-sitemap.pug
+			.c-page-sub__footer
+				include /component/_c-footer.pug

package/__assets/htdocs/__tmpl/210_blog_index.pug

@@ -0,0 +1,40 @@
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__ページタイトル__ | __サイトタイトル__')
+	body.c-page-sub
+		.c-page-sub__base
+			.c-page-sub__header
+				include /component/_c-header.pug
+			.c-page-sub__nav-global
+				include /component/_c-nav-global.pug
+
+			.c-page-sub__main
+				main
+					article.c-page-sub__content
+						.c-page-sub__title-page
+							include /component/_c-title-page.pug
+						.c-page-sub__nav-breadcrumb
+							include /component/_c-nav-breadcrumb.pug
+						.c-page-sub__content-index
+							.c-content-index
+								.c-content-index__categories
+									// ⚠️ CMS要件:
+									// - ページがカテゴリーインデックスの場合は aria-current="page" を付加する
+									// - カテゴリーインデックスではなく、カテゴリーに属するページでは aria-current="page" は付加しない
+									ul
+										li: a(href="__PATH_TO__"): span ALL
+										li: a(href="__PATH_TO__" aria-current="page"): span カテゴリー1
+										li: a(href="__PATH_TO__"): span カテゴリー2
+										li: a(href="__PATH_TO__"): span カテゴリー3
+								.c-content-index__body
+									.c-card-list
+										each article in data.articles
+											include /component/_c-card.pug
+						.c-page-sub__pagination
+							include /component/_c-pagination.pug
+
+			.c-page-sub__nav-sitemap
+				include /component/_c-nav-sitemap.pug
+			.c-page-sub__footer
+				include /component/_c-footer.pug