mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
296 lines
9.3 KiB
HTML
296 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Stack Auth Dev Launchpad</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #e0f0e0;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.apps-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.apps-container > a {
|
|
border: 1px solid #8888;
|
|
background-color: #fff;
|
|
padding: 0px 4px 8px 4px;
|
|
width: 120px;
|
|
|
|
text-decoration: none;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.apps-container > a.important {
|
|
background-color: #fee;
|
|
}
|
|
|
|
.apps-container > a.unimportant {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.apps-container > a.unimportant:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.apps-container > a:hover {
|
|
border-color: #888;
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
|
|
.apps-container > a > div > img {
|
|
height: 68px;
|
|
}
|
|
|
|
.apps-container > a > .description {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.apps-container > a > .port {
|
|
padding-right: 0.5px;
|
|
padding-top: 1px;
|
|
align-self: flex-end;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.apps-container > a > .hover-description {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: -1px;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
white-space: pre;
|
|
background-color: #ffc;
|
|
border: 1px solid #888;
|
|
padding: 2px;
|
|
color: #0008;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.apps-container > a:hover > .hover-description {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Stack Auth Dev Launchpad</h1>
|
|
<div class="apps-container"></div>
|
|
<hr />
|
|
<div class="apps-container"></div>
|
|
<hr />
|
|
<div class="apps-container"></div>
|
|
|
|
<h2 style="margin-top: 64px;">Background services</h2>
|
|
<ul>
|
|
<li>
|
|
5432: PostgreSQL
|
|
</li>
|
|
<li>
|
|
2500: Inbucket SMTP
|
|
</li>
|
|
<li>
|
|
1100: Inbucket POP3
|
|
</li>
|
|
<li>
|
|
4318: OTel collector
|
|
</li>
|
|
</ul>
|
|
<noscript>
|
|
This page requires JavaScript.
|
|
</noscript>
|
|
<script>
|
|
const apps = [
|
|
{
|
|
name: "Dashboard",
|
|
port: 8101,
|
|
description: [
|
|
"Src: ./apps/dashboard",
|
|
"Prod: https://app.stack-auth.com",
|
|
],
|
|
img: "https://www.svgrepo.com/show/507260/dashboard.svg",
|
|
importance: 2,
|
|
},
|
|
{
|
|
name: "Backend",
|
|
port: 8102,
|
|
description: [
|
|
"Src: ./apps/backend",
|
|
"Prod: https://api.stack-auth.com",
|
|
],
|
|
img: "https://www.svgrepo.com/show/340122/datastore.svg",
|
|
importance: 2,
|
|
},
|
|
{
|
|
name: "Demo app",
|
|
port: 8103,
|
|
description: [
|
|
"Src: ./examples/demo",
|
|
"Prod: https://demo.stack-auth.com",
|
|
],
|
|
importance: 2,
|
|
},
|
|
{
|
|
name: "Docs",
|
|
port: 8104,
|
|
description: [
|
|
"Src: ./docs",
|
|
"Prod: https://docs.stack-auth.com",
|
|
],
|
|
img: "https://www.svgrepo.com/show/448400/docs.svg",
|
|
importance: 2,
|
|
},
|
|
{
|
|
name: "Inbucket",
|
|
port: 8105,
|
|
img: "https://www.svgrepo.com/show/533176/at-sign.svg",
|
|
importance: 1,
|
|
description: [
|
|
"Email mock",
|
|
],
|
|
},
|
|
{
|
|
name: "Prisma Studio",
|
|
port: 8106,
|
|
importance: 1,
|
|
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS95TdAw63YPAPcUpvRl4imIf-VJ1sGHnEvbw&s",
|
|
description: [
|
|
"Database interface",
|
|
],
|
|
},
|
|
{
|
|
name: "Jaeger UI (OTel)",
|
|
port: 8107,
|
|
description: [
|
|
"Performance & tracing",
|
|
],
|
|
importance: 1,
|
|
img: "https://www.jaegertracing.io/img/jaeger-icon-reverse-color.svg",
|
|
},
|
|
{
|
|
name: "examples/docs-examples",
|
|
port: 8108,
|
|
description: [
|
|
"Src: ./examples/docs-examples",
|
|
],
|
|
},
|
|
{
|
|
name: "examples/partial-prerendering",
|
|
port: 8109,
|
|
description: [
|
|
"Src: ./examples/partial-prerendering",
|
|
],
|
|
},
|
|
{
|
|
name: "examples/cjs-test",
|
|
port: 8110,
|
|
description: [
|
|
"Src: ./examples/cjs-test",
|
|
],
|
|
},
|
|
{
|
|
name: "examples/e-commerce",
|
|
port: 8111,
|
|
description: [
|
|
"Src: ./examples/e-commerce",
|
|
],
|
|
},
|
|
{
|
|
name: "examples/middleware",
|
|
port: 8112,
|
|
description: [
|
|
"Src: ./examples/middleware",
|
|
],
|
|
},
|
|
{
|
|
name: "Svix server",
|
|
port: 8113,
|
|
importance: 1,
|
|
img: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iODQuOSA4NC45IDM0NyAzNDciPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjMmM3MGZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEtMiI+CiAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjI1OC40IiBjeT0iMjU4LjQiIHI9IjE3My41Ii8+CiAgICA8Zz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzYwLjgsMjMyLjljLTI4LjgtMS40LTU1LjctMTcuMi02OC4yLTQ1LTUuNS0xMi4zLTE3LjgtMjAuNC0zMS4zLTIwLjgtMjguNi0uOC00Ni43LDM1LjEtMjguNyw1Ny42LDYuMiw3LjgsMTUuNCwxMi4xLDI3LjUsMTIuOWgwYzIzLjQsMS43LDQzLjUsMTEuOCw1Ni44LDI4LjUsMjQuNCwzMC43LDIwLjksNzcuMS03LjQsMTA0LTM0LjEsMzIuNS05MS4xLDI1LjgtMTE3LjEtMTMuMi0yLjMtMy41LTQuMy03LjEtNi4xLTEwLjktNS41LTEyLjMtMTcuOC0yMC40LTMxLjMtMjAuOC0xMy45LS40LTI3LDQuOS0zNS4zLDEzLjgsMjcuMyw0Ni45LDc3LjcsNzguNywxMzUuOSw3OS43LDg4LjYsMS41LDE2MS43LTY5LDE2My4yLTE1Ny42LjMtMTQuOS0xLjYtMjkuNC01LjEtNDMuMi43LDIuOS0yMi4zLDEwLjktMjQuOCwxMS42LTkuMiwyLjctMTguNywzLjctMjgsMy4zaDBaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTE1NiwyODMuNmMyOS40LjcsNTYuMSwxOC41LDY4LjIsNDUuMyw1LjUsMTIuMywxNy44LDIwLjQsMzEuMywyMC44LDkuNC4zLDE4LjMtMy4yLDI1LjItOS43LDEyLjgtMTIuMSwxNC41LTM0LjEsMy41LTQ4LTYuMi03LjgtMTUuNC0xMi4xLTI3LjUtMTIuOWgwYy0yMy40LTEuNy00My41LTExLjgtNTYuOC0yOC41LTI5LjYtMzcuMi0xNy05Mi41LDIzLjctMTE1LjQsMTEuOC02LjYsMjUuMi0xMC4yLDM4LjctOS44LDI5LjQuNyw1Ni4xLDE4LjUsNjguMiw0NS4zLDUuNSwxMi4zLDE3LjgsMjAuNCwzMS4zLDIwLjgsMTQsLjQsMjctNC45LDM1LjMtMTMuOC0yNy4zLTQ2LjktNzcuNy03OC43LTEzNS45LTc5LjgtODguNi0xLjUtMTYxLjYsNjkuMS0xNjMuMiwxNTcuNi0uMywxNC45LDEuNiwyOS40LDUuMiw0My4yLDE0LjktMTAuMSwzMy4zLTE1LjYsNTIuOS0xNS4yaDBaIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=",
|
|
description: [
|
|
"Webhooks",
|
|
],
|
|
},
|
|
{
|
|
name: "OAuth mock server",
|
|
port: 8114,
|
|
description: [
|
|
"Src: ./apps/mock-oauth-server",
|
|
],
|
|
},
|
|
{
|
|
name: "examples/supabase",
|
|
port: 8115,
|
|
description: [
|
|
"Src: ./examples/supabase",
|
|
],
|
|
},
|
|
{
|
|
name: "PgHero",
|
|
port: 8116,
|
|
description: [
|
|
"For database performance analysis",
|
|
],
|
|
importance: 1,
|
|
img: "https://pghero.dokkuapp.com/assets/pghero-88a0d052.png",
|
|
},
|
|
{
|
|
name: "PgAdmin",
|
|
port: 8117,
|
|
description: [
|
|
"For database administration",
|
|
],
|
|
importance: 1,
|
|
img: "https://www.w3schools.com/postgresql/screenshot_postgresql_pgadmin4_6.png",
|
|
},
|
|
{
|
|
name: "Supabase Studio",
|
|
port: 8118,
|
|
path: "/project/default/editor",
|
|
description: [
|
|
"For database administration",
|
|
],
|
|
importance: 1,
|
|
img: "https://cdn.prod.website-files.com/655b60964be1a1b36c746790/655b60964be1a1b36c746d41_646dfce3b9c4849f6e401bff_supabase-logo-icon_1.png",
|
|
},
|
|
];
|
|
|
|
const appsContainers = document.querySelectorAll(".apps-container");
|
|
for (let i = 0; i < appsContainers.length; i++) {
|
|
const appContainer = appsContainers[i];
|
|
const importance = appsContainers.length - i - 1;
|
|
for (const app of apps) {
|
|
if ((app.importance ?? 0) === importance) {
|
|
// TODO escape HTML
|
|
appContainer.innerHTML += `
|
|
<a href="http://localhost:${app.port}${app.path ?? ""}" target="_blank" rel="noopener noreferrer" class="${app.importance === 2 ? "important" : app.importance === 1 ? "" : "unimportant"}">
|
|
<div class="port">:${app.port}</div>
|
|
<div>
|
|
<img src=${app.img || `//localhost:${app.port}/favicon.ico`} />
|
|
</div>
|
|
<span class="description">${app.name}</span>
|
|
${app.description ? `<div class="hover-description">${app.description.join("\n")}</div>` : ""}
|
|
</a>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|