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 7be47742a6dc86f22d148ca9d304f7a9eea318cf

Browse Source
This commit is contained in:
Ivan Chernov 2025-02-01 00:27:47 -05:00 committed by GitHub
commit b5bf5e23a5
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 { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time" import readingTime from "reading-time"
import { classNames } from "../util/lang" import { classNames } from "../util/lang"
@ -30,7 +30,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
const segments: (string | JSX.Element)[] = [] const segments: (string | JSX.Element)[] = []
if (fileData.dates) { if (fileData.dates) {
segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />) segments.push(formatDate(getDate(cfg, fileData)!))
} }
// Display reading time if enabled // 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) { 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

@ -113,10 +113,10 @@ export default ((userOpts?: Partial<Options>) => {
</svg> </svg>
</button> </button>
<div id="explorer-content"> <div id="explorer-content">
<ul class="overflow" id="explorer-ul"> <menu class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} /> <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<li id="explorer-end" /> <li id="explorer-end" />
</ul> </menu>
</div> </div>
</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 */} {/* Recursively render children of folder */}
<div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}> <div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}>
<ul <menu
// Inline style for left folder paddings // Inline style for left folder paddings
style={{ style={{
paddingLeft: node.name !== "" ? "1.4rem" : "0", paddingLeft: node.name !== "" ? "1.4rem" : "0",
@ -233,7 +233,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
fileData={fileData} fileData={fileData}
/> />
))} ))}
</ul> </menu>
</div> </div>
</li> </li>
)} )}

2
quartz/components/Header.tsx
View File

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

4
quartz/components/Search.tsx
View File

@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
const opts = { ...defaultOptions, ...userOpts } const opts = { ...defaultOptions, ...userOpts }
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
return ( return (
<div class={classNames(displayClass, "search")}> <search class={classNames(displayClass, "search")}>
<button class="search-button" id="search-button"> <button class="search-button" id="search-button">
<p>{i18n(cfg.locale).components.search.title}</p> <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"> <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 id="search-layout" data-preview={opts.enablePreview}></div>
</div> </div>
</div> </div>
</div> </search>
) )
} }

20
quartz/components/renderPage.tsx
View File

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

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

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

3
quartz/styles/base.scss
View File

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

6
quartz/styles/variables.scss
View File

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