ayco.io-astro/src/pages/pgp.astro

111 lines
2.9 KiB
Text

---
import Layout from '../layouts/Layout.astro'
import Footer from '../components/Footer.astro'
const title = 'PGP public key'
const description =
'Use to verify my digitally signed content like emails and files or to encrypt messages intended only for me.'
---
<Layout title={"Ayo's " + title} description={description}>
<main>
<h1>My {title}</h1>
<p>{description}</p>
<div class="key-block" role="region" aria-labelledby="public-key">
<button class="copy-btn" aria-label="Copy key to clipboard">Copy</button>
<pre
id="public-key"><code>
-----BEGIN PGP PUBLIC KEY BLOCK-----
mDMEahs0NhYJKwYBBAHaRw8BAQdAV2CfblniKxklPgW9eYt2gBl0jMHLwtjrQaY+
BQoWdIa0FkF5byBBeWNvIDxheW9AYXljby5pbz6ImQQTFgoAQRYhBBfxPV6P9zcr
E1RcOGXmv2QVKTxlBQJqGzQ2AhsDBQkB4TOABQsJCAcCAiICBhUKCQgLAgQWAgMB
Ah4HAheAAAoJEGXmv2QVKTxlIeYA/2WLvkDapBbVmGXoACAhqcTN93/CoPyzUbhN
hHE6mmAUAQDHsgCHmh3S/Rn4NRE3Gb41kiPTBWHrlYLTj3Kiw0ASB7g4BGobNDYS
CisGAQQBl1UBBQEBB0C6OEKEIPLaNDOM6JYhvvq0Q4Mk/B1eyZBKF/b4fQvlGgMB
CAeIfgQYFgoAJhYhBBfxPV6P9zcrE1RcOGXmv2QVKTxlBQJqGzQ2AhsMBQkB4TOA
AAoJEGXmv2QVKTxlMSQBAP5ta1kUFp3HAYwcun8qmoiVq1dEJSN1LnI7HlX4ucTl
AP0YLC768PFTBm9CM5T1BE0xjJ7s4dZSrVoI4n8RSe1nCA==
=MTsv
-----END PGP PUBLIC KEY BLOCK-----
</code></pre>
</div>
<p>
<a href="/publickey.asc" class="download-link"> Download key (asc) </a>
</p>
<p>This key will expire on: 2027-05-30</p>
</main>
<Footer />
</Layout>
<script>
/* Clipboard copy logic */
document.querySelector('.copy-btn').addEventListener('click', async () => {
const keyText = document.querySelector('#public-key code').innerText.trim()
try {
await navigator.clipboard.writeText(keyText)
const btn = document.querySelector('.copy-btn')
const original = btn.textContent
btn.textContent = 'Copied!'
setTimeout(() => {
btn.textContent = original
}, 2000)
} catch (err) {
console.error('Copy failed', err)
alert('Unable to copy the key. Please copy it manually.')
}
})
</script>
<style>
code {
font-size: var(--font-size-sm);
}
.key-block {
position: relative;
background: #272822;
color: #f8f8f2;
font-family: monospace;
font-size: 0.9rem;
line-height: 1.4;
padding: 1rem 1rem 1rem 1.5rem;
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin: 1em 0;
}
.key-block code {
display: block;
}
/* Copy button */
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--color-brand-blue-1);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
cursor: pointer;
opacity: 0.9;
transition: opacity 0.2s;
}
.copy-btn:hover,
.copy-btn:focus {
opacity: 1;
}
.copy-btn:focus {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
</style>