mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-09-16 00:29:23 +04:00
Initial commit
This commit is contained in:
GitHub
83
src/plugins/expressive-code/collapse-button.ts
Normal file
83
src/plugins/expressive-code/collapse-button.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { definePlugin } from "@expressive-code/core";
|
||||
import type { Element } from "hast";
|
||||
|
||||
export function pluginCollapseButton() {
|
||||
return definePlugin({
|
||||
name: "Collapse Button",
|
||||
hooks: {
|
||||
postprocessRenderedBlock: (context) => {
|
||||
// If the code block has a title, we don't add the collapse button
|
||||
// as it might conflict with the title bar layout
|
||||
const classNames = (context.renderData.blockAst.properties?.className as string[]) || [];
|
||||
if (classNames.includes("has-title")) {
|
||||
return;
|
||||
}
|
||||
|
||||
function processCodeBlock(node: Element) {
|
||||
// Add classes to the root node to indicate it's collapsible and expanded by default
|
||||
if (!node.properties) node.properties = {};
|
||||
const classNames = (node.properties.className as string[]) || [];
|
||||
if (!classNames.includes("collapsible")) {
|
||||
classNames.push("collapsible");
|
||||
}
|
||||
if (!classNames.includes("expanded")) {
|
||||
classNames.push("expanded");
|
||||
}
|
||||
node.properties.className = classNames;
|
||||
|
||||
const collapseButton = {
|
||||
type: "element" as const,
|
||||
tagName: "button",
|
||||
properties: {
|
||||
className: [
|
||||
"collapse-btn"
|
||||
],
|
||||
"aria-label": "Collapse code",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "div",
|
||||
properties: {
|
||||
className: [
|
||||
"collapse-btn-icon",
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "svg",
|
||||
properties: {
|
||||
viewBox: "0 0 24 24",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
className: [
|
||||
"collapse-btn-icon",
|
||||
"collapse-icon",
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
} as Element;
|
||||
if (!node.children) {
|
||||
node.children = [];
|
||||
}
|
||||
node.children.push(collapseButton);
|
||||
}
|
||||
|
||||
processCodeBlock(context.renderData.blockAst);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
88
src/plugins/expressive-code/copy-button.ts
Normal file
88
src/plugins/expressive-code/copy-button.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { definePlugin } from "@expressive-code/core";
|
||||
import type { Element } from "hast";
|
||||
|
||||
|
||||
export function pluginCopyButton() {
|
||||
return definePlugin({
|
||||
name: "Copy Button",
|
||||
hooks: {
|
||||
postprocessRenderedBlock: (context) => {
|
||||
function processCodeBlock(node: Element) {
|
||||
const copyButton = {
|
||||
type: "element" as const,
|
||||
tagName: "button",
|
||||
properties: {
|
||||
className: [
|
||||
"copy-btn"
|
||||
],
|
||||
"aria-label": "Copy code",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "div",
|
||||
properties: {
|
||||
className: [
|
||||
"copy-btn-icon"
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "svg",
|
||||
properties: {
|
||||
viewBox: "0 -960 960 960",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
className: [
|
||||
"copy-btn-icon",
|
||||
"copy-icon",
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "M368.37-237.37q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48 24.26-58.74 24.26-24.26 58.74-24.26h378.26q34.48 0 58.74 24.26 24.26 24.26 24.26 58.74v474.26q0 34.48-24.26 58.74-24.26 24.26-58.74 24.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155 238q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45 11.96-29.48 11.97-12.02 29.33-12.02t29.54 12.02q12.17 12.03 12.17 29.48v515.76h419.76q17.45 0 29.48 11.96 12.02 11.97 12.02 29.33t-12.02 29.54q-12.03 12.17-29.48 12.17H213.37Zm155-238v-474.26 474.26Z",
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "svg",
|
||||
properties: {
|
||||
viewBox: "0 -960 960 960",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
className: [
|
||||
"copy-btn-icon",
|
||||
"success-icon",
|
||||
],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element" as const,
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "m389-377.13 294.7-294.7q12.58-12.67 29.52-12.67 16.93 0 29.61 12.67 12.67 12.68 12.67 29.53 0 16.86-12.28 29.14L419.07-288.41q-12.59 12.67-29.52 12.67-16.94 0-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77 12.55-29.45 12.68-12.67 29.62-12.67 16.93 0 29.28 12.67L389-377.13Z",
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
} as Element;
|
||||
if (!node.children) {
|
||||
node.children = [];
|
||||
}
|
||||
node.children.push(copyButton);
|
||||
}
|
||||
|
||||
processCodeBlock(context.renderData.blockAst);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
52
src/plugins/expressive-code/language-badge.ts
Normal file
52
src/plugins/expressive-code/language-badge.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Based on the discussion at https://github.com/expressive-code/expressive-code/issues/153#issuecomment-2282218684
|
||||
*/
|
||||
import { definePlugin } from "@expressive-code/core";
|
||||
|
||||
|
||||
export function pluginLanguageBadge() {
|
||||
return definePlugin({
|
||||
name: "Language Badge",
|
||||
hooks: {
|
||||
postprocessRenderedBlock: ({ codeBlock, renderData }) => {
|
||||
const language = codeBlock.language;
|
||||
if (language && renderData.blockAst.properties) {
|
||||
renderData.blockAst.properties["data-language"] = language;
|
||||
}
|
||||
},
|
||||
},
|
||||
baseStyles: ({}) => `
|
||||
.frame[data-language]:not(.has-title):not(.is-terminal) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
content: attr(data-language);
|
||||
font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: var(--btn-content);
|
||||
background: var(--btn-regular-bg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user