move more assets to XeDN, reduce site zip further

This also compresses all compressible artifacts with gzip, enabling a
future XeDN patch to serve xeiaso.net directly.

This uses gzip in particular as an opportunistic speedhack for serving
gzip directly to clients that accept gzipped files.

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 141 insertions, 95 deletions

diff --git a/lume/src/landing/alvis.jsx b/lume/src/landing/alvis.jsx
index b108e3a..fdc6308 100644
--- a/lume/src/landing/alvis.jsx
+++ b/lume/src/landing/alvis.jsx
@@ -1,9 +1,9 @@
 import BrandGithub from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/brand-github.tsx";
 import LemonIcon from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/lemon-2.tsx";
-import CheckIcon from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/check.tsx"
+import CheckIcon from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/check.tsx";
 import IconChevronRight from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/chevron-right.tsx";
 import IconAlarm from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/alarm.tsx";
-import IconZZZ from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/zzz.tsx"
+import IconZZZ from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/zzz.tsx";
 import IconArmchair from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/armchair.tsx";
 
 export const layout = "bare.njk";
@@ -109,7 +109,7 @@ export const Footer = () => {
       </div>
     </div>
   );
-}
+};
 
 export const Hero = () => {
   return (
@@ -144,7 +144,7 @@ export const Hero = () => {
       </div>
     </div>
   );
-}
+};
 
 export const Features = () => {
   const featureItems = [
@@ -160,7 +160,8 @@ export const Features = () => {
     },
     {
       icon: IconArmchair,
-      description: "Get a detailed report for every incident Alvis handles. This helps you understand what went wrong and how to fix it.",
+      description:
+        "Get a detailed report for every incident Alvis handles. This helps you understand what went wrong and how to fix it.",
       link: "/landing/alvis/P0001/",
     },
   ];
@@ -194,7 +195,7 @@ export const Features = () => {
       })}
     </div>
   );
