Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: allow enable/disable code block copy button (#331)

Browse Source 
* refactor: move codeblock to a partial component

* feat: add flags for code block copy button

* allow disable code copy button completely
* allow make the copy button always visible

* chore: run build:css
This commit is contained in:
Xin
2024-03-28 08:32:51 +01:00
committed by GitHub
parent 741a640b1a
commit d8351aa432
9 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/css/compiled/main.css
View File

@ -1545,7 +1545,7 @@ video {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
margin-bottom: 1rem;
overflow-x: auto;
border-radius: 0.75rem;
@ -1559,23 +1559,23 @@ video {
}
@media (prefers-contrast: more) {
.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
border-width: 1px;
border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
--tw-contrast: contrast(1.5);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
}
:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
:is(html[class~="dark"] .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *))) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
}
@media (prefers-contrast: more) {
:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
:is(html[class~="dark"] .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *))) {
border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
}
}
.content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
.content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
overflow-wrap: break-word;
border-radius: 0.375rem;
border-width: 1px;
@ -1589,38 +1589,38 @@ video {
padding-right: .25em;
font-size: .9em;
}
:is(html[class~="dark"] .content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *))) {
:is(html[class~="dark"] .content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *))) {
border-color: rgb(255 255 255 / 0.1);
background-color: rgb(255 255 255 / 0.1);
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
margin-top: 1.5rem;
display: block;
overflow-x: auto;
padding: 0px;
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
margin-top: 0px;
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
margin: 0px;
border-top-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
padding: 0px;
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
:is(html[class~="dark"] .content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
:is(html[class~="dark"] .content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
background-color: rgb(75 85 99 / 0.2);
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) th {
margin: 0px;
border-width: 1px;
--tw-border-opacity: 1;
@ -1631,11 +1631,11 @@ video {
padding-bottom: 0.5rem;
font-weight: 600;
}
:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
:is(html[class~="dark"] .content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td {
.content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) td {
margin: 0px;
border-width: 1px;
--tw-border-opacity: 1;
@ -1645,7 +1645,7 @@ video {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
:is(html[class~="dark"] .content :where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
@ -1707,11 +1707,11 @@ video {
border-color: rgb(255 255 255 / 0.1);
background-color: rgb(255 255 255 / 0.1);
}
.content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
.content :where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
border-radius: 0px;
background-color: transparent;
}
:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *))) {
background-color: transparent;
}
.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
@ -2117,11 +2117,11 @@ article details > summary::before {
.dark .highlight .chroma .gl { text-decoration: underline }
/* TextWhitespace */
.dark .highlight .chroma .w { color: #6e7681 }
.code-block {
.hextra-code-block {
font-size: .9em;
line-height: 1.25rem;
}
.code-block pre {
.hextra-code-block pre {
overflow-x: auto;
background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
font-size: .9em;
@ -2131,23 +2131,23 @@ article details > summary::before {
}
@media (prefers-contrast: more) {
.code-block pre {
.hextra-code-block pre {
border-width: 1px;
border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
--tw-contrast: contrast(1.5);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
}
:is(html[class~="dark"] .code-block pre) {
:is(html[class~="dark"] .hextra-code-block pre) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
}
@media (prefers-contrast: more) {
:is(html[class~="dark"] .code-block pre) {
:is(html[class~="dark"] .hextra-code-block pre) {
border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
}
}
.code-block .filename {
.hextra-code-block .filename {
position: absolute;
top: 0px;
z-index: 1;
@ -2166,16 +2166,16 @@ article details > summary::before {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
:is(html[class~="dark"] .code-block .filename) {
:is(html[class~="dark"] .hextra-code-block .filename) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.code-block .filename + pre:not(.lntable pre) {
.hextra-code-block .filename + pre:not(.lntable pre) {
/* Override padding for code blocks with filename but no highlight */
padding-top: 3rem;
}
.code-block pre:not(.lntable pre) {
.hextra-code-block pre:not(.lntable pre) {
margin-bottom: 1rem;
border-radius: 0.75rem;
padding-left: 1rem;
@ -2183,7 +2183,7 @@ article details > summary::before {
padding-top: 1rem;
padding-bottom: 1rem;
}
.code-block div:nth-of-type(2) pre {
.hextra-code-block div:nth-of-type(2) pre {
padding-top: 3rem;
padding-bottom: 1rem;
}
@ -2542,13 +2542,13 @@ nav .search-wrapper {
@supports (
((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
) {
.code-copy-btn {
.hextra-hextra-code-copy-btn {
--tw-bg-opacity: .85;
--tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:is(html[class~="dark"] .code-copy-btn) {
:is(html[class~="dark"] .hextra-hextra-code-copy-btn) {
--tw-bg-opacity: 0.8;
}
}

2
assets/css/components/code-copy.css
View File

@ -1,7 +1,7 @@
@supports (
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.code-copy-btn {
.hextra-hextra-code-copy-btn {
@apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
}
}

6
assets/css/highlight.css
View File

@ -2,7 +2,7 @@
@import "chroma/light.css";
@import "chroma/dark.css";
.code-block {
.hextra-code-block {
@apply hx-text-[.9em] hx-leading-5;
pre {
@ -19,11 +19,11 @@
}
}
.code-block pre:not(.lntable pre) {
.hextra-code-block pre:not(.lntable pre) {
@apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
}
.code-block div:nth-of-type(2) pre {
.hextra-code-block div:nth-of-type(2) pre {
@apply hx-pt-12 hx-pb-4;
}

8
assets/css/typography.css
View File

@ -26,13 +26,13 @@
:where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
}
:where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
:where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
}
:where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
:where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
:where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
:where(table):not(:where(.hextra-code-block table, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
tr {
@ -66,7 +66,7 @@
:where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
@apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
}
:where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
:where(pre.mermaid):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
@apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
}
:where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {

2
assets/js/code-copy.js
View File

@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
return svg;
}
document.querySelectorAll('.code-copy-btn').forEach(function (button) {
document.querySelectorAll('.hextra-code-copy-btn').forEach(function (button) {
// Add copy and success icons
button.querySelector('.copy-icon')?.appendChild(getCopyIcon());
button.querySelector('.success-icon')?.appendChild(getSuccessIcon());