From 1449a5a3927709c4ec6f78c13b0860f40a20220c Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Tue, 29 Apr 2025 10:21:47 +0200 Subject: [PATCH 1/5] overview: provide download and copy buttons for demo code --- overview/default.nix | 26 ++++++++++++++++++++++++-- overview/style.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 2 deletions(-) diff --git a/overview/default.nix b/overview/default.nix index 174c744ad..65479be4c 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -101,6 +101,16 @@ let markdownToHtml = markdown: "{{ markdown_to_html(${toJSON markdown}) }}"; render = { + # A code snippet that is both copyable and downloadable as a file + codeFile.one = filename: '' +
+ {{ include_code("nix", "${filename}", relative_path=True) }} +
+ Download + +
+
+ ''; options = rec { one = prefixLength: option: @@ -274,7 +284,7 @@ let Download this Nix file to your computer. It obtains the NGIpkgs source code and declares a basic service configuration to be run in a virtual machine. - {{ include_code("nix", "default.nix", relative_path=True) }} + ${render.codeFile.one "default.nix"}
  • Build the virtual machine defined in default.nix and run it: @@ -377,7 +387,19 @@ let - ${args.content} + ${args.content} + ''; diff --git a/overview/style.css b/overview/style.css index 4e50943db..eb9503286 100644 --- a/overview/style.css +++ b/overview/style.css @@ -286,6 +286,42 @@ code, pre { overflow-x: auto; } +.code-block { + position: relative; +} + +.code-buttons { + position: absolute; + top: 0.5em; + right: 1em; +} + +.button { + display: inline-block; + padding: 0.1em 0.4em; + background-color: transparent; + color: white; + text-align: center; + text-decoration: none; + border-radius: 5px; + border: solid 1px gray; + background-color: gray; + margin: 0; + font-size: 0.8rem; +} + +.button.download { + background-color: green; +} + +.button:hover { + background-color: darkgrey; +} + +.button.download:hover { + background-color: darkgreen; +} + details > summary > h2, details > summary > h3 { display: inline; } From f9116026f3904ed358ba540afb3b025bc3ee1f77 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Tue, 29 Apr 2025 11:13:55 +0200 Subject: [PATCH 2/5] overview: extend copy buttons to all kinds of code snippets --- overview/default.nix | 61 ++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 16 deletions(-) diff --git a/overview/default.nix b/overview/default.nix index 65479be4c..6e8fdc4cc 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -101,16 +101,34 @@ let markdownToHtml = markdown: "{{ markdown_to_html(${toJSON markdown}) }}"; render = { - # A code snippet that is both copyable and downloadable as a file - codeFile.one = filename: '' -
    - {{ include_code("nix", "${filename}", relative_path=True) }} -
    - Download - + # A code snippet that is copyable and optionally downloadable + codeSnippet.one = + { + filename, + language ? "nix", + relative ? false, + downloadable ? false, + }: + '' +
    + {{ include_code("${language}", "${filename}" ${optionalString relative ", relative_path=True"}) }} +
    + ${optionalString downloadable '' + Download + ''} + +
    -
    - ''; + ''; options = rec { one = prefixLength: option: @@ -158,7 +176,7 @@ let one = example: ''
    ${example.description} - {{ include_code("nix", "${example.module}")}} + ${render.codeSnippet.one { filename = example.module; }}
    ''; @@ -284,7 +302,11 @@ let Download this Nix file to your computer. It obtains the NGIpkgs source code and declares a basic service configuration to be run in a virtual machine. - ${render.codeFile.one "default.nix"} + ${render.codeSnippet.one { + filename = "default.nix"; + relative = true; + downloadable = true; + }}
  • Build the virtual machine defined in default.nix and run it: @@ -390,12 +412,19 @@ let ${args.content} ''} - Copy + 📋 Copy From 857bafd08b0eee68bbc82527c92016a19b86e7c4 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Tue, 29 Apr 2025 13:22:10 +0200 Subject: [PATCH 4/5] overview: way better copy button --- overview/default.nix | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/overview/default.nix b/overview/default.nix index 161f789cb..2aa93124a 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -124,7 +124,7 @@ let ${toJSON (readFile filename)} ''} - 📋 Copy + ⿻ Copy From 84e0a2aa4929699b5febf93b6d1b982806682477 Mon Sep 17 00:00:00 2001 From: Kerstin Humm Date: Tue, 29 Apr 2025 15:04:48 +0200 Subject: [PATCH 5/5] overview: move icons into CSS --- overview/default.nix | 8 +++----- overview/style.css | 10 +++++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/overview/default.nix b/overview/default.nix index 2aa93124a..594263b3c 100644 --- a/overview/default.nix +++ b/overview/default.nix @@ -114,17 +114,15 @@ let {{ include_code("${language}", "${filename}" ${optionalString relative ", relative_path=True"}) }}
    ${optionalString downloadable '' - ⭳ Download + Download ''} -
    diff --git a/overview/style.css b/overview/style.css index eb9503286..d645bbae0 100644 --- a/overview/style.css +++ b/overview/style.css @@ -310,11 +310,19 @@ code, pre { font-size: 0.8rem; } +.button.copy:before { + content: "⿻"; +} + +.button.download:before { + content: "⭳"; +} + .button.download { background-color: green; } -.button:hover { +.button.copy:hover { background-color: darkgrey; }