From 586a2c3f537b61f3c078f3aae28ce127e1a3dbf1 Mon Sep 17 00:00:00 2001 From: Rudolf J Schnetler Date: Mon, 29 Sep 2025 12:32:09 +1000 Subject: [PATCH 1/4] started new entry --- content/notes/posts/typst-env-management.md | 59 +++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 content/notes/posts/typst-env-management.md diff --git a/content/notes/posts/typst-env-management.md b/content/notes/posts/typst-env-management.md new file mode 100644 index 0000000..2865c93 --- /dev/null +++ b/content/notes/posts/typst-env-management.md @@ -0,0 +1,59 @@ +--- +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" +categories: ["technical-notes"] +tags: ["typst", "environment", "academic-writing"] +draft: true +--- + +_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._ + +## Documentation Hierarchy + +My documentation workflow follows a hierarchy based on audience and formality (this can/will change): + +1. **Personal/Laboratory Notes** (Zero dissemination) + - **Tool**: Obsidian/Markdown + - **Use**: Personal knowledge management, lab notebooks, daily notes, research ideas + - **Output**: Stay in markdown, occasionally export to PDF via Obsidian + +2. **Professional Dissemination** (Internal/semi-formal) + - **Tool**: Typst + - **Use**: Progress reports, meeting agendas, presentations, technical documentation, internal reports + - **Output**: Direct to PDF + - **Why**: Fast compilation, clean output, **simpler than LaTeX** + +3. **Academic Dissemination** (Formal publication) + - **Tool**: LaTeX + - **Use**: Journal articles, conference papers, thesis chapters + - **Output**: PDF for submission, or LaTeX source if required + - **Why**: Universal journal acceptance, mature ecosystem, required by most publishers + +# Environment + +1. Fedora Linux 42 +2. cargo 1.89.0 +3. typst 0.13.1 + +## Install typst-cli + +I am assuming [cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) has been installed. +To install typst: + +```bash +cargo install --locked typst-cli +``` + +From here you can use VSCode as the editor, I am using the [tinymist plugin](https://myriad-dreamin.github.io/tinymist/). + +To official typst app is [online only](https://typst.app/pricing/). + +## Notes + +- + +## References + +- \ No newline at end of file From d9c72ca819efbcd56e1ebec0f0936a930f706c20 Mon Sep 17 00:00:00 2001 From: Rudolf J Schnetler Date: Mon, 29 Sep 2025 20:49:35 +1000 Subject: [PATCH 2/4] copy and copy exclusion working --- .../unreleased/Added-20250929-130247.yaml | 3 + .../unreleased/Added-20250929-130255.yaml | 3 + content/notes/posts/typst-env-management.md | 19 +- layouts/_default/baseof.html | 393 +++++++++++++----- 4 files changed, 319 insertions(+), 99 deletions(-) create mode 100644 .changes/unreleased/Added-20250929-130247.yaml create mode 100644 .changes/unreleased/Added-20250929-130255.yaml diff --git a/.changes/unreleased/Added-20250929-130247.yaml b/.changes/unreleased/Added-20250929-130247.yaml new file mode 100644 index 0000000..a3e735c --- /dev/null +++ b/.changes/unreleased/Added-20250929-130247.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Click to copy on codeblocks +time: 2025-09-29T13:02:47.581202939+10:00 diff --git a/.changes/unreleased/Added-20250929-130255.yaml b/.changes/unreleased/Added-20250929-130255.yaml new file mode 100644 index 0000000..456dc13 --- /dev/null +++ b/.changes/unreleased/Added-20250929-130255.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Hightlight.js for code hightlighting +time: 2025-09-29T13:02:55.149029223+10:00 diff --git a/content/notes/posts/typst-env-management.md b/content/notes/posts/typst-env-management.md index 2865c93..1e068f1 100644 --- a/content/notes/posts/typst-env-management.md +++ b/content/notes/posts/typst-env-management.md @@ -30,7 +30,8 @@ My documentation workflow follows a hierarchy based on audience and formality (t - **Use**: Journal articles, conference papers, thesis chapters - **Output**: PDF for submission, or LaTeX source if required - **Why**: Universal journal acceptance, mature ecosystem, required by most publishers - +4. **Word.docx** + - Only if I **must**. # Environment 1. Fedora Linux 42 @@ -39,17 +40,29 @@ My documentation workflow follows a hierarchy based on audience and formality (t ## Install typst-cli -I am assuming [cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) has been installed. -To install typst: +I am assuming [cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) has been installed. +1. To install typst: ```bash cargo install --locked typst-cli ``` +2. Check that it is installed correctly: + +```bash +typst --version +``` +Expected Output: +```console {.no-copy} +typst 0.13.1 +``` From here you can use VSCode as the editor, I am using the [tinymist plugin](https://myriad-dreamin.github.io/tinymist/). To official typst app is [online only](https://typst.app/pricing/). +## Quick Start + + ## Notes - diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 352e90d..4cedb5b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -302,125 +302,139 @@ {{ end }} - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + @@ -700,5 +774,132 @@ }); {{ end }} + + + From 6ae9d0928956bf2d8003a6a0f3679b27600d5323 Mon Sep 17 00:00:00 2001 From: Rudolf J Schnetler Date: Wed, 1 Oct 2025 20:26:05 +1000 Subject: [PATCH 3/4] ready to merge --- .../unreleased/Added-20250930-072149.yaml | 3 + .../unreleased/Added-20250930-182748.yaml | 3 + .../unreleased/Added-20250930-182758.yaml | 3 + .../unreleased/Added-20250930-190005.yaml | 3 + .../unreleased/Added-20251001-082427.yaml | 3 + .../unreleased/Changed-20250930-185943.yaml | 3 + .../unreleased/Changed-20250930-185951.yaml | 3 + .gitattributes | 2 + .github/workflows/hugo.yml | 54 +- .github/workflows/playwright.yml | 27 + .gitignore | 27 +- README.md | 70 +- content/notes/posts/typst-env-management.md | 532 +++- example.typ | 105 + .../_markup/render-codeblock-mermaid.html | 14 +- .../_markup/render-codeblock-typst.html | 41 + layouts/_default/_markup/render-image.html | 1 + layouts/_default/baseof.html | 256 +- package-lock.json | 97 + package.json | 32 + pixi.lock | 2783 +++++++++++++++++ playwright.config.js | 82 + plos-latex-template/plos2025.bst | 1996 ++++++++++++ plos-latex-template/plos_bibtex_sample.bib | 163 + plos-latex-template/plos_latex_template.tex | 382 +++ pyproject.toml | 26 + references.bib | 7 + scripts/fnv32a.py | 32 + scripts/render-typst.sh | 171 + scripts/xkcd_sine.py | 51 + sine_is_life.png | Bin 0 -> 307465 bytes src/rudolfjs_github_io/__init__.py | 1 + static/css/blockquote.css | 64 + static/css/highlighter.css | 5 +- static/css/typst-render.css | 180 ++ .../typst-env-management/typst-1220667901.png | Bin 0 -> 16387 bytes .../typst-env-management/typst-1905494711.png | Bin 0 -> 218310 bytes .../typst-env-management/typst-2798805235.png | Bin 0 -> 39381 bytes .../typst-env-management/typst-673833989.png | Bin 0 -> 90157 bytes .../typst-env-management/typst-877334568.png | Bin 0 -> 228779 bytes .../typst-env-management/typst-993561090.png | Bin 0 -> 175325 bytes tests/.gitkeep | 0 tests/code-highlighting.spec.js | 200 ++ tests/example.spec.js | 19 + tree.jpg | Bin 0 -> 2315147 bytes 45 files changed, 7338 insertions(+), 103 deletions(-) create mode 100644 .changes/unreleased/Added-20250930-072149.yaml create mode 100644 .changes/unreleased/Added-20250930-182748.yaml create mode 100644 .changes/unreleased/Added-20250930-182758.yaml create mode 100644 .changes/unreleased/Added-20250930-190005.yaml create mode 100644 .changes/unreleased/Added-20251001-082427.yaml create mode 100644 .changes/unreleased/Changed-20250930-185943.yaml create mode 100644 .changes/unreleased/Changed-20250930-185951.yaml create mode 100644 .gitattributes create mode 100644 .github/workflows/playwright.yml create mode 100644 example.typ create mode 100644 layouts/_default/_markup/render-codeblock-typst.html create mode 100644 layouts/_default/_markup/render-image.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 pixi.lock create mode 100644 playwright.config.js create mode 100644 plos-latex-template/plos2025.bst create mode 100644 plos-latex-template/plos_bibtex_sample.bib create mode 100644 plos-latex-template/plos_latex_template.tex create mode 100644 pyproject.toml create mode 100644 references.bib create mode 100755 scripts/fnv32a.py create mode 100755 scripts/render-typst.sh create mode 100644 scripts/xkcd_sine.py create mode 100644 sine_is_life.png create mode 100644 src/rudolfjs_github_io/__init__.py create mode 100644 static/css/blockquote.css create mode 100644 static/css/typst-render.css create mode 100644 static/rendered/typst/typst-env-management/typst-1220667901.png create mode 100644 static/rendered/typst/typst-env-management/typst-1905494711.png create mode 100644 static/rendered/typst/typst-env-management/typst-2798805235.png create mode 100644 static/rendered/typst/typst-env-management/typst-673833989.png create mode 100644 static/rendered/typst/typst-env-management/typst-877334568.png create mode 100644 static/rendered/typst/typst-env-management/typst-993561090.png create mode 100644 tests/.gitkeep create mode 100644 tests/code-highlighting.spec.js create mode 100644 tests/example.spec.js create mode 100644 tree.jpg diff --git a/.changes/unreleased/Added-20250930-072149.yaml b/.changes/unreleased/Added-20250930-072149.yaml new file mode 100644 index 0000000..8e393c4 --- /dev/null +++ b/.changes/unreleased/Added-20250930-072149.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Playwright testing init +time: 2025-09-30T07:21:49.847142979+10:00 diff --git a/.changes/unreleased/Added-20250930-182748.yaml b/.changes/unreleased/Added-20250930-182748.yaml new file mode 100644 index 0000000..1ea6fa5 --- /dev/null +++ b/.changes/unreleased/Added-20250930-182748.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Typst code render +time: 2025-09-30T18:27:48.705433051+10:00 diff --git a/.changes/unreleased/Added-20250930-182758.yaml b/.changes/unreleased/Added-20250930-182758.yaml new file mode 100644 index 0000000..ee28091 --- /dev/null +++ b/.changes/unreleased/Added-20250930-182758.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Mermaid raw text display option +time: 2025-09-30T18:27:58.86821716+10:00 diff --git a/.changes/unreleased/Added-20250930-190005.yaml b/.changes/unreleased/Added-20250930-190005.yaml new file mode 100644 index 0000000..851bb8a --- /dev/null +++ b/.changes/unreleased/Added-20250930-190005.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Correctly rendering blockquotes +time: 2025-09-30T19:00:05.281956224+10:00 diff --git a/.changes/unreleased/Added-20251001-082427.yaml b/.changes/unreleased/Added-20251001-082427.yaml new file mode 100644 index 0000000..e567144 --- /dev/null +++ b/.changes/unreleased/Added-20251001-082427.yaml @@ -0,0 +1,3 @@ +kind: Added +body: Playwright testing suite added +time: 2025-10-01T08:24:27.186267905+10:00 diff --git a/.changes/unreleased/Changed-20250930-185943.yaml b/.changes/unreleased/Changed-20250930-185943.yaml new file mode 100644 index 0000000..8b7ad15 --- /dev/null +++ b/.changes/unreleased/Changed-20250930-185943.yaml @@ -0,0 +1,3 @@ +kind: Changed +body: Colour correction for hyperlinks +time: 2025-09-30T18:59:43.054642843+10:00 diff --git a/.changes/unreleased/Changed-20250930-185951.yaml b/.changes/unreleased/Changed-20250930-185951.yaml new file mode 100644 index 0000000..94ea3c1 --- /dev/null +++ b/.changes/unreleased/Changed-20250930-185951.yaml @@ -0,0 +1,3 @@ +kind: Changed +body: Hyperlinks now bold text +time: 2025-09-30T18:59:51.40831382+10:00 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..887a2c1 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# SCM syntax highlighting & preventing 3-way merges +pixi.lock merge=binary linguist-language=YAML linguist-generated=true diff --git a/.github/workflows/hugo.yml b/.github/workflows/hugo.yml index 1a47d2f..07e894b 100644 --- a/.github/workflows/hugo.yml +++ b/.github/workflows/hugo.yml @@ -1,4 +1,4 @@ -# Sample workflow for building and deploying a Hugo site to GitHub Pages +# Sample workflow for building and deploying a Hugo site to GitHub Pages name: Platform release to Pages on: @@ -8,24 +8,24 @@ on: # Allows you to run this workflow manually from the Actions tab workflow_dispatch: - -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages -permissions: - contents: read - pages: write - id-token: write - -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: true - -# Default to bash -defaults: - run: - shell: bash - + +# Default to bash +defaults: + run: + shell: bash + jobs: # Verify job (extra checks for platform releases) verify: @@ -44,6 +44,17 @@ jobs: && sudo dpkg -i ${{ runner.temp }}/hugo.deb - name: Install Dart Sass run: sudo snap install dart-sass + - name: Install Rust and Typst + run: | + curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y + source "$HOME/.cargo/env" + cargo install --locked typst-cli + echo "$HOME/.cargo/bin" >> $GITHUB_PATH + - name: Render Typst code blocks + run: | + if [ -f scripts/render-typst.sh ]; then + bash scripts/render-typst.sh + fi - name: Build with Hugo (panic on warnings) env: HUGO_ENVIRONMENT: production @@ -62,6 +73,12 @@ jobs: && sudo dpkg -i ${{ runner.temp }}/hugo.deb - name: Install Dart Sass run: sudo snap install dart-sass + - name: Install Rust and Typst + run: | + curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y + source "$HOME/.cargo/env" + cargo install --locked typst-cli + echo "$HOME/.cargo/bin" >> $GITHUB_PATH - name: Checkout uses: actions/checkout@v4 with: @@ -72,6 +89,11 @@ jobs: uses: actions/configure-pages@v5 - name: Install Node.js dependencies run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true" + - name: Render Typst code blocks + run: | + if [ -f scripts/render-typst.sh ]; then + bash scripts/render-typst.sh + fi - name: Build with Hugo env: HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000..3eb1314 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 753e23c..b602d47 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,29 @@ CLAUDE.md GEMINI.md AGENTS.md .claude -.copilot \ No newline at end of file +.copilot + +# Playwright +node_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ +/playwright/.auth/ + +# Typst / LaTeX +*.pdf +*.aux +*.log +*.out +*.toc +*.synctex.gz +*.fdb_latexmk +*.fls +*.xdv + +# Notes +*.txt# pixi environments +.pixi/* +!.pixi/config.toml +.typst-temp-* diff --git a/README.md b/README.md index a15ed63..49dcee9 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Use `hugo new` with the available archetypes to create new content: ### Blog Posts ```bash -# Structured blog post +# Structured blog post hugo new content/blog/posts/your-post-title.md # Creates a note hugo new content/notes/posts/your-note-title.md @@ -33,3 +33,71 @@ hugo new content/projects/your-project-name.md # Add a publication hugo new content/publications/your-publication-title.md ``` + +## Code Block Rendering + +Control how code blocks are displayed vs rendered using attributes: + +### Mermaid Diagrams +- ` ```mermaid ` - Default: render the diagram +- ` ```mermaid {.raw} ` - Show raw mermaid code (syntax highlighted) + +### Typst Documents +- ` ```typst ` - Default: show raw typst code (syntax highlighted) +- ` ```typst {.render} ` - Compile and show output +- ` ```typst {.side-by-side} ` - Show code and output side by side + +#### Rendering Typst Outputs + +To generate PNG images for Typst code blocks marked with `{.render}` or `{.side-by-side}`: + +```bash +bash scripts/render-typst.sh +``` + +This script will: +- Scan all markdown files for Typst code blocks that need rendering +- Compile them using the Typst CLI to PNG images +- Save outputs to `static/rendered/typst/{page-slug}/typst-{hash}.png` +- Cache previously rendered images (won't re-render if unchanged) + +## Content Publishing Workflow + +### For posts with Typst rendering: + +1. **Create or edit your markdown file:** + ```bash + hugo new content/notes/posts/my-new-post.md + # Edit the file, add Typst code blocks with {.render} or {.side-by-side} + ``` + +2. **Generate Typst PNG outputs:** + ```bash + bash scripts/render-typst.sh + ``` + +3. **Test locally:** + ```bash + hugo server -D + # Visit http://localhost:1313 and verify your content renders correctly + ``` + +4. **Commit and push:** + ```bash + git add content/notes/posts/my-new-post.md + git add static/rendered/typst/my-new-post/ + git commit -m "Add new post with Typst rendering" + git push + ``` + +### For posts without Typst rendering: + +1. Create/edit markdown file +2. Test locally with `hugo server -D` +3. Commit and push + +### Important Notes: +- **Always commit the generated PNG files** - They must be in the repository for GitHub Pages to serve them +- The render script uses caching - only re-renders changed content +- Raw Typst code blocks (` ```typst `) don't need the script, they just show syntax-highlighted code +- Mermaid diagrams work without scripts (rendered client-side) diff --git a/content/notes/posts/typst-env-management.md b/content/notes/posts/typst-env-management.md index 1e068f1..93d8107 100644 --- a/content/notes/posts/typst-env-management.md +++ b/content/notes/posts/typst-env-management.md @@ -1,72 +1,460 @@ ---- -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" -categories: ["technical-notes"] -tags: ["typst", "environment", "academic-writing"] -draft: true ---- - -_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._ - -## Documentation Hierarchy - -My documentation workflow follows a hierarchy based on audience and formality (this can/will change): - -1. **Personal/Laboratory Notes** (Zero dissemination) - - **Tool**: Obsidian/Markdown - - **Use**: Personal knowledge management, lab notebooks, daily notes, research ideas - - **Output**: Stay in markdown, occasionally export to PDF via Obsidian - -2. **Professional Dissemination** (Internal/semi-formal) - - **Tool**: Typst - - **Use**: Progress reports, meeting agendas, presentations, technical documentation, internal reports - - **Output**: Direct to PDF - - **Why**: Fast compilation, clean output, **simpler than LaTeX** - -3. **Academic Dissemination** (Formal publication) - - **Tool**: LaTeX - - **Use**: Journal articles, conference papers, thesis chapters - - **Output**: PDF for submission, or LaTeX source if required - - **Why**: Universal journal acceptance, mature ecosystem, required by most publishers -4. **Word.docx** - - Only if I **must**. -# Environment - -1. Fedora Linux 42 -2. cargo 1.89.0 -3. typst 0.13.1 - -## Install typst-cli - -I am assuming [cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) has been installed. -1. To install typst: - -```bash -cargo install --locked typst-cli -``` -2. Check that it is installed correctly: - -```bash -typst --version -``` - -Expected Output: -```console {.no-copy} -typst 0.13.1 -``` -From here you can use VSCode as the editor, I am using the [tinymist plugin](https://myriad-dreamin.github.io/tinymist/). - -To official typst app is [online only](https://typst.app/pricing/). - -## Quick Start - - -## Notes - -- - -## References - -- \ No newline at end of file +--- +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" +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._ + +## Documentation Hierarchy + +My documentation workflow follows a hierarchy based on audience and formality (this can/will change): + +1. **Personal/Laboratory Notes** (Zero dissemination) + - **Tool**: Obsidian/Markdown + - **Use**: Personal knowledge management, lab notebooks, daily notes, research ideas + - **Output**: Stay in markdown, occasionally export to PDF via Obsidian + +2. **Professional Dissemination** (Internal/semi-formal, formal) + - **Tool**: Typst + - **Use**: Progress reports, meeting agendas, presentations, technical documentation, internal reports + - **Output**: Direct to PDF + - **Why**: Fast compilation, clean output, **simpler than LaTeX** + +3. **Academic Dissemination** (Publication) + - **Tool**: LaTeX + - **Use**: Journal articles, conference papers, thesis chapters + - **Output**: PDF for submission, or LaTeX source if required + - **Why**: Universal journal acceptance, mature ecosystem, required by most publishers +4. **Word.docx** + - Only if I **must**. +# Environment + +1. Fedora Linux 42 +2. cargo 1.89.0 +3. typst 0.13.1 + +## Install typst-cli + +I am assuming [cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) has been installed. +1. To install typst: + +```bash +cargo install --locked typst-cli +``` +2. Check that it is installed correctly: + +```bash +typst --version +``` + +Expected Output: +```console {.no-copy} +typst 0.13.1 +``` +From here you can use VSCode as the editor, I am using the [tinymist plugin](https://myriad-dreamin.github.io/tinymist/). + +To official typst app is [online only](https://typst.app/pricing/). + +## Basics + +_I am setting all the typst output with page width 10cm and diffent heights to display nicely within this page._ + +### Sections + +```typst {.side-by-side} +#set page(width: 10cm, height: auto) += Introduction +This is a paragraph +``` + +### Lists + +For an unordered list use `-`, for ordered lists use `+` + +```typst {.side-by-side} +#set page(width: 10cm, height: auto) +The following is an undordered list: +- Item 1 +- Item 2 +- Item 3 +This will be an ordered list: ++ Item 1 ++ Item 2 ++ Item 3 +``` + +### Tables + +Creating a basic table, using the [table function](https://typst.app/docs/reference/model/table/): + +```typst {.side-by-side} +#set page(width: 10cm, height: auto) +#table( + columns: 2, + [*Amount*], [*Ingredient*], + [360g], [Baking flour], + [250g], [Butter (room temp.)], + [150g], [Brown sugar], + [100g], [Cane sugar], + [100g], [70% cocoa chocolate], + [100g], [35-40% cocoa chocolate], + [2], [Eggs], + [Pinch], [Salt], + [Drizzle], [Vanilla extract], +) +``` + +#### Table Captions + +By default, Typst places captions below tables. For academic writing, captions should appear above tables. Add this configuration to place table captions at the top: + +```typst {.side-by-side} +// Place table captions above tables +#set page(width: 10cm, height: 19cm) + +== Default caption + +By default, the caption will be at the bottom of the table: + +#figure( + table( + columns: 2, + [*Amount*], [*Ingredient*], + [360g], [Baking flour], + [250g], [Butter (room temp.)], + [150g], [Brown sugar], + [100g], [Cane sugar], + [100g], [70% cocoa chocolate], + [100g], [35-40% cocoa chocolate], + [2], [Eggs], + [Pinch], [Salt], + [Drizzle], [Vanilla extract], + ), + caption: [Table caption appears below the table], +) + +#v(1em) + +== Set caption position + +And now, at the top! + +#show figure.where( + kind: table +): set figure.caption(position: top) + +#figure( + table( + columns: 2, + [*Feature*], [*Value*], + [Speed], [Fast], + [Quality], [High], + ), + caption: [Table caption appears above the table], +) +``` + +### Figures / Images + +Figures are very simple, using the [figure function](https://typst.app/docs/reference/model/figure/) and adding `image` to display an image: + +```typst {.side-by-side} +#set page(width: 10cm, height: auto) + +#figure( + image("tree.jpg", width: 80%), + caption: [A lonely tree.], +) +``` + + +#### Referencing Figures + +To reference figures (or tables) in your text, use the `@` symbol followed by the label you assigned to the figure: + +```typst +#figure( + image("plot.png"), + caption: [Results from experiment A], +) + +As shown in @figure1, the results indicate... +``` + +For example: + +```typst {.side-by-side} +#set page(width: 10cm, height: auto) +@tree shows a figure of a tree. + +#figure( + image("tree.jpg", width: 80%), + caption: [A lonely tree.], +) +``` + +The `@figure1` reference will automatically render as "Figure 1" (or the appropriate number). You can also reference: +- Tables: `@table-label` +- Equations: `@eq-label` +- Any labeled element in your document + +Example with multiple references: + +```typst +We installed typst using cargo @crates_io. + +Our typical day is outlined in @figure1, and results +are summarized in @table1. +``` + +## Example - Basic Article + +An internal whitepaper example, following _loose_ academic journal requirements. + +- Paper size: Letter (8.5" × 11") +- Font size: 10pt +- Margins: Top 0.85in, Left 2.75in (wide for annotations), Footer 0.75in +- Text dimensions: 5.25in width × 8.75in height +- Line numbers: Right side +- Paragraph: 0.5cm indent, ragged right + + +```typst +#set page( + paper: "us-letter", + margin: ( + top: 0.85in, + left: 1.75in, + right: 0.5in, + bottom: 0.85in, + ), + // footer: 0.75in, //this caused an error - need to review +) + +// Text configuration +#set text( + size: 10pt, +) + +// Paragraph configuration +#set par( + first-line-indent: 0.5cm, + justify: false, // ragged right +) + +// Bibliography configuration +#set bibliography(style: "ieee") + +// Table caption configuration - place captions above tables (Vancouver/MLA style) +#show figure.where( + kind: table +): set figure.caption(position: top) + += The impact of typst on scientific writing in Digital Health + +#v(1em) // vertical space, same as \vspace in LaTeX + +#grid( + columns: (1fr, 1fr), + align(center)[ + Rudolf J Schnetler \ + The University of Queensland \ + #link("mailto:r.schnetler@uq.edu.au") + ], + align(center)[ + Dr. John Collaborator \ + The University of Queensland \ + #link("mailto:c.collaborator@uq.edu.au") + ] +) + +#v(1em) + +#align(center)[ + #set par(justify: false) + *Abstract* \ + Typst is a new typesetting system that aims to improve the scientific writing process. This article explores its features, advantages, and potential impact on the field of Digital Health. +] + +#v(1em) + +== Introduction + +Typst is a modern, fast typesetting system for technical and academic documents. Start with the +#link("https://typst.app/docs/")[official documentation]. + +For reproducible builds across machines, use a per‑project environment manager such as typstenv. It lets +you pin the Typst version, manage dependencies, and create isolated project environments, making +collaboration and CI safer and repeatable. + +== Materials & Methods + +We installed typst using cargo @crates_io. + +We also used some math: + + +$ A = pi r^2 $ + + +And our typical day outlined in @fig1. +#figure( + image("sine_is_life.png"), + caption: [*The Function of Life.* A sinusoidal representation of daily happiness levels from 6am to 10pm, showing key life events and their impact on well-being throughout a typical day.], +) + +== Results + +The main features of typst include a user-friendly syntax, powerful layout capabilities, and seamless integration with other tools. These features make it easier for researchers to create high-quality documents quickly and efficiently. + +#figure( + table( + columns: 4, + table.header( + [*Feature*], [*Typst*], [*LaTeX*], [*Word*], + ), + [Compilation Speed], [Fast], [Slow], [N/A], + [Learning Curve], [Low], [High], [Low], + [Version Control], [Excellent], [Excellent], [Poor], + [Mathematical Typesetting], [Good], [Excellent], [Fair], + ), + caption: [*Comparison of document preparation systems.* Feature comparison across three commonly used document preparation systems for academic writing.], +) + +== Discussion + +The results of our study indicate that typst has the potential to significantly improve the scientific writing process in Digital Health. Its user-friendly interface and powerful features make it an attractive option for researchers and practitioners alike. + +== Conclusion + +In conclusion, typst represents a promising advancement in the field of scientific writing. By streamlining the writing process and enhancing collaboration, it has the potential to improve the quality and efficiency of research in Digital Health. + +#bibliography("references.bib") + +``` + +```typst {.render} +#set page( + paper: "us-letter", + margin: ( + top: 0.85in, + left: 1.75in, + right: 0.5in, + bottom: 0.85in, + ), + // footer: 0.75in, //this caused an error - need to review +) + +// Text configuration +#set text( + size: 10pt, +) + +// Paragraph configuration +#set par( + first-line-indent: 0.5cm, + justify: false, // ragged right +) + +// Bibliography configuration +#set bibliography(style: "ieee") + +// Table caption configuration - place captions above tables (Vancouver/MLA style) +#show figure.where( + kind: table +): set figure.caption(position: top) + += The impact of typst on scientific writing in Digital Health + +#v(1em) // vertical space, same as \vspace in LaTeX + +#grid( + columns: (1fr, 1fr), + align(center)[ + Rudolf J Schnetler \ + The University of Queensland \ + #link("mailto:r.schnetler@uq.edu.au") + ], + align(center)[ + Dr. John Collaborator \ + The University of Queensland \ + #link("mailto:c.collaborator@uq.edu.au") + ] +) + +#v(1em) + +#align(center)[ + #set par(justify: false) + *Abstract* \ + Typst is a new typesetting system that aims to improve the scientific writing process. This article explores its features, advantages, and potential impact on the field of Digital Health. +] + +#v(1em) + +== Introduction + +Typst is a modern, fast typesetting system for technical and academic documents. Start with the +#link("https://typst.app/docs/")[official documentation]. + +For reproducible builds across machines, use a per‑project environment manager such as typstenv. It lets +you pin the Typst version, manage dependencies, and create isolated project environments, making +collaboration and CI safer and repeatable. + +== Materials & Methods + +We installed typst using cargo @crates_io. + +We also used some math: + + +$ A = pi r^2 $ + + +And our typical day outlined in @fig1. +#figure( + image("sine_is_life.png"), + caption: [*The Function of Life.* A sinusoidal representation of daily happiness levels from 6am to 10pm, showing key life events and their impact on well-being throughout a typical day.], +) + +== Results + +The main features of typst include a user-friendly syntax, powerful layout capabilities, and seamless integration with other tools. These features make it easier for researchers to create high-quality documents quickly and efficiently. + +#figure( + table( + columns: 4, + table.header( + [*Feature*], [*Typst*], [*LaTeX*], [*Word*], + ), + [Compilation Speed], [Fast], [Slow], [N/A], + [Learning Curve], [Low], [High], [Low], + [Version Control], [Excellent], [Excellent], [Poor], + [Mathematical Typesetting], [Good], [Excellent], [Fair], + ), + caption: [*Comparison of document preparation systems.* Feature comparison across three commonly used document preparation systems for academic writing.], +) + +== Discussion + +The results of our study indicate that typst has the potential to significantly improve the scientific writing process in Digital Health. Its user-friendly interface and powerful features make it an attractive option for researchers and practitioners alike. + +== Conclusion + +In conclusion, typst represents a promising advancement in the field of scientific writing. By streamlining the writing process and enhancing collaboration, it has the potential to improve the quality and efficiency of research in Digital Health. + +#bibliography("references.bib") + +``` + + +## References + +1. [Writing in typst](https://typst.app/docs/tutorial/writing-in-typst/) +2. [Guide for LaTex Users](https://typst.app/docs/guides/guide-for-latex-users/) +3. [Typst Table Guide](https://typst.app/docs/guides/table-guide/) \ No newline at end of file diff --git a/example.typ b/example.typ new file mode 100644 index 0000000..89984e9 --- /dev/null +++ b/example.typ @@ -0,0 +1,105 @@ +#set page( + paper: "us-letter", + margin: ( + top: 0.85in, + left: 2.75in, + right: 0.5in, + bottom: 0.85in, + ), + // footer: 0.75in, //this caused an error - need to review +) + +// Text configuration +#set text( + size: 10pt, +) + +// Paragraph configuration +#set par( + first-line-indent: 0.5cm, + justify: false, // ragged right +) + +// Bibliography configuration +#set bibliography(style: "ieee") + +// Table caption configuration - place captions above tables (Vancouver/MLA style) +#show figure.where( + kind: table +): set figure.caption(position: top) + += The impact of typst on scientific writing in Digital Health + +#v(1em) // vertical space, same as \vspace in LaTeX + +#grid( + columns: (1fr, 1fr), + align(center)[ + Rudolf J Schnetler \ + The University of Queensland \ + #link("mailto:r.schnetler@uq.edu.au") + ], + align(center)[ + Dr. John Collaborator \ + The University of Queensland \ + #link("mailto:c.collaborator@uq.edu.au") + ] +) + +#v(1em) + +#align(center)[ + #set par(justify: false) + *Abstract* \ + Typst is a new typesetting system that aims to improve the scientific writing process. This article explores its features, advantages, and potential impact on the field of Digital Health. +] + +#v(1em) + +== Introduction + +A very convenient way to manage your typst environment is to use the `typstenv` tool. This tool allows you to easily switch between different versions of typst, manage dependencies, and create isolated environments for your projects. + +== Materials & Methods + +We installed typst using cargo @crates_io. + +We also used some math: + + +$ A = pi r^2 $ + + +And our typical day outlined in @fig1. +#figure( + image("sine_is_life.png"), + caption: [*The Function of Life.* A sinusoidal representation of daily happiness levels from 6am to 10pm, showing key life events and their impact on well-being throughout a typical day.], +) + +== Results + +The main features of typst include a user-friendly syntax, powerful layout capabilities, and seamless integration with other tools. These features make it easier for researchers to create high-quality documents quickly and efficiently. + +#figure( + table( + columns: 4, + table.header( + [*Feature*], [*Typst*], [*LaTeX*], [*Word*], + ), + [Compilation Speed], [Fast], [Slow], [N/A], + [Learning Curve], [Low], [High], [Low], + [Version Control], [Excellent], [Excellent], [Poor], + [Mathematical Typesetting], [Good], [Excellent], [Fair], + ), + caption: [*Comparison of document preparation systems.* Feature comparison across three commonly used document preparation systems for academic writing.], +) + +== Discussion + +The results of our study indicate that typst has the potential to significantly improve the scientific writing process in Digital Health. Its user-friendly interface and powerful features make it an attractive option for researchers and practitioners alike. + +== Conclusion + +In conclusion, typst represents a promising advancement in the field of scientific writing. By streamlining the writing process and enhancing collaboration, it has the potential to improve the quality and efficiency of research in Digital Health. + +#bibliography("references.bib") diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html index c9d810c..3157f40 100644 --- a/layouts/_default/_markup/render-codeblock-mermaid.html +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -1,4 +1,10 @@ -
-  {{- .Inner | safeHTML }}
-
-{{ .Page.Store.Set "hasMermaid" true }} \ No newline at end of file +{{ if in .Attributes.class "raw" }} + {{/* Show raw mermaid code with consistent unsupported language formatting */}} + 
{{- .Inner -}}
+{{ else }} + {{/* Render the mermaid diagram */}} + 
+    {{- .Inner | safeHTML }}
+
+ {{ .Page.Store.Set "hasMermaid" true }} +{{ end }} \ No newline at end of file diff --git a/layouts/_default/_markup/render-codeblock-typst.html b/layouts/_default/_markup/render-codeblock-typst.html new file mode 100644 index 0000000..75102ed --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-typst.html @@ -0,0 +1,41 @@ +{{ $id := printf "typst-%d" (hash.FNV32a .Inner) }} +{{ $pageSlug := .Page.File.ContentBaseName }} + +{{ if in .Attributes.class "render" }} + {{/* Render only the output */}} +
+
+ {{ $pngPath := printf "/rendered/typst/%s/%s.png" $pageSlug $id }} + {{ $pdfPath := printf "/rendered/typst/%s/%s.pdf" $pageSlug $id }} + {{ if fileExists (printf "static%s" $pngPath) }} + Typst output + {{ else if fileExists (printf "static%s" $pdfPath) }} + + {{ end }} +
+ 
{{- .Inner -}}
+

Note: Typst rendering requires compilation. Output will be generated during build.

+
+
+
+ {{ .Page.Store.Set "hasTypst" true }} + +{{ else if in .Attributes.class "side-by-side" }} + {{/* Show code and output side by side */}} +
+
+ 
{{- .Inner -}}
+
+
+ Typst output +
+

Note: Typst rendering requires compilation. Output will be generated during build.

+
+
+
+ {{ .Page.Store.Set "hasTypst" true }} + +{{ else }} + {{/* Default: Show raw typst code with consistent unsupported language formatting */}} + 
{{- .Inner -}}
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html new file mode 100644 index 0000000..7aa5c89 --- /dev/null +++ b/layouts/_default/_markup/render-image.html @@ -0,0 +1 @@ +{{ .Text }} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4cedb5b..89d4a53 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -302,6 +302,12 @@ {{ end }} + + + + + + @@ -324,6 +330,205 @@ + + + +