🎲 D&D Wiki 🐲

Oppsett av Quartz

13. sep. 20245 minutter lesetid

Dokumentasjonen for Quartz finnes her.
Les gjennom forsiden og følg stegene for å klone og installere Quartz.

Viktig!

Før Quartz klones og settes opp for første gang bør du ta stilling til om du ønsker å ha Obsidian-hvelvet sammen med Quartz-koden, eller i en egen mappestruktur utenfor repoet.

Selv med symbolske lenker vil hvelvet ditt bli lastet inn i GitHub-repoet når du kjører npx quartz sync, så hvelvets lokasjon vil kun ha noe å si for oppsettet på denne spesifikke maskinen.

Sette opp et repo på GitHub

Kilde

  1. Følg stegene som vist her, slik at du ender med et klonet Quartz-repo
    • Videre steg antar at du har cd-et inn i klonet repo
  2. git conf user.name "Navnet Ditt"
  3. git conf user.email "din-epost@adresse.domene
  4. Åpne GitHub i nettleseren din, logg inn og opprett et nytt repo
    1. Dette er hvor din kopi av Quartz vil bo
    2. IKKE lag Readme, lisensfil eller en .gitignore-fil; repoet skal være helt tomt
    3. Bestem deg for om du ønsker offentlig eller privat repo
      • Dersom du ønsker gratis GitHub Pages må repo være offentlig
  5. Kopier URL-en til ditt nye repo
  6. I terminalen, kjør git remote -v
    1. Dersom origin ikke stemmer med ditt eget repo, kjør git remote set-url REMOTE-URL hvor REMOTE-URL er URL-en til ditt nye repo
    2. Dersom upstream ikke er satt, kjør git remote add upstream https://github.com/jackyzha0/quartz.git
  7. Kjør npx quartz sync --no-pull for å gjøre første synkronisering mot ditt nye GitHub-repo

