Update alex lint rules, fix X.com icon in footer

Author: webstackdev

.alexrc

@@ -1,5 +1,8 @@
 {
   "allow": [
+    "color",
+    "colors",
+    "failure",
     "hostesses-hosts"
   ]
 }

src/components/Footer/client/__tests__/index.spec.ts

@@ -45,9 +45,9 @@ describe('FooterElement web component', () => {
       const hireMeAnchor = element.querySelector<HTMLAnchorElement>('#page-footer__hire-me-anchor')
 
       expect(hireMeAnchor).toBeInstanceOf(HTMLAnchorElement)
-      expect(hireMeAnchor?.innerHTML).toBe('Available September, 2024. Hire Me Now')
+      expect(hireMeAnchor?.innerHTML).toBe('Available October, 2024. Hire Me Now')
       expect(hireMeAnchor?.getAttribute('aria-label')).toBe(
-        'Available September, 2024. Hire Me Now'
+        'Available October, 2024. Hire Me Now'
       )
       expect(hireMeAnchor?.style.display).toBe('inline-block')
     })

src/components/Footer/client/index.ts

@@ -54,9 +54,7 @@ export class FooterElement extends LitElement {
   }
 
   private static getMonthName(date: Date): string {
-    const monthDate = new Date(date)
-    monthDate.setMonth(monthDate.getMonth() - 1)
-    return monthDate.toLocaleString('en-US', { month: 'long' })
+    return date.toLocaleString('en-US', { month: 'long' })
   }
 }
 

src/components/Footer/footer.module.css

@@ -31,6 +31,33 @@
   stroke: var(--color-secondary);
 }
 
+.footerSocialBlurbText {
+  color: var(--color-content);
+  text-decoration: none;
+}
+
+.footerSocialLink:hover .footerSocialBlurbText,
+.footerSocialLink:focus-visible .footerSocialBlurbText {
+  color: var(--color-content);
+}
+
+.footerSocialLink :global([data-icon='x'] path) {
+  stroke: none;
+}
+
+.footerSocialLink :global([data-icon='x'] .xTile) {
+  fill: var(--color-content);
+}
+
+.footerSocialLink :global([data-icon='x'] .xGlyph) {
+  fill: var(--color-content-inverse);
+}
+
+.footerSocialLink:hover :global([data-icon='x'] .xTile),
+.footerSocialLink:focus-visible :global([data-icon='x'] .xTile) {
+  fill: var(--color-secondary);
+}
+
 .footerSocialBlurb {
   margin-top: 0.25rem;
 }

src/components/Footer/footer.module.css.d.ts

@@ -5,9 +5,11 @@ declare const styles: {
   readonly footerSocialList: string
   readonly footerSocialItem: string
   readonly footerSocialLink: string
+  readonly footerSocialHeaderRow: string
   readonly footerSocialIcon: string
   readonly footerSocialPlatform: string
   readonly footerSocialBlurb: string
+  readonly footerSocialBlurbText: string
   readonly footerBottomRow: string
   readonly footerBottomGrid: string
   readonly footerBottomPrimary: string

src/components/Footer/index.astro

@@ -74,7 +74,7 @@ const year = new Date().getFullYear()
           id="page-footer__hire-me-anchor"
           class:list={[
             styles.footerHireMeAnchor,
-            "hidden uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary after:content-['>']",
+            "hidden uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary after:ml-1 after:content-['>']",
           ]}
           aria-label="Available Now. Hire Me"
         >
@@ -84,7 +84,7 @@ const year = new Date().getFullYear()
 
       {/* Page footer Social Share links */}
       <nav class={styles.footerSocial} aria-label="Social links">
-        <ul class:list={[styles.footerSocialList, 'm-0 p-0 list-none']}>
+        <ul class:list={[styles.footerSocialList, 'mt-4 sm:m-0 p-0 list-none']}>
           {
             contactData.company.social
               .sort((a, b) => a.order - b.order)
@@ -96,19 +96,23 @@ const year = new Date().getFullYear()
                     rel="me"
                     class:list={[
                       styles.footerSocialLink,
-                      'flex items-baseline uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary',
+                      'group flex flex-col hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary',
                     ]}
                   >
-                    <span class={styles.footerSocialIcon}>
-                      <Icon name={social.iconName} variant="inherit" />
+                    <span class:list={[styles.footerSocialHeaderRow, 'flex items-baseline']}>
+                      <span class={styles.footerSocialIcon}>
+                        <Icon name={social.iconName} variant="inherit" />
+                      </span>
+                      <span class:list={[styles.footerSocialPlatform, 'ml-2 mt-4 uppercase']}>
+                        {social.displayName}
+                      </span>
                     </span>
-                    <span class:list={[styles.footerSocialPlatform, 'ml-2 mt-4']}>
-                      {social.displayName}
+                    <span class:list={[styles.footerSocialBlurb, 'font-serif leading-tight']}>
+                      <span class={styles.footerSocialBlurbText}>
+                        {social.blurb}
+                      </span>
                     </span>
                   </a>
-                  <div class:list={[styles.footerSocialBlurb, 'font-serif leading-tight']}>
-                    {social.blurb}
-                  </div>
                 </li>
               ))
           }

src/content.config.ts

@@ -147,20 +147,6 @@ const testFixtureCollection = defineCollection({
  * =================================================================================
  */
 
-/**
- * About
- */
-const aboutCollection = defineCollection({
-  loader: glob({ pattern, base: './src/content/about' }),
-  schema: withBreadcrumbTitleWarning(
-    z.object({
-      id: z.string(),
-      title: z.string(),
-    }),
-    'about'
-  ),
-})
-
 /**
  * Authors
  */
@@ -239,7 +225,6 @@ const testimonialCollection = defineCollection({
  */
 
 export const collections = {
-  about: aboutCollection,
   articles: articlesCollection,
   authors: authorsCollection,
   caseStudies: caseStudiesCollection,