diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b2d1721..a4c89ad 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -25,6 +25,8 @@ --color-tabs-divider: #00000033; --color-codeblock-code-with-comment: #00963926; + --code-copy-icon-height: 1rem; + --code-copy-icon-width: 1rem; --sidebar-margin: 24px; --sidebar-line-box-side-length: 8px; --sidebar-line-box-top: 6px; @@ -988,140 +990,83 @@ blockquote.side-callout { /* Codeblocks */ .highlight { + padding: 0 1rem 0 1rem; position: relative; z-index: -1; + flex: 1; code .cl { position: relative; - width: 100%; - white-space: pre-wrap; } } -.highlight-mf { - grid-column: 1 / -1 !important; - position: relative; - margin-left: 0; - z-index: -1; - width: calc(100% + var(--overflow-gutter-extension)); - - &:has(.comment) { - margin-left: calc(var(--overflow-gutter-extension) / -1); - } - - code { - font-weight: light; - font-family: "JetBrains Mono", monospace; - display: flex; - flex-direction: column; - } - - pre.chroma { - overflow-x: auto; - box-sizing: border-box; - } +.code-block { + grid-column: 1; +} - code .line { - position: relative; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-areas: - " code " - " comment "; - } +.icon-code-copy { + background-color: #f2f2f2; + border: none; + padding: 5px 10px; + cursor: pointer; + font-family: "JetBrains Mono", monospace; + font-size: 12px; + color: #000; +} - code .line:has(.comment) .code { - display: inline-block; - height: fit-content; - white-space: pre-wrap; - width: 100%; - background-color: var(--color-codeblock-code-with-comment); - margin: var(--codeblock-comment-space-between) 0; - position: relative; - grid-column: 1 / -1; - } +.highlight-v2 { + padding: 0 1rem 0 0; + margin: 0 -1rem 1rem -1rem; + border-top: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + overflow-x: scroll; +} - code .line:not(:has(.comment)) .code { - grid-column: 1 / -1; - grid-row: 1; - } +.highlight-v2.single-line { + display: flex; + align-items: center; + padding: 0 1rem 0 0; + border: 1px solid #cccccc; + overflow-x: scroll; + width: calc(100% + (2 * var(--overflow-gutter-extension))); +} - code:not(:has(.comment)) .code { - /* For codeblocks without comments */ - grid-column: 1 / -1 !important; - grid-row: 1; - padding-left: 0; - } +.code-header { + display: flex; + justify-content: space-between; +} - code .code { - padding-left: var(--codeblock-code-section-padding-left); - grid-area: code; - } +.code-header.no-lang { + justify-content: right; +} - code .comment { - display: inline-block; - white-space: normal; - margin: var(--codeblock-comment-space-between) 0; - width: calc(100vw - (var(--codeblock-comment-diff) * 2)); - border: black var(--codeblock-border-thickness) solid; - box-shadow: 3px 3px 0px var(--color-shadow); - padding: 8px; - grid-column: 1 / -1; - } +.code-type { + text-transform: uppercase; + border: 1px solid #cccccc; + border-bottom: 1px solid white; + padding: .25rem 1rem; /* Padding for button content */ + font-size: 12px; /* Font size */ + z-index: 9999; + margin-bottom: -1px; +} - code .line:has(.comment) .code::before { - /* Vertical Lines */ - content: ""; - position: absolute; - border-left: black var(--codeblock-border-thickness) solid; - left: calc(var(--codeblock-horizontal-line-overflow) + 1px); - top: 10px; - height: calc(100% + 0.7rem); - } +.code-copy-button { + background-color: #f2f2f2; + border: none; + padding: 5px 10px; + cursor: pointer; + font-family: "JetBrains Mono", monospace; + font-size: 12px; + color: #000; +} - code .line:has(.comment) .code::after { - /* Block */ - content: ""; - background-color: black; - position: absolute; - height: var(--codeblock-line-box-side-length); - width: var(--codeblock-line-box-side-length); - top: calc(10px - (var(--codeblock-border-thickness) * 1.5)); - left: var(--codeblock-horizontal-line-overflow); - } +.code-copy-button:hover { + background-color: #e0e0e0; +} - @media (min-width: 768px) { - /* Tablet */ - code .line:has(.comment) .code { - grid-column: 2 / -1; - } - - code .comment { - grid-column: 1; - width: calc(100% - (var(--codeblock-comment-diff))); - } - - code .line:not(:has(.comment)) .code { - grid-column: 2 / -1; - } - - code .line { - /* Readjust the areas to be more responsive */ - grid-template-columns: 40% 60%; - grid-template-areas: "comment code"; - } - - code .line:has(.comment) .code::before { - /* Horizontal Lines */ - border-left: none; - border-top: black var(--codeblock-border-thickness) solid; - left: calc(var(--codeblock-comment-diff) * -1); - width: calc( - var(--codeblock-horizontal-line-length) + - var(--codeblock-horizontal-line-overflow) - ); - } - } +.code-copy-button:focus { + outline: none; + box-shadow: 0 0 2px 2px #a5a5a5; } .next-prev-icon { @@ -1174,6 +1119,7 @@ figure { /* FILTHY HACKS END */ /* Hidden temporarily */ + .code-copy { display: none; } diff --git a/assets/js/code-copy-v2.js b/assets/js/code-copy-v2.js new file mode 100644 index 0000000..d1fe2c7 --- /dev/null +++ b/assets/js/code-copy-v2.js @@ -0,0 +1,41 @@ +// Tightly coupled to `render-codeblock.html` for element targeting +const copyToClipBoard = ((clipboard) => async (button) => { + const codeBlockId = button.getAttribute('data-id-codeblock'); + const codeBlock = document + .getElementById(codeBlockId) + .getElementsByClassName('highlight')[0]; + + if (!codeBlock) { + console.error('No code block found to copy from.'); + button.innerHTML = 'Error'; + return; + } + + const cleanCode = codeBlock.textContent + .replace(/^\s*\d+\s/gm, '') // Remove line numbers + .trim(); + + try { + await clipboard.writeText(cleanCode); + + updateButtonState(button, 'Copied!', 2000, true); + } catch (error) { + updateButtonState(button, 'Error'); + console.error(error); + } +})(navigator.clipboard); + +const updateButtonState = (button, message, revertDelay, disable = false) => { + button.innerHTML = message; + + if (disable) { + button.disabled = true; + } + + if (revertDelay) { + setTimeout(() => { + button.innerHTML = 'Copy'; + button.disabled = false; + }, revertDelay); + } +}; diff --git a/exampleSite/content/nginx/installing-nginx-open-source.md b/exampleSite/content/nginx/installing-nginx-open-source.md index d4d9753..80d8c60 100644 --- a/exampleSite/content/nginx/installing-nginx-open-source.md +++ b/exampleSite/content/nginx/installing-nginx-open-source.md @@ -45,7 +45,7 @@ http { # Proxy settings server { listen 80; - server_name www.example.com; + server_name www.exampleklajsdlkajsldkjaslkdjalksdjalksdjalksjdlakjsdlaksjdlkajdlakjsdlakjwodijaosidjaowidjaosidjasldkjldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdldkjaslkdjalksdasldkjas.com; root /usr/share/nginx/html; @@ -117,13 +117,6 @@ server { ``` -```js -function hello() { - // this is a comment - console.log("Hello world!"); - const thing = ["a", "string", "array"]; -} -``` This article explains how to install NGINX Open Source. @@ -191,7 +184,7 @@ The package can be installed from: 3. Install NGINX Open Source: ```shell - sudo yum install nginx + sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx sudo yum install nginx ``` 4. Verify the installation: @@ -262,8 +255,8 @@ The package can be installed from: 7. Start NGINX Open Source: - ```shell - sudo nginx + ```js + console.log("hello") ``` 8. Verify that NGINX Open Source is up and running: diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 0000000..788a45c --- /dev/null +++ b/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,36 @@ +{{ $result := transform.HighlightCodeBlock . }} +{{ $codeBlockId := printf "id-%x" (now.UnixNano) }} +{{ $lines := split $result.Wrapped "\n" }} +{{ $isSingleLine := eq (len $lines) 1 }} + +{{ if $isSingleLine }} + +{{ else }} + + + +{{ end }} +
+{{ $result.Wrapped }} +
\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d724d64..b889294 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -75,6 +75,13 @@ table.style.display = isNewTheme ? "none" : ""; }); + const notMfElements = ['[data-mf="false"]']; + notMfElements.forEach((elementId) => { + document.querySelectorAll(elementId).forEach((element) => { + element.style.display = isNewTheme ? "none" : ""; + }); + }) + const mfElements = ['[data-mf="true"]']; mfElements.forEach((elementId) => { document.querySelectorAll(elementId).forEach((element) => { diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 77c0d43..5fdf31c 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -13,6 +13,10 @@ {{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }} + +{{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }} + + {{ if .Page.Store.Get "hasMermaid" }} {{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}