Light theme

.gitignore

@@ -3,6 +3,7 @@ node_modules
 .idea
 public/ui
 public/sw*
+public/*.xml
 public/workbox*
 .DS_Store
 *.local

src/app/examples/[slug]/page.tsx → archive/examples/[slug]/page.tsx

@@ -1,14 +1,11 @@
-import Button from "@/components/button";
-import Container from "@/components/container";
-import { ICON_NAMES } from "@/components/icon";
-import IconQStash from "@/components/icon-qstash";
-import IconRedis from "@/components/icon-redis";
-import { authors } from "@/utils/authors";
-import markdownToHtml from "@/utils/markdownToHtml";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { HTMLProps } from "react";
-import Balancer from "react-wrap-balancer";
+import Container from "../../../src/components/container";
+import IconQStash from "../../../src/components/icon-qstash";
+import IconRedis from "../../../src/components/icon-redis";
+import { authors } from "../../../src/utils/authors";
+import markdownToHtml from "../../../src/utils/markdownToHtml";
 import { getData, type Example } from "../get-data";
 
 type Props = {
@@ -155,55 +152,52 @@ export default async function BlogPage({ params }: Props) {
                 )}
 
                 <ExampleMetaRow title="Publisher">
-                  <Button href={`https://github.com/${author.name}`}>
+                  <a href={`https://github.com/${author.name}`}>
                     <>{author.name}</>
-                  </Button>
+                  </a>
                 </ExampleMetaRow>
               </div>
 
               <div className="mt-6 grid gap-4">
                 {example.blogUrl && (
-                  <Button
-                    type="button"
+                  <a
                     href={example.blogUrl}
-                    iconProps={{
-                      icon: ICON_NAMES.FileText,
-                    }}
+                    // iconProps={{
+                    //   icon: ICON_NAMES.FileText,
+                    // }}
                   >
                     Read Post
-                  </Button>
+                  </a>
                 )}
 
-                <Button
-                  type="button"
+                <a
                   target="_blank"
                   href={example.githubUrl}
-                  icon={
-                    <svg
-                      height={18}
-                      aria-hidden="true"
-                      viewBox="0 0 16 16"
-                      version="1.1"
-                      fill="currentColor"
-                      className="opacity-60"
-                    >
-                      <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
-                    </svg>
-                  }
+                  // icon={
+                  //   <svg
+                  //     height={18}
+                  //     aria-hidden="true"
+                  //     viewBox="0 0 16 16"
+                  //     version="1.1"
+                  //     fill="currentColor"
+                  //     className="opacity-60"
+                  //   >
+                  //     <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
+                  //   </svg>
+                  // }
                 >
                   View Repo
-                </Button>
+                </a>
 
                 {example.previewUrl && (
-                  <Button
-                    type="button"
+                  <a
                     href={example.previewUrl}
                     className="bg-white text-zinc-950"
 
                     // className="bg-emerald-400 text-zinc-950"
                   >
                     Preview
-                  </Button>
+                  </a>
                 )}
               </div>
             </div>
@@ -212,8 +206,8 @@ export default async function BlogPage({ params }: Props) {
           {/* post */}
           <div className="order-1 md:col-span-2">
             <article>
-              <h1 className="font-display text-4xl font-bold !leading-title md:text-5xl">
-                <Balancer>{example.title}</Balancer>
+              <h1 className="text-balance font-display text-4xl font-bold !leading-title md:text-5xl">
+                {example.title}
               </h1>
 
               <div

src/app/examples/layout.tsx → archive/examples/layout.tsx

@@ -1,7 +1,7 @@
-import "../post.css";
-import { SITE_URL } from "@/utils/const";
+import "../../src/styles/post.css";
 import { Metadata } from "next";
 import { ReactNode } from "react";
+import { SITE_URL } from "../../src/utils/const";
 
 const title = "Upstash Examples";
 const description =

src/app/examples/page.tsx → archive/examples/page.tsx

@@ -1,9 +1,9 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import { Client } from "@/components/example/client";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
 import React from "react";
