feat: use CMS for all of the tet

Author: skeptrunedev

website/astro.config.mjs

@@ -28,5 +28,10 @@ export default defineConfig({
       },
     ],
   },
-  integrations: [mdx(), keystatic(), react(), icon()],
+  integrations: [
+    mdx(),
+    ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()]),
+    react(),
+    icon(),
+  ],
 });

website/keystatic.config.ts

@@ -5,7 +5,7 @@ export default config({
   storage: {
     kind: "local",
   },
-
+  locale: "en-US",
   collections: {
     posts: collection({
       label: "Posts",

website/package.json

@@ -22,5 +22,9 @@
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.8",
     "tiny-invariant": "^1.3.3"
+  },
+  "devDependencies": {
+    "@iconify-json/bi": "^1.2.4",
+    "@iconify-json/simple-icons": "^1.2.38"
   }
 }

website/src/content/singles/homepage/index.yaml

@@ -1,8 +1,43 @@
 openGraph:
   title: Threshold Security
+  description: building the best infrastructure for decentralized multisigs
   type: website
   publishedTime: 2025-06-10
   modifiedTime: 2025-06-10
   author: skeptrune
   primaryCategory: about
 actions: []
+waitlist:
+  label: join waitlist
+  description: Get updates on our progress and be the first to know when we launch.
+  inputPlaceholder: your@email.com
+  buttonText: join waitlist
+  numberSuffix: people waiting
+roadmap:
+  label: roadmap
+  items:
+    - label: DKG
+      description: >-
+        interactive key generation ceremony for up to 256 participants including
+        integration tests
+      status: in progress
+    - label: deposits
+      description: >-
+        RPC route, rocksdb-backed storage, and business logic for tracking new
+        deposits and increasing balance of the depositor
+      status: in progress
+    - label: withdrawals
+      description: >-
+        RPC route, fee calculation, UTXO management, and signature validation
+        for withdrawing from a given account balance
+      status: not started
+    - label: tendermint
+      description: >-
+        business logic for handling staking, slashing, and unbonding of the
+        validator set, including integration tests
+      status: not started
+    - label: member rotation
+      description: >-
+        epoch-based member rotation with sweeping of funds from one set of
+        members to another, including integration tests
+      status: not started

website/src/layouts/HomeLayout.astro

@@ -1,8 +1,9 @@
 ---
 import "../styles/global.css";
 import { ClientRouter } from "astro:transitions";
-import { SiteName } from "../theme.config";
+import { SiteName, SocialLinks } from "../theme.config";
 import { Font } from "astro:assets";
+import { Icon } from "astro-icon/components";
 
 const {
   title = "Default Title",
@@ -78,22 +79,40 @@ const currentPath = Astro.url.pathname;
         <h1
           class="text-4xl md:text-6xl font-bold mb-4 border-b-2 sm:pb-6 pb-3 border-brand-500"
         >
-          Threshold Security
+          {title}
         </h1>
         <p class="text-sm md:text-base text-btcgray-600">
-          infrastructure for decentralized multisigs
+          {description}
         </p>
       </header>
       <main>
         <slot />
       </main>
       <footer
-        class="mt-16 text-center text-sm text-btcgray-600 pt-8 border-t border-btcgray-50 w-full"
+        class="mt-16 text-center text-sm text-btcgray-600 pt-8 border-t border-btcgray-50 w-full flex justify-between"
       >
+        <ul class="flex items-center space-x-4">
+          {
+            SocialLinks.map((link) => (
+              <li>
+                <a
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="icon hover:text-brand-500 transition-colors"
+                  aria-label={link.icon.split(":")[1]}
+                >
+                  <Icon name={link.icon} />
+                </a>
+              </li>
+            ))
+          }
+        </ul>
         <p>
-          &copy; 2025 athas code editor &mdash; <a
-            href="#"
-            class="border-b-2 border-brand-500 font-bold">@athasdev</a
+          email us &mdash; <a
+            href="mailto:team@onthreshold.com"
+            class="border-b-2 border-brand-500 font-bold"
+            >team@onthreshold.com</a
           >
         </p>
       </footer>

website/src/lib/keystatic/shared/action.ts

@@ -1,28 +1,35 @@
 import { fields } from "@keystatic/core";
 
-export const action = fields.object({
-  label: fields.text({
-    label: "Label",
-    validation: {
-      isRequired: true,
-    },
-  }),
-  href: fields.text({
-    label: "URL",
-    validation: {
-      isRequired: true,
-    },
-  }),
-  newTab: fields.checkbox({
-    label: "Open in new tab",
-  }),
-  variant: fields.select({
-    label: "Variant",
-    description: "The style variant of the button",
-    options: [
-      { value: "primary", label: "Primary" },
-      { value: "secondary", label: "Secondary" },
-    ],
-    defaultValue: "secondary",
-  }),
-});
+export const action = fields.object(
+  {
+    label: fields.text({
+      label: "Label",
+      validation: {
+        isRequired: true,
+      },
+    }),
+    href: fields.text({
+      label: "URL",
+      validation: {
+        isRequired: true,
+      },
+    }),
+    newTab: fields.checkbox({
+      label: "Open in new tab",
+    }),
+    variant: fields.select({
+      label: "Variant",
+      description: "The style variant of the button",
+      options: [
+        { value: "primary", label: "Primary" },
+        { value: "secondary", label: "Secondary" },
+      ],
+      defaultValue: "secondary",
+    }),
+  },
+  {
+    label: "Action",
+    description:
+      "An action button that can link to an external URL or internal page.",
+  }
+);

website/src/lib/keystatic/singletons/homepage.ts

@@ -7,6 +7,89 @@ export const homepage = singleton({
   path: "src/content/singles/homepage/",
   schema: {
     openGraph: opengraph,
-    actions: fields.array(action),
+    actions: fields.array(action, {
+      label: "Actions",
+      description: "A list of action buttons for the homepage.",
+    }),
+    waitlist: fields.object(
+      {
+        label: fields.text({
+          label: "Waitlist Label",
+          description: "The label for the waitlist section on the homepage.",
+          defaultValue: "join waitlist",
+        }),
+        description: fields.text({
+          label: "Waitlist Description",
+          description: "A brief description for the waitlist section.",
+          defaultValue:
+            "Get updates on our progress and be the first to know when we launch.",
+        }),
+        inputPlaceholder: fields.text({
+          label: "Waitlist Input Placeholder",
+          description: "Placeholder text for the waitlist input field.",
+          defaultValue: "your@email.com",
+        }),
+        buttonText: fields.text({
+          label: "Waitlist Button Text",
+          description: "The text for the waitlist button on the homepage.",
+          defaultValue: "join waitlist",
+        }),
+        numberSuffix: fields.text({
+          label: "Waitlist Number Suffix",
+          description:
+            "The suffix for the waitlist number displayed on the homepage.",
+          defaultValue: "people waiting",
+        }),
+      },
+      {
+        label: "Waitlist Section",
+        description: "Configuration for the homepage waitlist section.",
+      }
+    ),
+    roadmap: fields.object(
+      {
+        label: fields.text({
+          label: "Roadmap Title",
+          description: "The title for the homepage roadmap section.",
+          defaultValue: "roadmap",
+        }),
+        items: fields.array(
+          fields.object(
+            {
+              label: fields.text({
+                label: "Label",
+                description: "The label for the roadmap item.",
+              }),
+              description: fields.text({
+                label: "Description",
+                description: "A brief description of the roadmap item.",
+              }),
+              status: fields.select({
+                label: "Status",
+                description: "The current status of the roadmap item.",
+                options: [
+                  { value: "not started", label: "Not Started" },
+                  { value: "in progress", label: "In Progress" },
+                  { value: "completed", label: "Completed" },
+                ],
+                defaultValue: "not started",
+              }),
+            },
+            {
+              label: "Roadmap Item",
+              description: "An item in the homepage roadmap section.",
+            }
+          ),
+          {
+            label: "Roadmap Items",
+            description: "A list of items for the homepage roadmap section.",
+          }
+        ),
+      },
+      {
+        label: "Roadmap Section",
+        description: "Configuration for the homepage roadmap section.",
+      }
+    ),
   },
 });

website/src/pages/index.astro

@@ -22,88 +22,52 @@ invariant(i18n, "No homepage content found");
   <div class="flex flex-col md:flex-row gap-16 w-full max-w-4xl">
     <section class="flex-1">
       <h2 class="text-2xl font-semibold mb-4 border-l-4 border-brand-500 pl-4">
-        join waitlist
+        {i18n.waitlist.label}
       </h2>
       <p class="mb-4 text-btcgray-600">
-        Get updates on our progress and be the first to know when we launch.
+        {i18n.waitlist.description}
       </p>
       <form class="flex flex-col">
         <input
           type="email"
-          placeholder="your@email.com"
+          placeholder={i18n.waitlist.inputPlaceholder}
           class="border border-btcgray-300 p-3 rounded mb-4 focus:ring-2 focus:ring-brand-500 outline-none"
         />
         <button
           type="submit"
           class="bg-btcgray-800 text-white p-3 rounded hover:bg-btcgray-700"
-          >join waitlist</button
         >
+          {i18n.waitlist.buttonText}
+        </button>
       </form>
       <p class="mt-2 text-sm text-btcgray-600">
-        &rarr; 1,070 developers waiting
+        &rarr; 1,070 {i18n.waitlist.numberSuffix}
       </p>
     </section>
 
     <section class="flex-1">
       <h2 class="text-2xl font-semibold mb-4 border-l-4 border-brand-500 pl-4">
-        roadmap
+        {i18n.roadmap.label}
       </h2>
       <ul class="space-y-4 w-full">
-        <li class="flex items-start w-full">
-          <span class="bg-brand-500 rounded-full w-3 h-3 mr-3 mt-1.5"></span>
-          <div class="w-[93%]">
-            <h3 class="font-semibold">DKG</h3>
-            <p class="text-sm text-btcgray-600">
-              interactive key generation ceremony for up to 256 participants
-              including integration tests
-            </p>
-            <span class="text-xs text-btcgray-400">in progress</span>
-          </div>
-        </li>
-        <li class="flex items-start">
-          <span class="bg-brand-500 rounded-full w-3 h-3 mr-3 mt-1.5"></span>
-          <div class="w-[93%]">
-            <h3 class="font-semibold">deposits</h3>
-            <p class="text-sm text-btcgray-600">
-              RPC route, rocksdb-backed storage, and business logic for tracking
-              new deposits and increasing balance of the depositor
-            </p>
-            <span class="text-xs text-btcgray-400">in progress</span>
-          </div>
-        </li>
-        <li class="flex items-start">
-          <span class="bg-btcgray-400 rounded-full w-3 h-3 mr-3 mt-1.5"></span>
-          <div class="w-[93%]">
-            <h3 class="font-semibold">withdrawals</h3>
-            <p class="text-sm text-btcgray-600">
-              RPC route, fee calculation, UTXO management, and signature
-              validation for withdrawing from a given account balance
-            </p>
-            <span class="text-xs text-btcgray-400"> not started </span>
-          </div>
-        </li>
-        <li class="flex items-start">
-          <span class="bg-btcgray-400 rounded-full w-3 h-3 mr-3 mt-1.5"></span>
-          <div class="w-[93%]">
-            <h3 class="font-semibold">tendermint</h3>
-            <p class="text-sm text-btcgray-600">
-              business logic for handling staking, slashing, and unbonding of
-              the validator set, including integration tests
-            </p>
-            <span class="text-xs text-btcgray-400">not started</span>
-          </div>
-        </li>
-        <li class="flex items-start">
-          <span class="bg-btcgray-400 rounded-full w-3 h-3 mr-3 mt-1.5"></span>
-          <div class="w-[93%]">
-            <h3 class="font-semibold">member rotation</h3>
-            <p class="text-sm text-btcgray-600">
-              epoch-based member rotation with sweeping of funds from one set of
-              members to another, including integration tests
-            </p>
-            <span class="text-xs text-btcgray-400">not started</span>
-          </div>
-        </li>
+        {
+          i18n.roadmap.items.map((item) => (
+            <li class="flex items-start">
+              <span
+                class={`rounded-full w-3 h-3 mr-3 mt-1.5 ${
+                  item.status === "in progress"
+                    ? "bg-brand-500"
+                    : "bg-btcgray-400"
+                }`}
+              />
+              <div class="w-[93%]">
+                <h3 class="font-semibold">{item.label}</h3>
+                <p class="text-sm text-btcgray-600">{item.description}</p>
+                <span class="text-xs text-btcgray-400">{item.status}</span>
+              </div>
+            </li>
+          ))
+        }
       </ul>
     </section>
   </div>