-}
+};
 
 export const Testimonials = () => {
   const testimonials = [
@@ -203,22 +204,25 @@ export const Testimonials = () => {
       position: "Lead SRE @ WritePulse",
       color: "bg-[#9d789b]",
       avatar: "https://cdn.xeiaso.net/avatar/d69caff2a9fd74b7069be6ece1a06ac5",
-      quote: "Honestly, I wasn't able to spend time with my kid until I set up Alvis. Now family time isn't turned into work time!",
+      quote:
+        "Honestly, I wasn't able to spend time with my kid until I set up Alvis. Now family time isn't turned into work time!",
     },
     {
       name: "Samus Rhodes",
       position: "SRE @ Worcation",
       color: "bg-[#5b5faf]",
       avatar: "https://cdn.xeiaso.net/avatar/9108f6d8df326e20a4c1983a910cd952",
-      quote: "I was able to get a promotion after setting up Alvis. I can't believe I didn't do it sooner!",
+      quote:
+        "I was able to get a promotion after setting up Alvis. I can't believe I didn't do it sooner!",
     },
     {
       name: "Maria Robotnik",
       position: "SRE @ G.U.N.",
       color: "bg-[#d61a9b]",
       avatar: "https://cdn.xeiaso.net/avatar/f9f35179d3331f30f92793b724c26cf9",
-      quote: "Every time I get paged, I just tell Alvis to take care of it. I don't even have to look at my phone anymore!",
-    }
+      quote:
+        "Every time I get paged, I just tell Alvis to take care of it. I don't even have to look at my phone anymore!",
+    },
   ];
 
   return (
@@ -226,23 +230,28 @@ export const Testimonials = () => {
       <div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
         <h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
         <p class="mb-6 pb-2 md:mb-12 md:pb-0">
-          Don't believe us? Trust the voices of your peers. They obviously know what they're talking about, don't they?
+          Don't believe us? Trust the voices of your peers. They obviously know
+          what they're talking about, don't they?
         </p>
       </div>
 
       <div class="grid gap-6 text-center md:grid-cols-3">
         {testimonials.map((testimonial) => (
           <div>
-            <div
-              className="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30 h-full">
-              <div className={`h-28 overflow-hidden rounded-t-lg ${testimonial.color}`}></div>
+            <div className="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30 h-full">
               <div
-                className="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
+                className={`h-28 overflow-hidden rounded-t-lg ${testimonial.color}`}
+              >
+              </div>
+              <div className="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
                 <img
-                  src={testimonial.avatar} />
+                  src={testimonial.avatar}
+                />
               </div>
               <div className="p-6">
-                <h4 className="mb-2 text-2xl font-semibold">{testimonial.name}</h4>
+                <h4 className="mb-2 text-2xl font-semibold">
+                  {testimonial.name}
+                </h4>
                 <div className="mb-2">{testimonial.position}</div>
                 <hr />
                 <p className="mt-4">
@@ -250,9 +259,9 @@ export const Testimonials = () => {
                     xmlns="http://www.w3.org/2000/svg"
                     fill="currentColor"
                     class="inline-block h-7 w-7 pr-2"
-                    viewBox="0 0 24 24">
-                    <path
-                      d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
                   </svg>
                   {testimonial.quote}
                 </p>
@@ -262,38 +271,49 @@ export const Testimonials = () => {
         ))}
       </div>
     </section>
-  )
-}
+  );
+};
 
 export const FAQs = () => {
   const faqs = [
     {
       question: "How does Alvis work?",
-      answer: "Alvis takes your production playbooks and turns them into diagnostic and remediation scripts. It then runs them when you get paged. If it's able to fix the problem, it closes the incident. Otherwise it escalates to you.",
+      answer:
+        "Alvis takes your production playbooks and turns them into diagnostic and remediation scripts. It then runs them when you get paged. If it's able to fix the problem, it closes the incident. Otherwise it escalates to you.",
     },
     {
       question: "What AI does Alvis use?",
-      answer: "Alvis uses the latest and greatest in large language model technology. It's all developed in-house and is not a wrapper to other services. This ensures your data is safe and secure with Alvis.",
+      answer:
+        "Alvis uses the latest and greatest in large language model technology. It's all developed in-house and is not a wrapper to other services. This ensures your data is safe and secure with Alvis.",
     },
     {
-      question: "What is the connection between Alvis and the Rhadamanthus organization?",
-      answer: "Alvis is a completly separate entity from Rhadamanthus. We are not affiliated with them in any way. We wish them luck with Project Exodus and their conflicts with the Saviorites.",
+      question:
+        "What is the connection between Alvis and the Rhadamanthus organization?",
+      answer:
+        "Alvis is a completly separate entity from Rhadamanthus. We are not affiliated with them in any way. We wish them luck with Project Exodus and their conflicts with the Saviorites.",
     },
     {
-      question: "What happens when I go over the number of incidents in my plan?",
-      answer: "Alvis will automatically escalate your incidents to the oncall engineer. This ensures that Alvis is fast and ready for everyone!",
-    }
-  ]
+      question:
+        "What happens when I go over the number of incidents in my plan?",
+      answer:
+        "Alvis will automatically escalate your incidents to the oncall engineer. This ensures that Alvis is fast and ready for everyone!",
+    },
+  ];
   return (
     <div className="mx-auto max-w-7xl px-6 py-12 sm:pt-16 lg:px-8 lg:py-40">
       <div className="lg:grid lg:grid-cols-12 lg:gap-8">
         <div className="lg:col-span-5">
-          <h2 className="text-2xl font-bold leading-10 tracking-tight text-stone-950 dark:text-stone-50">Frequently asked questions</h2>
+          <h2 className="text-2xl font-bold leading-10 tracking-tight text-stone-950 dark:text-stone-50">
+            Frequently asked questions
+          </h2>
           <p className="mt-4 text-base leading-7">
-            Can’t find the answer you’re looking for? Reach out to our{' '}
-            <a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500 visited:text-indigo-600">
+            Can’t find the answer you’re looking for? Reach out to our{" "}
+            <a
+              href="#"
+              className="font-semibold text-indigo-600 hover:text-indigo-500 visited:text-indigo-600"
+            >
               customer support
-            </a>{' '}
+            </a>{" "}
             team.
           </p>
         </div>
@@ -301,7 +321,9 @@ export const FAQs = () => {
           <dl className="space-y-10">
             {faqs.map((faq) => (
               <div key={faq.question}>
-                <dt className="text-base font-semibold leading-7 text-stone-800 dark:text-stone-400">{faq.question}</dt>
+                <dt className="text-base font-semibold leading-7 text-stone-800 dark:text-stone-400">
+                  {faq.question}
+                </dt>
                 <dd className="mt-2 text-base leading-7">{faq.answer}</dd>
               </div>
             ))}
@@ -309,66 +331,68 @@ export const FAQs = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const Pricing = () => {
   const tiers = [
     {
-      name: 'Individual',
-      id: 'tier-individual',
-      href: '/blog/alvis/',
-      priceMonthly: '$10',
-      description: 'The essentials to provide your best work for clients.',
+      name: "Individual",
+      id: "tier-individual",
+      href: "/blog/alvis/",
+      priceMonthly: "$10",
+      description: "The essentials to provide your best work for clients.",
       features: [
-        '50 incidents included per month',
-        '48 hour response time',
-        'Basic analytics',
-        'Help center access',
-        'Tailscale integration',
+        "50 incidents included per month",
+        "48 hour response time",
+        "Basic analytics",
+        "Help center access",
+        "Tailscale integration",
       ],
       mostPopular: false,
     },
     {
-      name: 'Startup',
-      id: 'tier-startup',
-      href: '/blog/alvis/',
-      priceMonthly: '$32',
-      description: 'A plan that scales with your rapidly growing business.',
+      name: "Startup",
+      id: "tier-startup",
+      href: "/blog/alvis/",
+      priceMonthly: "$32",
+      description: "A plan that scales with your rapidly growing business.",
       features: [
-        'Custom incident response steps',
-        '500 incidents included per month',
-        'Same-day response time',
-        'Advanced analytics',
+        "Custom incident response steps",
+        "500 incidents included per month",
+        "Same-day response time",
+        "Advanced analytics",
       ],
       mostPopular: true,
     },
     {
-      name: 'Enterprise',
-      id: 'tier-enterprise',
-      href: '/blog/alvis/',
-      priceMonthly: '$500',
-      description: 'Dedicated support and infrastructure for your company.',
+      name: "Enterprise",
+      id: "tier-enterprise",
+      href: "/blog/alvis/",
+      priceMonthly: "$500",
+      description: "Dedicated support and infrastructure for your company.",
       features: [
-        'Artificial General Intelligence',
-        'Unlimited incidents',
-        'SOCII/HIPPA/PCI compliance',
-        'Custom analytics',
-        'Custom SLAs',
+        "Artificial General Intelligence",
+        "Unlimited incidents",
+        "SOCII/HIPPA/PCI compliance",
+        "Custom analytics",
+        "Custom SLAs",
       ],
       mostPopular: false,
     },
-  ]
+  ];
 
   function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
+    return classes.filter(Boolean).join(" ");
   }
 
   return (
     <div className="py-8 sm:py-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-4xl text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600">Pricing</h2>
+          <h2 className="text-base font-semibold leading-7 text-indigo-600">
+            Pricing
+          </h2>
           <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
             Pricing plans for teams of&nbsp;all&nbsp;sizes
           </p>
@@ -378,10 +402,10 @@ export const Pricing = () => {
             <div
               key={tier.id}
               className={classNames(
-                tier.mostPopular ? 'lg:z-10 lg:rounded-b-none' : 'lg:mt-8',
-                tierIdx === 0 ? 'lg:rounded-r-none' : '',
-                tierIdx === tiers.length - 1 ? 'lg:rounded-l-none' : '',
-                'flex flex-col justify-between rounded-3xl bg-stone-100 dark:bg-stone-800 p-8 ring-1 ring-gray-200 xl:p-10'
+                tier.mostPopular ? "lg:z-10 lg:rounded-b-none" : "lg:mt-8",
+                tierIdx === 0 ? "lg:rounded-r-none" : "",
+                tierIdx === tiers.length - 1 ? "lg:rounded-l-none" : "",
+                "flex flex-col justify-between rounded-3xl bg-stone-100 dark:bg-stone-800 p-8 ring-1 ring-gray-200 xl:p-10",
               )}
             >
               <div>
@@ -389,27 +413,43 @@ export const Pricing = () => {
                   <h3
                     id={tier.id}
                     className={classNames(
-                      tier.mostPopular ? 'text-indigo-600 dark:text-indigo-200' : 'text-gray-900 dark:text-gray-100',
-                      'text-lg font-semibold leading-8'
+                      tier.mostPopular
+                        ? "text-indigo-600 dark:text-indigo-200"
+                        : "text-gray-900 dark:text-gray-100",
+                      "text-lg font-semibold leading-8",
                     )}
                   >
                     {tier.name}
                   </h3>
-                  {tier.mostPopular ? (
-                    <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
-                      Most popular
-                    </p>
-                  ) : null}
+                  {tier.mostPopular
+                    ? (
+                      <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
+                        Most popular
+                      </p>
+                    )
+                    : null}
                 </div>
-                <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-300">{tier.description}</p>
+                <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                  {tier.description}
+                </p>
                 <p className="mt-6 flex items-baseline gap-x-1">
-                  <span className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{tier.priceMonthly}</span>
-                  <span className="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-300">/month</span>
+                  <span className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+                    {tier.priceMonthly}
+                  </span>
+                  <span className="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-300">
+                    /month
+                  </span>
                 </p>
-                <ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                <ul
+                  role="list"
+                  className="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-300"
+                >
                   {tier.features.map((feature) => (
                     <li key={feature} className="flex gap-x-3">
-                      <CheckIcon className="h-6 w-5 flex-none stroke-indigo-600" aria-hidden="true" />
+                      <CheckIcon
+                        className="h-6 w-5 flex-none stroke-indigo-600"
+                        aria-hidden="true"
+                      />
                       {feature}
                     </li>
                   ))}
@@ -420,9 +460,9 @@ export const Pricing = () => {
                 aria-describedby={tier.id}
                 className={classNames(
                   tier.mostPopular
-                    ? 'bg-indigo-600 dark:bg-indigo-300 text-white dark:text-black shadow-sm hover:text-white visited:text-black hover:bg-indigo-500'
-                    : 'text-indigo-600 dark:text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300',
-                  'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                    ? "bg-indigo-600 dark:bg-indigo-300 text-white dark:text-black shadow-sm hover:text-white visited:text-black hover:bg-indigo-500"
+                    : "text-indigo-600 dark:text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
+                  "mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
                 )}
               >
                 Buy plan
@@ -432,8 +472,8 @@ export const Pricing = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const CTA = () => {
   return (
@@ -450,18 +490,24 @@ export const CTA = () => {
         >
           Get started
         </a>
-        <a href="/blog/alvis/" className="text-sm font-semibold leading-6 text-gray-900">
+        <a
+          href="/blog/alvis/"
+          className="text-sm font-semibold leading-6 text-gray-900"
+        >
           Learn more <span aria-hidden="true">→</span>
         </a>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default function Alvis() {
   return (
     <body className="lg:max-w-5xl max-w-xl px-4 py-2 mx-auto dark:bg-stone-950 bg-stone-50 dark:text-stone-50 text-stone-950">
-      <link rel="stylesheet" href="/static/font/inter/inter.css" />
+      <link
+        rel="stylesheet"
+        href="https://cdn.xeiaso.net/file/christine-static/static/font/inter/inter.css"
+      />
       <div className="font-['Inter']">
         <Header active="/" />
         <Hero />
@@ -474,4 +520,4 @@ export default function Alvis() {
       </div>
     </body>
   );
-};
\ No newline at end of file
+}