Skip to content

overview: provide download and copy buttons for demo code #962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fricklerhandwerk merged 5 commits into from
Apr 29, 2025
Merged

overview: provide download and copy buttons for demo code #962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1449a5a
overview: provide download and copy buttons for demo code
erictapen Apr 29, 2025
f911602
overview: extend copy buttons to all kinds of code snippets
erictapen Apr 29, 2025
8e3b07f
overview: add symbols to copy and download buttons
erictapen Apr 29, 2025
857bafd
overview: way better copy button
erictapen Apr 29, 2025
84e0a2a
overview: move icons into CSS
erictapen Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 52 additions & 3 deletions overview/default.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,32 @@ let
markdownToHtml = markdown: "{{ markdown_to_html(${toJSON markdown}) }}";

render = {
# A code snippet that is copyable and optionally downloadable
codeSnippet.one =
{
filename,
language ? "nix",
relative ? false,
downloadable ? false,
}:
''
<div class="code-block">
{{ include_code("${language}", "${filename}" ${optionalString relative ", relative_path=True"}) }}
<div class="code-buttons">
${optionalString downloadable ''
<a class="button download" href="${filename}" download>Download</a>
''}
<button class="button copy" onclick="copyToClipboard(this, '${filename}')">
${optionalString (!relative) ''
<script type="application/json">
${toJSON (readFile filename)}
</script>
''}
Copy
</button>
</div>
</div>
'';
options = rec {
one =
prefixLength: option:
Expand Down Expand Up @@ -148,7 +174,7 @@ let
one = example: ''
<section><details><summary>${example.description}</summary>

{{ include_code("nix", "${example.module}")}}
${render.codeSnippet.one { filename = example.module; }}

</details></section>
'';
Expand Down Expand Up @@ -274,7 +300,11 @@ let
<strong>Download this Nix file to your computer.</strong>
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.codeSnippet.one {
filename = "default.nix";
relative = true;
downloadable = true;
}}
</li>
<li>
<strong>Build the virtual machine</strong> defined in <code>default.nix</code> and run it:
Expand Down Expand Up @@ -377,7 +407,26 @@ let
<link rel="stylesheet" href="/style.css">
</head>
<body>
${args.content}
${args.content}
<script>
async function copyToClipboard(button, url) {
let code;
const firstChild = Array.from(button.children).find(child => child.tagName === "SCRIPT");
if (firstChild) {
// JSON is just used for string escaping
code = JSON.parse(firstChild.textContent);
} else {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch file: " + response.statusText);
}
code = await response.text();
}
await navigator.clipboard.writeText(code);
button.textContent = "Copied ✓";
setTimeout(() => button.textContent = "Copy", 2000);
}
</script>
</body>
</html>
'';
Expand Down
44 changes: 44 additions & 0 deletions overview/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,50 @@ 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.copy:before {
content: "⿻";
}

.button.download:before {
content: "⭳";
}

.button.download {
Comment thread
fricklerhandwerk marked this conversation as resolved.
background-color: green;
}

.button.copy:hover {
background-color: darkgrey;
}

.button.download:hover {
background-color: darkgreen;
}

details > summary > h2, details > summary > h3 {
display: inline;
}
Expand Down