diff --git a/src/content/posts/markdown-extended.md b/src/content/posts/markdown-extended.md index f83fb78..678b0f8 100644 --- a/src/content/posts/markdown-extended.md +++ b/src/content/posts/markdown-extended.md @@ -1,16 +1,16 @@ --- title: Markdown Extended Features published: 2024-05-01 -updated: 2024-11-29 +updated: 2025-11-30 description: 'Read more about Markdown features in Fuwari' image: '' tags: [Demo, Example, Markdown, Fuwari] category: 'Examples' -draft: false +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. +You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API. ::github{repo="Fabrizz/MMM-OnSpotify"} @@ -24,14 +24,28 @@ Create a GitHub repository card with the code `::github{repo="/"}`. You can also add dynamic cards that show a GitLab repository, on page load, the repository information is pulled from the GitLab API. + +### With GitLab Official Service + +To do so, simply fill in the `repo` value with the project owner and repo. + ::gitlab{repo="gitlab-org/gitlab"} -Create a GitHub repository card with the code `::gitlab{repo="/"}`. + ```mdx ::gitlab{repo="gitlab-org/gitlab"} ``` +### With Third-Party GitLab Service + +You would need to spcify third-party gitlab service in the `service` value. + + + +::gitlab{repo="utilities/konsole" service="https://invent.kde.org"} + + ## Admonitions Following types of admonitions are supported: `note` `tip` `important` `warning` `caution` diff --git a/src/plugins/rehype-component-gitlab-card.mjs b/src/plugins/rehype-component-gitlab-card.mjs index 6ebef01..d69489f 100644 --- a/src/plugins/rehype-component-gitlab-card.mjs +++ b/src/plugins/rehype-component-gitlab-card.mjs @@ -6,8 +6,9 @@ import { h } from "hastscript"; * * @param {Object} properties - The properties of the component. * @param {string} properties.repo - The Gitlab repository in the format "owner/repo". + * @param {string} properties.service - (optional) Third-Party GitLab service provider. * @param {import('mdast').RootContent[]} children - The children elements of the component. - * @returns {import('mdast').Parent} The created GitHub Card component. + * @returns {import('mdast').Parent} The created GitLab Card component. */ export function GitlabCardComponent(properties, children) { if (Array.isArray(children) && children.length !== 0) @@ -24,6 +25,7 @@ export function GitlabCardComponent(properties, children) { const repo = properties.repo; const repoE = repo.replace("/", "%2F"); // encoding by replace / to %2F + const service = properties?.service || "https://gitlab.com"; const cardUuid = `GC${Math.random().toString(36).slice(-6)}`; // Collisions are not important const nAvatar = h(`div#${cardUuid}-avatar`, { class: "gc-avatar" }); @@ -43,7 +45,7 @@ export function GitlabCardComponent(properties, children) { const nDescription = h( `div#${cardUuid}-description`, { class: "gc-description" }, - "Waiting for gitlab.com api...", + "Waiting for Gitlab Api...", ); const nStars = h(`div#${cardUuid}-stars`, { class: "gc-stars" }, "00K"); @@ -53,7 +55,7 @@ export function GitlabCardComponent(properties, children) { `script#${cardUuid}-script`, { type: "text/javascript", defer: true }, ` - fetch('https://gitlab.com/api/v4/projects/${repoE}').then(response => response.json()).then(data => { + fetch('${service}/api/v4/projects/${repoE}').then(response => response.json()).then(data => { document.getElementById('${cardUuid}-repo').innerText = data.name; document.getElementById('${cardUuid}-description').innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') || "Description not set"; document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks_count).replaceAll("\u202f", ''); @@ -61,7 +63,7 @@ export function GitlabCardComponent(properties, children) { const avatar_url = data.namespace.avatar_url; if (avatar_url.startsWith('/')) { - document.getElementById('${cardUuid}-avatar').style.backgroundImage = 'url(https://gitlab.com' + avatar_url + ')'; + document.getElementById('${cardUuid}-avatar').style.backgroundImage = 'url(${service}' + avatar_url + ')'; } else { document.getElementById('${cardUuid}-avatar').style.backgroundImage = 'url(' + avatar_url + ')'; } @@ -81,7 +83,7 @@ export function GitlabCardComponent(properties, children) { `a#${cardUuid}-card`, { class: "card-github fetch-waiting no-styling", - href: `https://gitlab.com/${repo}`, + href: `${service}/${repo}`, target: "_blank", repo, },