+import Bg from "../../src/components/bg";
+import Container from "../../src/components/container";
+import { Client } from "../../src/components/example/client";
+import PageHeaderDesc from "../../src/components/page-header-desc";
+import PageHeaderTitle from "../../src/components/page-header-title";
 import { getData, type Example } from "./get-data";
 
 // TODO: set canonical url

src/app/glossary/[slug]/page.tsx → archive/glossary/[slug]/page.tsx

@@ -1,10 +1,13 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import { Mdx } from "@/components/post/mdx";
-import { allGlossaries, Glossary } from "@content";
 import { IconArrowLeft } from "@tabler/icons-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import {
+  allGlossaries,
+  Glossary,
+} from "../../../.content-collections/generated";
+import Bg from "../../../src/components/bg";
+import Container from "../../../src/components/container";
+import { Mdx } from "../../../src/components/post/mdx";
 
 type Props = {
   params: {
@@ -50,13 +53,11 @@ export default async function BlogPage({ params }: Props) {
       <article className="py-16">
         <Container className="max-w-screen-md">
           <Link
-            className="group/back-link inline-flex h-10 items-center justify-center gap-2 rounded-full bg-white/5 px-4 hover:w-auto hover:bg-white/10 hover:text-emerald-500"
+            className="group inline-flex h-10 items-center justify-center gap-2 rounded-full bg-white/5 px-4 hover:w-auto hover:bg-white/10 hover:text-emerald-500"
             href="/glossary"
           >
-            <IconArrowLeft className="shrink-0 opacity-50 group-hover/back-link:opacity-100" />
-            <span className="hidden group-hover/back-link:block">
-              Back to Glossary
-            </span>
+            <IconArrowLeft className="shrink-0 opacity-50 group-hover:opacity-100" />
+            <span className="hidden group-hover:block">Back to Glossary</span>
           </Link>
 
           <header className="mt-10">
@@ -85,7 +86,7 @@ export default async function BlogPage({ params }: Props) {
                 return (
                   <li key={glossary.slug}>
                     <Link
-                      href={`/glossary/${glossary.slug}`}
+                      href={`/archive/glossary/${glossary.slug}`}
                       className="text-emerald-500 hover:underline"
                     >
                       {glossary.title}

src/app/glossary/layout.tsx → archive/glossary/layout.tsx

@@ -1,7 +1,7 @@
-import "../post.css";
-import { SITE_URL } from "@/utils/const";
+import "../../src/styles/post.css";
 import { Metadata } from "next";
 import { ReactNode } from "react";
+import { SITE_URL } from "../../src/utils/const";
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),

src/app/glossary/page.tsx → archive/glossary/page.tsx

@@ -1,12 +1,12 @@
-import Bg from "@/components/bg";
-import Container from "@/components/container";
-import PageHeaderDesc from "@/components/page-header-desc";
-import PageHeaderTitle from "@/components/page-header-title";
-import { LETTERS } from "@/utils/const";
-import cx from "@/utils/cx";
-import type { Glossary } from "@content";
-import { allGlossaries } from "@content";
 import Link from "next/link";
+import type { Glossary } from "../../.content-collections/generated";
+import { allGlossaries } from "../../.content-collections/generated";
+import Bg from "../../src/components/bg";
+import Container from "../../src/components/container";
+import PageHeaderDesc from "../../src/components/page-header-desc";
+import PageHeaderTitle from "../../src/components/page-header-title";
+import { LETTERS } from "../../src/utils/const";
+import cx from "../../src/utils/cx";
 
 type GlossaryGrouped = {
   [key: string]: Glossary[];
@@ -95,7 +95,7 @@ export default function HomePage() {
                         <h3>
                           <Link
                             passHref
-                            href={`/glossary/${glossary.slug}`}
+                            href={`/archive/glossary/${glossary.slug}`}
                             className="font-display text-lg font-semibold text-emerald-400"
                           >
                             {glossary.title}

content-collections.ts

@@ -16,6 +16,7 @@ export const customers = defineCollection({
     company_name: z.string(),
     company_url: z.string(),
     company_logo: z.string(),
+    company_logo_dark: z.string(),
     user_name: z.string(),
     user_title: z.string(),
     user_photo: z.string(),

data/customer/branch.mdx

@@ -1,25 +1,31 @@
 ---
 company_name: branch
 company_url: ourbranch.com
-company_logo: branch.svg
+company_logo: logo-branch-b.svg
+company_logo_dark: logo-branch.svg
 user_name: Adithya Reddy
 user_title: Software Engineering Manager
 user_photo: adithya.jpeg
 highlight: "Before Upstash we used Redis Cloud. This was not serverless, you had to think about instance size, memory usage etc. which we really don't want to do as it pulls our focus from product engineering, any time spent on operations like this is less time spent on our products and what differentiates Branch."
-cover_image: Branch.png
+cover_image: cover-branch.png
 order: 2
 ---
 
 Branch is a personal insurance carrier built on advanced technology that offers affordable home and auto insurance to users. Branch is the only carrier that allows customers to instantly bundle home and auto coverage, and also allow to purchase renters, condo, and umbrella insurance. Branch is a series-C startup with a valuation over a billion dollars.
+
 #### An entirely serverless tech stack allowing to have a lean development team
 
 Branch’s tech stack is entirely serverless which is rare in a highly regulated industries like insurance. They have been following the managed services philosophy to offload undifferentiated heavy lifting to vendors and focus all of their software development resources on things that differentiate Branch from others. As a result, they managed to have an extremely lean software development team of around 20 people while still delivering new features and launching products in new states much faster than was previously thought possible.
 
-<Highlight name="Adithya" title="Software Engineering Manager" photo="adithya.jpeg">
+<Highlight
+  name="Adithya"
+  title="Software Engineering Manager"
+  photo="adithya.jpeg"
+>
   The biggest compliment that we can give Upstash is that we've never had to
-  think about it since we adopted it. If a developer thinks it's appropriate to use
-  Redis to solve a problem, they just use Upstash without having to think about
-  load / memory usage / storage size / number of connections / any other
+  think about it since we adopted it. If a developer thinks it's appropriate to
+  use Redis to solve a problem, they just use Upstash without having to think
+  about load / memory usage / storage size / number of connections / any other
   resource constraints.
 </Highlight>
 
@@ -36,4 +42,3 @@ Before Upstash Branch first used Redis Cloud, however it was not meeting their e
 - **Support for Rest API:** The need for persistent connections to communicate with Redis was also a problem for Branch, as it caused issues with their compute model. All compute being on AWS Lambda meant every request is isolated, and so every request that needed to work with Redis would have to open its own connection. This meant that 10,000 requests would have 10,000 Lambdas opening 10,000 connections to Redis.
 
 Because of all these reasons, they instead started using Upstash Redis product as a cache to maintain state, like when a workflow was last run, the last record that was processed by a workflow. They also use Redis for its popular rate limiting function and deduplicating messages they receive from services that have at-least-once delivery like webhooks, and messaging queues.
-

data/customer/ding.mdx

@@ -1,17 +1,18 @@
 ---
 company_name: Ding
 company_url: ding.live
-company_logo: ding-logo.svg
+company_logo: logo-ding-b.svg
+company_logo_dark: logo-ding.svg
 user_name: Aymerick Valette
 user_title: Founding Engineer
 user_photo: aymerick.jpeg
 highlight: "With Upstash we minimized the our operational costs and we also felt very safe that we only pay for what we use, this is on top of amazing support we get whenever we need it."
-cover_image: upstash-ding.png
+cover_image: cover-ding.png
 order: 3
 ---
 
-
 Ding provides a user authentication solution specifically for scale-ups. Their service enables authentication and verification via text messages, offering global reach, competitive pricing, and super fast deliverability. Their authentication solution effectively prevents fraudulent requests; in some cases, it has cut the number of fraudulent authentication attempts in half for their customers. By filtering out these fraud attempts, their clients save on costs that would otherwise go to SMS providers for handling fraudulent traffic. Some of the customers of Ding's authentication services include social media platforms BeReal and Bumble.
+
 #### Upstash Redis: Enhancing User Experience and Supporting Fraud Detection
 
 Ding's infrastructure mainly utilizes Go and runs on AWS Lambda, achieving complete serverlessness across all operations. They rely on DynamoDB for OLTP (Online Transaction Processing) and Redshift for OLAP (Online Analytical Processing) workloads. Upstash plays multiples roles in this architecture, serving both as a caching solution, enabling rate limiting and providing simple database store functionality due to durability feature.
@@ -20,6 +21,12 @@ On the caching side, Upstash caches the results of intensive OLAP queries from R
 
 Moreover, Upstash Redis's rate limiting is a key component of Ding's anti-fraud algorithms, helping in the early detection of fraudulent behavior signals and preventing fraud authentications and savings costs for their users
 
-<Highlight name="Aymerick Valette" title="Founding Engineer" photo="aymerick.jpeg">
-With Upstash we minimized our operational costs and we also felt very safe that we only pay for what we use, this is on top of amazing support we get whenever we need it.
+<Highlight
+  name="Aymerick Valette"
+  title="Founding Engineer"
+  photo="aymerick.jpeg"
+>
+  With Upstash we minimized our operational costs and we also felt very safe
+  that we only pay for what we use, this is on top of amazing support we get
+  whenever we need it.
 </Highlight>

data/customer/dub.mdx

@@ -1,12 +1,13 @@
 ---
 company_name: dub
 company_url: dub.co
-company_logo: dubsh.svg
+company_logo: logo-dubsh-b.svg
+company_logo_dark: logo-dubsh.svg
 user_name: Steven Tey
 user_title: Founder
 user_photo: steven.jpeg
 highlight: "The Upstash JS SDK is incredibly easy to use – all I needed to do was run npm install, initialize the Redis instance, and start running redis commands – super simple! As for performance – our links have sub 200ms redirect times, thanks to Upstash!"
-cover_image: upstash-dub.png
+cover_image: cover-dub.png
 ---
 
 Dub is an open-source link management tool tailored for the evolving needs of modern marketing teams to create share and track short links. Launched just in September 2022, it has an impressive track record with 755 custom domains, 20K short links, 3.5M link redirects, and an overwhelming support of 8K stars on GitHub.
@@ -18,18 +19,23 @@ Dub is an open-source link management tool tailored for the evolving needs of mo
 3. Auth: NextAuth.js
 4. Deployments & CI/CD: Vercel
 5. Database(s):
-  - Upstash Redis for lightning fast link retrieval
-  - Planetscale for relational SQL storage
-  - Tinybird for time-series analytics data
-  - Cron jobs: Upstash QStash
-  - Payments: Stripe
 
-In this stack, Dub's performance is accelerated further with its strategic database selections: Upstash Redis ensures very fast link retrievals (via key-value pairs): https://github.com/dubinc/dub/blob/main/apps/web/lib/upstash.ts. 
+- Upstash Redis for lightning fast link retrieval
+- Planetscale for relational SQL storage
+- Tinybird for time-series analytics data
+- Cron jobs: Upstash QStash
+- Payments: Stripe
+
+In this stack, Dub's performance is accelerated further with its strategic database selections: Upstash Redis ensures very fast link retrievals (via key-value pairs): https://github.com/dubinc/dub/blob/main/apps/web/lib/upstash.ts.
 On the automation front, Upstash QStash plays the key role managing cron jobs efficiently https://github.com/dubinc/dub/blob/main/apps/web/app/api/cron/import/short/utils.ts#L164.
 
 #### The Upstash Advantage
+
 Right from the start, Dub has chosen Upstash. According to Dub, two key factors make Upstash stand out: Exceptional Developer Experience (DX) and high-speed performance.
 
 <Highlight name="Steven Tey" title="Founder" photo="steven.jpeg">
-The Upstash JS SDK is incredibly easy to use – all I needed to do was run npm install, initialize the Redis instance, and start running redis commands – super simple! As for performance – our links have sub 200ms redirect times, thanks to Upstash!
+  The Upstash JS SDK is incredibly easy to use – all I needed to do was run npm
+  install, initialize the Redis instance, and start running redis commands –
+  super simple! As for performance – our links have sub 200ms redirect times,
+  thanks to Upstash!
 </Highlight>