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

feat(layout): better tags on components

Browse Source 
* move Explorer to menu
* move Search to search
* move sidebars to aside
This commit is contained in:
vanadium23 2024-12-01 22:22:24 +03:00
parent 57e6af3a34
commit fafdb2719a
7 changed files with 17 additions and 17 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)}</>
} }

8
quartz/components/Explorer.tsx
View File

@ -112,12 +112,12 @@ export default ((userOpts?: Partial<Options>) => {
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</button> </button>
<nav 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>
</nav> </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>
)} )}

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>
) )
} }

8
quartz/components/renderPage.tsx
View File

@ -204,19 +204,19 @@ export function renderPage(
const Body = BodyConstructor() const Body = BodyConstructor()
const LeftComponent = ( const LeftComponent = (
<section class="left sidebar"> <aside class="left sidebar">
{left.map((BodyComponent) => ( {left.map((BodyComponent) => (
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
))} ))}
</section> </aside>
) )
const RightComponent = ( const RightComponent = (
<section class="right sidebar"> <aside class="right sidebar">
{right.map((BodyComponent) => ( {right.map((BodyComponent) => (
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
))} ))}
</section> </aside>
) )
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"

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;