basic left,right layout
This commit is contained in:
parent
ad8ac0b479
commit
de72a413ba
@ -59,15 +59,16 @@ const config: QuartzConfig = {
|
|||||||
Plugin.ContentPage({
|
Plugin.ContentPage({
|
||||||
head: Component.Head(),
|
head: Component.Head(),
|
||||||
header: [Component.PageTitle(), Component.Spacer(), Component.Darkmode()],
|
header: [Component.PageTitle(), Component.Spacer(), Component.Darkmode()],
|
||||||
body: [
|
beforeBody: [
|
||||||
Component.ArticleTitle(),
|
Component.ArticleTitle(),
|
||||||
Component.ReadingTime(),
|
Component.ReadingTime(),
|
||||||
Component.TagList(),
|
Component.TagList(),
|
||||||
Component.TableOfContents(),
|
|
||||||
Component.Content()
|
|
||||||
],
|
],
|
||||||
left: [],
|
left: [
|
||||||
right: [],
|
Component.TableOfContents(),
|
||||||
|
],
|
||||||
|
right: [
|
||||||
|
],
|
||||||
footer: []
|
footer: []
|
||||||
}),
|
}),
|
||||||
Plugin.ContentIndex(), // you can exclude this if you don't plan on using popovers, graph, or backlinks,
|
Plugin.ContentIndex(), // you can exclude this if you don't plan on using popovers, graph, or backlinks,
|
||||||
|
@ -6,7 +6,7 @@ function TagList({ fileData }: QuartzComponentProps) {
|
|||||||
const tags = fileData.frontmatter?.tags
|
const tags = fileData.frontmatter?.tags
|
||||||
const slug = fileData.slug!
|
const slug = fileData.slug!
|
||||||
const baseDir = resolveToRoot(slug)
|
const baseDir = resolveToRoot(slug)
|
||||||
if (tags) {
|
if (tags && tags.length > 0) {
|
||||||
return <ul class="tags">{tags.map(tag => {
|
return <ul class="tags">{tags.map(tag => {
|
||||||
const display = `#${tag}`
|
const display = `#${tag}`
|
||||||
const linkDest = baseDir + `/tags/${slugAnchor(tag)}`
|
const linkDest = baseDir + `/tags/${slugAnchor(tag)}`
|
||||||
|
@ -6,19 +6,21 @@ function toggleCallout(this: HTMLElement) {
|
|||||||
outerBlock.style.maxHeight = height + `px`
|
outerBlock.style.maxHeight = height + `px`
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupCallout(div: HTMLElement) {
|
function setupCallout() {
|
||||||
const collapsed = div.classList.contains(`is-collapsed`)
|
|
||||||
const title = div.firstElementChild!
|
|
||||||
const height = collapsed ? title.scrollHeight : div.scrollHeight
|
|
||||||
div.style.maxHeight = height + `px`
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener(`nav`, () => {
|
|
||||||
const collapsible = document.getElementsByClassName(`callout is-collapsible`) as HTMLCollectionOf<HTMLElement>
|
const collapsible = document.getElementsByClassName(`callout is-collapsible`) as HTMLCollectionOf<HTMLElement>
|
||||||
for (const div of collapsible) {
|
for (const div of collapsible) {
|
||||||
const title = div.firstElementChild
|
const title = div.firstElementChild
|
||||||
setupCallout(div)
|
|
||||||
title?.removeEventListener(`click`, toggleCallout)
|
if (title) {
|
||||||
title?.addEventListener(`click`, toggleCallout)
|
title.removeEventListener(`click`, toggleCallout)
|
||||||
|
title.addEventListener(`click`, toggleCallout)
|
||||||
|
|
||||||
|
const collapsed = div.classList.contains(`is-collapsed`)
|
||||||
|
const height = collapsed ? title.scrollHeight : div.scrollHeight
|
||||||
|
div.style.maxHeight = height + `px`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
|
document.addEventListener(`nav`, setupCallout)
|
||||||
|
window.addEventListener(`resize`, setupCallout)
|
||||||
|
@ -14,19 +14,24 @@ const observer = new IntersectionObserver(entries => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function toggleCollapsible(this: HTMLElement) {
|
function toggleToc(this: HTMLElement) {
|
||||||
this.classList.toggle("collapsed")
|
this.classList.toggle("collapsed")
|
||||||
const content = this.nextElementSibling as HTMLElement
|
const content = this.nextElementSibling as HTMLElement
|
||||||
content.classList.toggle("collapsed")
|
content.classList.toggle("collapsed")
|
||||||
content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
|
content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("nav", () => {
|
function setupToc() {
|
||||||
const toc = document.getElementById("toc")!
|
const toc = document.getElementById("toc")!
|
||||||
const content = toc.nextElementSibling as HTMLElement
|
const content = toc.nextElementSibling as HTMLElement
|
||||||
content.style.maxHeight = content.scrollHeight + "px"
|
content.style.maxHeight = content.scrollHeight + "px"
|
||||||
toc.removeEventListener("click", toggleCollapsible)
|
toc.removeEventListener("click", toggleToc)
|
||||||
toc.addEventListener("click", toggleCollapsible)
|
toc.addEventListener("click", toggleToc)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", setupToc)
|
||||||
|
document.addEventListener("nav", () => {
|
||||||
|
setupToc()
|
||||||
|
|
||||||
// update toc entry highlighting
|
// update toc entry highlighting
|
||||||
observer.disconnect()
|
observer.disconnect()
|
||||||
|
@ -4,10 +4,6 @@
|
|||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@media all and (max-width: 450px) {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > .toggle {
|
& > .toggle {
|
||||||
display: none;
|
display: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -6,11 +6,12 @@ import { resolveToRoot } from "../../path"
|
|||||||
import HeaderConstructor from "../../components/Header"
|
import HeaderConstructor from "../../components/Header"
|
||||||
import { QuartzComponentProps } from "../../components/types"
|
import { QuartzComponentProps } from "../../components/types"
|
||||||
import BodyConstructor from "../../components/Body"
|
import BodyConstructor from "../../components/Body"
|
||||||
|
import ContentConstructor from "../../components/Content"
|
||||||
|
|
||||||
interface Options {
|
interface Options {
|
||||||
head: QuartzComponent
|
head: QuartzComponent
|
||||||
header: QuartzComponent[],
|
header: QuartzComponent[],
|
||||||
body: QuartzComponent[],
|
beforeBody: QuartzComponent[],
|
||||||
left: QuartzComponent[],
|
left: QuartzComponent[],
|
||||||
right: QuartzComponent[],
|
right: QuartzComponent[],
|
||||||
footer: QuartzComponent[],
|
footer: QuartzComponent[],
|
||||||
@ -21,14 +22,15 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
|
|||||||
throw new Error("ContentPage must be initialized with options specifiying the components to use")
|
throw new Error("ContentPage must be initialized with options specifiying the components to use")
|
||||||
}
|
}
|
||||||
|
|
||||||
const { head: Head, header, body } = opts
|
const { head: Head, header, beforeBody, left, right, footer } = opts
|
||||||
const Header = HeaderConstructor()
|
const Header = HeaderConstructor()
|
||||||
const Body = BodyConstructor()
|
const Body = BodyConstructor()
|
||||||
|
const Content = ContentConstructor()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: "ContentPage",
|
name: "ContentPage",
|
||||||
getQuartzComponents() {
|
getQuartzComponents() {
|
||||||
return [opts.head, Header, Body, ...opts.header, ...opts.body, ...opts.left, ...opts.right, ...opts.footer]
|
return [opts.head, Header, Body, ...opts.header, ...opts.beforeBody, ...opts.left, ...opts.right, ...opts.footer]
|
||||||
},
|
},
|
||||||
async emit(_contentDir, cfg, content, resources, emit): Promise<string[]> {
|
async emit(_contentDir, cfg, content, resources, emit): Promise<string[]> {
|
||||||
const fps: string[] = []
|
const fps: string[] = []
|
||||||
@ -59,9 +61,19 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
|
|||||||
<Header {...componentData} >
|
<Header {...componentData} >
|
||||||
{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
|
{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
|
||||||
</Header>
|
</Header>
|
||||||
|
{beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
|
||||||
<Body {...componentData}>
|
<Body {...componentData}>
|
||||||
{body.map(BodyComponent => <BodyComponent {...componentData} />)}
|
<div class="left">
|
||||||
|
{left.map(BodyComponent => <BodyComponent {...componentData} />)}
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<Content {...componentData} />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
{right.map(BodyComponent => <BodyComponent {...componentData} />)}
|
||||||
|
</div>
|
||||||
</Body>
|
</Body>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}
|
{pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}
|
||||||
|
@ -300,8 +300,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(js)
|
|
||||||
|
|
||||||
return { js }
|
return { js }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -51,8 +51,31 @@ a {
|
|||||||
padding: 4rem 30vw;
|
padding: 4rem 30vw;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& .left, & .right {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0 4rem 0 6rem;
|
||||||
|
max-width: 30vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 1200px) {
|
@media all and (max-width: 1200px) {
|
||||||
padding: 25px 5vw;
|
padding: 25px 5vw;
|
||||||
|
& .left, & .right {
|
||||||
|
padding: 0;
|
||||||
|
max-width: none;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& p {
|
& p {
|
||||||
|
@ -8,6 +8,10 @@
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
transition: max-height 0.3s ease;
|
transition: max-height 0.3s ease;
|
||||||
|
|
||||||
|
& > *:nth-child(2) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&[data-callout="note"] {
|
&[data-callout="note"] {
|
||||||
--color: #448aff;
|
--color: #448aff;
|
||||||
--border: #448aff22;
|
--border: #448aff22;
|
||||||
@ -74,7 +78,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
margin-bottom: -1rem;
|
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
|
|
||||||
& .fold {
|
& .fold {
|
||||||
|
Loading…
Reference in New Issue
Block a user