fix shortest path for non-md files, mobile fix

Jacky Zhao

2023-08-07 d8d9dd22c9e81f344f3ab56f7262d804c2720fcd

fix shortest path for non-md files, mobile fix

 quartz/build.ts

@@ -57,13 +57,14 @@
  console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)

  perf.addEvent("glob")
  const fps = await glob("**/*.md", argv.directory, cfg.configuration.ignorePatterns)
  const allFiles = await glob("**/*.*", argv.directory, cfg.configuration.ignorePatterns)
  const fps = allFiles.filter((fp) => fp.endsWith(".md"))
  console.log(
    `Found ${fps.length} input files from \`${argv.directory}\` in ${perf.timeSince("glob")}`,
  )

  const filePaths = fps.map((fp) => joinSegments(argv.directory, fp) as FilePath)
  ctx.allSlugs = fps.map((fp) => slugifyFilePath(fp as FilePath))
  ctx.allSlugs = allFiles.map((fp) => slugifyFilePath(fp as FilePath))

  const parsedFiles = await parseMarkdown(ctx, filePaths)
  const filteredContent = filterContent(ctx, parsedFiles)
@@ -93,61 +94,72 @@
  let timeoutId: ReturnType<typeof setTimeout> | null = null
  let toRebuild: Set<FilePath> = new Set()
  let toRemove: Set<FilePath> = new Set()
  let trackedAssets: Set<FilePath> = new Set()
  async function rebuild(fp: string, action: "add" | "change" | "delete") {
    // don't do anything for gitignored files
    if (ignored(fp)) {
      return
    }

    // dont bother rebuilding for non-content files, just track and refresh
    if (path.extname(fp) !== ".md") {
      // dont bother rebuilding for non-content files, just refresh
      fp = toPosixPath(fp)
      const filePath = joinSegments(argv.directory, fp) as FilePath
      if (action === "add" || action === "change") {
        trackedAssets.add(filePath)
      } else if (action === "delete") {
        trackedAssets.add(filePath)
      }
      clientRefresh()
      return
    }

    fp = toPosixPath(fp)
    if (!ignored(fp)) {
      const filePath = joinSegments(argv.directory, fp) as FilePath
      if (action === "add" || action === "change") {
        toRebuild.add(filePath)
      } else if (action === "delete") {
        toRemove.add(filePath)
      }
    const filePath = joinSegments(argv.directory, fp) as FilePath
    if (action === "add" || action === "change") {
      toRebuild.add(filePath)
    } else if (action === "delete") {
      toRemove.add(filePath)
    }

      if (timeoutId) {
        clearTimeout(timeoutId)
      }
    if (timeoutId) {
      clearTimeout(timeoutId)
    }

      // debounce rebuilds every 250ms
      timeoutId = setTimeout(async () => {
        const perf = new PerfTimer()
        console.log(chalk.yellow("Detected change, rebuilding..."))
        try {
          const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
    // debounce rebuilds every 250ms
    timeoutId = setTimeout(async () => {
      const perf = new PerfTimer()
      console.log(chalk.yellow("Detected change, rebuilding..."))
      try {
        const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))

          ctx.allSlugs = [...new Set([...contentMap.keys(), ...toRebuild])]
            .filter((fp) => !toRemove.has(fp))
            .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
        ctx.allSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
          .filter((fp) => !toRemove.has(fp))
          .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))

          const parsedContent = await parseMarkdown(ctx, filesToRebuild)
          for (const content of parsedContent) {
            const [_tree, vfile] = content
            contentMap.set(vfile.data.filePath!, content)
          }

          for (const fp of toRemove) {
            contentMap.delete(fp)
          }

          await rimraf(argv.output)
          const parsedFiles = [...contentMap.values()]
          const filteredContent = filterContent(ctx, parsedFiles)
          await emitContent(ctx, filteredContent)
          console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
        } catch {
          console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
        const parsedContent = await parseMarkdown(ctx, filesToRebuild)
        for (const content of parsedContent) {
          const [_tree, vfile] = content
          contentMap.set(vfile.data.filePath!, content)
        }

        clientRefresh()
        toRebuild.clear()
        toRemove.clear()
      }, 250)
    }
        for (const fp of toRemove) {
          contentMap.delete(fp)
        }

        await rimraf(argv.output)
        const parsedFiles = [...contentMap.values()]
        const filteredContent = filterContent(ctx, parsedFiles)
        await emitContent(ctx, filteredContent)
        console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
      } catch {
        console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
      }

      clientRefresh()
      toRebuild.clear()
      toRemove.clear()
    }, 250)
  }

  const watcher = chokidar.watch(".", {

 quartz/plugins/emitters/assets.ts

@@ -12,7 +12,7 @@
    },
    async emit({ argv, cfg }, _content, _resources, _emit): Promise<FilePath[]> {
      // glob all non MD/MDX/HTML files in content folder and copy it over
      const assetsPath = joinSegments(argv.output, "assets")
      const assetsPath = argv.output
      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
      const res: FilePath[] = []
      for (const fp of fps) {
@@ -24,7 +24,7 @@
        const dir = path.dirname(dest) as FilePath
        await fs.promises.mkdir(dir, { recursive: true }) // ensure dir exists
        await fs.promises.copyFile(src, dest)
        res.push(joinSegments("assets", fp) as FilePath)
        res.push(fp)
      }

      return res

 quartz/plugins/transformers/links.ts

@@ -99,9 +99,10 @@
                typeof node.properties.src === "string"
              ) {
                if (!isAbsoluteUrl(node.properties.src)) {
                  let dest = node.properties.src as RelativeURL
                  const ext = path.extname(node.properties.src)
                  node.properties.src =
                    transformLink(joinSegments("assets", node.properties.src)) + ext
                  dest = node.properties.src = transformLink(dest)
                  node.properties.src = dest + ext
                }
              }
            })

 quartz/styles/base.scss

@@ -83,7 +83,7 @@
  @media all and (max-width: $fullPageWidth) {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 800px;
    // max-width: 800px;
  }

  & article {