Skip to content

Commit 686c332

Browse files
evannotfoundevannotfound
committed
refactor(layout): route page chrome through page router
- Move home banner and post tools rendering into router regions - Consolidate main content wrappers and home post card ownership - Prefer named responsive utilities and content width tokens
1 parent 3dce5a4 commit 686c332

20 files changed

Lines changed: 203 additions & 173 deletions

File tree

‎layout/components/local-search.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<dialog id="local-search" class="search m-auto h-[80%] w-[70%] max-w-none scale-95 overflow-hidden rounded-3xl border-0 bg-rd-background-100 p-0 transition-transform duration-300 open:scale-100 max-[768px]:w-[80%] max-[640px]:w-[90%]" aria-labelledby="local-search-label">
1+
<dialog id="local-search" class="search m-auto h-[80%] w-9/10 max-w-none scale-95 overflow-hidden rounded-3xl border-0 bg-rd-background-100 p-0 transition-transform duration-300 open:scale-100 sm:w-4/5 md:w-7/10" aria-labelledby="local-search-label">
22
<div class="flex bg-rd-gray-300 p-2.5">
33
<button type="button" data-search-action="clear" class="flex items-center px-2.5 text-[1.2rem] text-rd-gray-900" aria-label="Clear search" title="Clear search">
44
<i class="fa-solid fa-keyboard" aria-hidden="true"></i>

