feat: add GitHub repo card, admonitions (#77)
* Added remark-directive, unist-util-visit * Add rehype custom components for Github, Admonitions * pnpm * Update pnpm-lock * Corrected hastscript requierement * Change ad- prefix so adblocks dont block content
This commit is contained in:
Fabrizio
saicaca
parent
5e4ae01af6
commit
e1dae88515
|
|
@ -8,6 +8,11 @@ import rehypeKatex from "rehype-katex"
|
|||
import rehypeSlug from "rehype-slug"
|
||||
import remarkMath from "remark-math"
|
||||
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs"
|
||||
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs"
|
||||
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs"
|
||||
import remarkDirective from "remark-directive" /* Handle directives */
|
||||
import remarkDirectiveRehype from 'remark-directive-rehype' /* Pass directives to rehype */
|
||||
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
|
||||
import svelte from "@astrojs/svelte"
|
||||
import swup from '@swup/astro';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
|
@ -54,10 +59,20 @@ export default defineConfig({
|
|||
sitemap(),
|
||||
],
|
||||
markdown: {
|
||||
remarkPlugins: [remarkMath, remarkReadingTime],
|
||||
remarkPlugins: [remarkMath, remarkReadingTime, remarkDirective, remarkDirectiveRehype],
|
||||
rehypePlugins: [
|
||||
rehypeKatex,
|
||||
rehypeSlug,
|
||||
[rehypeComponents, {
|
||||
components: {
|
||||
github: GithubCardComponent,
|
||||
tip: (x, y) => AdmonitionComponent(x, y, "tip"),
|
||||
note: (x, y) => AdmonitionComponent(x, y, "note"),
|
||||
important: (x, y) => AdmonitionComponent(x, y, "important"),
|
||||
caution: (x, y) => AdmonitionComponent(x, y, "caution"),
|
||||
warning: (x, y) => AdmonitionComponent(x, y, "warning"),
|
||||
},
|
||||
}],
|
||||
[
|
||||
rehypeAutolinkHeadings,
|
||||
{
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -25,20 +25,25 @@
|
|||
"astro-compress": "^2.2.15",
|
||||
"astro-icon": "1.1.0",
|
||||
"colorjs.io": "^0.5.0",
|
||||
"hastscript": "^9.0.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"overlayscrollbars": "^2.6.1",
|
||||
"pagefind": "^1.0.4",
|
||||
"reading-time": "^1.5.0",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-components": "^0.3.0",
|
||||
"rehype-katex": "^7.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-directive": "^3.0.0",
|
||||
"remark-directive-rehype": "^0.4.2",
|
||||
"remark-math": "^6.0.0",
|
||||
"sanitize-html": "^2.13.0",
|
||||
"sharp": "^0.33.2",
|
||||
"sharp": "^0.33.3",
|
||||
"svelte": "^4.2.12",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2"
|
||||
"typescript": "^5.4.2",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/ts-plugin": "^1.6.0",
|
||||
|
|
@ -51,6 +56,7 @@
|
|||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/markdown-it": "^14.0.0",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/sanitize-html": "^2.11.0",
|
||||
"stylus": "^0.63.0"
|
||||
}
|
||||
|
|
|
|||
10788
pnpm-lock.yaml
10788
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -114,6 +114,12 @@ color_set({
|
|||
|
||||
--display-light-icon: 1 0
|
||||
--display-dark-icon: 0 1
|
||||
|
||||
--admonitions-color-tip: mix(#90d73e, hsl(0 1 20), 92%) #90d73e
|
||||
--admonitions-color-note: mix(#13c6dd, hsl(0 1 20), 92%) #13c6dd
|
||||
--admonitions-color-important: mix(#bf4ef0, hsl(0 1 20), 92%) #bf4ef0
|
||||
--admonitions-color-warning: mix(#e3ab29, hsl(0 1 20), 92%) #e3ab29
|
||||
--admonitions-color-caution: mix(#df3b38, hsl(0 1 20), 92%) #df3b38
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const className = Astro.props.class;
|
|||
&:hover
|
||||
.anchor
|
||||
opacity: 1
|
||||
a
|
||||
a:not(.no-styling)
|
||||
position: relative
|
||||
background: none
|
||||
margin: -0.25rem
|
||||
|
|
@ -125,6 +125,64 @@ const className = Astro.props.class;
|
|||
content: none
|
||||
&:after
|
||||
content: none
|
||||
|
||||
blockquote.admonition
|
||||
.bdm-title
|
||||
display: block
|
||||
margin-bottom: -.9rem
|
||||
font-weight: bold
|
||||
&:before
|
||||
content: ' '
|
||||
display: inline-block
|
||||
font-size: inherit
|
||||
overflow: visible
|
||||
margin-right: .6rem
|
||||
height: 1em
|
||||
width: 1em
|
||||
vertical-align: -.126em
|
||||
mask-size: contain
|
||||
mask-position: center
|
||||
mask-repeat: no-repeat
|
||||
&.bdm-tip
|
||||
.bdm-title
|
||||
color: var(--admonitions-color-tip)
|
||||
&:before
|
||||
background: var(--admonitions-color-tip)
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
&:before
|
||||
background: var(--admonitions-color-tip)
|
||||
&.bdm-note
|
||||
.bdm-title
|
||||
color: var(--admonitions-color-note)
|
||||
&:before
|
||||
background: var(--admonitions-color-note)
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill='var(--admonitions-color-tip)' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
&:before
|
||||
background: var(--admonitions-color-note)
|
||||
&.bdm-important
|
||||
.bdm-title
|
||||
color: var(--admonitions-color-important)
|
||||
&:before
|
||||
background: var(--admonitions-color-important)
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
&:before
|
||||
background: var(--admonitions-color-important)
|
||||
&.bdm-warning
|
||||
.bdm-title
|
||||
color: var(--admonitions-color-warning)
|
||||
&:before
|
||||
background: var(--admonitions-color-warning)
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
&:before
|
||||
background: var(--admonitions-color-warning)
|
||||
&.bdm-caution
|
||||
.bdm-title
|
||||
color: var(--admonitions-color-caution)
|
||||
&:before
|
||||
background: var(--admonitions-color-caution)
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
&:before
|
||||
background: var(--admonitions-color-caution)
|
||||
img
|
||||
border-radius: 0.75rem
|
||||
hr
|
||||
|
|
@ -135,6 +193,147 @@ const className = Astro.props.class;
|
|||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 100%
|
||||
|
||||
a.card-github
|
||||
display: block
|
||||
position: relative
|
||||
margin: 0.5rem 0
|
||||
padding: 1.1rem 1.5rem 0.9rem 1.5rem
|
||||
color: var(--tw-prose-body)
|
||||
border-radius: var(--radius-large)
|
||||
text-decoration-thickness: 0px
|
||||
text-decoration-line: none
|
||||
box-shadow: #00000020 0px 3px 12px
|
||||
transition-property: color, background-color, opacity
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
transition-duration: 0.15s
|
||||
&:hover
|
||||
background-color: var(--btn-regular-bg-hover)
|
||||
.gc-titlebar
|
||||
color: var(--btn-content)
|
||||
gap: 0.1rem
|
||||
.gc-owner
|
||||
background-color: transparent
|
||||
padding: 0.1rem 0rem 0rem 0rem
|
||||
gap: 0
|
||||
.gc-avatar
|
||||
width: 0
|
||||
.gc-stars, .gc-forks, .gc-license, .gc-description
|
||||
color: var(--tw-prose-headings)
|
||||
&:before
|
||||
background-color: var(--tw-prose-headings)
|
||||
&:active
|
||||
scale: .99
|
||||
background-color: var(--btn-regular-bg-active);
|
||||
.gc-titlebar
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
gap: 0.5rem
|
||||
align-items: center
|
||||
margin-bottom: 0.5rem
|
||||
color: var(--tw-prose-headings)
|
||||
font-size: 1.25rem
|
||||
font-weight: 500
|
||||
transition-property: gap, padding, width;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
transition-duration: 0.15s
|
||||
.gc-divider, .gc-repo
|
||||
padding: 0.1rem 0rem 0rem 0rem
|
||||
.gc-owner
|
||||
position: relative
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
gap: 0.5rem
|
||||
align-items: center
|
||||
padding: 0.1rem 0.6rem 0rem 0.6rem
|
||||
color: var(--btn-content)
|
||||
background-color: var(--btn-regular-bg)
|
||||
border-radius: 0.5rem
|
||||
transition-property: color, background, background-color, opacity, gap, padding, width;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
transition-duration: 0.15s
|
||||
.gc-avatar
|
||||
display: block
|
||||
overflow: hidden
|
||||
width: 1.4rem
|
||||
height: 1.4rem
|
||||
margin-top: -0.1rem
|
||||
background-color: var(--primary)
|
||||
background-size: cover
|
||||
border-radius: 50%
|
||||
transition-property: color, background-color, opacity, gap, padding, width;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
transition-duration: 0.15s
|
||||
.gc-description
|
||||
margin-bottom: 0.7rem
|
||||
font-size: 0.96em
|
||||
font-weight: 400
|
||||
line-height: 1.4em
|
||||
color: var(--tw-prose-body)
|
||||
.gc-infobar
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
gap: 1.4em
|
||||
color: var(--tw-prose-body)
|
||||
.gc-language
|
||||
display: none
|
||||
.gc-stars, .gc-forks, .gc-license
|
||||
font-weight: 500
|
||||
font-size: 0.96em
|
||||
opacity: 0.9;
|
||||
&:before
|
||||
content: ' '
|
||||
display: inline-block
|
||||
height: 1.3em
|
||||
width: 1.3em
|
||||
margin-right: .4rem
|
||||
vertical-align: -.24em
|
||||
font-size: inherit
|
||||
background-color: var(--tw-prose-body)
|
||||
overflow: visible
|
||||
mask-size: contain
|
||||
mask-position: center
|
||||
mask-repeat: no-repeat
|
||||
transition-property: background-color, background;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
|
||||
transition-duration: 0.15s
|
||||
.gc-stars
|
||||
&:before
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
.gc-license
|
||||
&:before
|
||||
margin-right: .5rem
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
.gc-forks
|
||||
&:before
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E")
|
||||
a.card-github.fetch-waiting
|
||||
pointer-events: none
|
||||
opacity: 0.7
|
||||
transition: opacity 0.15s ease-in-out
|
||||
.gc-description, .gc-stars, .gc-forks, .gc-license
|
||||
background-color: var(--tw-prose-body)
|
||||
color: transparent
|
||||
opacity: 0.5;
|
||||
border-radius: 1rem
|
||||
animation: pulsate 2s infinite linear
|
||||
user-select: none
|
||||
&:before
|
||||
background-color: transparent
|
||||
.gc-avatar
|
||||
display: none
|
||||
.gc-repo
|
||||
margin-left: -0.1rem
|
||||
a.card-github.fetch-error
|
||||
pointer-events: all
|
||||
opacity: 1
|
||||
@keyframes pulsate
|
||||
0%
|
||||
opacity: 0.2
|
||||
50%
|
||||
opacity: 0.5
|
||||
100%
|
||||
opacity: 0.2
|
||||
</style>
|
||||
|
||||
<style lang="css" is:global>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: Markdown extended features
|
||||
published: 2024-05-01
|
||||
description: 'Read more about Markdown features in Fuwari'
|
||||
image: ''
|
||||
tags: [Demo, Example, Markdown, Fuwari]
|
||||
category: 'Examlpes'
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Github repository cards
|
||||
You can add dynamic cards that link to Github repositories, on page load, the repository information is pulled from the Github API. `::github{repo="saicaca/fuwari"}`
|
||||
|
||||
::github{repo="Fabrizz/MMM-OnSpotify"}
|
||||
|
||||
|
||||
## Admonitions, notes, containers
|
||||
Fuwari supports admonitions of type: `tip, note, important, warning, caution`
|
||||
|
||||
:::note
|
||||
This is a note, other frameworks call them containers or alerts
|
||||
:::
|
||||
|
||||
:::tip{title="TIP"}
|
||||
This is a tip, you can change the title using the title property: `:::tip{title="Custom title"} \`
|
||||
:::
|
||||
|
||||
:::important
|
||||
Drink 8 glasses of water!
|
||||
:::
|
||||
|
||||
:::warning
|
||||
You should star the [Fuwari repository](https://github.com/saicaca/fuwari)
|
||||
:::
|
||||
|
||||
:::caution
|
||||
Admonitions can have other elements inside
|
||||
::github{repo="saicaca/fuwari"}
|
||||
:::
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/// <reference types="mdast" />
|
||||
import { h } from 'hastscript'
|
||||
|
||||
/**
|
||||
* Creates an admonition component.
|
||||
*
|
||||
* @param {Object} properties - The properties of the component.
|
||||
* @param {string} [properties.title] - An optional title.
|
||||
* @param {('tip'|'note'|'important'|'caution'|'warning')} type - The admonition type.
|
||||
* @param {import('mdast').RootContent[]} children - The children elements of the component.
|
||||
* @returns {import('mdast').Parent} The created admonition component.
|
||||
*/
|
||||
export function AdmonitionComponent(properties, children, type) {
|
||||
if (!Array.isArray(children) || children.length === 0)
|
||||
return h("div",
|
||||
{ class: 'hidden' },
|
||||
'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")'
|
||||
);
|
||||
|
||||
const title = properties?.title;
|
||||
|
||||
return h(`blockquote`,
|
||||
{ class: `admonition bdm-${type}` },
|
||||
[ h("span", { class: `bdm-title` }, title ? title : type.toUpperCase()), ...children]
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/// <reference types="mdast" />
|
||||
import { h } from 'hastscript'
|
||||
|
||||
/**
|
||||
* Creates a GitHub Card component.
|
||||
*
|
||||
* @param {Object} properties - The properties of the component.
|
||||
* @param {string} properties.repo - The GitHub repository in the format "owner/repo".
|
||||
* @param {import('mdast').RootContent[]} children - The children elements of the component.
|
||||
* @returns {import('mdast').Parent} The created GitHub Card component.
|
||||
*/
|
||||
export function GithubCardComponent(properties, children) {
|
||||
if (Array.isArray(children) && children.length !== 0)
|
||||
return h("div",
|
||||
{ class: 'hidden' },
|
||||
['Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")']
|
||||
);
|
||||
|
||||
if (!properties.repo || !properties.repo.includes("/"))
|
||||
return h("div",
|
||||
{ class: 'hidden' },
|
||||
'Invalid repository. ("repo" attributte must be in the format "owner/repo")'
|
||||
);
|
||||
|
||||
const repo = properties.repo;
|
||||
const cardUuid = `GC${Math.random().toString(36).slice(-6)}` // Collisions are not important
|
||||
|
||||
const nAvatar = h(
|
||||
`span#${cardUuid}-avatar`,
|
||||
{ class: "gc-avatar"},
|
||||
)
|
||||
const nLanguage = h(
|
||||
`span#${cardUuid}-language`,
|
||||
{ class: "gc-language" },
|
||||
"Waiting..."
|
||||
)
|
||||
|
||||
const nTitle = h(
|
||||
`div`,
|
||||
{ class: "gc-titlebar" },
|
||||
[
|
||||
h("span", { class: "gc-owner" }, [
|
||||
nAvatar,
|
||||
h("span", { class: "gc-user" }, repo.split("/")[0] ),
|
||||
]),
|
||||
h("span", { class: "gc-divider" }, "/" ),
|
||||
h("span", { class: "gc-repo" }, repo.split("/")[1] )
|
||||
]
|
||||
)
|
||||
|
||||
const nDescription = h(
|
||||
`div#${cardUuid}-description`,
|
||||
{ class: "gc-description" },
|
||||
"Waiting for api.github.com..."
|
||||
)
|
||||
|
||||
const nStars = h(
|
||||
`span#${cardUuid}-stars`,
|
||||
{ class: "gc-stars" },
|
||||
"00K"
|
||||
)
|
||||
const nForks = h(
|
||||
`span#${cardUuid}-forks`,
|
||||
{ class: "gc-forks" },
|
||||
"0K"
|
||||
)
|
||||
const nLicense = h(
|
||||
`span#${cardUuid}-license`,
|
||||
{ class: "gc-license" },
|
||||
"0K"
|
||||
)
|
||||
|
||||
const nScript = h(
|
||||
`script#${cardUuid}-script`,
|
||||
{ type: "text/javascript", defer: true },
|
||||
`
|
||||
fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
|
||||
document.getElementById('${cardUuid}-card').href = data.html_url;
|
||||
document.getElementById('${cardUuid}-description').innerText = data.description.replace(/:[a-zA-Z0-9_]+:/g, '');
|
||||
document.getElementById('${cardUuid}-language').innerText = data.language;
|
||||
document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\u202f", '');
|
||||
document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\u202f", '');
|
||||
const avatarEl = document.getElementById('${cardUuid}-avatar');
|
||||
avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')';
|
||||
avatarEl.style.backgroundColor = 'transparent';
|
||||
if (data.license?.spdx_id) {
|
||||
document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id
|
||||
} else {
|
||||
document.getElementById('${cardUuid}-license').classList.add = "no-license"
|
||||
};
|
||||
document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
|
||||
console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
|
||||
}).catch(err => {
|
||||
const c = document.getElementById('${cardUuid}-card');
|
||||
c.classList.add("fetch-error");
|
||||
console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
|
||||
})
|
||||
`
|
||||
)
|
||||
|
||||
return h(`a#${cardUuid}-card`,
|
||||
{ class: "card-github fetch-waiting no-styling",
|
||||
href: `https://github.com/${repo}`,
|
||||
repo },
|
||||
[
|
||||
nTitle,
|
||||
nDescription,
|
||||
h("div",
|
||||
{ class: "gc-infobar" },
|
||||
[nStars, nForks, nLicense, nLanguage]
|
||||
),
|
||||
nScript
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const defaultTheme = require("tailwindcss/defaultTheme")
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
|
||||
darkMode: "class", // allows toggling dark mode manually
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue