Skip to content

Commit 4beb076

Browse files
AdammatthiesenAdammatthiesen
authored
Feat callouts (#5)
* Add support for github Callouts/asides * Update callout themes CSS for dark mode support * Update callout themes CSS for dark mode support * Update callout themes CSS for dark mode support
1 parent 74d2b32 commit 4beb076

File tree

20 files changed

+1161
-83
lines changed

20 files changed

+1161
-83
lines changed

‎.changeset/unlucky-donuts-cough.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@studiocms/markdown-remark": patch
3+
---
4+
5+
Add support for github Callouts/asides

‎packages/markdown-remark/assets/callout-themes/github.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
[data-theme="light"] .callout {
2+
border-left-color: var(--callout-color-light);
3+
}
4+
5+
[data-theme="light"] .callout-title {
6+
color: var(--callout-color-light);
7+
}
8+
9+
.callout {
10+
border-left-color: var(--callout-color-dark);
11+
}
12+
13+
.callout-title {
14+
color: var(--callout-color-dark);
15+
}
16+
17+
.callout {
18+
width: 100%;
19+
padding: 0.5rem 1rem;
20+
border-left-width: 0.25em;
21+
border-left-style: solid;
22+
margin-bottom: 1rem;
23+
}
24+
25+
.callout-title {
26+
display: flex;
27+
align-items: flex-start;
28+
gap: 8px;
29+
30+
line-height: 1;
31+
font-weight: 500;
32+
}
33+
34+
.callout-icon svg {
35+
overflow: visible !important;
36+
display: inline-block;
37+
38+
vertical-align: text-bottom;
39+
40+
fill: currentColor;
41+
}
42+
43+
.callout-content > :first-child {
44+
margin-top: 1rem;
45+
}
46+
47+
.callout-content > :last-child {
48+
margin-bottom: 0;
49+
}
50+
51+
.callout-collapsible .callout-title {
52+
cursor: pointer;
53+
}
54+
55+
.callout-collapsible .callout-fold {
56+
display: flex;
57+
align-items: center;
58+
padding-inline-end: 8px;
59+
}
60+
61+
.callout-collapsible > .callout-title .callout-fold svg {
62+
transform: rotate(-90deg);
63+
transition: transform 100ms ease-in-out;
64+
}
65+
66+
.callout-collapsible[open] > .callout-title .callout-fold svg {
67+
transform: none;
68+
}
69+
70+
.callout-fold {
71+
margin-left: -2px;
72+
}

‎packages/markdown-remark/assets/callout-themes/obsidian.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
[data-theme="light"] .callout {
2+
mix-blend-mode: darken;
3+
background-color: rgb(from var(--callout-color-light) r g b / 0.1);
4+
}
5+
6+
[data-theme="light"] .callout-title {
7+
color: var(--callout-color-light);
8+
}
9+
10+
.callout {
11+
mix-blend-mode: lighten;
12+
background-color: rgb(from var(--callout-color-dark) r g b / 0.1);
13+
}
14+
15+
.callout-title {
16+
color: var(--callout-color-dark);
17+
}
18+
19+
.callout {
20+
overflow: hidden;
21+
22+
width: 100%;
23+
padding: 12px 12px 12px 24px;
24+
border-radius: 4px;
25+
margin: 1em 0;
26+
27+
line-height: 1.3;
28+
}
29+
30+
.callout-title {
31+
display: flex;
32+
align-items: flex-start;
33+
gap: 4px;
34+
35+
font-size: inherit;
36+
}
37+
38+
.callout-icon {
39+
display: flex;
40+
flex: 0 0 auto;
41+
align-items: center;
42+
}
43+
44+
.callout-title-inner {
45+
color: inherit;
46+
font-weight: 600;
47+
}
48+
49+
.callout-content {
50+
overflow-x: auto;
51+
padding: 0;
52+
background-color: transparent;
53+
}
54+
55+
.callout-collapsible .callout-title {
56+
cursor: pointer;
57+
}
58+
59+
.callout-collapsible .callout-fold {
60+
display: flex;
61+
align-items: center;
62+
padding-inline-end: 8px;
63+
}
64+
65+
.callout-collapsible > .callout-title .callout-fold svg {
66+
transform: rotate(-90deg);
67+
transition: transform 100ms ease-in-out;
68+
}
69+
70+
.callout-collapsible[open] > .callout-title .callout-fold svg {
71+
transform: none;
72+
}
73+
74+
.callout-icon::after,
75+
.callout-fold::after {
76+
content: "\200B";
77+
}
78+
79+
.callout-icon svg,
80+
.callout-fold svg {
81+
width: 18px;
82+
height: 18px;
83+
}

‎packages/markdown-remark/assets/callout-themes/vitepress.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
[data-theme="dark"] .callout {
2+
background-color: rgb(from var(--callout-color-light) r g b / 0.14);
3+
}
4+
5+
.callout {
6+
background-color: rgb(from var(--callout-color-dark) r g b / 0.16);
7+
}
8+
9+
.callout {
10+
width: 100%;
11+
padding: 16px 16px 8px;
12+
border: 1px solid transparent;
13+
border-radius: 8px;
14+
margin: 16px 0;
15+
16+
line-height: 24px;
17+
font-size: 14px;
18+
}
19+
20+
.callout-title {
21+
display: flex;
22+
align-items: flex-start;
23+
gap: 6px;
24+
25+
font-size: inherit;
26+
}
27+
28+
.callout-icon {
29+
display: flex;
30+
align-items: center;
31+
flex: 0 0 auto;
32+
}
33+
34+
.callout-title-inner {
35+
font-weight: 600;
36+
}
37+
38+
.callout-content p {
39+
margin: 8px 0;
40+
}
41+
42+
.callout-collapsible .callout-title {
43+
cursor: pointer;
44+
margin: 0 0 8px;
45+
}
46+
47+
.callout-collapsible .callout-fold {
48+
display: flex;
49+
align-items: center;
50+
padding-inline-end: 8px;
51+
}
52+
53+
.callout-collapsible > .callout-title .callout-fold svg {
54+
transform: rotate(-90deg);
55+
transition: transform 100ms ease-in-out;
56+
}
57+
58+
.callout-collapsible[open] > .callout-title .callout-fold svg {
59+
transform: none;
60+
}
61+
62+
.callout-icon::after,
63+
.callout-fold::after {
64+
content: "\200B";
65+
}
66+
67+
.callout-icon svg,
68+
.callout-fold svg {
69+
width: 16px;
70+
height: 16px;
71+
stroke-width: 2.2;
72+
}

‎packages/markdown-remark/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"./processor": {
2121
"types": "./dist/processor/index.d.ts",
2222
"default": "./dist/processor/index.js"
23-
}
23+
},
24+
"./assets/*": "./assets/*"
2425
},
2526
"imports": {
2627
"#import-plugin": {
@@ -48,6 +49,7 @@
4849
"github-slugger": "^2.0.0",
4950
"hastscript": "^9.0.0",
5051
"hast-util-from-html": "^2.0.3",
52+
"hast-util-is-element": "^3.0.0",
5153
"hast-util-to-string": "^3.0.1",
5254
"hast-util-to-text": "^4.0.2",
5355
"html-escaper": "^3.0.3",

‎packages/markdown-remark/src/integration/index.ts‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,30 @@ const MarkdownRemarkOptionsSchema = z
99
* Inject CSS for Rehype autolink headings styles.
1010
*/
1111
injectCSS: z.boolean().optional().default(true),
12+
13+
/**
14+
* Options for the Markdown processor.
15+
*/
16+
markdown: z
17+
.object({
18+
/**
19+
* Configures the callouts theme.
20+
*/
21+
callouts: z
22+
.object({
23+
/**
24+
* The theme to use for callouts.
25+
*/
26+
theme: z
27+
.union([z.literal('github'), z.literal('obsidian'), z.literal('vitepress')])
28+
.optional()
29+
.default('obsidian'),
30+
})
31+
.optional()
32+
.default({}),
33+
})
34+
.optional()
35+
.default({}),
1236
})
1337
.optional()
1438
.default({});
@@ -22,8 +46,13 @@ export type MarkdownRemarkOptions = typeof MarkdownRemarkOptionsSchema._input;
2246
* @returns Astro integration.
2347
*/
2448
export function markdownRemark(opts?: MarkdownRemarkOptions): AstroIntegration {
25-
const { injectCSS } = MarkdownRemarkOptionsSchema.parse(opts);
49+
const { injectCSS, markdown } = MarkdownRemarkOptionsSchema.parse(opts);
2650
const { resolve } = createResolver(import.meta.url);
51+
52+
const resolvedCalloutTheme = resolve(
53+
`../../assets/callout-themes/${markdown.callouts.theme}.css`
54+
);
55+
2756
return {
2857
name: '@studiocms/markdown-remark',
2958
hooks: {
@@ -33,7 +62,8 @@ export function markdownRemark(opts?: MarkdownRemarkOptions): AstroIntegration {
3362
imports: {
3463
'studiocms:markdown-remark': `export * from '${resolve('./markdown.js')}';`,
3564
'studiocms:markdown-remark/css': `
36-
import '${resolve('../../assets/headings.css')}'
65+
import '${resolve('../../assets/headings.css')}';
66+
import '${resolvedCalloutTheme}';
3767
`,
3868
},
3969
});

0 commit comments

Comments
 (0)