Skip to content

Commit ac88b56

Browse files
TorstenDittmannTorstenDittmann
committed
fix docs
1 parent 13d3318 commit ac88b56

File tree

8 files changed

+122
-101
lines changed

8 files changed

+122
-101
lines changed

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1+
<script>
2+
import { dev } from "$app/environment";
3+
</script>
4+
15
<header>
26
<nav>
37
<h1>svelte-markdoc-preprocess</h1>
4-
<a href="/">usage</a> /
5-
<a href="/svelte">svelte</a> /
6-
<a href="/components">components</a> /
7-
<a href="/markdown">markdown</a>
8+
<a href="/">home</a> /
9+
<a href="/docs">docs</a>
10+
{#if dev}
11+
/ <a href="/playground">playground</a>
12+
{/if}
813
</nav>
914
</header>
15+
1016
<main>
1117
<slot />
1218
</main>

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

Lines changed: 7 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,11 @@
1-
This is a [Svelte](https://svelte.dev) preprocessor that allows you to use Markdoc.
1+
This library brings the power of [Markdoc](https://markdoc.dev/) right into your [Svelte](https://svelte.dev) applications!
22

3-
## Usage
4-
5-
Install the package:
6-
7-
```bash
8-
npm i -D svelte-markdoc-preprocess
9-
```
10-
11-
Add the preprocessor and new extensions to your `svelte.config.js`:
12-
```js
13-
import { markdoc } from 'svelte-markdoc-preprocess';
14-
15-
const config = {
16-
preprocess: [
17-
vitePreprocess(),
18-
markdoc({
19-
layouts: {
20-
default: join(
21-
dirname(fileURLToPath(import.meta.url)),
22-
'./src/lib/Layout.svelte'
23-
)
24-
}
25-
})
26-
],
27-
extensions: ['.markdoc', '.svelte'],
28-
};
29-
```
30-
31-
And use them like this:
32-
33-
```md
34-
<!-- +page.markdoc -->
35-
36-
# I am a heading
37-
38-
I am a paragraph with **bold** words. But you can also use Svelte Components:
39-
```
40-
41-
## Layouts
42-
43-
You can define layouts in the `markdoc` options.
44-
45-
```js
46-
// svelte.config.js
47-
markdoc({
48-
layouts: {
49-
default: join(
50-
dirname(fileURLToPath(import.meta.url)),
51-
'./src/lib/Layout.svelte'
52-
),
53-
some_other_layout:join(
54-
dirname(fileURLToPath(import.meta.url)),
55-
'./src/lib/SomeOtherLayout.svelte'
56-
)
57-
}
58-
})
59-
```
60-
61-
Layout files are basically Svelte components with a slot.
62-
63-
64-
```html
65-
<!-- ./src/lib/Layout.svelte -->
66-
<nav>
67-
...
68-
</nav>
69-
<slot />
70-
```
71-
72-
And use them in using the `layout` key in frontmatter. If no layout is defined with frontmatter, the default layout will be used.
73-
74-
```md
75-
<!-- +page.markdoc -->
76-
---
77-
layout: some_other_layout
78-
---
79-
80-
# some other content
81-
```
82-
83-
## Components
84-
85-
You can export components from your used layout and use them in your Markdoc files.
86-
87-
```html
88-
<!-- ./src/lib/Layout.svelte -->
89-
<script context="module">
90-
export { default as Addition } from './Addition.svelte';
91-
</script>
92-
93-
<slot />
94-
```
95-
96-
You can use the components from a layout file like this `{% addition a=4 b=6 %}`.
3+
## Features
4+
- **Markdoc**: Use the full power of Markdoc in your Svelte applications.
5+
- **Components**: Access your Svelte components directly as Markdoc tags. No individual imports or configurations required.
6+
- **Layouts**: Add a default and also named layouts.
7+
- **Flexibility**: Configure Markdoc to your needs.
978

989
## Experimental
9910

100-
This is totally experimental for now, please don't use it *yet*. Even if you're a brave one.
11+
This is totally experimental for now, please don't use it *yet*. Unless you're a brave one.

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
## Usage
2+
3+
Install the package:
4+
5+
```bash
6+
npm i -D svelte-markdoc-preprocess
7+
```
8+
9+
Add the preprocessor and new extensions to your `svelte.config.js`:
10+
```js
11+
import { markdoc } from 'svelte-markdoc-preprocess';
12+
13+
const config = {
14+
preprocess: [
15+
vitePreprocess(),
16+
markdoc({
17+
layouts: {
18+
default: join(
19+
dirname(fileURLToPath(import.meta.url)),
20+
'./src/lib/Layout.svelte'
21+
)
22+
}
23+
})
24+
],
25+
extensions: ['.markdoc', '.svelte'],
26+
};
27+
```
28+
29+
And use them like this:
30+
31+
```md
32+
<!-- +page.markdoc -->
33+
34+
# I am a heading
35+
36+
I am a paragraph with **bold** words. But you can also use Svelte Components:
37+
```
38+
39+
## Layouts
40+
41+
You can define layouts in the `markdoc` options.
42+
43+
```js
44+
// svelte.config.js
45+
markdoc({
46+
layouts: {
47+
default: join(
48+
dirname(fileURLToPath(import.meta.url)),
49+
'./src/lib/Layout.svelte'
50+
),
51+
some_other_layout:join(
52+
dirname(fileURLToPath(import.meta.url)),
53+
'./src/lib/SomeOtherLayout.svelte'
54+
)
55+
}
56+
})
57+
```
58+
59+
Layout files are basically Svelte components with a slot.
60+
61+
62+
```html
63+
<!-- ./src/lib/Layout.svelte -->
64+
<nav>
65+
...
66+
</nav>
67+
<slot />
68+
```
69+
70+
And use them in using the `layout` key in frontmatter. If no layout is defined with frontmatter, the default layout will be used.
71+
72+
```md
73+
<!-- +page.markdoc -->
74+
---
75+
layout: some_other_layout
76+
---
77+
78+
# some other content
79+
```
80+
81+
## Components
82+
83+
You can export components from your used layout and use them in your Markdoc files.
84+
85+
```html
86+
<!-- ./src/lib/Layout.svelte -->
87+
<script context="module">
88+
export { default as Addition } from './Addition.svelte';
89+
</script>
90+
91+
<slot />
92+
```
93+
94+
You can use the components from a layout file like this `{% addition a=4 b=6 %}`.

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<nav>
2+
<a href="/playground/components">components</a> /
3+
<a href="/playground/markdown">markdown</a>
4+
</nav>
5+
6+
<slot />

‎apps/demo/src/routes/playground/+page.server.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { redirect } from '@sveltejs/kit';
2+
3+
export function load() {
4+
throw redirect(307, '/playground/components');
5+
}

apps/demo/src/routes/components/+page.markdoc renamed to apps/demo/src/routes/playground/components/+page.markdoc

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)