From 05daaccbb5a4daad08f58282fa2c9a88e65d64b1 Mon Sep 17 00:00:00 2001
From: Tristan Wilson <commits@tristanwilson.earth>
Date: Wed, 26 Nov 2025 16:08:50 +0100
Subject: [PATCH] Add toggle to display YAML/TOML frontmatter

Frontmatter is metadata at the start of markdown files, delimited by
`---` (YAML) or `+++` (TOML). It's commonly used by static site
generators (Jekyll, Hugo, etc.) for page metadata like title, date,
and author. Previously, this extension always stripped frontmatter
from the rendered output while extracting the title for the page.

This change adds a "frontmatter" toggle in the Content settings that
allows users to optionally display the frontmatter block.

When displayed, frontmatter is wrapped in a `<div class="frontmatter">`
containing a fenced code block (```yaml or ```toml). This approach:
- Preserves Prism syntax highlighting for the frontmatter content
- Allows targeting `.frontmatter pre code` with CSS for word wrapping,
  so long lines wrap instead of causing horizontal scroll
- Keeps other code blocks unaffected (no wrapping)

Title extraction from frontmatter still occurs regardless of whether
the frontmatter is displayed.
---
 background/storage.js |  1 +
 content/index.css     |  7 +++++++
 content/index.js      | 29 ++++++++++++++++++++---------
 popup/index.js        |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/background/storage.js b/background/storage.js
index 8f5e403..e4c7295 100644
--- a/background/storage.js
+++ b/background/storage.js
@@ -49,6 +49,7 @@ md.storage.defaults = (compilers) => {
     content: {
       autoreload: false,
       emoji: false,
+      frontmatter: false,
       mathjax: false,
       mermaid: false,
       syntax: true,
diff --git a/content/index.css b/content/index.css
index 63b8dd9..2f6d949 100644
--- a/content/index.css
+++ b/content/index.css
@@ -68,6 +68,13 @@ pre#_markdown,
   overflow-y: auto;
 }
 
+.frontmatter pre,
+.frontmatter pre code {
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
 @media (max-width: 576px) { /*Extra small - none*/
   .markdown-theme { width: auto !important; }
 }
diff --git a/content/index.js b/content/index.js
index b7cf50e..47cc1b5 100644
--- a/content/index.js
+++ b/content/index.js
@@ -117,7 +117,7 @@ var render = (md) => {
   chrome.runtime.sendMessage({
     message: 'markdown',
     compiler: state.compiler,
-    markdown: frontmatter(state.markdown)
+    markdown: frontmatter(state.markdown, state.content.frontmatter)
   }, (res) => {
     state.html = res.html
     if (state.content.emoji) {
@@ -233,18 +233,29 @@ var toc = (() => {
   }
 })()
 
-var frontmatter = (md) => {
-  if (/^-{3}[\s\S]+?-{3}/.test(md)) {
-    var [, yaml] = /^-{3}([\s\S]+?)-{3}/.exec(md)
-    var title = /title: (?:'|")*(.*)(?:'|")*/.exec(yaml)
+var frontmatter = (md, show) => {
+  var yamlMatch = /^(-{3})([\s\S]+?)(-{3})/.exec(md)
+  var tomlMatch = /^(\+{3})([\s\S]+?)(\+{3})/.exec(md)
+
+  if (yamlMatch) {
+    var [full, , content] = yamlMatch
+    var title = /title: (?:'|")*(.*)(?:'|")*/.exec(content)
     title && (document.title = title[1])
+    if (show) {
+      return md.replace(full, '<div class="frontmatter">\n\n```yaml\n' + content.trim() + '\n```\n\n</div>\n\n')
+    }
+    return md.replace(full, '')
   }
-  else if (/^\+{3}[\s\S]+?\+{3}/.test(md)) {
-    var [, toml] = /^\+{3}([\s\S]+?)\+{3}/.exec(md)
-    var title = /title = (?:'|"|`)*(.*)(?:'|"|`)*/.exec(toml)
+  else if (tomlMatch) {
+    var [full, , content] = tomlMatch
+    var title = /title = (?:'|"|`)*(.*)(?:'|"|`)*/.exec(content)
     title && (document.title = title[1])
+    if (show) {
+      return md.replace(full, '<div class="frontmatter">\n\n```toml\n' + content.trim() + '\n```\n\n</div>\n\n')
+    }
+    return md.replace(full, '')
   }
-  return md.replace(/^(?:-|\+){3}[\s\S]+?(?:-|\+){3}/, '')
+  return md
 }
 
 var favicon = () => {
diff --git a/popup/index.js b/popup/index.js
index fe01bae..9e4255c 100644
--- a/popup/index.js
+++ b/popup/index.js
@@ -61,6 +61,7 @@ var Popup = () => {
       content: {
         autoreload: 'Auto reload on file change',
         emoji: 'Convert emoji :shortnames: into EmojiOne images',
+        frontmatter: 'Display yaml/toml frontmatter',
         toc: 'Generate Table of Contents',
         mathjax: 'Render MathJax formulas',
         mermaid: 'Mermaid diagrams',