Add Stripe-style API key generator and key favicon
This commit is contained in:
Julien Calixte
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>random</title>
|
||||
<title>API Key Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 597 B |
@@ -1,88 +1,11 @@
|
||||
<script>
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import Counter from './lib/Counter.svelte'
|
||||
import KeyGenerator from './lib/KeyGenerator.svelte'
|
||||
</script>
|
||||
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img src={heroImg} class="base" width="170" height="179" alt="" />
|
||||
<img src={svelteLogo} class="framework" alt="Svelte logo" />
|
||||
<img src={viteLogo} class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.svelte</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<Counter />
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank" rel="noreferrer">
|
||||
<img class="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://svelte.dev/" target="_blank" rel="noreferrer">
|
||||
<img class="button-icon" src={svelteLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank" rel="noreferrer">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank" rel="noreferrer">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank" rel="noreferrer">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank" rel="noreferrer">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>API Key Generator</h1>
|
||||
<p>Generate secure Stripe-style API keys</p>
|
||||
<KeyGenerator />
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
146
src/lib/KeyGenerator.svelte
Normal file
146
src/lib/KeyGenerator.svelte
Normal file
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
const ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'
|
||||
|
||||
let key = $state('')
|
||||
let copied = $state(false)
|
||||
let revealed = $state(false)
|
||||
|
||||
function generateKey() {
|
||||
const bytes = crypto.getRandomValues(new Uint8Array(32))
|
||||
const chars = Array.from(bytes, (b) => ALPHABET[b % 64]).join('')
|
||||
key = `sk_live_${chars}`
|
||||
copied = false
|
||||
}
|
||||
|
||||
async function copyKey() {
|
||||
await navigator.clipboard.writeText(key)
|
||||
copied = true
|
||||
setTimeout(() => (copied = false), 2000)
|
||||
}
|
||||
|
||||
generateKey()
|
||||
</script>
|
||||
|
||||
<div class="keygen">
|
||||
<div class="key-row">
|
||||
<code class="key" class:masked={!revealed}>
|
||||
{revealed ? key : 'sk_live_' + '•'.repeat(32)}
|
||||
</code>
|
||||
<button class="icon-btn" onclick={() => (revealed = !revealed)} title={revealed ? 'Hide' : 'Reveal'}>
|
||||
{#if revealed}
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
|
||||
<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn primary" onclick={copyKey}>
|
||||
{copied ? 'Copied!' : 'Copy'}
|
||||
</button>
|
||||
<button class="btn" onclick={generateKey}>Regenerate</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.keygen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.key-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 4px 4px 4px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.key {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
padding: 8px 0;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.key.masked {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
padding: 8px 20px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--code-bg);
|
||||
color: var(--text-h);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--accent-bg);
|
||||
border-color: var(--accent-border);
|
||||
color: var(--accent);
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user