smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 14:34:23 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge 883f4e60684988a9ca6deeb79dc0ea618f3b450f into 91189dfd2f4cb32e205117b327e0ae7a0c2dd716

Browse Source
This commit is contained in:
Ivan Chernov 2025-02-03 09:26:02 -05:00 committed by GitHub
commit 0855a3821b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
quartz/components/ContentMeta.tsx
View File

@ -1,4 +1,4 @@
import { Date, getDate } from "./Date"
import { formatDate, getDate } from "./Date"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time"
import { classNames } from "../util/lang"
@ -30,7 +30,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
const segments: (string | JSX.Element)[] = []
if (fileData.dates) {
segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
segments.push(formatDate(getDate(cfg, fileData)!))
}
// Display reading time if enabled

2
quartz/components/Date.tsx
View File

@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
}
export function Date({ date, locale }: Props) {
return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
return <>{formatDate(date, locale)}</>
}

4
quartz/components/Explorer.tsx
View File

@ -141,10 +141,10 @@ export default ((userOpts?: Partial<Options>) => {
</svg>
</button>
<div id="explorer-content">
<ul class="overflow" id="explorer-ul">
<menu class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<li id="explorer-end" />
</ul>
</menu>
</div>
</div>
)

4
quartz/components/ExplorerNode.tsx
View File

@ -216,7 +216,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
)}
{/* Recursively render children of folder */}
<div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}>
<ul
<menu
// Inline style for left folder paddings
style={{
paddingLeft: node.name !== "" ? "1.4rem" : "0",
@ -233,7 +233,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
fileData={fileData}
/>
))}
</ul>
</menu>
</div>
</li>
)}

2
quartz/components/Header.tsx
View File

@ -9,7 +9,7 @@ header {
display: flex;
flex-direction: row;
align-items: center;
margin: 2rem 0;
padding: 1rem 2rem;
gap: 1.5rem;
}

4
quartz/components/Search.tsx
View File

@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
const opts = { ...defaultOptions, ...userOpts }
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
return (
<div class={classNames(displayClass, "search")}>
<search class={classNames(displayClass, "search")}>
<button class="search-button" id="search-button">
<p>{i18n(cfg.locale).components.search.title}</p>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
@ -42,7 +42,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
<div id="search-layout" data-preview={opts.enablePreview}></div>
</div>
</div>
</div>
</search>
)
}

20
quartz/components/renderPage.tsx
View File

@ -221,19 +221,19 @@ export function renderPage(
const Body = BodyConstructor()
const LeftComponent = (
<div class="left sidebar">
<aside class="left sidebar">
{left.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</aside>
)
const RightComponent = (
<div class="right sidebar">
<aside class="right sidebar">
{right.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</aside>
)
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
@ -242,29 +242,31 @@ export function renderPage(
<Head {...componentData} />
<body data-slug={slug}>
<div id="quartz-root" class="page">
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<Header {...componentData}>
{header.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<Body {...componentData}>
{LeftComponent}
<section class="center">
<div class="page-header">
<div class="popover-hint">
{beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</div>
<main>
<Content {...componentData} />
</main>
<hr />
<div class="page-footer">
{afterBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</div>
</section>
{RightComponent}
<Footer {...componentData} />
</Body>

4
quartz/components/styles/explorer.scss
View File

@ -117,7 +117,7 @@ button#desktop-explorer {
grid-template-rows: 1fr;
}
.folder-outer > ul {
.folder-outer > menu {
overflow: hidden;
}
@ -140,7 +140,7 @@ button#desktop-explorer {
visibility: visible;
}
& ul {
& menu {
list-style: none;
margin: 0.08rem 0;
padding: 0;

3
quartz/styles/base.scss
View File

@ -125,6 +125,7 @@ a {
.page {
max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
font-size: 2rem;
@ -235,7 +236,7 @@ a {
}
& .page-header {
grid-area: grid-header;
grid-area: grid-page-header;
margin: $topSpacing 0 0 0;
@media all and ($mobile) {
margin-top: 0;

6
quartz/styles/variables.scss
View File

@ -30,7 +30,7 @@ $mobileGrid: (
columnGap: "5px",
templateAreas:
'"grid-sidebar-left"\
"grid-header"\
"grid-page-header"\
"grid-center"\
"grid-sidebar-right"\
"grid-footer"',
@ -41,7 +41,7 @@ $tabletGrid: (
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left grid-header"\
'"grid-sidebar-left grid-page-header"\
"grid-sidebar-left grid-center"\
"grid-sidebar-left grid-sidebar-right"\
"grid-sidebar-left grid-footer"',
@ -52,7 +52,7 @@ $desktopGrid: (
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left grid-header grid-sidebar-right"\
'"grid-sidebar-left grid-page-header grid-sidebar-right"\
"grid-sidebar-left grid-center grid-sidebar-right"\
"grid-sidebar-left grid-footer grid-sidebar-right"',
);