@@ -44,3 +46,7 @@ Upstash Redis Search is our first extension beyond the official Redis spec. Usin
Complete, real-world examples you can adapt to your own use cases
+
+## Demos
+
+
+ {items.map((entry) => (
+
+ {entry.lang ? (
+ 
+ ) : null}
+
+ );
+};
diff --git a/snippets/landing.jsx b/snippets/landing.jsx
new file mode 100644
index 00000000..9fed4a5a
--- /dev/null
+++ b/snippets/landing.jsx
@@ -0,0 +1,126 @@
+// Full-custom landing components (used by introduction.mdx with `mode: frame`).
+// Styling lives in style.css (.u-* classes). Each component keeps its own data
+// locally (Mintlify compiles exports in isolation, no cross-references).
+
+export const Hero = () => (
+
+ ) : null}
+
+
+
+ ))}
+ {entry.title}
+ {entry.description}
+
+
+);
+
+export const SectionHead = ({ eyebrow, title, sub }) => (
+ Build with Upstash
++ Serverless data, messaging, and AI infrastructure for developers. Scale to + zero, pay per request. +
+
+ {eyebrow ?
+);
+
+export const ProductGrid = () => {
+ const products = [
+ { name: "Redis", desc: "Serverless Redis with per-request or fixed pricing.", href: "/redis/overall/getstarted", icon: "redis" },
+ { name: "QStash", desc: "Message queue and scheduler over HTTP.", href: "/qstash/overall/getstarted", icon: "qstash" },
+ { name: "Workflow", desc: "Durable serverless functions.", href: "/workflow/getstarted", icon: "workflow" },
+ { name: "Box", desc: "Secure sandboxes for AI agents and code.", href: "/box/overall/quickstart", icon: "box" },
+ { name: "Vector", desc: "Vector database for AI and LLM apps.", href: "/vector/overall/getstarted", icon: "vector" },
+ { name: "Search", desc: "Full-text and semantic search.", href: "/search/overall/getstarted", icon: "search" },
+ ];
+ return (
+ {eyebrow}
: null}
+ {title}
+ {sub ?{sub}
: null} +
+ {products.map((p) => (
+
+ 
+
+ );
+};
+
+export const AgentResources = () => {
+ // Tabler icons (MIT) from https://tabler.io/icons
+ const items = [
+ { name: "MCP Server", desc: "Manage Upstash from AI agents over MCP.", href: "/agent-resources/mcp", paths: ["M7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1 -5 -5l1.5 -1.5", "M17 12l-5 -5l1.5 -1.5a3.536 3.536 0 1 1 5 5l-1.5 1.5", "M3 21l2.5 -2.5", "M18.5 5.5l2.5 -2.5", "M10 11l-2 2", "M13 14l-2 2"] },
+ { name: "Skills", desc: "Ready-made skills for coding agents.", href: "/agent-resources/skills", paths: ["M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6"] },
+ { name: "CLI", desc: "Manage Upstash from your terminal.", href: "/agent-resources/cli", paths: ["M8 9l3 3l-3 3", "M13 15l3 0", "M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -12"] },
+ { name: "Context7", desc: "Up-to-date code docs for LLMs and agents.", href: "https://context7.com", icon: "/img/icons/context7.svg" },
+ ];
+ return (
+
+
+
+
+ ))}
+ {p.name}
+ {p.desc}
+
+ {items.map((it) => (
+
+ {it.icon ? (
+ 
+ ) : (
+
+ );
+};
+
+export const Concepts = () => {
+ // Tabler icons (MIT) from https://tabler.io/icons
+ const items = [
+ { name: "Serverless", desc: "No infrastructure to provision. Just create and use.", href: "/common/concepts/serverless", paths: ["M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878"] },
+ { name: "Scale to Zero", desc: "Pay only for what you use, nothing for idle resources.", href: "/common/concepts/scale-to-zero", paths: ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"] },
+ { name: "Global Replication", desc: "Low latency worldwide with multi-region replication.", href: "/common/concepts/global-replication", paths: ["M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "M3.6 9h16.8", "M3.6 15h16.8", "M11.5 3a17 17 0 0 0 0 18", "M12.5 3a17 17 0 0 1 0 18"] },
+ { name: "Access Anywhere", desc: "REST APIs for edge and serverless runtimes.", href: "/common/concepts/access-anywhere", paths: ["M4 13h5", "M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3", "M20 8v8", "M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5"] },
+ ];
+ return (
+
+
+
+ )}
+
+
+
+ ))}
+ {it.name}
+ {it.desc}
+
+ {items.map((it) => (
+
+
+ );
+};
+
+export const Community = () => (
+
+
+
+
+
+
+ ))}
+ {it.name}
+ {it.desc}
+
+
+
+);
diff --git a/snippets/migrate.jsx b/snippets/migrate.jsx
new file mode 100644
index 00000000..85033f95
--- /dev/null
+++ b/snippets/migrate.jsx
@@ -0,0 +1,33 @@
+// "Migrate to Upstash" stub. Guides are added later; for now this renders the
+// grid of source platforms in a "coming soon" state. Cards are intentionally
+// link-less until the destination pages exist.
+//
+// Custom-styled cards (see .u-card in style.css). Same Mintlify constraint as
+// catalog.jsx: the data lives inside the component.
+
+export const Migrate = ({ product, cols = 3 }) => {
+ const sources = [
+ { name: "Redis Cloud", product: "redis" },
+ { name: "AWS ElastiCache", product: "redis" },
+ { name: "Amazon DynamoDB", product: "redis" },
+ { name: "GCP Memorystore", product: "redis" },
+ { name: "Azure Cache for Redis", product: "redis" },
+ { name: "Self-hosted Redis", product: "redis" },
+ ];
+
+ const items = sources.filter((s) => !product || s.product === product);
+
+ return (
+
+
+
+
+ X / Twitter
+ Latest news and product updates.
+
+
+
+ Discord
+
+ Ask the team and other developers your questions.
+
+
+ {items.map((s) => (
+
+ );
+};
diff --git a/style.css b/style.css
index 8f3f7fd8..42ea0507 100644
--- a/style.css
+++ b/style.css
@@ -13,3 +13,315 @@
margin: 1rem auto;
}
}
+
+/* ============================================================
+ Custom landing page (mode: custom)
+ Upstash green: #10B981 / #34D399. Class-based dark mode (.dark).
+ ============================================================ */
+
+.u-wrap {
+ max-width: 78rem;
+ margin: 0 auto;
+ padding: 0 1.5rem 6rem;
+}
+
+/* In `mode: frame` Mintlify keeps the left sidebar but STILL reserves a 28rem
+ right column for the table of contents, which frame hides, leaving it empty and
+ squishing the content. On the Get Started landing we collapse that empty column
+ and let content use the full width. Scoped with Mintlify's documented
+ data-current-path hook (only the /introduction page). NOTE: still targets
+ Mintlify-internal ids (#content-area / #content-side-layout); revisit if a
+ Mintlify upgrade renames them. Collapse to zero width, not display:none (which
+ broke the sticky sidebar, making it render scrolled on load). */
+html[data-current-path="/introduction"] #content-side-layout {
+ width: 0 !important;
+ min-width: 0 !important;
+ max-width: 0 !important;
+ overflow: hidden !important;
+}
+html[data-current-path="/introduction"] #content-area {
+ width: 100% !important;
+}
+
+
+/* ---- Hero ---- */
+.u-hero {
+ position: relative;
+ text-align: center;
+ padding: 3.5rem 1rem 3rem;
+ overflow: hidden;
+}
+.u-hero::before {
+ content: "";
+ position: absolute;
+ top: -12rem;
+ left: 50%;
+ width: 64rem;
+ height: 24rem;
+ transform: translateX(-50%);
+ background: radial-gradient(
+ closest-side,
+ rgba(52, 211, 153, 0.22),
+ rgba(52, 211, 153, 0)
+ );
+ pointer-events: none;
+ z-index: 0;
+}
+.u-hero > * {
+ position: relative;
+ z-index: 1;
+}
+.u-hero h1 {
+ font-size: clamp(2.25rem, 5vw, 3.5rem);
+ line-height: 1.05;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ margin: 0;
+}
+.u-hero p {
+ margin: 1.1rem auto 0;
+ max-width: 40rem;
+ font-size: 1.125rem;
+ color: #52606d;
+}
+.dark .u-hero p {
+ color: #b3bcc7;
+}
+
+/* Strong heading/title color. Mintlify's base content text is a muted gray
+ (text-gray-500 / dark:text-gray-400) which washes out our large headings.
+ Override so headings read crisp in both themes. */
+.u-hero h1,
+.u-section h2,
+.u-card__title {
+ color: #0d1526;
+}
+.dark .u-hero h1,
+.dark .u-section h2,
+.dark .u-card__title {
+ color: #f4f5f6;
+}
+
+.u-cta {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 2rem;
+}
+.u-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.65rem 1.25rem;
+ border-radius: 0.65rem;
+ font-weight: 600;
+ font-size: 0.95rem;
+ text-decoration: none;
+ transition:
+ transform 0.15s ease,
+ background 0.15s ease,
+ border-color 0.15s ease;
+}
+.u-btn--primary {
+ background: #10b981;
+ color: #05231a;
+}
+.u-btn--primary:hover {
+ background: #34d399;
+ transform: translateY(-1px);
+}
+.u-btn--ghost {
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ color: inherit;
+}
+.dark .u-btn--ghost {
+ border-color: rgba(255, 255, 255, 0.16);
+}
+.u-btn--ghost:hover {
+ border-color: #10b981;
+ transform: translateY(-1px);
+}
+
+/* ---- Section headings ---- */
+.u-section {
+ margin-top: 4rem;
+}
+/* tighter gap between the hero and the first section */
+.u-wrap > .u-section:first-of-type {
+ margin-top: 2rem;
+}
+.u-eyebrow {
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: #059669;
+}
+.dark .u-eyebrow {
+ color: #34d399;
+}
+.u-section h2 {
+ font-size: 1.6rem;
+ font-weight: 700;
+ letter-spacing: -0.01em;
+ margin: 0.35rem 0 0;
+}
+.u-section p.u-sub {
+ margin: 0.5rem 0 0;
+ color: #52606d;
+ font-size: 1rem;
+}
+.dark .u-section p.u-sub {
+ color: #b3bcc7;
+}
+
+/* ---- Grids ---- */
+.u-grid {
+ display: grid;
+ gap: 1rem;
+ margin-top: 1.5rem;
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+/* auto-fill so columns respond to the actual available width (works whether the
+ page is full-bleed `custom` or narrowed by the `frame` sidebar). */
+.u-grid--2 {
+ grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+.u-grid--3 {
+ grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+}
+/* fixed-column variants (don't reflow to more columns on very wide layouts) */
+.u-grid--fixed2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.u-grid--fixed3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.u-grid--fixed4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+@media (max-width: 900px) {
+ .u-grid--fixed3,
+ .u-grid--fixed4 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+@media (max-width: 560px) {
+ .u-grid--fixed2,
+ .u-grid--fixed3,
+ .u-grid--fixed4 {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* ---- Cards ---- */
+.u-card {
+ display: flex;
+ gap: 0.9rem;
+ align-items: flex-start;
+ padding: 1.1rem;
+ border-radius: 0.9rem;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ background: #fff;
+ text-decoration: none;
+ color: inherit;
+ transition:
+ border-color 0.15s ease,
+ transform 0.15s ease,
+ box-shadow 0.15s ease;
+}
+.dark .u-card {
+ border-color: rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, 0.03);
+}
+.u-card:hover {
+ border-color: #10b981;
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px -12px rgba(16, 185, 129, 0.45);
+}
+.u-card--static:hover {
+ transform: none;
+ box-shadow: none;
+ border-color: rgba(0, 0, 0, 0.08);
+}
+.dark .u-card--static:hover {
+ border-color: rgba(255, 255, 255, 0.1);
+}
+.u-card__icon {
+ flex: none;
+ width: 2.25rem;
+ height: 2.25rem;
+ border-radius: 0.55rem;
+ /* override Mintlify prose
+
+ ))}
+ ⇄
+
+
+ {s.name}
+ Guide coming soon
+ 
\ No newline at end of file
+
+
+## SDKs
+
+