@d-zero/scaffold 5.0.0-beta.3 → 5.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-beta.5](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-beta.4...v5.0.0-beta.5) (2025-09-17)
+
+### Bug Fixes
+
+- **scaffold:** add dotenv ([f9e09fb](https://github.com/d-zero-dev/frontend-env/commit/f9e09fbc1e32f99dd0529b5fba40cc8c205471cb))
+- **scaffold:** remove unnecessary async keyword from breadcrumbs function ([2e1e11f](https://github.com/d-zero-dev/frontend-env/commit/2e1e11f29face454705de7b359ab1bc598c549cf))
+- **scaffold:** use rel="icon" for favicon ([af6c9e8](https://github.com/d-zero-dev/frontend-env/commit/af6c9e83c2bd2b454bf54745de0b8275063450d5))
+
+### Features
+
+- **scaffold:** add dynamic breadcrumb generation ([4816002](https://github.com/d-zero-dev/frontend-env/commit/4816002823cb0698cac60858db26bffe081ab8e0))
+- **scaffold:** add dynamic title generation using breadcrumbs ([39fd107](https://github.com/d-zero-dev/frontend-env/commit/39fd1076cd7d722bb97942751bc6f65826f93c1a))
+- **scaffold:** update c-title-page component ([77d8bbe](https://github.com/d-zero-dev/frontend-env/commit/77d8bbe534392b1ae2bd82ea0e0da02287f32ff0))
+- **scaffold:** update layout and template files ([6f95978](https://github.com/d-zero-dev/frontend-env/commit/6f9597865bf66e9d8f336a4e5e9db0462953116b))
+- **scaffold:** update meta mixin, sample page and package config ([f97f141](https://github.com/d-zero-dev/frontend-env/commit/f97f1416ddd2053cdfab38823fe66adfdf3ef5f9))
+- **scaffold:** update template data with Japanese titles ([7c60679](https://github.com/d-zero-dev/frontend-env/commit/7c606797db4a94b527de69b3ec79980fed275f61))
+
+# [5.0.0-beta.4](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2025-08-14)
+
+### Bug Fixes
+
+- **scaffold:** update burger-editor config and sample file format ([e45030d](https://github.com/d-zero-dev/frontend-env/commit/e45030d19b8adbc63ad4aef4d8abb42dcf84aff1))
+- **scaffold:** update CSS to use logical properties and fix formatting ([d2339db](https://github.com/d-zero-dev/frontend-env/commit/d2339db25cd4f227a1476af4b533b69d39c0ccb3))
+
+### Features
+
+- **scaffold:** add 11ty layout files ([fafeb55](https://github.com/d-zero-dev/frontend-env/commit/fafeb557c47d372a3037c94d5d093873ad47b84a))
+- **scaffold:** add sample page for static file production ([f2cacbd](https://github.com/d-zero-dev/frontend-env/commit/f2cacbdf90c237aa7dc80e7bae2a8b80c8732088))
+- **scaffold:** enable prettier by default in eleventy config ([ba539bd](https://github.com/d-zero-dev/frontend-env/commit/ba539bd0228fc86a0e126bd48cd04df41da91f3d))
+- **scaffold:** integrate lint check into build process ([9c99c22](https://github.com/d-zero-dev/frontend-env/commit/9c99c22eeb986ed07a774e82467c82e1403da1fe))
+- **scaffold:** update burger-editor dependencies to 4.0.0-alpha.14 ([3bec3a5](https://github.com/d-zero-dev/frontend-env/commit/3bec3a594af622aff826cd3c9ef29704ad95306b))
+
 # [5.0.0-beta.3](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-beta.2...v5.0.0-beta.3) (2025-07-11)
 
 **Note:** Version bump only for package @d-zero/scaffold

package/__assets/_libs/component/c-content-main.css

@@ -170,7 +170,8 @@
 	}
 
 	.cc-form {
-		margin: 0 auto;
+		margin-block: 0;
+		margin-inline: auto;
 	}
 
 	.cc-form-field-list {
@@ -180,7 +181,8 @@
 
 	.cc-form-fieldset {
 		display: block;
-		padding: 1rem 2rem;
+		padding-block: 1rem;
+		padding-inline: 2rem;
 
 		fieldset {
 			padding: 0;
@@ -208,7 +210,8 @@
 		.required,
 		.optional {
 			display: block;
-			margin: 0 0 0 0.5rem;
+			margin-block: 0;
+			margin-inline: 0 0.5rem;
 			font-size: calc(12 / 18 * 1rem);
 			line-height: 1;
 			border-radius: 0.2rem;
@@ -216,7 +219,8 @@
 	}
 
 	.cc-form-fieldset-attention {
-		margin: 0.5rem 0;
+		margin-block: 0.5rem;
+		margin-inline: 0;
 		font-size: calc(12 / 18 * 1rem);
 		font-weight: normal;
 	}
@@ -226,8 +230,10 @@
 	}
 
 	.mail-field {
-		padding: 0 0 1rem;
-		margin: 0 0 0 1rem;
+		padding-block: 0 1rem;
+		padding-inline: 0;
+		margin-block: 0;
+		margin-inline: 0 1rem;
 
 		&:last-child {
 			border-block-end: 1px solid var(--border-color);
@@ -241,7 +247,7 @@
 				'description description description' auto
 				'error-message error-message error-message' auto
 				/ auto 1fr auto;
-			grid-gap: 0;
+			gap: 0;
 
 			> * {
 				place-self: center flex-start;
@@ -249,7 +255,8 @@
 
 			.mail-before-attachment {
 				grid-area: before-attachment;
-				margin: 0 1rem 0 0;
+				margin-block: 0;
+				margin-inline: 0 1rem;
 
 				&:empty {
 					margin: 0;
@@ -262,7 +269,8 @@
 
 			.mail-after-attachment {
 				grid-area: after-attachment;
-				margin: 0 0 0 1rem;
+				margin-block: 0;
+				margin-inline: 1rem 0;
 
 				&:empty {
 					margin: 0;
@@ -326,7 +334,8 @@
 			}
 
 			select {
-				padding: 0.5rem calc(0.5rem + 24px + 2px) 0.5rem 0.5rem;
+				padding-block: 0.5rem;
+				padding-inline: 0.5rem calc(0.5rem + 24px + 2px);
 				appearance: none;
 				background-image: url('/img/bg-arrow.svg');
 				background-repeat: no-repeat;
@@ -362,7 +371,8 @@
 				input {
 					display: block;
 					padding: 0;
-					margin: 0 0.5rem 0 0;
+					margin-block: 0;
+					margin-inline: 0 0.5rem;
 					line-height: 1;
 				}
 

package/__assets/_libs/component/c-nav-breadcrumb.pug

@@ -1,42 +1,20 @@
 .c-nav-breadcrumb
 	ol(itemscope itemtype="https://schema.org/BreadcrumbList")
-		li.c-nav-breadcrumb__item(
-			itemscope
-			itemprop="itemListElement"
-			itemtype="https://schema.org/ListItem"
-			data-breadcrumb="home")
-			a(
-				href="/"
+		- const HOME_TITLE = "Home";
+		- const linkList = breadcrumbs(page, collections);
+		each link, index in linkList
+			li.c-nav-breadcrumb__item(
 				itemscope
-				itemprop="item"
-				itemtype="https://schema.org/WebPage"
-				itemid="/")
-				span(itemprop="name") Home
-			meta(itemprop="position" content="1")
-			span.c-nav-breadcrumb__separetor
-		li.c-nav-breadcrumb__item(
-			itemscope
-			itemprop="itemListElement"
-			itemtype="https://schema.org/ListItem")
-			a(
-				href="/first/"
-				itemscope
-				itemprop="item"
-				itemtype="https://schema.org/WebPage"
-				itemid="/first/")
-				span(itemprop="name") Parent
-			meta(itemprop="position" content="2")
-			span.c-nav-breadcrumb__separetor
-		li.c-nav-breadcrumb__item(
-			itemscope
-			itemprop="itemListElement"
-			itemtype="https://schema.org/ListItem"
-			data-breadcrumb="current")
-			a(
-				href="/first/about"
-				itemscope
-				itemprop="item"
-				itemtype="https://schema.org/WebPage"
-				itemid="/first/about")
-				span(itemprop="name") Current
-			meta(itemprop="position" content="3")
+				itemprop="itemListElement"
+				itemtype="https://schema.org/ListItem"
+				data-breadcrumb=link.href === "/" ? "home" : undefined)
+				a(
+					href=link.href
+					itemscope
+					itemprop="item"
+					itemtype="https://schema.org/WebPage"
+					itemid=link.href)
+					span(itemprop="name")= link.href === "/" ? HOME_TITLE || link.title : link.title
+				meta(itemprop="position" content=index + 1)
+				if index < linkList.length - 1
+					span.c-nav-breadcrumb__separetor

package/__assets/_libs/component/c-pagination.css

@@ -87,6 +87,7 @@
 }
 
 /* 🐲 baserCMSの仕様上 マルチクラスでしかカレントを定義できない */
+
 /* stylelint-disable selector-class-pattern */
 .c-pagination__number--current {
 	border-block-end: 2px solid var(--border-color);
@@ -95,4 +96,5 @@
 		padding-block-end: 0;
 	}
 }
+
 /* stylelint-enable selector-class-pattern */

package/__assets/_libs/component/c-title-page.pug

@@ -1,2 +1,2 @@
 .c-title-page
-	h1 ページタイトル
+	h1= title

package/__assets/_libs/data/breadcrumbs.js

@@ -0,0 +1,77 @@
+import path from 'node:path';
+
+import { JSDOM } from 'jsdom';
+
+/**
+ *
+ */
+export default function () {
+	return (page, collections) => {
+		const breadcrumbs = collections.all
+			.filter((item) => isAncestor(page, item.filePathStem))
+			.map((item) => ({
+				title: getTitle(item),
+				href: item.page.url,
+				depth: item.page.url.split('/').length,
+			}))
+			.sort((a, b) => a.depth - b.depth);
+		return breadcrumbs;
+	};
+}
+
+/**
+ *
+ * @param page
+ * @param filePathStem
+ */
+function isAncestor(page, filePathStem) {
+	const dirname = path.dirname(filePathStem);
+	const name = path.basename(filePathStem);
+	const included = page.filePathStem.startsWith(dirname);
+	const isIndex = name === 'index';
+	const isSelf = page.filePathStem === filePathStem;
+	return (included && isIndex) || isSelf;
+}
+
+const titleCache = new Map();
+
+/**
+ *
+ * @param item
+ */
+function getTitle(item) {
+	const filePathStem = item.filePathStem;
+	if (titleCache.has(filePathStem)) {
+		return titleCache.get(filePathStem);
+	}
+	const title =
+		item.data.title?.trim() ||
+		getTitleFromDOM(getContent(item)) ||
+		item.page.fileSlug?.trim();
+	titleCache.set(filePathStem, title);
+	return title;
+}
+
+/**
+ *
+ * @param item
+ */
+function getTitleFromDOM(item) {
+	const content = getContent(item);
+	const dom = new JSDOM(content);
+	const title = dom.window.document.title.trim();
+	return title;
+}
+
+/**
+ *
+ * @param item
+ */
+function getContent(item) {
+	try {
+		// UsingCircularTemplateContentReferenceError may potentially occur
+		return item.templateContent;
+	} catch {
+		return null;
+	}
+}

package/__assets/_libs/data/titlelist.js

@@ -0,0 +1,16 @@
+import breadcrumbs from './breadcrumbs.js';
+
+/**
+ *
+ */
+export default async function () {
+	return (page, collections, pkg, separator = ' | ') => {
+		const breadcrumbLinkList = breadcrumbs()(page, collections);
+		const titleList = breadcrumbLinkList
+			.filter((item) => item.href !== '/')
+			.toReversed()
+			.map((item) => item.title);
+		titleList.push(pkg.production?.siteName || '__サイト名__');
+		return titleList.join(separator);
+	};
+}

package/__assets/_libs/layouts/home.pug

@@ -0,0 +1,17 @@
+doctype html
+html(lang=lang || "ja")
+	head
+		include /mixin/meta.pug
+	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 !{ content }
+			.c-page-home__nav-sitemap
+				include /component/c-nav-sitemap.pug
+			.c-page-home__footer
+				include /component/c-footer.pug

package/__assets/_libs/layouts/sub.pug

@@ -0,0 +1,25 @@
+doctype html
+html(lang=lang || "ja")
+	head
+		include /mixin/meta.pug
+	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-body !{ content }
+						if hasPagination
+							.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/_libs/mixin/meta.pug

@@ -1,21 +1,25 @@
-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.css" rel="stylesheet")
-	script(src="/js/script.js" type="module")
+meta(charset="UTF-8")
+meta(name="viewport" content="width=device-width")
+title= titlelist(page, collections, pkg, " | ")
+meta(name="format-detection" content="telephone=no")
+meta(name="description" content=description || "")
+meta(property="og:type" content=ogType || "website")
+if pkg.production.siteName
+	meta(property="og:site_name" content=pkg.production.siteName || "__サイト名__")
+if ogDescription || description
+	meta(property="og:description" content=ogDescription || description || "")
+if pkg.production.host
+	meta(property="og:url" content=pkg.production.host + page.url)
+	meta(property="og:image" content=pkg.production.host + (ogImage || "/img/ogp.png"))
+meta(name="twitter:card" content=ogCard || "summary_large_image")
+meta(name="twitter:url" content=pkg.production.host + page.url)
+if pkg.production.siteName
+	meta(name="twitter:title" content=pkg.production.siteName || "__サイト名__")
+if ogDescription || description
+	meta(name="twitter:description" content=ogDescription || description || "")
+if pkg.production.host
+	meta(name="twitter:image" content=pkg.production.host + (ogImage || "/img/ogp.png"))
+link(rel="icon" href="/favicon.png")
+link(rel="apple-touch-icon" href="/img/apple-touch-icon.png")
+link(href="/css/style.css" rel="stylesheet")
+script(src="/js/script.js" type="module")

package/__assets/_libs/style/general/all.css

@@ -6,4 +6,5 @@
 		box-sizing: border-box;
 	}
 }
+
 /* stylelint-enable selector-max-universal */

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

@@ -0,0 +1,4 @@
+{
+	"layout": "home.pug",
+	"title": "トップページ"
+}

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

@@ -1,20 +1,2 @@
-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
+h2 トップページ
+div トップページ内容

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

@@ -0,0 +1,4 @@
+{
+	"layout": "sub.pug",
+	"title": "下層固定ページ・ブログ詳細ページ"
+}

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

@@ -1,23 +1 @@
-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
+.c-content-main !{ blocks }

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

@@ -0,0 +1,5 @@
+{
+	"layout": "sub.pug",
+	"title": "ブログA一覧ページ",
+	"hasPagination": true
+}

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

@@ -1,40 +1,14 @@
-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
+.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

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

@@ -0,0 +1,5 @@
+{
+	"layout": "sub.pug",
+	"title": "ブログB一覧ページ",
+	"hasPagination": true
+}

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

@@ -1,40 +1,14 @@
-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
+.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

package/__assets/htdocs/__tmpl/300_form_input.json

@@ -0,0 +1,4 @@
+{
+	"layout": "sub.pug",
+	"title": "メールフォーム入力ページ"
+}