feat: link to comet clash on hero

og-images.config.js

@@ -6,7 +6,7 @@ import { html, styled } from 'og-images-generator'
 /**
  * Get the TTF font for the specified family and axes values. Adapted from [this GitHub issue comment](https://github.com/vercel/satori/issues/162#issuecomment-2058182646).
  *
- * TL;DR: satori, the library which generates the image, doesn't support variable fonts, so we do some shenanigans to get Google Fonts to serve a non-variable font and then use that.
+ * NOTE: satori, the library which generates the image, doesn't support variable fonts, so we do some shenanigans to get Google Fonts to serve a non-variable font and then use that.
  * @param {string} family The font family
  * @param {string[]} axes The axes of the font
  * @param {number[]} value The values of the axes
@@ -18,13 +18,13 @@ async function getTtfFont(family, axes, value) {
   const familyParam = `${axes.join(',')}@${value.join(',')}`
 
   // Get css style sheet with user agent Mozilla/5.0 Firefox/1.0 to ensure non-variable TTF is returned
-  const cssCall = await fetch(`https://fonts.googleapis.com/css2?family=${family}:${familyParam}&display=swap`, {
+  const cssRes = await fetch(`https://fonts.googleapis.com/css2?family=${family}:${familyParam}&display=swap`, {
     headers: {
       'User-Agent': 'Mozilla/5.0 Firefox/1.0',
     },
   })
 
-  const css = await cssCall.text()
+  const css = await cssRes.text()
   const ttfUrl = css.match(/url\(([^)]+)\)/)?.[1]
 
   return await fetch(ttfUrl).then(res => res.arrayBuffer())

src/components/home/hero.astro

@@ -23,13 +23,34 @@ const VexGroup = await getImage({
       padding: '4rem',
     }}
   >
-    <h1>
-      <!-- TODO: i don't like this, should discuss or figure smth else out -->
-      We are Comet Robotics,<br /> the leading robotics club at UT Dallas.
-    </h1>
-    <a style={{ fontWeight: 500 }} id="to-summary" href="#to-summary">
-      scroll to learn more
-      <span style={{ marginLeft: '1rem' }}> &darr;</span>
+  <h1>
+    <!-- TODO: i don't like this, should discuss or figure smth else out -->
+    We are Comet Robotics,<br /> the leading robotics club at UT Dallas.
+  </h1>
+  <a style={{ fontWeight: 500 }} id="to-summary" href="#to-summary">
+    scroll to learn more
+    <span style={{ marginLeft: '1rem' }}> &darr;</span>
+  </a>
+      <a
+      class="no-decoration scale-hover"
+      href="https://clash.cometrobotics.org"
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        backgroundColor: 'var(--primary)',
+        color: 'white',
+        padding: '1.5rem',
+        borderRadius: '1.33rem',
+        fontSize: '0.8rem',
+        boxShadow: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)',
+        maxWidth: '40rem',
+      }}
+    >
+      <h3 class="font-unbounded">Comet Clash</h3>
+      <p style="padding: 0.25rem 0;">
+        Watch 48 combat robots fight to the death in our inaugural Comet Clash competition, hosted in the ECSW building at UT Dallas on November 23rd!
+      </p>
+      <h3 class="font-mashine">Learn More &rarr;</h3>
     </a>
   </div>
 </div>

src/data.ts

@@ -130,10 +130,10 @@ const footerLinks: LinkType[] = [
     name: 'Discord',
     href: discordInvite,
   },
-  // {
-  //   name: 'Wiki',
-  //   href: '#',
-  // },
+  {
+    name: 'Wiki',
+    href: 'https://wiki.cometrobotics.org',
+  },
   {
     name: 'Source Code',
     href: websiteRepo,

src/styles/App.css

@@ -103,4 +103,20 @@ html {
 
 .no-decoration {
   text-decoration: none;
+}
+
+.scale-hover:hover {
+  transform: scale(1);
+}
+
+.scale-hover:active {
+  transform: scale(0.98);
+}
+
+.scale-hover {
+  transition-duration: 0.1s;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transform: scale(0.97);
+  transform-origin: left;
 }