Skip to content

Commit d667444

Browse files
one-aalamone-aalam
authored
Merge pull request #34 from one-aalam/feat/with-markdoc
feat: Add Markdoc support
2 parents d9f85a7 + 7ed779c commit d667444

15 files changed

Lines changed: 345 additions & 7 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"files.associations": {
3+
"*.mdoc": "markdown"
4+
}
5+
}

‎astro.config.mjs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ import sitemap from '@astrojs/sitemap';
66
import mdx from '@astrojs/mdx';
77
import { defineConfig } from "astro/config";
88
import vercel from "@astrojs/vercel/serverless";
9+
import markdoc from "@astrojs/markdoc";
910
const __filename = fileURLToPath(import.meta.url);
1011
const __dirname = dirname(__filename);
12+
13+
import { config as markdocConfig } from './src/utils/mdoc/mdoc.config'
1114
// Full Astro Configuration API Documentation:
1215
// https://docs.astro.build/reference/configuration-reference
1316

@@ -18,6 +21,7 @@ const __dirname = dirname(__filename);
1821

1922
// @ts-check
2023

24+
2125
// https://astro.build/config
2226

2327
// https://astro.build/config
@@ -31,7 +35,7 @@ export default defineConfig( /** @type {import('astro').AstroUserConfig} */{
3135
server: {
3236
// port: 3000, // The port to run the dev server on.
3337
},
34-
integrations: [mdx(), svelte(), tailwind({
38+
integrations: [mdx(), markdoc(markdocConfig), svelte(), tailwind({
3539
config: {
3640
applyBaseStyles: false
3741
}
@@ -48,4 +52,4 @@ export default defineConfig( /** @type {import('astro').AstroUserConfig} */{
4852
}
4953
},
5054
adapter: vercel()
51-
});
55+
});

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"typescript": "^4.3.5"
3535
},
3636
"dependencies": {
37+
"@astrojs/markdoc": "^0.0.1",
3738
"@astrojs/vercel": "^3.0.0",
3839
"ioredis": "^5.3.0"
3940
}

‎src/components/mdoc/Callout.astro‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
import { Icon } from 'astro-icon'
3+
export type CalloutType = 'check' | 'error' | 'note' | 'warning'
4+
interface Props {
5+
title: string
6+
type: CalloutType
7+
}
8+
9+
const ICON_MAP: Record<CalloutType, string> = {
10+
'check': 'check-circle',
11+
'error': 'close-circle',
12+
'note': 'note',
13+
'warning': 'warning-circle'
14+
}
15+
16+
const COLOR_MAP: Record<CalloutType, string> = {
17+
'check': 'text-green-700',
18+
'error': 'text-red-700',
19+
'note': ' text-gray-700',
20+
'warning': 'text-orange-700'
21+
}
22+
23+
const { title, type = 'note' } = Astro.props
24+
---
25+
<div class="callout flex gap-2 w-full bg-gray-50 my-1 px-5 py-2 rounded-sm shadow-sm">
26+
<Icon class={`w-8 h-8 inline-block ${COLOR_MAP[type]}`} pack="mdi" name={ICON_MAP[type]} />
27+
<div class="copy flex flex-col">
28+
<h3 class={`title m-0 ${COLOR_MAP[type]}`}>{title}</h3>
29+
<slot/>
30+
</div>
31+
</div>

‎src/components/mdoc/Link.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
interface Props {
3+
href: string
4+
title: string
5+
target: string
6+
}
7+
8+
const { href, title, target } = Astro.props
9+
---
10+
<a class="site-link" href={href} title={title} target={target}>
11+
<slot/>
12+
</a>

‎src/components/mdoc/TweetEmbed.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
interface Props {
3+
url: string
4+
}
5+
6+
const { url } = Astro.props
7+
---
8+
<div
9+
class="twitter-embed flex flex-col items-center justify-center relative"
10+
>
11+
<div
12+
class="twitter-tweet"
13+
data-conversation="none"
14+
data-theme="light"
15+
data-lang="en"
16+
data-dnt="true"
17+
>
18+
<a class="unset no-underline text-current absolute top-0 left-0" href={url}>Loading embedded tweet...</a>
19+
</div>
20+
</div>
21+
22+
<script
23+
async
24+
defer
25+
src="https://platform.twitter.com/widgets.js"
26+
charset="utf-8"
27+
></script>

‎src/content/blog/markdoc-integration.mdoc‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Markdoc integration for Astro Ink
3+
date: "2023-03-08"
4+
image: https://user-images.githubusercontent.com/62121649/167893184-a2b69260-ca9e-4a77-a5bc-63b8135ae5db.png
5+
author: Aftab Alam
6+
authorTwitter: aftabbuddy
7+
category: design
8+
tags:
9+
- architecture
10+
- front-end
11+
- spa
12+
description: Markdoc extends the markdown syntax you love to offer you authoring superpowers... 💪
13+
---
14+
[Markdoc](https://markdoc.dev/docs/overview) extends the markdown syntax you know and love to offer you authoring superpowers... 💪.
15+
16+
Tags are the heart of Markdoc system. You can use native Markdoc tags, like tables(example below), conditionals, and partials...
17+
18+
## Table in Markdoc
19+
{% table %}
20+
* Foo
21+
* Bar
22+
* Baz
23+
---
24+
*
25+
```
26+
puts "Some code here."
27+
```
28+
*
29+
{% list type="checkmark" %}
30+
* Bulleted list in table
31+
* Second item in bulleted list
32+
{% /list %}
33+
* Text in a table
34+
---
35+
*
36+
A "loose" list with
37+
38+
multiple line items
39+
* Test 2
40+
* Test 3
41+
---
42+
* Test 1
43+
* A cell that spans two columns {% colspan=2 %}
44+
{% /table %}
45+
46+
or create custom components.
47+
48+
## Tags available out of Ink
49+
Astro Ink ships with the following tags with more coming soon...
50+
51+
### Callout
52+
{% callout type="note" title="Note" %}
53+
lorem ipsum doler sit amet
54+
{% /callout %}
55+
56+
{% callout type="error" title="Error" %}
57+
lorem ipsum doler sit amet
58+
{% /callout %}
59+
60+
{% callout type="warning" title="Warning" %}
61+
lorem ipsum doler sit amet
62+
{% /callout %}
63+
64+
{% callout type="check" title="Check" %}
65+
lorem ipsum doler sit amet
66+
{% /callout %}
67+
68+
### Link
69+
70+
{% link href="/blog" title="take care" %}
71+
Go to blog
72+
{% /link %}
73+
74+
### Tweet Embed
75+
76+
{% tweet url="https://twitter.com/aftabbuddy/status/1630403326406959105" %}
77+
78+
...more tags coming soon!
79+
80+
## Functions (from official example)
81+
82+
¡Hola {% getCountryEmoji("spain") %}!

‎src/pages/blog/[slug].astro‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,25 @@
22
import { getEntryBySlug } from "astro:content";
33
import PostLayout from '$/layouts/post.astro';
44
5+
import Callout from "../../components/mdoc/Callout.astro";
6+
import Link from "../../components/mdoc/Link.astro";
7+
import TweetEmbed from "src/components/mdoc/TweetEmbed.astro";
8+
59
// get the views count
610
// get the likes count
711
812
const { slug } = Astro.params
9-
const entry = await getEntryBySlug('blog', slug)
13+
const entry = await getEntryBySlug('blog', slug!)
1014
1115
const resp = await fetch(`${import.meta.env.SITE_URI}/api/blog/views/${slug}`)
1216
const stats = await resp.json()
1317
1418
const { Content } = await entry.render()
1519
---
1620
<PostLayout content={entry.data} stats={stats}>
17-
<Content/>
21+
<Content components={{
22+
Callout,
23+
Link,
24+
TweetEmbed
25+
}}/>
1826
</PostLayout>

‎src/pages/tags/[tag]/[page].astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
export const prerender = true
3+
import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro'
34
import { getCollection } from 'astro:content'
45
import { PAGE_SIZE } from '$/config'
56
import DefaultPageLayout from '$/layouts/default.astro'
@@ -11,7 +12,7 @@ let description = 'All the articles posted so far...'
1112
1213
export async function getStaticPaths({ paginate }) {
1314
const allPosts = await getCollection('blog')
14-
const allTags = new Set()
15+
const allTags = new Set<string>()
1516
allPosts.map(post => {
1617
post.data.tags && post.data.tags.map(tag => allTags.add(tag.toLowerCase()))
1718
})
@@ -25,8 +26,11 @@ export async function getStaticPaths({ paginate }) {
2526
});
2627
}
2728
28-
const { page } = Astro.props
29-
const { tag } = Astro.params
29+
type Params = InferGetStaticParamsType<typeof getStaticPaths>;
30+
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
31+
32+
const { page } = Astro.props as Props
33+
const { tag } = Astro.params as Params
3034
---
3135

3236
<DefaultPageLayout content={{ title: `Posts by Tag: ${tag}`, description: `all of the articles we have posted and linked so far under the tag: ${tag}` }}>

‎src/utils/mdoc/mdoc.config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { Config } from '@markdoc/markdoc';
2+
import { callout } from './schema/callout.mdoc';
3+
import { link } from './schema/link.mdoc';
4+
import { tweetEmbed } from './schema/tweet-embed.mdoc';
5+
// import { heading } from './schema/heading.mdoc';
6+
7+
export const config: Config = {
8+
tags: {
9+
callout,
10+
link,
11+
tweet: tweetEmbed
12+
},
13+
functions: {
14+
getCountryEmoji: {
15+
transform(parameters) {
16+
const [country] = Object.values(parameters);
17+
const countryToEmojiMap = {
18+
japan: '🇯🇵',
19+
spain: '🇪🇸',
20+
france: '🇫🇷',
21+
}
22+
return countryToEmojiMap[country] ?? '🏳'
23+
},
24+
},
25+
}
26+
}

0 commit comments

Comments
 (0)