Merge pull request #81 from TorstenDittmann/feat-enhanced-image

feat: relative images

Author: TorstenDittmann

.github/workflows/lint.yml

@@ -0,0 +1,15 @@
+name: Lint
+on:
+    pull_request:
+        branches: ['**']
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - run: npm ci
+            - run: npm run lint

.github/workflows/publish.yml

@@ -1,18 +1,17 @@
 name: Publish
 on:
-  release:
-    types: [published]
+    release:
+        types: [published]
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm run publish-packages
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - run: npm ci
+            - run: npm run publish-packages
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -1,29 +1,22 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
 name: Tests
-
 on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
+    pull_request:
+        branches: ['**']
 jobs:
-  tests:
-    strategy:
-      matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [20.x]
-    runs-on: ${{ matrix.os }}
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build
-    - run: npx playwright install
-    - run: npm test
+    tests:
+        strategy:
+            matrix:
+                os: [ubuntu-latest, windows-latest, macos-latest]
+                node-version: [20.x]
+        runs-on: ${{ matrix.os }}
+        steps:
+            - uses: actions/checkout@v4
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'
+            - run: npm ci
+            - run: npm run build
+            - run: npx playwright install --with-deps chromium
+            - run: npm test

apps/demo/.eslintrc.cjs

@@ -1,3 +1,4 @@
+/** @type { import("eslint").Linter.Config } */
 module.exports = {
     root: true,
     extends: [

apps/demo/package.json

@@ -14,13 +14,13 @@
     },
     "devDependencies": {
         "@playwright/test": "^1.28.1",
-        "@sveltejs/adapter-auto": "^3.0.0",
-        "@sveltejs/kit": "^2.0.0",
+        "@sveltejs/adapter-cloudflare": "^4.4.0",
+        "@sveltejs/kit": "*",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "@typescript-eslint/eslint-plugin": "^6.13.1",
-        "@typescript-eslint/parser": "^6.17.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/parser": "*",
         "eslint": "^8.53.0",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
         "prettier": "*",
         "prettier-plugin-svelte": "^3.0.3",

apps/demo/src/lib/assets/image.jpeg

@@ -0,0 +1 @@
+../../routes/playground/markdown/image.jpeg

apps/demo/src/routes/+layout.svelte

@@ -38,7 +38,6 @@
                 >Close menu</a
             >
         </div>
-
         <nav class="p-navigation__nav" aria-label="Navigation">
             <ul class="p-navigation__items">
                 {#each links as link}

apps/demo/src/routes/playground/markdown/+page.markdoc

@@ -16,10 +16,15 @@ Lists
 
 `Inline code`
 
-```
+```html
 Code fences
 ```
 
+![Images](./image.jpeg)
+![Images]($lib/assets/image.jpeg)
+![Images](assets/image.jpeg)
+![Images](/favicon.png)
+
 ## Why create Markdoc instead of using an alternative?
 
 ### Why not MDX?
@@ -28,7 +33,7 @@ Code fences
 
 Markdoc uses a fully declarative approach to composition and flow control, where MDX relies on JavaScript and React. This means MDX affords users more power and flexibility, but at the cost of complexity–content can quickly become as complex as regular code, which can lead to maintainability complications or a more difficult authoring environment.
 
-One of the key motivations for creating Markdoc at Stripe was to create a format that is optimized for writing rather than programming so that we could overcome the challenges that resulted from mixing code and content in our legacy documentation platform. With Markdoc, contributors can iterate quickly without having to subject their edits to a code review and the standard of technical scrutiny that we would have to apply to a format that supports embedded JavaScript. Markdoc also helps us enforce stronger controls around presentation and page logic, avoiding situations in which one-off hacks and procedural content generation introduce bugs and unpredictable behavior. 
+One of the key motivations for creating Markdoc at Stripe was to create a format that is optimized for writing rather than programming so that we could overcome the challenges that resulted from mixing code and content in our legacy documentation platform. With Markdoc, contributors can iterate quickly without having to subject their edits to a code review and the standard of technical scrutiny that we would have to apply to a format that supports embedded JavaScript. Markdoc also helps us enforce stronger controls around presentation and page logic, avoiding situations in which one-off hacks and procedural content generation introduce bugs and unpredictable behavior.
 
 Markdoc's first-class, declarative tag syntax integrates seamlessly with Markdown content and can make it simpler to handle content transforms, static analysis, and validation in a unified, lightweight manner. In MDX, some of these tasks require operating on a more complicated JavaScript AST and accounting for the full spectrum of JavaScript language features. MDX also has a significantly larger runtime dependency footprint and relies on a JavaScript parser to handle the embedded logic.
 

apps/demo/src/routes/playground/markdown/image.jpeg

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-cloudflare';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
@@ -34,6 +34,9 @@ const config = {
         // If your environment is not supported or you settled on a specific environment, switch out the adapter.
         // See https://kit.svelte.dev/docs/adapters for more information about adapters.
         adapter: adapter(),
+        alias: {
+            assets: 'src/lib/assets',
+        },
     },
 };