Skip to content

docs(analytics): a banner for the repository preview and the launch post #25

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
danielmlr merged 1 commit into from
Sep 29, 2026
Merged

docs(analytics): a banner for the repository preview and the launch post #25

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
Binary file added packages/analytics/images/banner.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
165 changes: 165 additions & 0 deletions packages/analytics/images/banner.source.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!doctype html>
<!--
Source of banner.png (1280x640, rendered at 2x): the repository's social
preview and the launch image. Eisbachcode's design (tokens, waves and mark
from eisbachcode.de) with EmDash's gradient on one wave and its mark in the
label. The card shows analytics-page.png from this folder.

Render from this folder:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless --disable-gpu --hide-scrollbars \
--force-device-scale-factor=2 --window-size=1280,640 \
--virtual-time-budget=8000 --allow-file-access-from-files \
--screenshot="$PWD/banner.png" "file://$PWD/banner.source.html"

--virtual-time-budget waits for the Satoshi webfont from Fontshare; without
it the text renders in a system font. The font files are not committed:
Satoshi's licence does not allow redistributing them.
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://api.fontshare.com" />
<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin />
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500&display=swap" rel="stylesheet" />
<style>
:root {
--base-50: oklch(3.5% 0.006 264);
--base-200: oklch(15% 0.004 150);
--base-300: oklch(26% 0.005 100);
--base-500: oklch(68% 0.008 95);
--base-600: oklch(78% 0.010 95);
--base-700: oklch(87% 0.012 100);
--base-900: oklch(99% 0.018 102);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1280px; height: 640px; overflow: hidden; }
body {
background: var(--base-50);
color: var(--base-900);
font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
position: relative;
}

.waves { position: absolute; inset: 0; pointer-events: none; }
.waves svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.waves .ink { color: var(--base-900); opacity: 0.22; }
.waves {
-webkit-mask-image: radial-gradient(ellipse 34% 30% at 24% 58%, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.7) 60%, rgb(0 0 0 / 1) 100%);
mask-image: radial-gradient(ellipse 34% 30% at 24% 58%, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.7) 60%, rgb(0 0 0 / 1) 100%);
}

.frame {
position: relative; z-index: 2;
height: 100%;
padding: 60px 72px 52px;
display: flex; flex-direction: column; justify-content: space-between;
}

.label { display: flex; align-items: center; gap: 12px; }
.label svg { width: 22px; height: 22px; display: block; }
.label span {
font-size: 17px; font-weight: 400; color: var(--base-500);
text-transform: uppercase; letter-spacing: 0.18em;
}

.hero { max-width: 560px; }
h1 {
font-size: 128px; font-weight: 500;
letter-spacing: -0.045em; line-height: 0.9;
color: var(--base-900);
}
.sub {
margin-top: 26px;
font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
color: var(--base-600);
}

.card {
position: absolute; z-index: 1;
right: -24px; top: 118px;
width: 640px; height: 356px;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--base-300);
background: #fafafa;
box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}
.card img { width: 100%; display: block; }

.foot { border-top: 1px solid var(--base-200); padding-top: 24px;
display: flex; align-items: center; justify-content: space-between; gap: 32px;
position: relative; z-index: 3; background: var(--base-50); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand svg { width: 32px; height: 32px; display: block; }
.wordmark { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.tagline { font-size: 19px; color: var(--base-500); letter-spacing: 0.01em; }
</style>
</head>
<body>
<div class="waves">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" preserveAspectRatio="xMinYMid slice" aria-hidden="true">
<defs>
<linearGradient id="emdash-wave" x1="0" y1="0" x2="1440" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#281A81" />
<stop offset="0.22" stop-color="#911475" />
<stop offset="0.42" stop-color="#CE2F55" />
<stop offset="0.6" stop-color="#FF6633" />
<stop offset="0.8" stop-color="#FBAD41" />
<stop offset="1" stop-color="#FFE9CB" />
</linearGradient>
</defs>
<g class="ink">
<path fill="none" stroke="currentColor" stroke-width="1.6" vector-effect="non-scaling-stroke"
d="M -40,360 C 140,320 260,420 400,400 C 540,380 660,300 800,330 C 920,356 1020,420 1160,410 C 1280,402 1380,360 1500,380" />
<path fill="none" stroke="currentColor" stroke-width="1.6" vector-effect="non-scaling-stroke"
d="M -40,140 C 120,90 260,200 420,170 C 560,144 680,60 820,90 C 940,116 1040,210 1180,200 C 1300,192 1380,140 1500,160" />
<path fill="none" stroke="currentColor" stroke-width="1.6" vector-effect="non-scaling-stroke"
d="M -40,500 C 120,460 240,560 380,540 C 520,520 640,450 780,470 C 900,490 1000,560 1140,550 C 1260,542 1360,510 1500,520" />
<path fill="none" stroke="currentColor" stroke-width="1.6" vector-effect="non-scaling-stroke"
d="M -40,640 C 130,600 250,700 390,680 C 530,660 650,590 790,610 C 910,630 1010,700 1150,690 C 1270,682 1370,650 1500,660" />
</g>
<path fill="none" stroke="url(#emdash-wave)" stroke-width="2.6" vector-effect="non-scaling-stroke" opacity="0.95"
d="M -40,240 C 100,210 220,300 380,270 C 520,244 640,180 780,210 C 900,236 1000,310 1140,290 C 1260,272 1360,230 1500,250" />
</svg>
</div>

<div class="card"><img src="analytics-page.png" alt="" /></div>

<div class="frame">
<div class="label">
<svg viewBox="0 0 75 75" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="fav-border" x1="-42.9996" y1="124" x2="92.4233" y2="-41.7456" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F006B"/><stop offset="0.0833" stop-color="#281A81"/><stop offset="0.1667" stop-color="#5D0C83"/><stop offset="0.25" stop-color="#911475"/><stop offset="0.3333" stop-color="#CE2F55"/><stop offset="0.4167" stop-color="#FF6633"/><stop offset="0.5" stop-color="#F6821F"/><stop offset="0.5833" stop-color="#FBAD41"/><stop offset="0.6667" stop-color="#FFCD89"/><stop offset="0.75" stop-color="#FFE9CB"/><stop offset="0.8333" stop-color="#FFF7EC"/><stop offset="0.9167" stop-color="#FFF8EE"/><stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="fav-dash" x1="91.4992" y1="27.4982" x2="28.1217" y2="54.1775" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/><stop offset="0.1293" stop-color="#FFF8EE"/><stop offset="0.6171" stop-color="#FBAD41"/><stop offset="0.848" stop-color="#F6821F"/><stop offset="1" stop-color="#FF6633"/>
</linearGradient>
</defs>
<rect x="3" y="3" width="69" height="69" rx="10.518" stroke="url(#fav-border)" stroke-width="6" fill="none"/>
<rect x="18" y="34" width="39.3661" height="6.56101" fill="url(#fav-dash)"/>
</svg>
<span>Plugin for EmDash</span>
</div>

<div class="hero">
<h1>Analytics</h1>
<p class="sub">Cloudflare Web Analytics,<br />right inside EmDash.</p>
</div>

<div class="foot">
<div class="brand">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="32" cy="32" r="24" stroke="currentColor" stroke-width="3.5" fill="none" />
<path d="M 13 34 C 19 22, 27 22, 32 30 C 37 38, 45 38, 51 28"
stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" />
</svg>
<span class="wordmark">Eisbachcode</span>
</div>
<div class="tagline">Free and MIT licensed · plugins.emdashcms.com</div>
</div>
</div>
</body>
</html>
Loading