v3.0.3

Author: rudolfjs

.changes/v3.0.3.md

@@ -0,0 +1,3 @@
+## v3.0.3 - 2025-10-02
+### Changed
+* PDF preview now under `<object>` tags with fallback

CHANGELOG.md

@@ -6,6 +6,10 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html),
 and is generated by [Changie](https://github.com/miniscruff/changie).
 
 
+## v3.0.3 - 2025-10-02
+### Changed
+* PDF preview now under `<object>` tags with fallback
+
 ## v3.0.2 - 2025-10-01
 ### Changed
 * README updated to reflect changes to GitHub actions

content/notes/posts/typst-env-management.md

@@ -2,13 +2,13 @@
 title: "Typst Environment Management and Quick Start"
 date: 2025-09-29T11:11:08+10:00
 lastmod: 2025-09-29T11:11:08+10:00
-description: "Creating Typst workspace on Linux"
+description: "Creating a Typst workspace using cargo and exploring basic funtionality"
 categories: ["technical-notes"]
 tags: ["typst", "environment", "academic-writing"]
 draft: false
 ---
 
-_I have only started using Typst in my toolchain, traditionally I use LaTeX for academic writing. Currently, this note serves as a "quick start" and where Typst fits in my documentation workflow._
+_I have only started using Typst, traditionally I use LaTeX for academic writing. Currently, this note serves as a "quick start" and where Typst fits in my documentation workflow._
 
 ## Documentation Hierarchy
 
@@ -60,7 +60,7 @@ From here you can use VSCode as the editor, I am using the [tinymist plugin](htt
 
 To official typst app is [online only](https://typst.app/pricing/).
 
-## Basics
+# Typst basics
 
 _I am setting all the typst output with page width 10cm and diffent heights to display nicely within this page._
 

layouts/_default/_markup/render-codeblock-typst.html

@@ -10,7 +10,14 @@
       {{ if fileExists (printf "static%s" $pngPath) }}
         <img src="{{ $pngPath }}" alt="Typst output" loading="lazy">
       {{ else if fileExists (printf "static%s" $pdfPath) }}
-        <embed src="{{ $pdfPath }}" type="application/pdf" width="100%" height="800px" />
+        <object data="{{ $pdfPath }}" type="application/pdf" width="100%" height="800px">
+          <div class="pdf-fallback">
+            <p>PDF preview unavailable on this device.</p>
+            <a href="{{ $pdfPath }}" class="pdf-download-btn" download aria-label="Download PDF document">
+              📄 Download PDF
+            </a>
+          </div>
+        </object>
       {{ end }}
       <div class="typst-placeholder">
         <pre tabindex="0"><code class="language-typst" data-lang="typst">{{- .Inner -}}</code></pre>

mobile-pdf.md

@@ -0,0 +1,34 @@
+# Mobile Typst PDF Handling
+
+## Analysis
+- The `.render` Typst blocks fall back to `<embed>` when only a PDF exists, which fails on
+  iOS/WebKit-based browsers (e.g. Firefox on iPhone) and results in a blank area.
+- Current assets already include the compiled PDF (e.g. `typst-2236670690.pdf`), so a download
+  fallback can reuse the same path without new renders.
+- CSS media queries are sufficient for a coarse “mobile” check; no user-agent sniffing or JS is
+  required and we stay within Hugo’s static rendering model.
+
+## Plan
+1. Extend `layouts/_default/_markup/render-codeblock-typst.html` so render blocks output two
+   wrappers: the existing PDF `<embed>` plus a fallback panel containing a download prompt that
+   links to the PDF path.
+2. Adjust `static/css/typst-render.css` to hide the `<embed>` on narrow viewports (e.g.
+   `max-width: 768px`) and show the fallback panel instead; keep desktop behaviour unchanged.
+3. Optionally add an accessible hint (e.g. `aria-label`, visually hidden text) so assistive
+   technologies know the panel is a download link.
+4. Re-run `bash scripts/render-typst.sh` only if template changes modify hash calculations (not
+   expected), then validate on desktop and a WebKit-based mobile browser.
+
+## Potential Issues
+- CSS breakpoint approximates “mobile” and may trigger on narrow desktop windows; ensure the
+  download prompt still feels reasonable in that context.
+- If future Typst renders include both PDF and per-page PNGs, we should confirm the fallback logic
+  prefers the richer preview when available.
+- Some older browsers may not fully respect the CSS; adding a `<noscript>` block with the download
+  link is an extra safeguard if that becomes necessary.
+
+## Other Notes
+- No Hugo front matter or site configuration changes required; the behaviour stays confined to the
+  Typst code-block partial and shared stylesheet.
+- Keep the fallback wording neutral (“PDF preview unavailable on mobile – tap to download”) so it
+  applies across devices and avoids promising inline rendering.

static/css/typst-render.css

@@ -127,6 +127,50 @@
     display: none;
 }
 
+/* PDF fallback for browsers that can't embed PDFs */
+.pdf-fallback {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: #cdd6f4;
+    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
+    border-radius: 8px;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.pdf-fallback p {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+    color: #bac2de;
+}
+
+.pdf-download-btn {
+    display: inline-block;
+    padding: 0.75rem 2rem;
+    background: #89b4fa;
+    color: #1e1e2e;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.pdf-download-btn:hover {
+    background: #74c7ec;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.4);
+}
+
+.pdf-download-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+}
+
 /* Mobile responsive design */
 @media (max-width: 768px) {
     .typst-container.side-by-side {