Quartz Notes

Hiding the date on index page

Straight from jackyzha0, found on Discord

Code

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

Code

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)

Code

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%;
}

Profile Picture

Added a profile pic, sends to homepage.

Code

quartz/components/ProfilePicture.tsx

import styles from "./styles/profilePicture.scss"
 
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
import { classNames } from "../util/lang"
 
  
 
type ProfilePictureOptions = {
 
  src?: string
 
  alt?: string
 
  caption?: string
 
  size?: number
 
}
 
  
 
export default ((opts?: ProfilePictureOptions) => {
 
  const { src = "/static/profile.jpg", alt = "Profile picture", caption, size = 120 } = opts ?? {}
 
  
 
  const ProfilePicture: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
 
    return (
 
      <div class={classNames(displayClass, "profile-picture")}>
 
        <a href="/" class="profile-link">
 
          <img src={src} alt={alt} width={size} height={size} loading="lazy" />
 
          {caption ? <p class="profile-caption">{caption}</p> : null}
 
        </a>
 
      </div>
 
    )
 
  }
 
  
 
  ProfilePicture.css = styles
 
  
 
  return ProfilePicture
 
}) satisfies QuartzComponentConstructor

quartz/components/styles/profilePicture.scss

.profile-picture {
 
  display: flex;
 
  flex-direction: column;
 
  align-items: center;
 
  gap: 0.5rem;
 
  margin: 0.5rem 0 0.5rem;
 
  text-align: center;
 
}
 
  
 
.profile-picture .profile-link {
 
  display: flex;
 
  flex-direction: column;
 
  align-items: center;
 
  gap: 0.5rem;
 
  text-decoration: none;
 
  color: inherit;
 
}
 
  
 
.profile-picture .profile-link:focus-visible {
 
  outline: 2px solid var(--color-accent, #00ff80);
 
  outline-offset: 4px;
 
}
 
  
 
.profile-picture img {
 
  border-radius: 50%;
 
  object-fit: cover;
 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
 
  border: 3px solid var(--background-primary-alt);
 
  background-color: var(--background-primary);
 
}
 
  
 
.profile-picture .profile-caption {
 
  margin: 0;
 
  font-weight: 600;
 
  color: var(--text-normal);
 
}

quartz.layout.ts

export const defaultListPageLayout: PageLayout = {
 
  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
 
  left: [
 
    // Component.PageTitle(),
 
    Component.ProfilePicture({ src: "/static/profile.jpg", caption: "skam.me" }),
 
    Component.MobileOnly(Component.Spacer()),

quartz/components/index.ts

import Content from "./pages/Content"
 
import TagContent from "./pages/TagContent"
 
import FolderContent from "./pages/FolderContent"
 
import NotFound from "./pages/404"
 
import ArticleTitle from "./ArticleTitle"
 
import Darkmode from "./Darkmode"
 
import ReaderMode from "./ReaderMode"
 
import Head from "./Head"
 
import PageTitle from "./PageTitle"
 
import ContentMeta from "./ContentMeta"
 
import ProfilePicture from "./ProfilePicture"
 
import Spacer from "./Spacer"
 
import TableOfContents from "./TableOfContents"
 
import Explorer from "./Explorer"
 
import TagList from "./TagList"
 
import Graph from "./Graph"
 
import Backlinks from "./Backlinks"
 
import Search from "./Search"
 
import Footer from "./Footer"
 
import DesktopOnly from "./DesktopOnly"
 
import MobileOnly from "./MobileOnly"
 
import RecentNotes from "./RecentNotes"
 
import Breadcrumbs from "./Breadcrumbs"
 
import Comments from "./Comments"
 
import Flex from "./Flex"
 
import ConditionalRender from "./ConditionalRender"
 
  
 
export {
 
  ArticleTitle,
 
  Content,
 
  TagContent,
 
  FolderContent,
 
  Darkmode,
 
  ReaderMode,
 
  Head,
 
  PageTitle,
 
  ContentMeta,
 
  ProfilePicture,
 
  Spacer,
 
  TableOfContents,
 
  Explorer,
 
  TagList,
 
  Graph,
 
  Backlinks,
 
  Search,
 
  Footer,
 
  DesktopOnly,
 
  MobileOnly,
 
  RecentNotes,
 
  NotFound,
 
  Breadcrumbs,
 
  Comments,
 
  Flex,
 
  ConditionalRender,
 
}