Litt diverse konfigurasjon

  • Åpne quartz.config.ts
    • Endre tittel / prosjektnavn
      • configuration.pageTitle
    • Endre fonter
      • configuration.theme.typography
    • Endre bakgrunnsfarge:
      • configuration.theme.colors.lightMode.light
    • Utvide hvilke filer og mapper som skal ignoreres
      • configuration.ignorePatterns
        • Her har jeg lagt til "maler/**", "assets/private/**",
    • Deaktivere site map og RSS (jeg har iallfall ikke bruk for det)
      • plugins.emitters[Plugin.ContentIndex]
        • enableSiteMap
        • enableRSS
  • Åpne quartz.layout.ts
    • Fjerne mørk modus
      • Kommentere ut alle tilfeller av Component.Darkmode()
    • Endre “Home” til “Hjem” for brødsmuler
      • Legge til {"rootName": "Hjem"} i konstruktøren for alle tilfeller av Component.Breadcrumbs()
  • Åpne quartz/components/styles/popover.scss
    • Gjøre “innblikk” litt bredere
      • & > .popover-inner {
        • width

Egendefinert sortering

Kilde
To typer sortering er endret:

  • Tillegget FolderPage styrer innholdsvisningen for mappesider, og er nå endret til å sortere basert på sortAs, title eller filnavn, i den prioriterte rekkefølgen;
  • Komponenten Explorer viser filtreet på venstre side av nettsiden (ikke på mobil), og sorter mapper basert på deres originale mappenavn dersom mappenavnet starter med tall, og sorterer filer basert på sortAs.

sortAs og title kan begge defineres i en fils frontmatter-blokk.

  • quartz.config.ts
    • config.plugins.emitters
      • Plugin.FolderPage({ sort: folderPageSort })
  • quartz.layout.ts
    • defaultContentPageLayout.left
      • Component.Explorer({ sortFn: explorerComponentSort })

Nye filer med egne sorteringsfunksjoner er lagt under quartz/quartzmodifiers/.

Norsk I18N

  1. Opprett en ny fil i repo: quartz/i18n/locales/nb-NO.ts; åpne filen
    • Kopier innholdet fra eksempelet under og lim inn
  2. Åpne quartz/i18n/index.ts
    • Legg til import no from "./locales/nb-NO" sammen med resten av import-linjene
    • Legg til "nb-NO": no, under export const TRANSLATIONS = {
  3. Åpne quartz.config.ts
    • Endre locale til "nb-NO"
  4. Lagre, og kjør npx quartz sync

Eksempeloversettelse

import { Translation } from "./definition"
 
export default {
  propertyDefaults: {
    title: "Uten navn",
    description: "Tom beskrivelse",
  },
  components: {
    callout: {
      note: "Notat",
      abstract: "Abstrakt",
      info: "Info",
      todo: "To-Do",
      tip: "Tips",
      success: "Suksess",
      question: "Spørsmål",
      warning: "Advarsel",
      failure: "Feil",
      danger: "Fare",
      bug: "Bug",
      example: "Eksempel",
      quote: "Sitat",
    },
    backlinks: {
      title: "Eksterne lenker",
      noBacklinksFound: "Ingen eksterne lenker ble funnet",
    },
    themeToggle: {
      lightMode: "Lys modus",
      darkMode: "Mørk modus",
    },
    explorer: {
      title: "Utforsker",
    },
    footer: {
      createdWith: "Laget med",
    },
    graph: {
      title: "Grafvisning",
    },
    recentNotes: {
      title: "Nylige notater",
      seeRemainingMore: ({ remaining }) => `Se ${remaining} mer →`,
    },
    transcludes: {
      transcludeOf: ({ targetSlug }) => `Transklusjon av ${targetSlug}`,
      linkToOriginal: "Lenke til original",
    },
    search: {
      title: "Søk",
      searchBarPlaceholder: "Søker etter noe",
    },
    tableOfContents: {
      title: "Innholdsfortegnelse",
    },
    contentMeta: {
      readingTime: ({ minutes }) =>
        minutes === 1 ? "1 minutt lesetid" : `${minutes} minutter lesetid`,
    },
  },
  pages: {
    rss: {
      recentNotes: "Nylige notater",
      lastFewNotes: ({ count }) => `Siste ${count} notater`,
    },
    error: {
      title: "Ikke funnet",
      notFound: "Denne siden er privat, eller så eksisterer den ikke.",
      home: "Tilbake til hjemmesiden",
    },
    folderContent: {
      folder: "Mappe",
      itemsUnderFolder: ({ count }) =>
        count === 1 ? "1 fil i denne mappen." : `${count} filer i denne mappen.`,
    },
    tagContent: {
      tag: "Etikett",
      tagIndex: "Etikettliste",
      itemsUnderTag: ({ count }) =>
        count === 1 ? "1 fil med denne etiketten." : `${count} filer med denne etiketten.`,
      showingFirst: ({ count }) => `Viser de ${count} første etikettene.`,
      totalTags: ({ count }) => `Viser totalt ${count} etiketter.`,
    },
  },
} as const satisfies Translation

Kjente problemer

Oppgradere Quartz

Wæ

Dependabot kan ikke automatisk oppdatere pakker

En gang i uken kjører Dependabot en analyse og oppdatering av npm-pakker i kodeprosjektet. Dersom dette fører til versjonskonflikter kan følgende være en mulig løsning:

{
  // ...
  "overrides": {
    "esbuild-sass-plugin": {
      "esbuild": "$esbuild"
    }
  }
}

Eksempel: Dependabot får ikke til å kjøre npm install etter en pakkeoppdatering fordi det er versjonskonflikt mellom en definert pakke P og en annen pakkes avhengighet PA.
Et av tilfellene i mitt prosjekt var med esbuild, som er en definert pakke, hvor pakken esbuild-sass-plugin også hadde esbuild som en avhengighet, men med en lavere versjon.

Løsningen var da som over, å definere blokken overrides, hvor jeg setter at for pakken esbuild-sass-plugin så skal avhengigheten esbuild følge samme versjon som eksplisitt definert esbuild.
($esbuild blir da en referanse til versjonen som er satt for esbuild under devDependencies.)

Grafvisning

Eksterne lenker