Skip to content

feat: Add Copy Button to Documentation Code Snippets (#1842) #1898

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add Copy Button to Documentation Code Snippets (#1842) #1898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion animate.compat.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion animate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Version - 4.1.1
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2022 Animate.css
* Copyright (c) 2025 Animate.css
*/
:root {
--animate-duration: 1s;
Expand Down
2 changes: 1 addition & 1 deletion animate.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/animate.min.css
View file
Open in desktop

Large diffs are not rendered by default.

159 changes: 129 additions & 30 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,64 @@
/>

<!-- Fork Corner Stylesheet -->
<link
<link
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
rel="stylesheet"
/>

<link rel="stylesheet" href="animate.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
/* 1. Wrapper for positioning */
.code-container {
position: relative;
margin: 1.5em 0; /* Add some space around the code blocks */
}

/* 2. Style the <pre> tag itself */
.code-container pre {
/* The <pre> tag already has styles, but we ensure margin is 0
since the wrapper handles it */
margin: 0;
/* Add some padding to make room for the button */
padding-right: 50px;
}

/* 3. The copy button */
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #333;
color: white;
border: none;
padding: 8px 10px;
border-radius: 5px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* 4. Hover effect */
.copy-btn:hover {
opacity: 1;
background-color: #555;
}

/* 5. Icon styles */
.copy-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
vertical-align: middle;
}

/* 6. "Copied" feedback state */
.copy-btn.copied {
background-color: #28a745; /* A nice green color */
opacity: 1;
}
</style>
</head>
<body>

Expand Down Expand Up @@ -75,7 +126,7 @@ <h2 class="callout-subtitle">Just-add-water CSS animations</h2>
</svg>
</label>
<button class="callout-hideList button">Close list</button>

<section class="attention_seekers" id="attention_seekers">
<h3 class="animation-title">Attention seekers</h3>
<ul class="animation-group">
Expand Down Expand Up @@ -163,7 +214,7 @@ <h3 class="animation-title">Attention seekers</h3>
</button>
</li></ul>
</section>


<section class="back_entrances" id="back_entrances">
<h3 class="animation-title">Back entrances</h3>
Expand Down Expand Up @@ -196,7 +247,7 @@ <h3 class="animation-title">Back entrances</h3>
</button>
</li></ul>
</section>


<section class="back_exits" id="back_exits">
<h3 class="animation-title">Back exits</h3>
Expand Down Expand Up @@ -229,7 +280,7 @@ <h3 class="animation-title">Back exits</h3>
</button>
</li></ul>
</section>


<section class="bouncing_entrances" id="bouncing_entrances">
<h3 class="animation-title">Bouncing entrances</h3>
Expand Down Expand Up @@ -269,7 +320,7 @@ <h3 class="animation-title">Bouncing entrances</h3>
</button>
</li></ul>
</section>


<section class="bouncing_exits" id="bouncing_exits">
<h3 class="animation-title">Bouncing exits</h3>
Expand Down Expand Up @@ -309,7 +360,7 @@ <h3 class="animation-title">Bouncing exits</h3>
</button>
</li></ul>
</section>


<section class="fading_entrances" id="fading_entrances">
<h3 class="animation-title">Fading entrances</h3>
Expand Down Expand Up @@ -405,7 +456,7 @@ <h3 class="animation-title">Fading entrances</h3>
</button>
</li></ul>
</section>


<section class="fading_exits" id="fading_exits">
<h3 class="animation-title">Fading exits</h3>
Expand Down Expand Up @@ -501,7 +552,7 @@ <h3 class="animation-title">Fading exits</h3>
</button>
</li></ul>
</section>


<section class="flippers" id="flippers">
<h3 class="animation-title">Flippers</h3>
Expand Down Expand Up @@ -541,7 +592,7 @@ <h3 class="animation-title">Flippers</h3>
</button>
</li></ul>
</section>


<section class="lightspeed" id="lightspeed">
<h3 class="animation-title">Lightspeed</h3>
Expand Down Expand Up @@ -574,7 +625,7 @@ <h3 class="animation-title">Lightspeed</h3>
</button>
</li></ul>
</section>


<section class="rotating_entrances" id="rotating_entrances">
<h3 class="animation-title">Rotating entrances</h3>
Expand Down Expand Up @@ -614,7 +665,7 @@ <h3 class="animation-title">Rotating entrances</h3>
</button>
</li></ul>
</section>


<section class="rotating_exits" id="rotating_exits">
<h3 class="animation-title">Rotating exits</h3>
Expand Down Expand Up @@ -654,7 +705,7 @@ <h3 class="animation-title">Rotating exits</h3>
</button>
</li></ul>
</section>


<section class="specials" id="specials">
<h3 class="animation-title">Specials</h3>
Expand Down Expand Up @@ -687,7 +738,7 @@ <h3 class="animation-title">Specials</h3>
</button>
</li></ul>
</section>


<section class="zooming_entrances" id="zooming_entrances">
<h3 class="animation-title">Zooming entrances</h3>
Expand Down Expand Up @@ -727,7 +778,7 @@ <h3 class="animation-title">Zooming entrances</h3>
</button>
</li></ul>
</section>


<section class="zooming_exits" id="zooming_exits">
<h3 class="animation-title">Zooming exits</h3>
Expand Down Expand Up @@ -767,7 +818,7 @@ <h3 class="animation-title">Zooming exits</h3>
</button>
</li></ul>
</section>


<section class="sliding_entrances" id="sliding_entrances">
<h3 class="animation-title">Sliding entrances</h3>
Expand Down Expand Up @@ -800,7 +851,7 @@ <h3 class="animation-title">Sliding entrances</h3>
</button>
</li></ul>
</section>


<section class="sliding_exits" id="sliding_exits">
<h3 class="animation-title">Sliding exits</h3>
Expand Down Expand Up @@ -833,7 +884,7 @@ <h3 class="animation-title">Sliding exits</h3>
</button>
</li></ul>
</section>

</section>

<footer class="intro-footer">
Expand Down Expand Up @@ -870,7 +921,7 @@ <h2 class="docs-mainTitle">
</span>
<div class="container">
<div class="content">

<section class="docSection-intro" id="intro">
<blockquote>
<p>Animate.css v4 brought some <strong>breaking changes</strong>, please refer to the <a href="#migration">migration guide</a> before updating from v3.x and under.</p>
Expand All @@ -879,7 +930,7 @@ <h2 class="docs-mainTitle">

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/00-intro.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-usage" id="usage">
<h2>Installation and Usage</h2>
Expand Down Expand Up @@ -946,7 +997,7 @@ <h4>CSS Custom Properties (CSS Variables)</h4>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-utilities" id="utilities">
<h2>Utility Classes</h2>
Expand Down Expand Up @@ -1077,7 +1128,7 @@ <h3>Repeating classes</h3>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-best-practices" id="best-practices">
<h2>Best Practices</h2>
Expand Down Expand Up @@ -1118,7 +1169,7 @@ <h3>Intervals between repeats</h3>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/03-best-practices.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-javascript" id="javascript">
<h2>Usage with Javascript</h2>
Expand Down Expand Up @@ -1169,7 +1220,7 @@ <h2>Usage with Javascript</h2>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-migration" id="migration">
<h2>Migration from v3.x and Under</h2>
Expand Down Expand Up @@ -1204,7 +1255,7 @@ <h2>Migration from v3.x and Under</h2>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/06-migration.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-custom-builds" id="custom-builds">
<h2>Custom Builds</h2>
Expand All @@ -1221,7 +1272,7 @@ <h2>Custom Builds</h2>
<li><code>animate.min.css</code>: minified build ready for production</li>
<li><code>animate.compat.css</code>: minified build ready for production <strong>without class prefix</strong>. This should only be used as an easy path for migrations.</li>
</ul>
<p>For example, if you'll only use some of the “attention seekers” animations, simply edit the <code>./source/animate.css</code> file, delete every <code>@import</code> and the ones you want to use.</p>
<p>For example, if you'll only use some of the “attention seekers” animations, simply edit the <code>./source/animate.css</code> file, delete every <code>@import</code>, and add the ones you want to use.</p>
<pre><code class="language-css">@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
Expand Down Expand Up @@ -1249,15 +1300,15 @@ <h3>Changing the default prefix</h3>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-accessibility" id="accessibility">
<h2>Accessibility</h2>
<p>Animate.css supports the <a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><code>prefers-reduced-motion</code> media query</a> so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select &quot;reduce motion&quot; on their operating system preferences, and it will turn off CSS transitions for them without any further work required.</p>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/08-accessibility.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-contributors" id="contributors">
<h2>Core Team</h2>
Expand Down Expand Up @@ -1285,7 +1336,7 @@ <h2>Core Team</h2>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/09-contributors.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>


<section class="docSection-license-contributing" id="license-contributing">
<h2>License and Contributing</h2>
Expand All @@ -1297,7 +1348,7 @@ <h3>Code of Conduct</h3>

<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/09-license-contributing.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>

</div>
<aside class="sidebar">
<div class="meta">
Expand Down Expand Up @@ -1358,5 +1409,53 @@ <h3>Code of Conduct</h3>

<!-- Fork Corner Scripts -->
<script src="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Find all <pre> blocks
const allPreBlocks = document.querySelectorAll('pre');

allPreBlocks.forEach(preBlock => {
// 3. Create the wrapper div
const container = document.createElement('div');
container.className = 'code-container';

// 4. Wrap the <pre> block
preBlock.parentNode.insertBefore(container, preBlock);
container.appendChild(preBlock);

// 5. Create the copy button
const copyButton = document.createElement('button');
copyButton.className = 'copy-btn';
copyButton.innerText = 'Copy';
copyButton.setAttribute('aria-label', 'Copy code to clipboard');

// 6. Append the button to the wrapper
container.appendChild(copyButton);

// 7. Add the click event listener
copyButton.addEventListener('click', () => {
const codeElement = preBlock.querySelector('code');
const textToCopy = codeElement ? codeElement.innerText : '';

if (textToCopy) {
navigator.clipboard.writeText(textToCopy).then(() => {
// Success feedback
copyButton.innerText = 'Copied!';
copyButton.classList.add('copied');

// Revert after 2 seconds
setTimeout(() => {
copyButton.innerText = 'Copy';
copyButton.classList.remove('copied');
}, 2000);

}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
});
});
});
</script>
</body>
</html>
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,8 @@
"animate.min.css",
"animate.css",
"source/**/*.css"
]
],
"dependencies": {
"animate.css": "^4.1.1"
}
}
Loading