Skip to content

Commit

Permalink
feat: smaller callout output
Browse files Browse the repository at this point in the history
  • Loading branch information
@naiyerasif
naiyerasif committed Feb 16, 2024
1 parent c68e040 commit 6afa4d6
Show file tree
Hide file tree
Showing 17 changed files with 341 additions and 284 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
.workspace
.DS_Store
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,17 +166,17 @@ By default, the following callouts and aliases are preconfigured.

To style the callouts, import a theme from [`themes`](./themes/) folder.

#### [`themes/microflash.css`](./themes/microflash.css)
#### [GitHub](./themes/github/)

![Microflash theme](./samples/microflash.png)
![GitHub theme](./samples/github.png)

#### [`themes/infima.css`](./themes/infima.css)
#### [VitePress](./themes/vitepress/)

![Infima theme](./samples/infima.png)
![VitePress theme](./samples/vitepress.png)

#### [`themes/vitepress.css`](./themes/vitepress.css)
#### [Microflash](./themes/microflash/)

![VitePress theme](./samples/vitepress.png)
![Microflash theme](./samples/microflash.png)

For more advanced customizations, take a look at the existing [themes](./themes/) and remix your own.

Expand Down
29 changes: 11 additions & 18 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,8 @@ function generate(title, children, hint) {

if (hint) {
indicators.push({
type: "paragraph",
data: {
hName: "div",
hProperties: { className: ["callout-hint"] }
},
children: [
{
type: "html",
value: hint
}
]
type: "html",
value: hint
});
}

Expand All @@ -35,7 +26,7 @@ function generate(title, children, hint) {
}
indicators.push(titleNode);

return [
return [
{
type: "paragraph",
data: {
Expand All @@ -60,23 +51,23 @@ const defaults = {
callouts: {
note: {
title: "Note",
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-note"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg>`
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 8h.01M12 12v4"/><circle cx="12" cy="12" r="10"/></svg>`
},
commend: {
title: "Success",
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-commend"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg>`
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="m8 12 2.7 2.7L16 9.3"/><circle cx="12" cy="12" r="10"/></svg>`
},
warn: {
title: "Warning",
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-warn"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg>`
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 9v4m0 4h.01M8.681 4.082C9.351 2.797 10.621 2 12 2s2.649.797 3.319 2.082l6.203 11.904a4.28 4.28 0 0 1-.046 4.019C20.793 21.241 19.549 22 18.203 22H5.797c-1.346 0-2.59-.759-3.273-1.995a4.28 4.28 0 0 1-.046-4.019L8.681 4.082Z"/></svg>`
},
deter: {
title: "Danger",
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-deter"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg>`
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><path d="M12 12s-5.6 4.6-3.6 8c1.6 2.6 5.7 2.7 7.2 0 2-3.7-3.6-8-3.6-8Z"/><path d="M13.004 2 8.5 9 6.001 6s-4.268 7.206-1.629 11.8c3.016 5.5 11.964 5.7 15.08 0C23.876 10 13.004 2 13.004 2Z"/></svg>`
},
assert: {
title: "Info",
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="callout-hint-assert"><path d="M12.5 7.5h.01m-.01 4v4m-7.926.685L2 21l6.136-1.949c1.307.606 2.791.949 4.364.949 5.243 0 9.5-3.809 9.5-8.5S17.743 3 12.5 3 3 6.809 3 11.5c0 1.731.579 3.341 1.574 4.685"/></svg>`
hint: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"><circle cx="19" cy="5" r="3"/><path d="M20 11.929V15c0 1.656-1.344 3-3 3h-3l-6 4v-4H5c-1.656 0-3-1.344-3-3V7c0-1.656 1.344-3 3-3h7.071"/></svg>`
}
}
};
Expand All @@ -102,7 +93,9 @@ export default function remarkCalloutDirectives(userOptions = {}) {
class: "class" in attributes ? `callout callout-${calloutType} ${attributes.class}` : `callout callout-${calloutType}`
};

node.children = generate(title || callout.title, node.children, callout.hint);
const children = !!node.children && node.children.length === 1 ?
node.children[0].children : node.children;
node.children = generate(title || callout.title, children, callout.hint);

const tagName = callout.tagName || options.tagName || "aside";
const hast = h(tagName, node.attributes);
Expand Down
14 changes: 11 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@microflash/remark-callout-directives",
"version": "3.1.0",
"version": "4.0.0",
"description": "remark plugin to render callouts and admonitions with directives",
"license": "MIT",
"keywords": [
Expand All @@ -16,13 +16,21 @@
"repository": "https://github.com/Microflash/remark-callout-directives.git",
"bugs": "https://github.com/Microflash/remark-callout-directives/issues",
"homepage": "https://github.com/Microflash/remark-callout-directives#readme",
"author": "Naiyer Asif (https://mflash.dev)",
"author": "Naiyer Asif (https://www.naiyerasif.com)",
"type": "module",
"main": "index.js",
"files": [
"index.js",
"themes/*.css"
"themes/**/*"
],
"exports": {
".": "./index.js",
"./config/github": "./themes/github/index.js",
"./config/vitepress": "./themes/vitepress/index.js",
"./theme/github": "./themes/github/index.css",
"./theme/microflash": "./themes/microflash/index.css",
"./theme/vitepress": "./themes/vitepress/index.css"
},
"scripts": {
"test": "ava"
},
Expand Down
Binary file added samples/github.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed samples/infima.png
View file
Binary file not shown.
Binary file modified samples/microflash.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified samples/vitepress.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6afa4d6

Please sign in to comment.