‎layout/components/navbar.ejs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}) %>
1010
</a>
1111
<% } %>
12-
<a data-navbar-close class="translate-y-px font-title text-[1.7rem] leading-none font-[520] text-rd-gray-1000 max-[768px]:text-[1.53rem] max-[640px]:text-[1.36rem]" href="<%= config.root %>">
12+
<a data-navbar-close class="translate-y-px font-title text-[1.36rem] leading-none font-[520] text-rd-gray-1000 sm:text-[1.53rem] md:text-[1.7rem]" href="<%= config.root %>">
1313
<% if (is_home()) { %>
1414
<h1 class="m-0 text-inherit leading-inherit font-inherit"><%= theme.info.title || config.title || 'Redefine Theme' %></h1>
1515
<% } else { %>
@@ -19,7 +19,7 @@
1919
</div>
2020

2121
<div class="flex items-center">
22-
<ul class="flex items-center gap-6 max-[768px]:hidden">
22+
<ul class="flex items-center gap-6 max-md:hidden">
2323
<% for (let i in theme.navbar.links) { %>
2424
<% if (theme.navbar.links[i].path !== 'none') { %>
2525
<%
@@ -62,13 +62,13 @@
6262
<% } %>
6363
</ul>
6464

65-
<div class="hidden items-center justify-between max-[768px]:flex">
65+
<div class="hidden items-center justify-between max-md:flex">
6666
<% if (theme.navbar.search.enable === true) { %>
67-
<button type="button" data-search-trigger aria-label="<%= __('search') %>" title="<%= __('search') %>" class="relative ml-3 hidden h-5 w-5 items-center justify-center text-lg text-rd-gray-1000 first:ml-0 max-[768px]:flex [&_i]:!text-inherit">
67+
<button type="button" data-search-trigger aria-label="<%= __('search') %>" title="<%= __('search') %>" class="relative ml-3 hidden h-5 w-5 items-center justify-center text-lg text-rd-gray-1000 first:ml-0 max-md:flex [&_i]:!text-inherit">
6868
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
6969
</button>
7070
<% } %>
71-
<button id="navbar-toggle" type="button" aria-controls="navbar-drawer" aria-expanded="false" aria-label="Navigation" title="Navigation" class="relative ml-3 hidden h-5 w-5 items-center justify-center text-rd-gray-1000 first:ml-0 max-[768px]:flex">
71+
<button id="navbar-toggle" type="button" aria-controls="navbar-drawer" aria-expanded="false" aria-label="Navigation" title="Navigation" class="relative ml-3 hidden h-5 w-5 items-center justify-center text-rd-gray-1000 first:ml-0 max-md:flex">
7272
<span class="navbar-toggle-line" aria-hidden="true"></span>
7373
</button>
7474
</div>

‎layout/components/page-panel.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="box-border mb-8 rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 p-8 shadow-rd max-[768px]:mb-6 max-[768px]:p-6 max-[640px]:mb-4 max-[640px]:rounded-none max-[640px]:border-0 max-[640px]:px-[0.2rem] max-[640px]:py-[1.2rem] max-[640px]:shadow-none">
1+
<div class="box-border mb-8 rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 p-8 shadow-rd max-md:mb-6 max-md:p-6 max-sm:mb-4 max-sm:rounded-none max-sm:border-0 max-sm:px-[0.2rem] max-sm:py-[1.2rem] max-sm:shadow-none">
22
<% if (pageBody) { %><%- pageBody %><% } %>
33

44
<div class="markdown-body text-rd-gray-1000">

‎layout/components/side-tools.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<%
2-
const toolClass = "mb-[5px] flex h-[42px] w-[42px] shrink-0 cursor-pointer items-center justify-center rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 text-[1.3rem] text-rd-gray-1000 shadow-rd hover:!bg-primary hover:!text-rd-primary-text [&_i]:!text-inherit max-[768px]:mb-0.5 max-[768px]:h-[37.8px] max-[768px]:w-[37.8px] max-[768px]:text-[1.17rem]";
2+
const toolClass = "mb-[5px] flex h-[42px] w-[42px] shrink-0 cursor-pointer items-center justify-center rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 text-[1.3rem] text-rd-gray-1000 shadow-rd hover:!bg-primary hover:!text-rd-primary-text [&_i]:!text-inherit max-md:mb-0.5 max-md:h-[37.8px] max-md:w-[37.8px] max-md:text-[1.17rem]";
33
%>
44
<div>
55
<div id="side-tools-menu" data-state="closed" class="translate-x-[250%] opacity-0 transition-[transform,opacity] duration-200 ease-in-out data-[state=open]:translate-x-0 data-[state=open]:opacity-100">
@@ -35,7 +35,7 @@
3535
</button>
3636
<% } %>
3737
<% if (theme.plugins.aplayer.enable && theme.plugins.aplayer.type === "mini") { %>
38-
<div data-side-tool class="<%= toolClass %> max-[768px]:hidden" aria-hidden="true"></div>
38+
<div data-side-tool class="<%= toolClass %> max-md:hidden" aria-hidden="true"></div>
3939
<% } %>
4040
</div>
4141
</div>

‎layout/page.ejs‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,24 @@
77
<% if (theme.global.preloader === true || theme.global.preloader.enable === true) { %>
88
<%- partial('components/preloader') %>
99
<% } %>
10-
<% const hasFixedHomeBanner = theme.home_banner.enable === true && currentPageKind === 'home' && theme.home_banner.style === "fixed"; %>
11-
<main class="relative box-border h-auto w-full bg-rd-background-100 max-[768px]:!pr-0" id="swup" data-home-banner="<%= hasFixedHomeBanner ? 'fixed' : 'none' %>">
12-
13-
<% if (theme.home_banner.enable === true && currentPageKind === 'home' && !page.prev) { %>
14-
<%- partial('pages/home/home-banner') %>
15-
<% } else if (theme.home_banner.enable === true && currentPageKind === 'home' && page.prev && theme.home_banner.style === "fixed") { %>
16-
<%- partial('pages/home/home-banner-image', {fixed: true, blurred: true}) %>
17-
<% } %>
10+
<main class="relative box-border h-auto w-full bg-rd-background-100" id="swup">
11+
<%- partial('pages/router', {pageKind: currentPageKind, region: 'before-shell'}) %>
1812

1913
<div id="page-shell" class="relative flex min-h-dvh flex-col justify-between pt-[var(--current-navbar-height)] transition-[padding] duration-200 ease-linear">
20-
<div id="page-header" data-state="visible" class="fixed top-0 right-0 z-5 box-border h-[var(--current-navbar-height)] w-full transition-[transform,padding-left,height] duration-200 ease-out data-[state=hidden]:-translate-y-[105%] max-[768px]:!pl-0">
14+
<div id="page-header" data-state="visible" class="fixed top-0 right-0 z-5 box-border h-[var(--current-navbar-height)] w-full transition-[transform,padding-left,height] duration-200 ease-out data-[state=hidden]:-translate-y-[105%] max-md:!pl-0">
2115
<%- partial('components/navbar') %>
2216
</div>
2317

24-
<div id="page-content" class="transition-fade-up box-border flex w-full justify-center py-10 max-[768px]:py-8 max-[640px]:pt-0 max-[640px]:!border-0">
25-
<% if (currentPageKind === 'home' && theme.home.sidebar.enable === true && theme.home.sidebar.position === "left") { %>
26-
<%- partial('pages/home/sidebar') %>
27-
<% } %>
28-
29-
<div id="main-content" data-toc-state="closed" class="relative box-border h-full w-[80%] max-w-[var(--content-max-width)] transition-[max-width,width] duration-200 ease-in-out data-[toc-state=open]:!max-w-[var(--content-with-toc-max-width)] max-[768px]:w-[86%] max-[640px]:w-[90%]">
30-
<%- partial('pages/router', {pageKind: currentPageKind}) %>
31-
</div>
32-
33-
<% if (currentPageKind === 'home' && theme.home.sidebar.enable === true && theme.home.sidebar.position === "right") { %>
34-
<%- partial('pages/home/sidebar') %>
35-
<% } %>
18+
<div id="page-content" class="transition-fade-up box-border flex w-full justify-center py-10 max-md:py-8 max-sm:pt-0">
19+
<%- partial('pages/router', {pageKind: currentPageKind, region: 'content'}) %>
3620
</div>
3721

3822
<%- partial('components/footer') %>
3923
</div>
4024

41-
<% if (currentPageKind === 'post') { %>
42-
<aside class="fixed top-[calc(var(--current-navbar-height)+2.5rem)] right-10 transition-[top] duration-200 ease-in-out max-[768px]:right-2.5 max-[768px]:origin-top-right max-[768px]:scale-[0.82] max-[640px]:hidden">
43-
<%- partial('pages/post/tools') %>
44-
</aside>
45-
<% } %>
25+
<%- partial('pages/router', {pageKind: currentPageKind, region: 'after-shell'}) %>
4626

47-
<aside id="side-tools" data-state="visible" class="fixed right-10 bottom-[5%] opacity-100 transition-opacity duration-200 data-[state=hidden]:pointer-events-none data-[state=hidden]:opacity-0 max-[640px]:right-3">
27+
<aside id="side-tools" data-state="visible" class="fixed right-10 bottom-[5%] opacity-100 transition-opacity duration-200 data-[state=hidden]:pointer-events-none data-[state=hidden]:opacity-0 max-sm:right-3">
4828
<%- partial('components/side-tools') %>
4929
</aside>
5030

‎layout/pages/archive.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="box-border mb-8 rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 p-8 shadow-rd max-[768px]:mb-6 max-[768px]:p-6 max-[640px]:mb-4 max-[640px]:rounded-none max-[640px]:border-0 max-[640px]:p-6 max-[640px]:shadow-none">
1+
<div class="box-border mb-8 rounded-2xl border border-rd-gray-alpha-400 bg-rd-background-100 p-8 shadow-rd max-md:mb-6 max-md:p-6 max-sm:mb-4 max-sm:rounded-none max-sm:border-0 max-sm:p-6 max-sm:shadow-none">
22
<%- partial('components/posts-list', {posts: page.posts}) %>
33
</div>

‎layout/pages/category.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="mb-10 border-b border-rd-gray-alpha-400 pb-5 text-[2.8rem] font-semibold text-rd-gray-1000 max-[768px]:text-[2.52rem] max-[640px]:text-[2.24rem] [&_i]:!text-inherit">
1+
<div class="mb-10 border-b border-rd-gray-alpha-400 pb-5 text-[2.24rem] font-semibold text-rd-gray-1000 sm:text-[2.52rem] md:text-[2.8rem] [&_i]:!text-inherit">
22
<i class="fa-solid fa-folder" aria-hidden="true"></i>&nbsp;<%= page.category %>
33
</div>
44
<%- partial('components/posts-list', {posts: page.posts}) %>

‎layout/pages/home/banner-region.ejs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<% if (theme.home_banner.enable === true && !page.prev) { %>
2+
<div data-home-banner="<%= theme.home_banner.style === 'fixed' ? 'fixed' : 'static' %>">
3+
<%- partial('pages/home/home-banner') %>
4+
</div>
5+
<% } else if (theme.home_banner.enable === true && page.prev && theme.home_banner.style === 'fixed') { %>
6+
<div data-home-banner="fixed">
7+
<%- partial('pages/home/home-banner-image', {fixed: true, blurred: true}) %>
8+
</div>
9+
<% } %>

‎layout/pages/home/home-banner.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<%- partial('pages/home/home-banner-image', {fixed: false, blurred: false}) %>
88
<% } %>
99
<div class="transition-fade-down relative mt-8 flex min-h-[90vh] box-border flex-col items-center justify-center">
10-
<div class="home-title flex w-screen flex-col items-center justify-center text-center text-[length:var(--home-title-size)] leading-[var(--home-line-height)] font-medium text-home-banner-text-color max-[768px]:text-[length:calc(var(--home-title-size)*0.9)]">
10+
<div class="home-title flex w-screen flex-col items-center justify-center text-center text-[length:calc(var(--home-title-size)*0.9)] leading-[var(--home-line-height)] font-medium text-home-banner-text-color md:text-[length:var(--home-title-size)]">
1111
<%- theme.home_banner.title || theme.style.first_screen.description || config.description %>
1212
<% const subtitleConfig = theme.home_banner.subtitle || {}; %>
1313
<% const subtitleText = subtitleConfig.text; %>

