Skip to content

refactor(scaffold): rename c-page-* to l-* and add p-* page styles #881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
yusasa16 wants to merge 2 commits into
base: dev
Choose a base branch
from
Draft

refactor(scaffold): rename c-page-* to l-* and add p-* page styles #881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
64daa3a
refactor(scaffold): rename c-page-* to l-* and add p-* page styles
yusasa16 Mar 10, 2026
73c96d6
test(create-frontend): update expected files for scaffold layout refa…
yusasa16 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 24 additions & 9 deletions packages/@d-zero/create-frontend/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ function expectedBasercms4(dir) {
`✔ ++ ${dir}/__assets/_libs/component/c-card-list.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-main.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.pug`,
Expand All @@ -55,12 +56,16 @@ function expectedBasercms4(dir) {
`✔ ++ ${dir}/__assets/_libs/component/c-nav-global.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.pug`,
`✔ ++ ${dir}/__assets/_libs/component/l-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/l-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-blog-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-form.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-sub-default.css`,
`✔ ++ ${dir}/__assets/_libs/data/.markuplintrc`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks-v2.html`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks.html`,
Expand Down Expand Up @@ -204,7 +209,8 @@ describe('CLI', () => {
`✔ ++ ${dir}/__assets/_libs/component/c-card-list.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-main.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.pug`,
Expand All @@ -219,12 +225,16 @@ describe('CLI', () => {
`✔ ++ ${dir}/__assets/_libs/component/c-nav-global.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.pug`,
`✔ ++ ${dir}/__assets/_libs/component/l-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/l-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-blog-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-form.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-sub-default.css`,
`✔ ++ ${dir}/__assets/_libs/data/.markuplintrc`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks-v2.html`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks.html`,
Expand Down Expand Up @@ -292,7 +302,8 @@ describe('CLI', () => {
`✔ ++ ${dir}/__assets/_libs/component/c-card-list.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-card.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-categories.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-content-main.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-footer.pug`,
Expand All @@ -307,12 +318,16 @@ describe('CLI', () => {
`✔ ++ ${dir}/__assets/_libs/component/c-nav-global.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-nav-sitemap.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-page-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-pagination.pug`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.css`,
`✔ ++ ${dir}/__assets/_libs/component/c-title-page.pug`,
`✔ ++ ${dir}/__assets/_libs/component/l-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/l-sub.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-blog-index.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-form.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-home.css`,
`✔ ++ ${dir}/__assets/_libs/component/p-sub-default.css`,
`✔ ++ ${dir}/__assets/_libs/data/.markuplintrc`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks-v2.html`,
`✔ ++ ${dir}/__assets/_libs/data/bge-blocks.html`,
Expand Down
7 changes: 7 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/c-categories.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.c-categories {
li:has([aria-current='page']) {
&::before {
content: '-';
}
}
}
9 changes: 9 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/c-categories.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.c-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
8 changes: 0 additions & 8 deletions packages/@d-zero/scaffold/__assets/_libs/component/c-content-index.css
View file
Open in desktop

This file was deleted.

14 changes: 7 additions & 7 deletions .../__assets/_libs/component/c-page-home.css → ...ffold/__assets/_libs/component/l-home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.c-page-home {
.l-home {
inline-size: 100%;
block-size: 100%;
}

.c-page-home__base {
.l-home__base {
display: block grid;
grid-template:
'header' auto
Expand All @@ -16,15 +16,15 @@
block-size: 100%;
}

.c-page-home__header {
.l-home__header {
grid-area: header;
}

.c-page-home__nav-global {
.l-home__nav-global {
grid-area: nav-global;
}

.c-page-home__main {
.l-home__main {
grid-area: main;

> * {
Expand All @@ -34,10 +34,10 @@
}
}

.c-page-home__nav-sitemap {
.l-home__nav-sitemap {
grid-area: nav-sitemap;
}

.c-page-home__footer {
.l-home__footer {
grid-area: footer;
}
24 changes: 12 additions & 12 deletions ...d/__assets/_libs/component/c-page-sub.css → ...affold/__assets/_libs/component/l-sub.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.c-page-sub {
.l-sub {
inline-size: 100%;
block-size: 100%;
}

.c-page-sub__base {
.l-sub__base {
display: block grid;
grid-template:
'header' auto
Expand All @@ -15,49 +15,49 @@
block-size: 100%;
}

.c-page-sub__header {
.l-sub__header {
grid-area: header;
}

.c-page-sub__nav-global {
.l-sub__nav-global {
grid-area: nav-global;
}

.c-page-sub__main {
.l-sub__main {
grid-area: main;
}

.c-page-sub__nav-sitemap {
.l-sub__nav-sitemap {
grid-area: nav-sitemap;
}

.c-page-sub__footer {
.l-sub__footer {
grid-area: footer;
}

.c-page-sub__content {
.l-sub__content {
padding-inline: 2em;
}

.c-page-sub__title-page {
.l-sub__title-page {
max-inline-size: var(--wide-layout-width);
margin-block-end: 1em;
margin-inline: auto;
}

.c-page-sub__nav-breadcrumb {
.l-sub__nav-breadcrumb {
max-inline-size: var(--wide-layout-width);
margin-block-end: 2em;
margin-inline: auto;
}

.c-page-sub__content-index {
.l-sub__content-index {
max-inline-size: var(--content-width);
padding-block-end: calc(60 / 17 * 1em);
margin-inline: auto;
}

.c-page-sub__content-main {
.l-sub__content-main {
max-inline-size: var(--content-width);
margin-inline: auto;
}
16 changes: 16 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/p-blog-index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.p-blog-index {
display: block grid;
grid-template:
'categories' auto
'.' 2rem
'body' 1fr
/ 1fr;
}

.p-blog-index__categories {
grid-area: categories;
}

.p-blog-index__body {
grid-area: body;
}
10 changes: 10 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/p-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.p-form {
display: block grid;
grid-template:
'main' 1fr
/ 1fr;
}

.p-form__main {
grid-area: main;
}
10 changes: 10 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/p-home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.p-home {
display: block grid;
grid-template:
'main' 1fr
/ 1fr;
}

.p-home__main {
grid-area: main;
}
10 changes: 10 additions & 0 deletions packages/@d-zero/scaffold/__assets/_libs/component/p-sub-default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.p-sub-default {
display: block grid;
grid-template:
'main' 1fr
/ 1fr;
}

.p-sub-default__main {
grid-area: main;
}
14 changes: 7 additions & 7 deletions packages/@d-zero/scaffold/__assets/_libs/layouts/home.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ doctype html
html(lang=lang || "ja")
head
include /mixin/meta.pug
body.c-page-home
.c-page-home__base
.c-page-home__header
body.l-home
.l-home__base
.l-home__header
- const isHome = true;
include /component/c-header.pug
.c-page-home__nav-global
.l-home__nav-global
include /component/c-nav-global.pug
.c-page-home__main
.l-home__main
main !{ content }
.c-page-home__nav-sitemap
.l-home__nav-sitemap
include /component/c-nav-sitemap.pug
.c-page-home__footer
.l-home__footer
include /component/c-footer.pug
24 changes: 12 additions & 12 deletions packages/@d-zero/scaffold/__assets/_libs/layouts/sub.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ doctype html
html(lang=lang || "ja")
head
include /mixin/meta.pug
body.c-page-sub
.c-page-sub__base
.c-page-sub__header
body.l-sub
.l-sub__base
.l-sub__header
include /component/c-header.pug
.c-page-sub__nav-global
.l-sub__nav-global
include /component/c-nav-global.pug
.c-page-sub__main
.l-sub__main
main
article.c-page-sub__content
.c-page-sub__title-page
article.l-sub__content
.l-sub__title-page
include /component/c-title-page.pug
.c-page-sub__nav-breadcrumb
.l-sub__nav-breadcrumb
include /component/c-nav-breadcrumb.pug
.c-page-sub__content-body !{ content }
.l-sub__content-body !{ content }
if hasPagination
.c-page-sub__pagination
.l-sub__pagination
include /component/c-pagination.pug
.c-page-sub__nav-sitemap
.l-sub__nav-sitemap
include /component/c-nav-sitemap.pug
.c-page-sub__footer
.l-sub__footer
include /component/c-footer.pug
6 changes: 4 additions & 2 deletions packages/@d-zero/scaffold/__assets/htdocs/__tmpl/000_home.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
h2 トップページ
div トップページ内容
.p-home
.p-home__main
h2 トップページ
div トップページ内容
4 changes: 3 additions & 1 deletion packages/@d-zero/scaffold/__assets/htdocs/__tmpl/100_sub.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
.c-content-main !{ blocks }
.p-sub-default
.p-sub-default__main
.c-content-main !{ blocks }
15 changes: 4 additions & 11 deletions packages/@d-zero/scaffold/__assets/htdocs/__tmpl/200_blog_index.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
.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
.p-blog-index
.p-blog-index__categories
include /component/c-categories.pug
.p-blog-index__body
.c-media-list
each article in data.articles
include /component/c-media.pug
15 changes: 4 additions & 11 deletions packages/@d-zero/scaffold/__assets/htdocs/__tmpl/210_blog_index.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
.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
.p-blog-index
.p-blog-index__categories
include /component/c-categories.pug
.p-blog-index__body
.c-card-list
each article in data.articles
include /component/c-card.pug
Loading