chore: destructure components; issues with process.env

app.config.timestamp_1731367606051.js

@@ -0,0 +1,31 @@
+// app.config.js
+import { defineConfig } from "@solidjs/start/config";
+import tailwindcss from "tailwindcss";
+import { config } from "vinxi/plugins/config";
+var app_config_default = defineConfig({
+  server: {
+    compatibilityDate: "2024-11-11",
+    preset: "cloudflare_module",
+    sourceMap: "inline",
+    rollupConfig: {
+      external: ["__STATIC_CONTENT_MANIFEST", "node:async_hooks"]
+    }
+    // prerender: {
+    //   crawlLinks: true
+    // }
+  },
+  vite: {
+    plugins: [
+      config("tailwind", {
+        css: {
+          postcss: {
+            plugins: [tailwindcss]
+          }
+        }
+      })
+    ]
+  }
+});
+export {
+  app_config_default as default
+};

src/app.jsx

@@ -1,92 +1,25 @@
 // @refresh reload
-import { Show, Suspense, createMemo, createResource } from 'solid-js'
-import { A } from '@solidjs/router'
+import { Suspense } from 'solid-js'
 import { MetaProvider, Title } from '@solidjs/meta'
 import { Router } from '@solidjs/router'
 import { FileRoutes } from '@solidjs/start/router'
 import { Header } from './components/Header'
 import { Footer } from './components/Footer'
-import announcementQuery from '~/graphql/announcement.query.js'
-import graphql from '~/server/graphql.js'
 
 import './app.css'
 
