fix: correct tabs button color on hover in dark mode (#526)

* fix: tabs toggle button color in dark mode

* chore: update css

assets/css/compiled/main.css

@@ -3258,6 +3258,14 @@ body:is(html[class~="dark"] *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-ring-opacity));
 }
+.data-\[state\=selected\]\:dark\:hx-border-primary-500:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+}
+.data-\[state\=selected\]\:dark\:hx-text-primary-600:is(html[class~="dark"] *)[data-state="selected"] {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+}
 @media (prefers-contrast: more) {
 
   .contrast-more\:dark\:hx-border-current:is(html[class~="dark"] *) {

exampleSite/content/docs/advanced/customization.md

@@ -56,7 +56,6 @@ The theme can be further customized by overriding the default styles via the exp
 .hextra-footer:is(html[class~="dark"] *) {
   /* Styles will be applied to the footer element in dark mode */
 }
-
 ```
 
 The following classes can be used to customize various parts of the theme.
@@ -185,28 +184,28 @@ You may add custom scripts to the end of the head for every page by adding the f
 layouts/partials/custom/head-end.html
 ```
 
-## Custom Footer Section
+## Custom Extra Section in Footer
 
-You can add a custom section the footer between the language/theme buttons and the "Copyright"/"Powered By" section by creating a file `layouts/partials/custom/footer.html` in your site.
+You can add extra section in the footer by creating a file `layouts/partials/custom/footer.html` in your site.
 
 ```html {filename="layouts/partials/custom/footer.html"}
 <!-- Your footer element here -->
 ```
 
-Available variables in the footer section are:
+The added section will be added before the copyright section in the footer.
+You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content.
 
-- `.switchesVisible`: `true` if the language/theme button(s) are visible above the footer along with a horizontal separator.
-- `.copyrightVisible`: `true` if the "Copyright" and "Powered By" text are visible at the bottom of the footer.
-
-_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
+Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`.
 
 ## Custom Layouts
 
 The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
 For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
 
-For further information, refer to the [Hugo Templates](https://gohugo.io/templates/).
+For further information, refer to the [Hugo Templates][hugo-template-docs].
 
 ## Further Customization
 
 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!
+
+[hugo-template-docs]: https://gohugo.io/templates/

exampleSite/content/docs/guide/shortcodes/others.md

@@ -34,16 +34,15 @@ Result:
 {{< badge content="warning" type="warning" >}} &nbsp;
 {{< badge content="error" type="error" >}}
 
-With link:
+With link and icon:
 
 ```
-{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" */>}}
+{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
 ```
 
 Result:
 
-{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" >}}
-
+{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
 
 ## YouTube
 

exampleSite/content/docs/guide/syntax-highlighting.md

@@ -40,6 +40,22 @@ def say_hello():
     print("Hello!")
 ```
 
+### Link to File
+
+You can use the `base_url` attribute to provide a base URL that will be combined with the file name to generate a link.
+
+The file name can include a relative path if it specifies the file's location within the base path.
+
+````markdown {filename="Markdown"}
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+````
+
+```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
+go 1.20
+```
+
 ### Line Numbers
 
 To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number:

exampleSite/hugo_stats.json

@@ -197,6 +197,8 @@
       "dark:placeholder:hx-text-gray-400",
       "data-[state=closed]:hx-hidden",
       "data-[state=open]:hx-hidden",
+      "data-[state=selected]:dark:hx-border-primary-500",
+      "data-[state=selected]:dark:hx-text-primary-600",
       "data-[state=selected]:hx-block",
       "data-[state=selected]:hx-border-primary-500",
       "data-[state=selected]:hx-text-primary-600",

exampleSite/layouts/shortcodes/new-feature.html

@@ -0,0 +1,11 @@
+{{- $version := .Get "version" | default "" -}}
+{{- $icon := .Get "icon" | default "" -}}
+{{- $defaultLink := cond (eq $version "") "https://github.com/imfing/hextra/tree/main" (printf "https://github.com/imfing/hextra/releases/tag/%s" $version) -}}
+{{- $link := .Get "link" | default $defaultLink -}}
+{{- $content := cond (eq $version "") "New in main branch" (printf "New in %s" $version) -}}
+
+<div style="margin-top: 1rem; display: inline-flex;">
+  <a href="{{ $link }}" title="{{ $link | plainify }}" target="_blank">
+    {{- partial "shortcodes/badge" (dict "content" $content "border" true "icon" $icon) -}}
+  </a>
+</div>

layouts/_default/_markup/render-codeblock.html

@@ -1,12 +1,13 @@
 {{- $class := .Attributes.class | default "" -}}
 {{- $filename := .Attributes.filename | default "" -}}
+{{- $base_url := .Attributes.base_url | default "" -}}
 {{- $lang := .Attributes.lang | default .Type -}}
 
 
 <div class="hextra-code-block hx-relative hx-mt-6 first:hx-mt-0 hx-group/code">
-  {{ partial "components/codeblock" (dict "filename" $filename "lang" $lang "content" .Inner "options" .Options) }}
+  {{- partial "components/codeblock" (dict "filename" $filename "lang" $lang "base_url" $base_url "content" .Inner "options" .Options) -}}
 
-  {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) }}
-    {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename }}
-  {{ end }}
+  {{- if or (eq site.Params.highlight.copy.enable nil) (site.Params.highlight.copy.enable) -}}
+    {{- partialCached "components/codeblock-copy-button" (dict "filename" $filename) $filename -}}
+  {{- end -}}
 </div>

layouts/partials/components/codeblock.html

@@ -1,11 +1,27 @@
 {{ $filename := .filename | default "" -}}
+{{ $base_url := .base_url | default "" -}}
 {{ $lang := .lang | default "" }}
 {{ $content := .content }}
 {{ $options := .options | default (dict) }}
 
 {{- if $filename -}}
-  <div class="filename" dir="auto">{{ $filename }}</div>
+  <div class="filename not-prose" dir="auto">
+    {{- if $base_url -}}
+
+      {{- $base_url = strings.TrimSuffix "/" $base_url -}}
+      {{- $filename = strings.TrimPrefix "/" $filename -}}
+      {{- $file_url := urls.JoinPath $base_url $filename -}}
+
+      <a class="hx-no-underline hx-inline-flex hx-items-center hx-gap-1" href="{{ $file_url }}" target="_blank" rel="noopener noreferrer">
+          <span>{{- $filename -}}</span>
+          {{- partial "utils/icon" (dict "name" "external-link" "attributes" "height=1em") -}}
+      </a>
+    {{- else -}}
+      {{- $filename -}}
+    {{- end -}}
+  </div>
 {{- end -}}
+
 {{- if transform.CanHighlight $lang -}}
   <div>{{- highlight $content $lang $options -}}</div>
 {{- else -}}

layouts/partials/shortcodes/badge.html

@@ -2,6 +2,7 @@
 {{- $type := .type -}}
 {{- $class := .class | default "" -}}
 {{- $border := .border | default false -}}
+{{- $icon := .icon | default "" -}}
 
 {{- $defaultClass := "hx-text-gray-600 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200 hx-border-gray-200 dark:hx-border-neutral-700" -}}
 {{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
@@ -11,6 +12,9 @@
 {{- $borderClass := cond (eq $border true) "hx-border" "" -}}
 {{- $badgeClass := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
 <div class="hextra-badge {{ $class }}">
-  <div class="hx-inline-flex hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">{{- $content -}}</div>
+  <div class="hx-inline-flex hx-gap-1 hx-items-center hx-rounded-full hx-px-2.5 hx-leading-6 hx-text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
+    {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}
+    {{- $content -}}
+  </div>
 </div>
 {{- /* Strip trailing newline. */ -}}

layouts/shortcodes/badge.html

@@ -3,6 +3,7 @@
   {{- $type := .Get "type" | default "" -}}
   {{- $class := .Get "class" | default "" -}}
   {{- $link := .Get "link" | default "" -}}
+  {{- $icon := .Get "icon" | default "" -}}
 
   {{- if $link -}}
     <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
@@ -11,6 +12,7 @@
         "type" $type
         "class" $class
         "border" true
+        "icon" $icon
         )
       -}}
     </a>
@@ -20,6 +22,7 @@
       "type" $type
       "class" $class
       "border" true
+      "icon" $icon
       )
     -}}
   {{- end -}}

layouts/shortcodes/tabs.html

@@ -9,7 +9,7 @@
   <div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
     {{- range $i, $item := $items -}}
       <button
-        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
+        class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
         role="tab"
         type="button"
         aria-controls="tabs-panel-{{ $i }}"