‎layout/pages/home/index.ejs‎

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,19 @@
1-
<div class="<%= theme.home.sidebar.enable === true && theme.home.sidebar.position === 'right' ? 'ml-10 max-[768px]:ml-0' : '' %> <%= theme.home.sidebar.enable === true && theme.home.sidebar.position === 'left' ? 'mr-10 max-[768px]:mr-0' : '' %>">
1+
<% if (theme.home.sidebar.enable === true && theme.home.sidebar.position === 'left') { %>
2+
<%- partial('pages/home/sidebar') %>
3+
<% } %>
4+
5+
<div id="main-content" class="relative box-border h-full w-9/10 max-w-content transition-[max-width,width] duration-200 ease-in-out sm:w-6/7 md:w-4/5 <%= theme.home.sidebar.enable === true && theme.home.sidebar.position === 'right' ? 'md:ml-10' : '' %> <%= theme.home.sidebar.enable === true && theme.home.sidebar.position === 'left' ? 'md:mr-10' : '' %>">
26
<ul>
37
<% page.posts.forEach(post => { %>
4-
<!-- using ring to avoid border wrapping around post thumbnail -->
5-
<li data-home-card class="relative flex box-border flex-col mb-10 overflow-hidden rounded-2xl ring-inset ring ring-rd-gray-alpha-400 bg-rd-background-100 max-[768px]:mb-8 max-[640px]:mb-6 group">
6-
<% if (post.sticky) { %>
7-
<div data-sticky-label class="absolute top-3 right-3 z-10 cursor-default rounded-full border border-rd-gray-alpha-400 bg-rd-background-100/15 px-2.5 py-0.5 text-xs text-rd-gray-900 hover:text-rd-gray-1000">
8-
<i class="fa-regular fa-thumbtack mr-[3px] text-[0.65rem]" aria-hidden="true"></i><%- __('sticky') %>
9-
</div>
10-
<% } %>
11-
12-
<%
13-
let articleThumbnail = "";
14-
if (post.cover || post.banner || (post.thumbnail && post.thumbnail !== false)) {
15-
if (post.thumbnail && post.thumbnail !== null) {
16-
articleThumbnail = post.thumbnail;
17-
} else if (post.cover && post.cover.includes("/")) {
18-
articleThumbnail = post.cover;
19-
} else if (post.banner && post.banner.includes("/")) {
20-
articleThumbnail = post.banner;
21-
} else if (config.marked.postAsset === true) {
22-
articleThumbnail = [post.path, post.cover || post.banner].join("/");
23-
}
24-
}
25-
%>
26-
27-
<% if (post.thumbnail !== false && (post.thumbnail || post.cover || post.banner)) { %>
28-
<div class="relative h-[150px] w-full overflow-hidden -mb-1">
29-
<a href="<%- url_for(post.path) %>">
30-
<img src="<%- url_for(articleThumbnail) %>" alt="<%= post.title %>" class="absolute top-1/2 h-full w-full -translate-y-1/2 object-cover transition-all dark:brightness-75 group-hover:scale-102 duration-500" />
31-
</a>
32-
</div>
33-
<% } %>
34-
<div class="flex flex-col gap-4 p-6">
35-
<h3 class="relative m-0 font-[family-name:var(--font-article-title)] text-[1.4rem] leading-normal font-semibold text-rd-gray-1000 max-[768px]:text-[1.3rem] max-[640px]:text-[1.2rem]">
36-
<a href="<%- url_for(post.path) %>"><%= post.title %></a>
37-
</h3>
38-
39-
<div class="markdown-body text-justify text-rd-gray-1000 [overflow-wrap:break-word]">
40-
<% if (post.excerpt && post.excerpt == "false") { %>
41-
<% } else if (post.excerpt && post.excerpt !== "false") { %>
42-
<%- render(post.excerpt, "markdown") %>
43-
<% } else { %>
44-
<% const excerptLength = theme.home.excerpt_length || 200; %>
45-
<%- truncate(strip_html(post.content), {length: excerptLength}) %>
46-
<% } %>
47-
</div>
48-
49-
<%- partial('pages/home/post-card', {post}) %>
50-
</div>
51-
</li>
8+
<%- partial('pages/home/post-card', {post}) %>
529
<% }) %>
5310
</ul>
5411

5512
<div class="px-7 py-5">
5613
<%- partial('components/paginator') %>
5714
</div>
5815
</div>
16+
17+
<% if (theme.home.sidebar.enable === true && theme.home.sidebar.position === 'right') { %>
18+
<%- partial('pages/home/sidebar') %>
19+
<% } %>

0 commit comments

Comments
 (0)