Skip to content
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

Jump to bottom

style: setup view #889

Merged
merged 2 commits into from
Aug 1, 2023
Merged

style: setup view #889

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf8ae07
style: setup view
runnabro Jul 31, 2023
521fac7
fix: lighthouse tweaks
runnabro Jul 31, 2023
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
348 changes: 291 additions & 57 deletions packages/node/src/lib/setup-readme-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,80 @@
export function buildSetupView({ baseUrl }) {
const webhookVerifiedHtml = `
<div id='webhook-fail' class='hidden'>
<h2>❌ Webhook Not Verified</h2>
<p>Uh oh! We couldn't verify your webhook. Make sure you've set up your webhook correctly.</p>
<section class="card">
<div id="webhook-test">
<h2 class="card-heading">
<span>
<span class="card-status"></span>
Test Your Data
</span>
<span class="card-badge">Webhook</span>
</h2>
<p>Test the webhook configuration by entering an email in your database.
<form id="testWebhookForm">
<input id="email" name="email" placeholder="[email protected]" required type="email" />
<button>Submit</button>
</form>
</div>
<div class="hidden" id="webhook-fail">
<h2 class="card-heading">
<span>
<span class="card-status"></span>
Not Verified
</span>
<span class="card-badge">Webhook</span>
</h2>
<p>We couldn’t verify your webhook. Make sure you’ve set up your webhook correctly.
</div>
</div>
<div id='webhook-success' class='hidden'>
<h2>✅ Webhook Setup and Verified</h2>
<p id='userObject'></p>
<div class="hidden" id="webhook-success">
<h2 class="card-heading">
<span>
<span class="card-status card-status_done"></span>
Verified
</span>
<span class="card-badge">Webhook</span>
</h2>
<p id="userObject"></p>
<p>
Webhook running at:
<a href="${baseUrl}/readme-webhook">${baseUrl}/readme-webhook</a>
</p>
</div>
<div id='webhook-test'>
<h2>🤔 Verify Webhook Configuration</h2>
<p>What is a webhook? We should probably explain here.</p>
<form id='testWebhookForm'>
<input type="text" id="email" name="email" value=""/>
<input type="submit" value="Submit">
</form>
</div>
`;
</section>
`;

const metricsVerifiedHtml = `
<div id='metrics-fail' class='hidden'>
<h2>❌ Developer Metrics Setup and Verified</h2>
<p>Uh oh! We couldn't verify your developer metrics. Make sure you've set up your developer metrics correctly.</p>
<section class="card">
<div id="metrics-test">
<h2 class="card-heading">
<span>
<span class="card-status card-status_pending"></span>
Listening
</span>
<span class="card-badge">API Calls</span>
</h2>
<p>Make a call to your API locally to verify your installation.
</div>
<div id='metrics-success' class='hidden'>
<h2>✅ Developer Metrics Setup and Verified</h2>
<p> Everything is set up correctly! </p>
<div id="metrics-fail" class="hidden">
<h2 class="card-heading">
<span>
<span class="card-status"></span>
Not Verified
</span>
<span class="card-badge">API Calls</span>
</h2>
<p>Uh oh! We couldn't verify your API calls. Don’t be afraid to ask for help: <a href="mailto:[email protected]">[email protected]</a>
</div>
<div id='metrics-test'>
<h2>🤔 Verify Developer Metrics Configuration</h2>
<p>What are developer metrics? We should probably explain here.</p>
<p>Listening for API calls.... Make a call to your API locally to test.</p>
<div id="metrics-success" class="hidden">
<h2 class="card-heading">
<span>
<span class="card-status card-status_done"></span>
Verified
</span>
<span class="card-badge">API Calls</span>
</h2>
<p>API calls verified! 👌
</div>
</section>
`;

const webhookScriptHtml = `
Expand Down Expand Up @@ -87,38 +126,233 @@ export function buildSetupView({ baseUrl }) {

return `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ReadMe Setup</title>
<style>
.hidden {
display: none;
<html lang="en">
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>ReadMe Setup</title>
<style>
:root {
--blue: hsl(205, 99%, 48%);
--blue-hsl: 205, 99%, 48%;
--green: #12ca93;
--red: #e95f6a;
--font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
--color-bg-page: #fff;
--color-text-default: #242e34;
--color-text-minimum: #637288;
--color-decor: rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg-page: #242e34;
--color-text-default: #fff;
--color-text-minimum: #adb4c1;
--color-decor: rgba(255,255,255,0.1);
}
}
.hidden {
display: none;
}
body {
background: var(--color-bg-page);
color: var(--color-text-default);
font-family: var(--font-family);
font-size: 16px;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
margin: 0;
padding: 0;
}
main {
margin: 0 auto;
max-width: 60ch;
padding: 2em;

> * {
margin: 1em 0;
}
}
h1,
h2,
h3 {
margin: 0;
}
hr {
background: var(--color-decor);
border: 0;
height: 1px;
margin: 2em 0;
}
input,
button {
border-radius: 0.5em;
color: var(--color-text-default);
padding: 0.5em 1em;
}
input {
background: var(--color-bg-page);
border: 1px solid var(--color-decor);
}
button {
background: var(--color-text-default);
border: 0;
color: var(--color-bg-page);
}
.card,
.content {
padding: 1.5em;
}

.card {
border: 1px solid var(--color-decor);
border-radius: 0.5em;

.card-heading {
align-items: center;
display: flex;
font-size: 1em;
justify-content: space-between;
gap: 0.5em;

}

.card-badge {
border: 1px solid var(--color-decor);
border-radius: 0.5em;
color: var(--color-text-minimum);
font-size: 11px;
padding: 0.2em 0.5em;
}

.card-status {
--status-color: var(--color-decor);
background: var(--status-color);
border: 1px solid var(--color-decor);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1);
border-radius: 0.5em;
display: inline-flex;
height: 0.5em;
position: relative;
width: 0.5em;

&::after {
animation: status 2s -1s infinite linear;
border: 7.5px solid var(--status-color);
border-radius: 1em;
content: '';
display: block;
height: 100%;
inset: -7.5px;
opacity: .25;
position: absolute;
width: 100%;
}

&.card-status_pending {
--status-color: var(--red);
animation: blink 2s steps(1) infinite;
}

&.card-status_done {
--status-color: var(--green);

&::after {
display: none;
}
}
</style>
</head>
<body>
<h1>ReadMe Setup</h1>

${webhookVerifiedHtml}

${metricsVerifiedHtml}

<div id='success' class='hidden'>
<h2>Great! Everything seems to be working</h2>
<p>Visit your Developer Dashboard in ReadMe here: <a href='/'>https://dash.readme.com/sfjldjfs</a></p>
</div>
</body>
<script>
${webhookScriptHtml}
${metricsScriptHtml}

setInterval(() => {
if (window.webhooksSuccess && window.metricsSuccess) {
document.getElementById('success').classList.remove('hidden');
}
}
.tooltip {
border-bottom: 1px dotted;
display: inline-block;
position: relative;

&:hover,
&:active,
&:focus {
.tooltip-img {
display: block;
}
}, 1000);
</script>
</html>
}

.tooltip-img {
bottom: 20px;
display: none;
position: absolute;
right: 0;
}
}
.footer {
display: flex;
justify-content: center;
opacity: 0.5;
}
@keyframes blink {
0% {
background-color: var(--color-decor);
}
50% {
background-color: var(--red);
}
}
@keyframes status {
0% {
opacity: .25;
transform: scale(0);
}
12.5% {
opacity: .25;
}
33%,
100% {
opacity: 0;
transform: scale(1);
}
}
</style>
<main>

<div id="success" class="hidden">
<section class="content">
<h1>Everything seems to be working! 🙂</h1>
<p>Visit your Developer Dashboard at <a href="/">https://dash.readme.com/sfjldjfs</a>
</section>
</div>

${webhookVerifiedHtml}

${metricsVerifiedHtml}

<hr>

<section class="content">
<h1>What is this?</h1>
<p>If you’ve made it this far and still need help, feel free to email us at <a href="mailto:[email protected]">[email protected]</a>. That email goes directly to
<a class="tooltip" role="button" tabindex="0">
<span>the engineers who built this</span>
<img alt="Bill Gates on a desk with a computer" class="tooltip-img" src="//readmeio.github.io/pix/bill.jpg">
</a>. Also, check out <a href="//docs.readme.com/main/docs/sending-api-logs">the docs</a>!
</section>

<footer class="footer">
<svg width="28" height="21" viewBox="0 0 28 21" fill="none">
<title>ReadMe Logo</title>
<path
d="M25.5003 0.839819H18.7622C16.3949 0.839819 14.4179 2.49731 13.9194 4.71407C13.4209 2.49731 11.4441 0.839819 9.07665 0.839819H2.33858C1.04697 0.839819 0 1.88679 0 3.17828V15.0345C0 16.3261 1.04697 17.3731 2.33858 17.3731H6.80966C6.80966 17.3731 6.80978 17.3732 6.80989 17.3732C11.4729 17.3874 13.0018 18.4825 13.7386 20.7204C13.769 20.7895 13.8392 20.8397 13.9195 20.8397C14.0001 20.8397 14.07 20.7901 14.1001 20.7204C14.8367 18.4825 16.366 17.3874 21.0289 17.3732C21.029 17.3732 21.029 17.3731 21.0291 17.3731H25.5004C26.792 17.3731 27.839 16.3261 27.839 15.0345V3.17828C27.839 1.88679 26.792 0.839706 25.5004 0.839706L25.5003 0.839819ZM11.6811 13.5402C11.6811 13.6781 11.5694 13.7898 11.4315 13.7898H3.81578C3.67791 13.7898 3.56617 13.6781 3.56617 13.5402V12.5924C3.56617 12.4546 3.67791 12.3428 3.81578 12.3428H11.4315C11.5694 12.3428 11.6811 12.4546 11.6811 12.5924V13.5402ZM11.6811 10.5902C11.6811 10.7281 11.5694 10.8398 11.4315 10.8398H3.81578C3.67791 10.8398 3.56617 10.7281 3.56617 10.5902V9.64242C3.56617 9.50456 3.67791 9.39281 3.81578 9.39281H11.4315C11.5694 9.39281 11.6811 9.50456 11.6811 9.64242V10.5902ZM11.6811 7.64021C11.6811 7.77808 11.5694 7.88982 11.4315 7.88982H3.81578C3.67791 7.88982 3.56617 7.77808 3.56617 7.64021V6.69243C3.56617 6.55456 3.67791 6.44281 3.81578 6.44281H11.4315C11.5694 6.44281 11.6811 6.55456 11.6811 6.69243V7.64021ZM24.2726 13.5402C24.2726 13.6781 24.1608 13.7898 24.023 13.7898H16.4075C16.2696 13.7898 16.1579 13.6781 16.1579 13.5402V12.5924C16.1579 12.4546 16.2696 12.3428 16.4075 12.3428H24.023C24.1608 12.3428 24.2726 12.4546 24.2726 12.5924V13.5402ZM24.2726 10.5902C24.2726 10.7281 24.1608 10.8398 24.023 10.8398H16.4075C16.2696 10.8398 16.1579 10.7281 16.1579 10.5902V9.64242C16.1579 9.50456 16.2696 9.39281 16.4075 9.39281H24.023C24.1608 9.39281 24.2726 9.50456 24.2726 9.64242V10.5902ZM24.2726 7.64021C24.2726 7.77808 24.1608 7.88982 24.023 7.88982H16.4075C16.2696 7.88982 16.1579 7.77808 16.1579 7.64021V6.69243C16.1579 6.55456 16.2696 6.44281 16.4075 6.44281H24.023C24.1608 6.44281 24.2726 6.55456 24.2726 6.69243V7.64021Z"
fill="var(--color-text-minimum)" />
</svg>
</footer>

<script>
${webhookScriptHtml}
${metricsScriptHtml}

setInterval(() => {
if (window.webhooksSuccess && window.metricsSuccess) {
document.getElementById('success').classList.remove('hidden');
}
}, 1000);
</script>
`;
}
Loading