keroosha/keroosha.cybergulag.today
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more visual polish, adjust colours and spacing

Browse source
This commit is contained in:
Jacky Zhao 2023-07-04 16:48:36 -07:00
parent ab9da02c60
commit 38cff2d670
22 changed files with 173 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

10
quartz.config.ts
View file

@ -22,6 +22,7 @@ const contentPageLayout: PageLayout = {
],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.TableOfContents()),
@ -38,6 +39,7 @@ const listPageLayout: PageLayout = {
],
left: [
Component.PageTitle(),
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode()
],
@ -63,8 +65,8 @@ const config: QuartzConfig = {
colors: {
lightMode: {
light: '#faf8f8',
lightgray: '#e8e8e8',
gray: '#dadada',
lightgray: '#e5e5e5',
gray: '#b8b8b8',
darkgray: '#4e4e4e',
dark: '#141021',
secondary: '#284b63',
@ -73,8 +75,8 @@ const config: QuartzConfig = {
},
darkMode: {
light: '#161618',
lightgray: '#292629',
gray: '#343434',
lightgray: '#393639',
gray: '#646464',
darkgray: '#d4d4d4',
dark: '#fbfffe',
secondary: '#7b97aa',

2
quartz/components/Backlinks.tsx
View file

@ -8,7 +8,7 @@ function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
const backlinkFiles = allFiles.filter(file => file.links?.includes(slug))
return <div class="backlinks">
<h3>Backlinks</h3>
<ul>
<ul class="overflow">
{backlinkFiles.length > 0 ?
backlinkFiles.map(f => <li><a href={stripIndex(relativeToRoot(slug, f.slug!))} class="internal">{f.frontmatter?.title}</a></li>)
: <li>No backlinks found</li>}

4
quartz/components/DesktopOnly.tsx
View file

@ -4,9 +4,7 @@ export default ((component?: QuartzComponent) => {
if (component) {
const Component = component
function DesktopOnly(props: QuartzComponentProps) {
return <div class="desktop-only">
<Component {...props} />
</div>
return <Component displayClass="desktop-only" {...props} />
}
DesktopOnly.displayName = component.displayName

14
quartz/components/Footer.tsx
View file

@ -11,15 +11,13 @@ export default ((opts?: Options) => {
const year = new Date().getFullYear()
const name = opts?.authorName ?? "someone"
const links = opts?.links ?? []
return <>
return <footer>
<hr />
<footer>
<p>Made by {name} using <a href="https://quartz.jzhao.xyz/">Quartz</a>, © {year}</p>
<ul>{Object.entries(links).map(([text, link]) => <li>
<a href={link}>{text}</a>
</li>)}</ul>
</footer>
</>
<p>Made by {name} using <a href="https://quartz.jzhao.xyz/">Quartz</a>, © {year}</p>
<ul>{Object.entries(links).map(([text, link]) => <li>
<a href={link}>{text}</a>
</li>)}</ul>
</footer>
}
Footer.css = style

2
quartz/components/Graph.tsx
View file

@ -50,7 +50,7 @@ export default ((opts?: GraphOptions) => {
const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph }
const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph }
return <div class="graph">
<h3>Interactive Graph</h3>
<h3>Site Graph</h3>
<div class="graph-outer">
<div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
<svg version="1.1" id="global-graph-icon" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

4
quartz/components/MobileOnly.tsx
View file

@ -4,9 +4,7 @@ export default ((component?: QuartzComponent) => {
if (component) {
const Component = component
function MobileOnly(props: QuartzComponentProps) {
return <div class="mobile-only">
<Component {...props} />
</div>
return <Component displayClass="mobile-only" {...props} />
}
MobileOnly.displayName = component.displayName

2
quartz/components/ReadingTime.tsx
View file

@ -14,7 +14,7 @@ function ReadingTime({ fileData }: QuartzComponentProps) {
ReadingTime.css = `
.reading-time {
margin-top: 0;
opacity: 0.5;
color: var(--gray);
}
`

7
quartz/components/Spacer.tsx
View file

@ -1,7 +1,8 @@
import { QuartzComponentConstructor } from "./types"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function Spacer() {
return <div class="spacer"></div>
function Spacer({ displayClass }: QuartzComponentProps) {
const className = displayClass ? `spacer ${displayClass}` : "spacer"
return <div class={className}></div>
}
export default (() => Spacer) satisfies QuartzComponentConstructor

2
quartz/components/TableOfContents.tsx
View file

@ -26,7 +26,7 @@ function TableOfContents({ fileData }: QuartzComponentProps) {
</svg>
</button>
<div id="toc-content">
<ul>
<ul class="overflow">
{fileData.toc.map(tocEntry => <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>{tocEntry.text}</a>
</li>)}

1
quartz/components/pages/FolderContent.tsx
View file

@ -27,7 +27,6 @@ function FolderContent(props: QuartzComponentProps) {
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div class="popover-hint">
<article>{content}</article>
<hr/>
<p>{allPagesInFolder.length} items under this folder.</p>
<div>
<PageList {...listProps} />

1
quartz/components/pages/TagContent.tsx
View file

@ -21,7 +21,6 @@ function TagContent(props: QuartzComponentProps) {
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div class="popover-hint">
<article>{content}</article>
<hr/>
<p>{allPagesWithTag.length} items with this tag.</p>
<div>
<PageList {...listProps} />

18
quartz/components/renderPage.tsx
View file

@ -55,22 +55,22 @@ export function renderPage(slug: string, componentData: QuartzComponentProps, co
<Head {...componentData} />
<body data-slug={slug}>
<div id="quartz-root" class="page">
<div class="page-header">
<Header {...componentData} >
{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
</Header>
<div class="popover-hint">
{beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
</div>
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<Header {...componentData} >
{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
</Header>
<div class="popover-hint">
{beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
</div>
</div>
<Content {...componentData} />
<Footer {...componentData} />
</div>
{RightComponent}
</Body>
<Footer {...componentData} />
</div>
</body>
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}

13
quartz/components/scripts/graph.inline.ts
View file

@ -225,7 +225,7 @@ async function renderGraph(container: string, slug: string) {
const labels = graphNode
.append("text")
.attr("dx", 0)
.attr("dy", (d) => nodeRadius(d) - 8 + "px")
.attr("dy", (d) => -nodeRadius(d) + "px")
.attr("text-anchor", "middle")
.text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
.style('opacity', (opacityScale - 1) / 3.75)
@ -297,14 +297,3 @@ document.addEventListener("nav", async (e: unknown) => {
containerIcon?.addEventListener("click", renderGlobalGraph)
})
let resizeEventDebounce: number | undefined = undefined
window.addEventListener('resize', () => {
if (resizeEventDebounce) {
clearTimeout(resizeEventDebounce)
}
resizeEventDebounce = window.setTimeout(async () => {
const slug = document.body.dataset["slug"]!
await renderGraph("graph-container", slug)
}, 50)
})

62
quartz/components/scripts/search.inline.ts
View file

@ -58,38 +58,7 @@ const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/
document.addEventListener("nav", async (e: unknown) => {
const currentSlug = (e as CustomEventMap["nav"]).detail.url
// setup index if it hasn't been already
const data = await fetchData
if (!index) {
index = new Document({
cache: true,
charset: 'latin:extra',
optimize: true,
encode: encoder,
document: {
id: "slug",
index: [
{
field: "title",
tokenize: "forward",
},
{
field: "content",
tokenize: "reverse",
},
]
},
})
for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
await index.addAsync(slug, {
slug,
title: fileData.title,
content: fileData.content
})
}
}
const container = document.getElementById("search-container")
const searchIcon = document.getElementById("search-icon")
const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
@ -177,6 +146,37 @@ document.addEventListener("nav", async (e: unknown) => {
searchBar?.removeEventListener("input", onType)
searchBar?.addEventListener("input", onType)
// setup index if it hasn't been already
if (!index) {
index = new Document({
cache: true,
charset: 'latin:extra',
optimize: true,
encode: encoder,
document: {
id: "slug",
index: [
{
field: "title",
tokenize: "forward",
},
{
field: "content",
tokenize: "reverse",
},
]
},
})
for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
await index.addAsync(slug, {
slug,
title: fileData.title,
content: fileData.content
})
}
}
// register handlers
registerEscapeHandler(container, hideSearch)
})

2
quartz/components/styles/darkmode.scss
View file

@ -2,7 +2,7 @@
position: relative;
width: 20px;
height: 20px;
margin: 1rem;
margin: 0 10px;
& > .toggle {
display: none;

1
quartz/components/styles/footer.scss
View file

@ -1,6 +1,5 @@
footer {
text-align: left;
opacity: 0.8;
margin-bottom: 4rem;
& ul {

4
quartz/components/styles/popover.scss
View file

@ -29,11 +29,11 @@
line-height: normal;
font-size: initial;
font-family: var(--bodyFont);
border: 1px solid var(--gray);
border: 1px solid var(--lightgray);
background-color: var(--light);
border-radius: 5px;
box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
overflow: scroll;
overflow: auto;
}
h1 {

6
quartz/components/styles/search.scss
View file

@ -12,6 +12,7 @@
display: flex;
align-items: center;
cursor: pointer;
white-space: nowrap;
& > div {
flex-grow: 1;
@ -38,12 +39,13 @@
& > #search-container {
position: fixed;
contain: layout;
z-index: 999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: scroll;
overflow-y: auto;
display: none;
backdrop-filter: blur(4px);
@ -57,7 +59,7 @@
margin-left: auto;
margin-right: auto;
@media all and (max-width: $tabletBreakpoint) {
@media all and (max-width: $fullPageWidth) {
width: 90%;
}

2
quartz/components/styles/toc.scss
View file

@ -29,7 +29,7 @@ button#toc {
list-style: none;
overflow: hidden;
max-height: none;
transition: max-height 0.3s ease;
transition: max-height 0.5s ease;
& ul {
list-style: none;

3
quartz/components/types.ts
View file

@ -11,6 +11,9 @@ export type QuartzComponentProps = {
children: (QuartzComponent | JSX.Element)[]
tree: Node<QuartzPluginData>
allFiles: QuartzPluginData[]
displayClass?: 'mobile-only' | 'desktop-only'
} & JSX.IntrinsicAttributes & {
[key: string]: any
}
export type QuartzComponent = ComponentType<QuartzComponentProps> & {

150
quartz/styles/base.scss
View file

@ -43,71 +43,23 @@ a {
}
}
.page {
& > .page-header {
max-width: $pageWidth;
margin: $topSpacing auto 0 auto;
}
& > #quartz-body {
width: 100%;
display: flex;
& .left, & .right {
flex: 1;
width: calc(calc(100vw - $pageWidth) / 2);
}
& .left-inner, & .right-inner {
display: flex;
flex-direction: column;
gap: 2rem;
top: 0;
width: $sidePanelWidth;
margin-top: $topSpacing;
box-sizing: border-box;
padding: 0 4rem;
position: fixed;
}
& .left-inner {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
}
& .right-inner {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
}
& .center {
width: $pageWidth;
margin: 0 auto;
}
}
}
.desktop-only {
display: initial;
@media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
@media all and (max-width: $fullPageWidth) {
display: none;
}
}
.mobile-only {
display: none;
@media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
@media all and (max-width: $fullPageWidth) {
display: initial;
}
}
.page {
@media all and (max-width: $tabletBreakpoint) {
margin: 25px 5vw;
& .left, & .right {
padding: 0;
height: initial;
max-width: none;
position: initial;
}
@media all and (max-width: $fullPageWidth) {
margin: 0 5vw;
}
& p {
@ -129,6 +81,78 @@ a {
padding-left: 0;
}
}
& > #quartz-body {
width: 100%;
display: flex;
@media all and (max-width: $fullPageWidth) {
flex-direction: column;
}
& .left, & .right {
flex: 1;
width: calc(calc(100vw - $pageWidth) / 2);
@media all and (max-width: $fullPageWidth) {
width: initial;
}
}
& .left-inner, & .right-inner {
display: flex;
flex-direction: column;
gap: 2rem;
top: 0;
width: $sidePanelWidth;
margin-top: $topSpacing;
box-sizing: border-box;
padding: 0 4rem;
position: fixed;
@media all and (max-width: $fullPageWidth) {
position: initial;
flex-direction: row;
padding: 0;
width: initial;
margin-top: 4rem;
}
}
& .left-inner {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
gap: 1rem;
align-items: center;
}
}
& .right-inner {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
& > * {
@media all and (max-width: $fullPageWidth) {
flex: 1;
}
}
}
}
& .page-header {
width: $pageWidth;
margin: $topSpacing auto 0 auto;
@media all and (max-width: $fullPageWidth) {
width: initial;
margin-top: 2rem;
}
}
& .center, & footer {
width: $pageWidth;
margin-left: auto;
margin-right: auto;
@media all and (max-width: $fullPageWidth) {
width: initial;
margin-left: 0;
margin-right: 0;
}
}
}
input[type="checkbox"] {
@ -200,7 +224,7 @@ pre {
font-family: var(--codeFont);
padding: 0.5rem;
border-radius: 5px;
overflow-x: scroll;
overflow-x: auto;
border: 1px solid var(--lightgray);
& > code {
@ -301,3 +325,23 @@ audio, video {
.spacer {
flex: 1 1 auto;
}
ul.overflow, ol.overflow {
height: 400px;
overflow-y: scroll;
& > li:last-of-type {
margin-bottom: 50px;
}
&:after {
pointer-events: none;
content: '';
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(transparent 0px, var(--light));
}
}

3
quartz/styles/variables.scss
View file

@ -1,5 +1,6 @@
$pageWidth: 800px;
$pageWidth: 750px;
$mobileBreakpoint: 600px;
$tabletBreakpoint: 1200px;
$sidePanelWidth: 400px;
$topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth