Quartz Notes

Hiding the date on index page

Straight from jackyzha0, found on Discord

renderPage.tsx

<div class="popover-hint">
    {slug !== "index" &&
	    beforeBody.map((BodyComponent) => <BodyComponent {...componentData} />)}
</div>

Goes in your quartz/components/renderPage.tsx.

Now Playing Widget

Used spotiwidget.
In RecentNotes.tsx, just underneath the </ul>:

RecentNotes.tsx

<a href="https://github.com/Hecsall/spotiwidget" target="_blank" rel="noopener noreferrer">
	<img
	    src="https://spotiwidget.vercel.app/widget?uid=spotifyname&theme=natemoo-re&invert_artist_title=false&cover=true&progress_bar=false&progress_color=%23B3B3B3&sound_waves=true&sound_waves_color=%231ED760&background=false&background_color=%23121212"
	    alt="Now Playing on Spotify"
	    style={{ borderRadius: '8px', marginTop: '1rem', width: '100%' }} 
	/>
</a>

Graph edits on index

Moved graph view on the index below the header with ConditionalRender in quartz.layout.ts (only when slug === "index"). Also hid the right sidebar on the index with a grid in quartz/styles/custom.scss.
Inspired by Dev Uni’s Second Brain (but his is way cooler)

quartz.layout.ts

header: [
	Component.ConditionalRender({
		component: Component.Graph(),
		condition: ({ fileData }) => fileData.slug === "index",
	}),
],
 
right: [
	Component.ConditionalRender({
		component: Component.TagList(),
		condition: ({ fileData }) => fileData.slug !== "index",
	}),
	Component.ConditionalRender({
		component: Component.Graph(),
		condition: ({ fileData }) => fileData.slug !== "index",
	}),
	Component.ConditionalRender({
		component: Component.DesktopOnly(Component.TableOfContents()),
		condition: ({ fileData }) => fileData.slug !== "index",
	}),
	Component.ConditionalRender({
		component: Component.Backlinks(),
		condition: ({ fileData }) => fileData.slug !== "index",
	}),
],

custom.scss

/* Homepage-only: hide right sidebar and expand center area */
 
body[data-slug="index"] #quartz-body {
    grid-template-columns: 320px auto;
    grid-template-areas:
        "grid-sidebar-left grid-header"
        "grid-sidebar-left grid-center"
        "grid-sidebar-left grid-footer";
}
 
body[data-slug="index"] #quartz-body .sidebar.right {
    display: none;
}
 
body[data-slug="index"] #quartz-body .graph h3 {
    display: none;
}
 
body[data-slug="index"] #quartz-body .page-header .graph {
    width: 100%;
}
 
body[data-slug="index"] #quartz-body .page-header .graph .graph-outer,
body[data-slug="index"] #quartz-body .page-header .graph .global-graph-outer {
    width: 100%;
}
 
body[data-slug="index"] #quartz-body .page-header .graph:before {
    content: 'Site Map';
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    margin-bottom: 0.3em;
    text-align: center;
    color:#32fa89;
}
 
body[data-slug="index"] #quartz-body{
    width: 80%;
}