release: v2.9.9 bold Markdown to PDF header, system-ui fonts, dev ergonomics

Author: marcop135

.cursor/rules/header-toolbar.mdc

@@ -6,12 +6,12 @@ alwaysApply: false
 
 # Header toolbar
 
-The title stays **bold** (**`font-weight: 600`** on `.project`). Primary actions (**Import**, **Export**) should stay **readable but not visually heavy**: use **`font-weight: 500`**, **`font-size: 14px`**, **`height: 32px`** (not bold 15px chips that compete with the title).
+The app uses **`system-ui, sans-serif`** globally (see [`App/index.js`](src/App/index.js) and [`styles.css`](src/styles.css)). The product name **Markdown to PDF** in the header uses **`.brand-title`** at **`font-weight: 700`**; **Import** / **Export** and version `small` stay **`font-weight: 400`** with **`font-size: 14px`** on buttons / **`15px`** on the title row, **`height: 32px`** on buttons.
 
 When editing [`Header/index.js`](src/App/Components/Header/index.js) or [`Upload.js`](src/App/Components/Header/Upload.js):
 
 - Prefer **`font-family: inherit`** on header and toolbar controls.
 - If you change the header **overall height** (**`min-height`** on `<header>`), update [`Markdown/index.js`](src/App/Components/Markdown/index.js) **`height: calc(100% - …px)`** so the subtraction matches that bar height (currently **48px**).
 - The **GitHub icon-only** control should match toolbar button height; icons **18px** align with **`32px`** rows.
 
-Avoid regressing only to **`font-weight: 400`** on action labels unless you widen size/tracking and verify with the real app font (**`App/index.js`** stack).
+If labels feel too light on a given OS, adjust **`letter-spacing`** or **`font-size`** before bumping weight above **400** on chrome.

.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "yarn: start (Vite dev server)",
+      "type": "shell",
+      "command": "yarn start",
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "vite",
+        "pattern": { "regexp": "^$" },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".",
+          "endsPattern": "^.*VITE.*ready in \\d+ ms.*$"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated"
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.9.9
+
+- style(ui): bold product name **Markdown to PDF** in the header (toolbar actions stay regular weight)
+- copy: default onboarding uses **Markdown to PDF** casing to match the header
+- style(ui): default `system-ui, sans-serif`; preview body uses the same stack with emoji fallbacks
+- fix(dev): Vite `strictPort` on port 5173; strip strict CSP meta during `vite serve` so HMR is reliable
+- chore: `.vscode` task to run the Vite dev server from the editor
+
 ## 2.9.8
 
 - style(ui): taller header toolbar, stronger action labels (\`font-weight: 600\`, 15px), larger icons; fix main layout \`calc\` to match bar height

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md2pdf",
-  "version": "2.9.8",
+  "version": "2.9.9",
   "description": "In-browser Markdown to PDF: GFM preview, syntax-highlighted code, Mermaid, PWA/offline. Responsive (tabbed editor/preview on small screens). Local conversion, no upload to an app server. Fork of realdennis/md2pdf (MIT).",
   "keywords": [
     "markdown",

src/App/Components/Header/index.js

@@ -34,7 +34,8 @@ const Header = ({ className }) => {
       </Helmet>
       <header className={className + ' no-print'}>
         <p className="project">
-          Markdown To PDF <small>v{version}</small>
+          <strong className="brand-title">Markdown to PDF</strong>{' '}
+          <small>v{version}</small>
         </p>
 
         <div className="menu">
@@ -78,17 +79,21 @@ export default styled(Header)`
   -webkit-font-smoothing: antialiased;
 
   .project {
-    font-weight: 600;
+    font-weight: 400;
     font-size: 15px;
     letter-spacing: 0.2px;
     margin: 0;
     flex-shrink: 0;
     line-height: 1.35;
 
+    .brand-title {
+      font-weight: 700;
+    }
+
     small {
       margin-left: 4px;
       color: #656d76;
-      font-weight: 500;
+      font-weight: 400;
     }
 
     @media (max-width: 420px) {
@@ -119,7 +124,7 @@ export default styled(Header)`
       padding: 0 12px;
       font-size: 14px;
       font-family: inherit;
-      font-weight: 500;
+      font-weight: 400;
       border: 1px solid #d0d7de;
       border-radius: 6px;
       cursor: pointer;

src/App/Components/Markdown/index.js

@@ -121,7 +121,7 @@ const TabButton = styled.button`
   border: none;
   border-radius: 6px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
   cursor: pointer;
   background-color: ${(props) => (props.$active ? '#0984e3' : 'transparent')};
   color: ${(props) => (props.$active ? '#fff' : '#333')};

src/App/Container/Hooks/InitialText.js

@@ -1,6 +1,6 @@
 export const initialText = `# Hello World!
 
-**Markdown To PDF** is an offline Markdown editor with a live preview. Everything runs in your browser (no separate backend).
+**Markdown to PDF** is an offline Markdown editor with a live preview. Everything runs in your browser (no separate backend).
 
 - **GitHub-flavored Markdown**: tables, task lists, syntax-highlighted fenced code blocks
 - **Mermaid diagrams**: use a fenced block with the \`mermaid\` language tag

src/App/index.js

@@ -17,7 +17,7 @@ export default styled(App)`
   height: 100%;
   display: flex;
   flex-direction: column;
-  font-family: 微軟正黑體, sans-serif;
+  font-family: system-ui, sans-serif;
   @media print {
     &,
     div {
@@ -35,7 +35,7 @@ export default styled(App)`
     margin: 18mm 14mm 22mm 14mm;
     @bottom-center {
       content: 'Generated with md2pdf.marcopontili.com · verify authenticity';
-      font: 9px/1.2 sans-serif;
+      font: 9px/1.2 system-ui, sans-serif;
       color: #999;
     }
   }

src/styles.css

@@ -2,6 +2,7 @@ html,
 body,
 #root {
   height: 100%;
+  font-family: system-ui, sans-serif;
 }
 
 /* Make space for toolbar icons */
@@ -31,16 +32,7 @@ header a {
 }
 
 .preview.markdown-body {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    'Noto Sans',
-    Helvetica,
-    Arial,
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji' !important;
+  font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
   font-size: 16px !important;
   line-height: 1.62 !important;
   overflow-wrap: anywhere !important;