drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-05-13 11:46:25 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: code copy issue for code blocks in shortcode (#201)

Browse Source 
* chore: add translation key for copy code button title

* chore: remove id from code block elements

* fix: copy the correct code target in code-copy.js

* chore: update details.md

* chore: remove console.log :)

* chore: remove `$` in shell commands

* chore: update docs
This commit is contained in:
Xin 2023-11-11 20:14:39 -05:00 committed by GitHub
parent 8801a04ebe
commit c2d7ba8ce5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,8 +33,8 @@ document.addEventListener('DOMContentLoaded', function () {
// Add click event listener for copy button // Add click event listener for copy button
button.addEventListener('click', function (e) { button.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
const targetId = button.getAttribute('data-clipboard-target'); // Get the code target
const target = document.querySelector(targetId); const target = button.parentElement.previousElementSibling;
let codeElement; let codeElement;
if (target.tagName === 'CODE') { if (target.tagName === 'CODE') {
codeElement = target; codeElement = target;
@ -44,9 +44,12 @@ document.addEventListener('DOMContentLoaded', function () {
codeElement = codeElements[codeElements.length - 1]; codeElement = codeElements[codeElements.length - 1];
} }
if (codeElement) { if (codeElement) {
let code = codeElement.innerText;
// Replace double newlines with single newlines in the innerText // Replace double newlines with single newlines in the innerText
// as each line inside <span> has trailing newline '\n' // as each line inside <span> has trailing newline '\n'
const code = codeElement.innerText.replace(/\n\n/g, '\n'); if ("lang" in codeElement.dataset) {
code = code.replace(/\n\n/g, '\n');
}
navigator.clipboard.writeText(code).then(function () { navigator.clipboard.writeText(code).then(function () {
button.classList.add('copied'); button.classList.add('copied');
setTimeout(function () { setTimeout(function () {

6
exampleSite/content/docs/advanced/customization.md
View File

@ -47,8 +47,8 @@ The primary color of the theme can be customized by setting the `--primary-hue`
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command: List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
```bash ```shell
$ hugo gen chromastyles --style=github hugo gen chromastyles --style=github
``` ```
To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file. To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
@ -70,4 +70,4 @@ For further information, refer to the [Hugo Templates](https://gohugo.io/templat
## Further Customization ## Further Customization
Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme! Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!

26
exampleSite/content/docs/getting-started.md
View File

@ -43,18 +43,18 @@ Before starting, you need to have the following software installed:
### Initialize a new Hugo site ### Initialize a new Hugo site
```shell ```shell
$ hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### Configure Hextra theme via module ### Configure Hextra theme via module
```shell ```shell
# initialize hugo module # initialize hugo module
$ cd my-site cd my-site
$ hugo mod init github.com/username/my-site hugo mod init github.com/username/my-site
# add Hextra theme # add Hextra theme
$ hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
Configure `hugo.yaml` to use Hextra theme by adding the following: Configure `hugo.yaml` to use Hextra theme by adding the following:
@ -70,14 +70,14 @@ module:
Create new content page for the home page and the documentation page: Create new content page for the home page and the documentation page:
```shell ```shell
$ hugo new content/_index.md hugo new content/_index.md
$ hugo new content/docs/_index.md hugo new content/docs/_index.md
``` ```
### Preview the site locally ### Preview the site locally
```shell ```shell
$ hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
Voila, your new site preview is available at `http://localhost:1313/`. Voila, your new site preview is available at `http://localhost:1313/`.
@ -90,7 +90,7 @@ Voila, your new site preview is available at `http://localhost:1313/`.
To update all Hugo modules in your project to their latest versions, run the following command: To update all Hugo modules in your project to their latest versions, run the following command:
```shell ```shell
$ hugo mod get -u hugo mod get -u
``` ```
To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command: To update Hextra to the [latest released version](https://github.com/imfing/hextra/releases), run the following command:
@ -119,7 +119,7 @@ Before starting, you need to have the following software installed:
### Initialize a new Hugo site ### Initialize a new Hugo site
```shell ```shell
$ hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### Add Hextra theme as a Git submodule ### Add Hextra theme as a Git submodule
@ -139,14 +139,14 @@ theme: hextra
Create new content page for the home page and the documentation page: Create new content page for the home page and the documentation page:
```shell ```shell
$ hugo new content/_index.md hugo new content/_index.md
$ hugo new content/docs/_index.md hugo new content/docs/_index.md
``` ```
### Preview the site locally ### Preview the site locally
```shell ```shell
$ hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
Your new site preview is available at `http://localhost:1313/`. Your new site preview is available at `http://localhost:1313/`.
@ -168,7 +168,7 @@ Failure to run this command results in the theme folder not being populated with
To update all submodules in your repository to their latest commits, run the following command: To update all submodules in your repository to their latest commits, run the following command:
```shell ```shell
$ git submodule update --remote git submodule update --remote
``` ```
To update Hextra to the latest commit, run the following command: To update Hextra to the latest commit, run the following command:

4
exampleSite/content/docs/guide/shortcodes/details.md
View File

@ -24,7 +24,7 @@ This will be hidden by default.
## Usage ## Usage
```` ````markdown
{{%/* details title="Details" */%}} {{%/* details title="Details" */%}}
This is the content of the details. This is the content of the details.
@ -34,7 +34,7 @@ Markdown is **supported**.
{{%/* /details */%}} {{%/* /details */%}}
```` ````
```` ````markdown
{{%/* details title="Click me to reveal" closed="true" */%}} {{%/* details title="Click me to reveal" closed="true" */%}}
This will be hidden by default. This will be hidden by default.

1
i18n/en.yaml
View File

@ -1,6 +1,7 @@
backToTop: "Scroll to top" backToTop: "Scroll to top"
changeLanguage: "Change language" changeLanguage: "Change language"
changeTheme: "Change theme" changeTheme: "Change theme"
copyCode: "Copy code"
copyright: "© 2023 Hextra Project." copyright: "© 2023 Hextra Project."
dark: "Dark" dark: "Dark"
editThisPage: "Edit this page on GitHub →" editThisPage: "Edit this page on GitHub →"

10
layouts/_default/_markup/render-codeblock.html
View File

@ -1,6 +1,7 @@
{{- $class := .Attributes.class | default "" -}} {{- $class := .Attributes.class | default "" -}}
{{- $filename := .Attributes.filename | default "" -}} {{- $filename := .Attributes.filename | default "" -}}
{{- $lang := .Attributes.lang | default .Type -}} {{- $lang := .Attributes.lang | default .Type -}}
{{- $copyCode := (T "copyCode") | default "Copy code" -}}
<div class="code-block relative mt-6 first:mt-0 group/code"> <div class="code-block relative mt-6 first:mt-0 group/code">
@ -8,17 +9,14 @@
<div class="filename">{{ $filename }}</div> <div class="filename">{{ $filename }}</div>
{{- end -}} {{- end -}}
{{- if transform.CanHighlight $lang -}} {{- if transform.CanHighlight $lang -}}
<div id="code-block-{{ .Ordinal }}"> <div>{{- highlight .Inner $lang .Options -}}</div>
{{- highlight .Inner $lang .Options -}}
</div>
{{- else -}} {{- else -}}
<pre><code id="code-block-{{ .Ordinal }}">{{ .Inner }}</code></pre> <pre><code>{{ .Inner }}</code></pre>
{{- end -}} {{- end -}}
<div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}"> <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
<button <button
class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
title="Copy code" title="{{ $copyCode }}"
data-clipboard-target="#code-block-{{ .Ordinal }}"
> >
<div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div> <div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
<div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div> <div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>