Merge pull request #2407 from urbit/tlat/jan-release

January Urbit.org Feature Release

Author: kennyrowe

.claude/settings.local.json

@@ -8,9 +8,13 @@
       "Bash(for file in /Users/tlat/dev/urbit-foundation/urbit.org-reloaded/app/content/overview/running-urbit/*.md)",
       "Bash(head:*)",
       "Bash(done)",
-      "Bash(curl:*)"
+      "Bash(curl:*)",
+      "Bash(gh issue view:*)"
     ],
     "deny": [],
     "ask": []
+  },
+  "enabledPlugins": {
+    "github@claude-plugins-official": true
   }
 }

app/blog/page.js

@@ -107,7 +107,9 @@ export default async function BlogHome() {
         </SidebarElement>
       </SidebarSlot>
 
+		  <Link href="/">
       <img src="/icons/digi-logo-1.svg" className="hidden md:block pb-4" />
+		  </Link>
       <div className="mb-32 text-xlarge gap-y-2 leading-[100%] max-w-[1200px] mx-auto">
         {Object.entries(yearGroups)
           .sort(([yearA], [yearB]) => yearB - yearA)

app/components/HeroSection.js

@@ -1,7 +1,9 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import { Modal } from "./Modal";
 
 /**
  * HeroSection - Full viewport width hero section
@@ -19,6 +21,8 @@ import Image from "next/image";
  * @param {Object} hero - Hero configuration object with all content
  */
 export function HeroSection({ hero }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   if (!hero) return null;
 
   const {
@@ -65,7 +69,7 @@ export function HeroSection({ hero }) {
 
   return (
     <section
-      className="relative flex items-start md:pt-[15vh] min-h-screen md:min-h-[calc(100vh+300px)] z-0 hero-background"
+      className="relative flex items-center justify-center md:items-start md:justify-start md:pt-[15vh] min-h-dvh md:min-h-[calc(100vh+300px)] z-0 hero-background"
       {...(backgroundImage && {
         style: {
           backgroundImage: getResponsiveBackgroundImage(backgroundImage),
@@ -122,7 +126,7 @@ export function HeroSection({ hero }) {
 
 
       {/* Content Container */}
-      <div className="relative z-20 mx-[15px] md:ml-[5%] lg:ml-[10%] sm:mx-auto md:px-16 flex flex-col max-w-4xl xl:max-w-[60vw]">
+      <div className="relative z-20 mx-[15px] md:ml-[5%] lg:ml-[10%] md:px-16 flex flex-col max-w-4xl xl:max-w-[60vw] py-[10vh] md:py-0">
         <div className="hidden md:block">
           <Image
             src="/icons/urbit-digi-accent-2.svg"
@@ -147,7 +151,7 @@ export function HeroSection({ hero }) {
               alt="urbit digi logo"
               width={90}
               height={90}
-              className="mt-24 md:hidden"
+              className="md:hidden"
             />
           </div>
         )}
@@ -182,14 +186,25 @@ export function HeroSection({ hero }) {
 
           {/* Secondary Mobile CTA */}
           {secondaryMobileCta && (
-            <Link
-              href={secondaryMobileCta.link}
-              className="font-sans text-2xl flex w-fit items-center justify-center my-2 px-2 py-1
-                bg-background text-accent-1 border border-accent-1 rounded-lg
-                hover:bg-primary hover:text-secondary transition-all transform"
-            >
-              {secondaryMobileCta.label}
-            </Link>
+            secondaryMobileCta.link.startsWith('http') ? (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="font-sans text-2xl flex w-fit items-center justify-center my-2 px-2 py-1
+                  bg-background text-accent-1 border border-accent-1 rounded-lg
+                  hover:bg-primary hover:text-secondary transition-all transform"
+              >
+                {secondaryMobileCta.label}
+              </button>
+            ) : (
+              <Link
+                href={secondaryMobileCta.link}
+                className="font-sans text-2xl flex w-fit items-center justify-center my-2 px-2 py-1
+                  bg-background text-accent-1 border border-accent-1 rounded-lg
+                  hover:bg-primary hover:text-secondary transition-all transform"
+              >
+                {secondaryMobileCta.label}
+              </Link>
+            )
           )}
         </div>
 
@@ -237,18 +252,52 @@ export function HeroSection({ hero }) {
 
         {/* Desktop Tertiary Link */}
         {tertiaryLink && (
+          tertiaryLink.link.startsWith('http') ? (
+            <button
+              onClick={() => setIsModalOpen(true)}
+              className="hidden md:block font-mono text-sm text-contrast-2 hover:text-primary transition-colors text-left"
+            >
+              {tertiaryLink.label}
+            </button>
+          ) : (
+            <Link
+              href={tertiaryLink.link}
+              className="hidden md:block font-mono text-sm text-contrast-2 hover:text-primary transition-colors"
+            >
+              {tertiaryLink.label}
+            </Link>
+          )
+        )}
+      </div>
+
+      {/* Leaving Site Modal */}
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        <h2 className="text-2xl font-serif italic font-semibold text-primary mb-4">
+		  Quickstart with Tlon Messenger
+        </h2>
+        <p className="font-sans text-large leading-120 text-primary mb-6">
+		  Tlon will onboard you to Urbit without needing to run your own node. They provide free hosting and a free Urbit ID with their mobile app.</p>
+        <p className="font-sans text-large leading-120 text-primary mb-6">
+		  The link below will get you set up and added to the Urbit Foundation public group; say hello and someone will show you around!</p>
+        <div className="flex gap-3 justify-end">
           <Link
-            href={tertiaryLink.link}
-            className="hidden md:block font-mono text-sm text-contrast-2 hover:text-primary transition-colors"
-            {...(tertiaryLink.link.startsWith('http') && {
-              target: "_blank",
-              rel: "noopener noreferrer",
-            })}
+            href="/overview/running-urbit"
+            onClick={() => setIsModalOpen(false)}
+            className="font-sans text-lg flex items-center py-1 px-3 rounded-lg text-contrast-2 hover:text-primary font-[600]"
           >
-            {tertiaryLink.label}
+            Help me self-host
           </Link>
-        )}
-      </div>
+          <a
+            href={tertiaryLink?.link || tertiaryMobileLink?.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-sans text-lg flex items-center py-1 px-3 rounded-lg text-background bg-foreground hover:text-contrast-1 font-[600]"
+            onClick={() => setIsModalOpen(false)}
+          >
+            Onboard via Tlon
+          </a>
+        </div>
+      </Modal>
     </section>
   );
 }

app/components/Modal.js

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * Modal - A reusable modal component
+ *
+ * Displays content in a centered overlay with:
+ * - Semi-transparent backdrop (click to close)
+ * - X button to close
+ * - Escape key to close
+ * - Body scroll lock when open
+ *
+ * @param {boolean} isOpen - Controls modal visibility
+ * @param {function} onClose - Called when modal is dismissed
+ * @param {ReactNode} children - Custom content slot
+ */
+export function Modal({ isOpen, onClose, children }) {
+  const [mounted, setMounted] = useState(false);
+
+  // Handle escape key
+  const handleEscape = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  // Set mounted state for portal
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Handle body scroll lock and escape key
+  useEffect(() => {
+    if (isOpen) {
+      // Lock scroll on both html and body to ensure it works
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleEscape);
+    } else {
+      document.documentElement.style.overflow = "";
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.documentElement.style.overflow = "";
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, handleEscape]);
+
+  if (!isOpen || !mounted) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+    >
+      <div
+        className="relative bg-contrast-1 border border-gray-87 rounded-16px shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto animate-fadeIn"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-contrast-2 hover:text-primary transition-colors"
+          aria-label="Close modal"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        {/* Content */}
+        <div className="p-6 pt-12">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}

app/components/NewsletterSignup.js

@@ -43,53 +43,57 @@ export const NewsletterSignup = () => {
     document.body.removeChild(script);
   };
 
-  return (
-    <React.Fragment>
-      <form
-        onSubmit={handleSubmit}
-        id="mc-embedded-subscribe-form"
-        name="mc-embedded-subscribe-form"
-        className="validate form"
-        noValidate
-      >
-        <div className="input-group relative font-small" id="mc_embed_signup_scroll">
-          <div className={classNames(
-            "w-full max-w-[700px] mc-field-group h-max relative")}>
-            <input
-              className={classNames(
-                email.length > 0 && !isSuccess && "text-primary border-white",
-                isSuccess ? "bg-[#878787] text-secondary cursor-default border-none" : 'text-gray-87 bg-transparent ',
-                "text-large border-[.0875rem] pt-[.1rem] pb-[.2rem] appearance-none font-[300] placeholder:font-[300]  placeholder:text-contrast-2 outline-none border-contrast-2  rounded-[.3125rem] pb-[.05em] pl-[.3em] pr-1 w-full leading-[1cap]",
-                email.length > 0 && !isSuccess && "pr-[5.5rem]",
-              )
-              }
-              disabled={isSuccess}
-              type="email"
-              name="EMAIL"
-              id="mce-EMAIL"
-              placeholder="Get email updates"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)} // Update state on input change
-            />
-            {email.length > 0 && !isSuccess && ( // Only show the button if input length > 0
-              <div id="subscribe" className="flex font-[300] items-center justify-center absolute h-full top-0 right-0">
-                <button
-                  id="mc-embedded-subscribe"
-                  className={classNames(
-                    email.length > 0 && "text-contrast-2 hover:text-primary",
-                    "body-lg text-contrast-2 hover:text-primary leading-[1cap] bg-transparent pr-[.4em]"
-                  )}
-                  type="submit"
-                  name="subscribe"
-                >
-                  Subscribe
-                </button>
-              </div>
+return (
+  <React.Fragment>
+    <form
+      onSubmit={handleSubmit}
+      id="mc-embedded-subscribe-form"
+      name="mc-embedded-subscribe-form"
+      className="validate form"
+      noValidate
+    >
+      <div className="input-group relative font-small" id="mc_embed_signup_scroll">
+        <div className={classNames(
+          "w-full max-w-[700px] mc-field-group h-max relative")}>
+          <input
+            className={classNames(
+              email.length > 0 && !isSuccess && "text-primary border-white",
+              isSuccess ? "bg-[#878787] text-secondary cursor-default border-none" : 'text-gray-87 bg-transparent ',
+              "text-large border-[.0875rem] pt-[.1rem] pb-[.2rem] appearance-none font-[300] placeholder:font-[300]  placeholder:text-contrast-2 outline-none border-contrast-2  rounded-[.3125rem] pb-[.05em] pl-[.3em] pr-1 w-full leading-[1cap]",
+              email.length > 0 && !isSuccess && "pr-[5.5rem]",
             )}
-          </div>
+            disabled={isSuccess}
+            type="email"
+            name="EMAIL"
+            id="mce-EMAIL"
+            placeholder="Get email updates"
+            required
+            autoComplete="off"
+            data-1p-ignore
+            data-lpignore="true"
+            data-bwignore
+            data-form-type="other"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          {email.length > 0 && !isSuccess && (
+            <div id="subscribe" className="flex font-[300] items-center justify-center absolute h-full top-0 right-0">
+              <button
+                id="mc-embedded-subscribe"
+                className={classNames(
+                  email.length > 0 && "text-contrast-2 hover:text-primary",
+                  "body-lg text-contrast-2 hover:text-primary leading-[1cap] bg-transparent pr-[.4em]"
+                )}
+                type="submit"
+                name="subscribe"
+              >
+                Subscribe
+              </button>
+            </div>
+          )}
         </div>
-      </form>
-    </React.Fragment>
-  );
-};
+      </div>
+    </form>
+  </React.Fragment>
+);
+}

app/content/blog/subassembly-hackathon-2024.md

@@ -5,10 +5,10 @@ description = "Use Login with Urbit ID in your app and win Urbit Stars"
 
 [extra]
 ship = "~sarlev-sarsen"
-image = "https://sfo3.digitaloceanspaces.com/sarlev-sarsen/sarlev-sarsen/2024.9.13..21.40.44..25a1.cac0.8312.6e97-image.png"
+image = "https://s3.us-east-1.amazonaws.com/urbit.orgcontent/imagery/Subassembly-image.png"
 +++
 
-![Image](https://sfo3.digitaloceanspaces.com/sarlev-sarsen/sarlev-sarsen/2024.9.13..21.40.44..25a1.cac0.8312.6e97-image.png)
+![Image](https://s3.us-east-1.amazonaws.com/urbit.orgcontent/imagery/Subassembly-image.png)
 
 The Subassembly event series is focusing on identity and reputation for [their inaugural event](https://urbit.org/events/2024-10-20-Subassembly-PNW), and in concert with the IRL gathering, the Urbit Foundation is sponsoring a a hackathon focused around the development of applications that use Urbit ID as the authentication and identity layer.
 

app/content/events/2024-10-20-subassembly-pnw.md

@@ -4,7 +4,7 @@ starts = "2024-10-20T14:00:00"
 ends = "2024-10-22T11:00:00"
 timezone = "America/Los_Angeles"
 location = "Wellspring Spa & Woodland Retreat - 154922 Kernahan Rd E, Ashford, WA 98304"
-image = "https://sfo3.digitaloceanspaces.com/sarlev-sarsen/sarlev-sarsen/2024.5.16..5.20.19..6f5c.28f5.c28f.5c28-image.png"
+image = "https://s3.us-east-1.amazonaws.com/urbit.orgcontent/imagery/Subassembly-image.png"
 links = [
   { label = "Register", url = "https://docs.google.com/forms/d/e/1FAIpQLSfbHcFLRgGKBW91qINxhZ6TAgSDgsY_ikG1ATauHL7AVeLqDA/viewform" },
   { label = "Event Details", url = "https://subassembly.tocwexsyndicate.com/details.html" },