Skip to content

Commit f296a30

Browse files
TorstenDittmannTorstenDittmann
committed
feat: sveltify nodes and tags
1 parent e73ae72 commit f296a30

File tree

15 files changed

+490
-174
lines changed

15 files changed

+490
-174
lines changed

‎README.md‎

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,3 @@
11
# svelte-markdoc-preprocess
22

3-
This is a [Svelte](https://svelte.dev) preprocessor that allows you to use Markdoc.
4-
5-
## Features
6-
7-
- [x] Processor
8-
- [x] Configuration
9-
- [x] Svelte components
10-
- [x] Auto Components Import from Layout
11-
- [x] Frontmatter
12-
- [x] Layouts
13-
- [x] Tests
14-
15-
## Installation
16-
17-
```bash
18-
npm i -D svelte-markdoc-preprocess
19-
```
20-
21-
```js
22-
// svelte.config.js
23-
import { markdoc } from 'svelte-markdoc-preprocess';
24-
25-
const config = {
26-
preprocess: [
27-
vitePreprocess(),
28-
markdoc({
29-
layout: join(
30-
dirname(fileURLToPath(import.meta.url)),
31-
'./src/lib/Layout.svelte',
32-
),
33-
}),
34-
],
35-
extensions: ['.markdoc', '.svelte'],
36-
};
37-
```
38-
39-
```html
40-
<!-- ./src/lib/Layout.svelte -->
41-
<script context="module">
42-
export { default as Addition } from './Addition.svelte';
43-
export { default as MyTest } from './Test.svelte';
44-
</script>
45-
46-
<slot />
47-
```
48-
49-
```md
50-
<!-- +page.markdoc -->
51-
52-
# I am a heading
53-
54-
I am a paragraph with **bold** words. But you can also use Svelte Components:
55-
56-
{% mytest /%}
57-
{% addition a=4 b=6 /%}
58-
```
59-
60-
## Experimental
61-
62-
This is totally experimental for now, please don't use it. Even if you're a brave one.
3+
This is a [Svelte](https://svelte.dev) preprocessor that allows you to use [Markdoc](https://markdoc.dev).

‎apps/demo/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,8 @@
3030
"typescript": "^5.0.0",
3131
"vite": "^4.4.2"
3232
},
33-
"type": "module"
33+
"type": "module",
34+
"dependencies": {
35+
"highlight.js": "^11.8.0"
36+
}
3437
}

‎apps/demo/src/lib/Fence.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import 'highlight.js/styles/github-dark.css';
3+
import hljs from 'highlight.js';
4+
5+
export let content: string;
6+
export let language: string;
7+
8+
const result = hljs.highlight(content, { language: language ?? 'shell' });
9+
</script>
10+
11+
<pre><code class={`language-${language}`}>{@html result.value}</code></pre>

‎apps/demo/src/lib/Heading.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts">
2+
export let level: number;
3+
4+
let tag = `h${level}`;
5+
</script>
6+
7+
<svelte:element this={tag}><slot /></svelte:element>

‎apps/demo/src/lib/Nodes.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script context="module">
2+
export { default as Heading } from './Heading.svelte';
3+
export { default as Fence } from './Fence.svelte';
4+
</script>