-const destructBody = (body) => {
-  const urlRegex = new RegExp(/(((https?:\/\/)|(www\.))[^\s]+)/g)
-
-  const [content, link] = body.split('\r\n\r\n')
-  const [text] = link.split(':')
-  const href = link.match(urlRegex)[0]
-
-  return {
-    content: content,
-    linkText: text,
-    linkHref: href
-  }
-}
-
-function Announcement(props) {
-  const announcement = createMemo(() =>
-    destructBody(props.announcement().repository.discussions.nodes[0].body)
-  )
-
-  return (
-    <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
-      <div
-        class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
-        aria-hidden="true"
-      >
-        <div
-          class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
-          style={{
-            'clip-path':
-              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)'
-          }}
-        />
-      </div>
-      <div
-        class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
-        aria-hidden="true"
-      >
-        <div
-          class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
-          style={{
-            'clip-path':
-              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)'
-          }}
-        />
-      </div>
-      <p class="text-sm leading-6 text-gray-900">
-        {announcement()?.content}&nbsp;
-        <A
-          href={announcement()?.linkHref}
-          class="whitespace-nowrap font-semibold"
-        >
-          {announcement()?.linkText}&nbsp;
-          <span aria-hidden="true">&rarr;</span>
-        </A>
-      </p>
-      <div class="flex flex-1 justify-end" />
-    </div>
-  )
-}
-
 export default function App() {
-  const [announcement] = createResource(async () => {
-    return graphql(announcementQuery.gql, announcementQuery.vars)
-  })
-
   return (
     <Router
       root={(props) => (
         <MetaProvider>
           <div class="h-full bg-zinc-50 dark:bg-black">
             <Title>BoulderJS - Home</Title>
-            <Suspense>
+            {/* <Suspense>
               <Show when={announcement()}>
                 <Announcement announcement={announcement} />
               </Show>
-            </Suspense>
+            </Suspense> */}
             <Header />
             <Suspense>{props.children}</Suspense>
             <Footer />

src/components/Announcement.jsx

@@ -0,0 +1,59 @@
+const destructBody = (body) => {
+  const urlRegex = new RegExp(/(((https?:\/\/)|(www\.))[^\s]+)/g)
+
+  const [content, link] = body.split('\r\n\r\n')
+  const [text] = link.split(':')
+  const href = link.match(urlRegex)[0]
+
+  return {
+    content: content,
+    linkText: text,
+    linkHref: href
+  }
+}
+
+function Announcement(props) {
+  const announcement = createMemo(() =>
+    destructBody(props.announcement().repository.discussions.nodes[0].body)
+  )
+
+  return (
+    <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
+      <div
+        class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        aria-hidden="true"
+      >
+        <div
+          class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          style={{
+            'clip-path':
+              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)'
+          }}
+        />
+      </div>
+      <div
+        class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        aria-hidden="true"
+      >
+        <div
+          class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          style={{
+            'clip-path':
+              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)'
+          }}
+        />
+      </div>
+      <p class="text-sm leading-6 text-gray-900">
+        {announcement()?.content}&nbsp;
+        <A
+          href={announcement()?.linkHref}
+          class="whitespace-nowrap font-semibold"
+        >
+          {announcement()?.linkText}&nbsp;
+          <span aria-hidden="true">&rarr;</span>
+        </A>
+      </p>
+      <div class="flex flex-1 justify-end" />
+    </div>
+  )
+}

src/components/Atomic.jsx

@@ -5,6 +5,7 @@ export const H1 = (props) => {
     </h1>
   )
 }
+
 export const H2 = (props) => {
   return (
     <h2 class="text-3xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-3xl">

src/components/EventBox.jsx

@@ -0,0 +1,60 @@
+function EventBox(props) {
+  const [local] = splitProps(props, ['event'])
+  const issueData = createMemo(() => local.event.parsed)
+
+  return (
+    <article class="flex flex-col items-start justify-between">
+      <A href={`/events/${local.event.number}`}>
+        <div class="relative w-full">
+          <Switch>
+            <Match when={issueData()['featured-image']?.images?.[0]}>
+              <img
+                src={issueData()['featured-image']?.images?.[0]?.src}
+                alt={issueData()['featured-image']?.images?.[0]?.alt}
+                class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
+              />
+            </Match>
+            <Match when={!issueData()['featured-image']?.images?.[0]}>
+              <img
+                src="/assets/boulderjs-logo.png"
+                alt="BoulderJS Logo"
+                class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-contain sm:aspect-[2/1] lg:aspect-[3/2]"
+              />
+            </Match>
+          </Switch>
+          <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
+        </div>
+      </A>
+      <div class="max-w-xl">
+        <div class="mt-8 flex items-center gap-x-4 text-xs">
+          <time dateTime={issueData().date.date} class="text-gray-500">
+            {issueData().date.date}
+          </time>
+        </div>
+        <div class="group relative">
+          <H3>
+            <a href={local.event.href}>
+              <span class="absolute inset-0" />
+              <A href={`/events/${local.event.number}`}>{local.event.title}</A>
+            </a>
+          </H3>
+        </div>
+        {/* <div class="relative mt-8 flex items-center gap-x-4">
+          <img
+            src={props.event.author.imageUrl}
+            alt=""
+            class="h-10 w-10 rounded-full bg-gray-100"
+          />
+          <div class="text-sm leading-6">
+            <p class="font-semibold text-gray-900">
+              <a href={props.event.author.href}>
+                <span class="absolute inset-0" />
+                {props.event.author.name}
+              </a>
+            </p>
+          </div>
+        </div> */}
+      </div>
+    </article>
+  )
+}

src/components/Stats.jsx

@@ -0,0 +1,54 @@
+function Stats(props) {
+  const stats = createMemo(() => {
+    return [
+      {
+        name: 'GitHub Organization Members',
+        value: props.organization()?.organization?.membersWithRole?.totalCount
+      },
+      {
+        name: 'Users on Discord',
+        value: '300+'
+        // TODO: get this via api
+      },
+      {
+        name: 'Events',
+        value: props.organization()?.repository?.issues?.totalCount
+      },
+      {
+        name: 'Boulder',
+        value: '100%'
+      }
+    ]
+  })
+
+  return (
+    <div class="bg-white py-24 sm:py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-none">
+          <div class="text-center">
+            <H2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              Your Tech Community in Boulder
+            </H2>
+            {/* <p class="mt-4 text-lg leading-8 text-gray-600">
+              Lorem ipsum dolor sit amet consect adipisicing possimus.
+            </p> */}
+          </div>
+          <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <For each={stats()}>
+              {(stat) => (
+                <div class="flex flex-col bg-gray-400/5 p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600">
+                    {stat.name}
+                  </dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">
+                    {stat.value}
+                  </dd>
+                </div>
+              )}
+            </For>
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}