‎apps/demo/src/routes/+page.markdoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ This library brings the power of [Markdoc](https://markdoc.dev/) right into your
33
## Features
44
- **Markdoc**: Use the full power of Markdoc in your Svelte applications.
55
- **Components**: Access your Svelte components directly as Markdoc tags. No individual imports or configurations required.
6+
- **Markdown**: Use Svelte components for nodes.
67
- **Layouts**: Add a default and also named layouts.
78
- **Flexibility**: Configure Markdoc to your needs.
9+
- **Typescript**: Supports Typescript out of the box.
810

911
## Experimental
1012

‎apps/demo/src/routes/docs/+page.markdoc‎

Lines changed: 60 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
Install the package:
44

5-
```bash
5+
```shell
66
npm i -D svelte-markdoc-preprocess
77
```
88

99
Add the preprocessor and new extensions to your `svelte.config.js`:
10-
```js
10+
```javascript
1111
import { markdoc } from 'svelte-markdoc-preprocess';
1212

1313
const config = {
@@ -48,7 +48,7 @@ markdoc({
4848
dirname(fileURLToPath(import.meta.url)),
4949
'./src/lib/Layout.svelte'
5050
),
51-
some_other_layout:join(
51+
some_other_layout: join(
5252
dirname(fileURLToPath(import.meta.url)),
5353
'./src/lib/SomeOtherLayout.svelte'
5454
)
@@ -69,7 +69,7 @@ Layout files are basically Svelte components with a slot.
6969

7070
And use them in using the `layout` key in frontmatter. If no layout is defined with frontmatter, the default layout will be used.
7171

72-
```md
72+
```
7373
<!-- +page.markdoc -->
7474
---
7575
layout: some_other_layout
@@ -78,17 +78,67 @@ layout: some_other_layout
7878
# some other content
7979
```
8080

81-
## Components
81+
## Nodes
82+
83+
You can use Svelte components in your markdown files, you can define Svelte Component for each node.
84+
85+
Create a Svelte file and export Svelte components with the same name as the node from the module context.
8286

83-
You can export components from your used layout and use them in your Markdoc files.
8487

8588
```html
86-
<!-- ./src/lib/Layout.svelte -->
89+
<!-- ./src/lib/Nodes.svelte -->
8790
<script context="module">
88-
export { default as Addition } from './Addition.svelte';
91+
export { default as Heading } from './Heading.svelte';
8992
</script>
93+
```
9094

91-
<slot />
95+
```js
96+
// svelte.config.js
97+
markdoc({
98+
nodes: join(dirname(fileURLToPath(import.meta.url)), './src/lib/Nodes.svelte'),
99+
})
100+
```
101+
102+
```html
103+
<!-- ./src/lib/Heading.svelte -->
104+
<script>
105+
export let level;
106+
</script>
107+
108+
<svelte:element this={`h${level}`}><slot /></svelte:element>
109+
```
110+
111+
You can find a list of available nodes [here](https://markdoc.dev/docs/nodes#built-in-nodes).
112+
113+
## Tags
114+
115+
You can use Svelte components for tags, the same way you do for nodes.
116+
117+
Create a Svelte file and export Svelte components with the same name as the node from the module context.
118+
119+
120+
```html
121+
<!-- ./src/lib/Tags.svelte -->
122+
<script context="module">
123+
export { default as Multiply } from './Multiply.svelte';
124+
</script>
125+
```
126+
127+
```js
128+
// svelte.config.js
129+
markdoc({
130+
tags: join(dirname(fileURLToPath(import.meta.url)), './src/lib/Tags.svelte'),
131+
})
132+
```
133+
134+
```html
135+
<!-- ./src/lib/Multiply.svelte -->
136+
<script lang="ts">
137+
export let a;
138+
export let b;
139+
</script>
140+
141+
{a} * {b} = {a * b}
92142
```
93143

94-
You can use the components from a layout file like this `{% addition a=4 b=6 %}`.
144+
Now you can use them in your markdown files like this `{{ multiply a=2 b=3 }}`.

‎apps/demo/svelte.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,20 @@ import { dirname, join } from 'path';
44
import { fileURLToPath } from 'url';
55
import { markdoc } from 'svelte-markdoc-preprocess';
66

7+
const layout = join(dirname(fileURLToPath(import.meta.url)), './src/lib/Layout.svelte');
8+
const nodes = join(dirname(fileURLToPath(import.meta.url)), './src/lib/Nodes.svelte');
9+
710
/** @type {import('@sveltejs/kit').Config} */
811
const config = {
912
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
1013
// for more information about preprocessors
1114
preprocess: [
1215
vitePreprocess(),
1316
markdoc({
17+
tags: layout,
18+
nodes,
1419
layouts: {
15-
default: join(dirname(fileURLToPath(import.meta.url)), './src/lib/Layout.svelte'),
20+
default: layout,
1621
alternative: join(
1722
dirname(fileURLToPath(import.meta.url)),
1823
'./src/lib/LayoutAlternative.svelte',

‎package-lock.json‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/process/README.md‎

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,3 @@
11
# svelte-markdoc-preprocess
22

3-
This is a [Svelte](https://svelte.dev) preprocessor that allows you to use Markdoc.
4-
5-
## Installation
6-
7-
```bash
8-
npm i -D svelte-markdoc-preprocess
9-
```
10-
11-
```js
12-
// svelte.config.js
13-
import { markdoc } from 'svelte-markdoc-preprocess';
14-
15-
const config = {
16-
preprocess: [
17-
vitePreprocess(),
18-
markdoc({
19-
layout: join(
20-
dirname(fileURLToPath(import.meta.url)),
21-
'./src/lib/Layout.svelte',
22-
),
23-
}),
24-
],
25-
extensions: ['.markdoc', '.svelte'],
26-
};
27-
```
28-
29-
```html
30-
<!-- ./src/lib/Layout.svelte -->
31-
<script context="module">
32-
export { default as Addition } from './Addition.svelte';
33-
export { default as MyTest } from './Test.svelte';
34-
</script>
35-
36-
<slot />
37-
```
38-
39-
```md
40-
<!-- +page.markdoc -->
41-
42-
# I am a heading
43-
44-
I am a paragraph with **bold** words. But you can also use Svelte Components:
45-
46-
{% mytest /%}
47-
{% addition a=4 b=6 /%}
48-
```
49-
50-
## Experimental
51-
52-
This is totally experimental for now, please don't use it. Even if you're a brave one.
3+
This is a [Svelte](https://svelte.dev) preprocessor that allows you to use [Markdoc](https://markdoc.dev).

0 commit comments

Comments
 (0)