Initial add of search box to title bar

Author: webstackdev

_TODO.md

@@ -90,6 +90,31 @@ if (window.matchMedia) {
 }
 ```
 
+## Home Page Ordering
+
+- Hero
+- About Preview ("Building the Future of Software Development")
+- Featured Services
+- (Todo) Turn-Key Backstage IDP Implementation
+- Testimonials
+- Latest Articles
+- Primary CTA ("Ready to Transform Your Development Process?") with links to /contact and /services
+- Newsletter Signup
+- Skills/Technologies Preview
+
+Maybe change the "ready..." in the hero to "get in touch..."
+
+## Search Box
+
+1. Need to make sure we have an action to update the search index on content changes
+2. Need to get the "x" back to clear search terms
+3. Maybe need a 1px border
+4. Hide the nav link items on desktop and the company name is hidden on mobile when the search box is out
+5. Make sure state is being kept in nanostores
+6. What happens when search query exceeds size of search box? Drop down to second line?
+7. Need to improve quality of search results in drop down box - maybe some description text for each item
+8. Style drop down box of search results from search box
+
 ## Image generation models
 
 - dall-e (OpenAI)
@@ -110,10 +135,6 @@ High Resolution: Seedream 4.0 is capable of generating native high-resolution im
 
 Complex Text and Instruction Following: The model demonstrates an enhanced understanding of complex semantic prompts and excels in rendering dense and accurate text within the generated images, a common weakness in other AI image models.
 
-## Move Tags Page
-
-The /tags route is really just the /articles route but better. We should redirect from /tags to /articles, and fix the breadcrumb so that it goes to /articles if someone clicks on the /tags part.
-
 ## Content Instructions
 
 We have generated detailed outlines for each of the MDX proposed articles we have in src/content/articles. It's time to write our articles. Review ./CONTENT.md for the goals and voice to use in our website. Each outline includes various components we use on our site that can be incorporated into the final article but do not have to be included if they don't fit into the content well or are excessive.

src/components/Animations/Hero/index.astro

@@ -65,9 +65,9 @@ const { pretitle, benefits } = Astro.props as Props
           <Button href="/about" variant="success" text="Read My Story" />
           <a
             href="/contact"
-            class="py-3 text-primary font-bold underline underline-offset-4 decoration-2 decoration-dotted decoration-primary transition-colors hover:text-content-offset hover:decoration-content-offset focus-visible:text-content-offset focus-visible:underline focus-visible:decoration-2 focus-visible:decoration-dotted focus-visible:decoration-content-offset"
+            class="sm:ml-6 py-3 text-primary font-bold underline underline-offset-4 decoration-2 decoration-dotted decoration-primary transition-colors hover:text-content-offset hover:decoration-content-offset focus-visible:text-content-offset focus-visible:underline focus-visible:decoration-2 focus-visible:decoration-dotted focus-visible:decoration-content-offset"
           >
-            Get in Touch →
+            Get in Touch <span aria-hidden="true" class="md:text-3xl">→</span>
           </a>
         </div>
       </div>

src/components/Header/__tests__/index.spec.ts

@@ -50,6 +50,11 @@ describe('Header (Astro)', () => {
       expect(themeSvg?.getAttribute('aria-hidden')).toBe('true')
       expect(themeSvg?.getAttribute('focusable')).toBe('false')
       expect(themeSvg?.querySelector('title')).toBeNull()
+
+      const searchToggleButton = window.document.querySelector('button[data-search-toggle]')
+      expect(searchToggleButton).toBeTruthy()
+      expect(searchToggleButton?.getAttribute('aria-label')).toBe('Search')
+      expect(searchToggleButton?.getAttribute('aria-expanded')).toBe('false')
     })
   })
 })

src/components/Header/index.astro

@@ -1,6 +1,7 @@
 ---
 import Brand from '@components/Brand/index.astro'
 import Navigation from '@components/Navigation/index.astro'
+import SearchBar from '@components/Search/SearchBar/index.astro'
 import ThemeButton from '@components/ThemePicker/ThemeButton.astro'
 
 export interface Props {
@@ -17,17 +18,26 @@ const { path } = Astro.props
     --header-icon-size: calc(3.5em * 0.75);
     --header-icon-svg-size: calc(var(--header-icon-size) * 0.7);
     --circle-stroke: calc(var(--header-icon-size) * 2 * 3.1416);
+    --header-search-panel-width: 18rem;
+    --header-search-panel-overhang: calc(var(--header-icon-size) + 0.5rem);
+    --header-search-panel-width-open: calc(var(--header-search-panel-width) + var(--header-search-panel-overhang));
+    --header-search-panel-right: calc(-1 * var(--header-search-panel-overhang));
   }
 
   @media (width >= 640px) {
     :root {
       --header-icon-size: calc(3.5em * 0.85);
+      --header-search-panel-width: 20rem;
     }
   }
 
   @media (width >= 1024px) {
     :root {
       --header-icon-size: calc(3.5em);
+      --header-search-panel-width: 24rem;
+      --header-search-panel-overhang: 0px;
+      --header-search-panel-width-open: var(--header-search-panel-width);
+      --header-search-panel-right: 0px;
     }
   }
 
@@ -79,8 +89,16 @@ const { path } = Astro.props
   {/* Theme picker toggle button to show modal */}
   <span
     id="header__theme-icon"
-    class="order-3 lg:order-4 ml-2 mr-2 lg:mr-0 shrink-0 w-(--header-icon-size) relative z-(--z-content-overlay)"
+    class="order-3 lg:order-4 ml-2 mr-2 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay)"
   >
     <ThemeButton />
   </span>
+
+  {/* Header search icon that expands left into a search panel */}
+  <span
+    id="header__search-icon"
+    class="order-4 lg:order-5 mr-2 lg:mr-0 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-content-overlay) lg:z-(--z-nav)"
+  >
+    <SearchBar variant="header" />
+  </span>
 </header>

src/components/Navigation/NavToggle.astro

@@ -10,7 +10,7 @@ import styles from './navToggle.module.css'
   data-testid="nav-toggle"
   class:list={[
     'nav-toggle-btn',
-    'lg:hidden inline-flex items-center justify-center rounded-full border-0 bg-primary text-content-inverse transition-colors duration-150 ease-linear hover:bg-spotlight focus:bg-primary-offset focus:outline-none',
+    'lg:hidden inline-flex items-center justify-center w-(--header-icon-size) h-(--header-icon-size) leading-none rounded-full border-0 bg-primary text-content-inverse transition-colors duration-150 ease-linear hover:bg-spotlight focus:bg-primary-offset focus:outline-none',
     styles.button,
   ]}
   type="button"

src/components/Navigation/index.astro

@@ -17,7 +17,10 @@ const { path } = Astro.props
       <Menu path={path} />
     </span>
     {/* Mobile navigation toggle button to show menu on full-page splash screen */}
-    <span id="header__nav-icon" class="order-4 block shrink-0 relative z-(--z-mobile-close-btn) lg:hidden">
+    <span
+      id="header__nav-icon"
+      class="order-5 block shrink-0 w-(--header-icon-size) h-(--header-icon-size) relative z-(--z-mobile-close-btn) lg:hidden"
+    >
       <NavToggle />
     </span>
   </div>

src/components/Search/SearchBar/client/__fixtures__/header.fixture.astro

@@ -0,0 +1,7 @@
+---
+import SearchBar from '@components/Search/SearchBar/index.astro'
+
+const { placeholder = 'Search…', initialQuery = '' } = Astro.props
+---
+
+<SearchBar variant="header" placeholder={placeholder} initialQuery={initialQuery} />

src/components/Search/SearchBar/client/__tests__/index.spec.ts

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import SearchBarFixture from '@components/Search/SearchBar/client/__fixtures__/index.fixture.astro'
+import SearchBarHeaderFixture from '@components/Search/SearchBar/client/__fixtures__/header.fixture.astro'
 import type { SearchBarElement as SearchBarElementInstance } from '../index'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { executeRender } from '@test/unit/helpers/litRuntime'
@@ -60,6 +61,28 @@ describe('SearchBar web component', () => {
     })
   }
 
+  const runHeaderComponentRender = async (
+    assertion: (_context: {
+      element: SearchBarElementInstance
+      window: Window & typeof globalThis
+    }) => Promise<void> | void
+  ): Promise<void> => {
+    await executeRender<SearchBarModule>({
+      container,
+      component: SearchBarHeaderFixture,
+      moduleSpecifier: '@components/Search/SearchBar/client/index',
+      waitForReady: async (element: SearchBarElementInstance) => {
+        await element.updateComplete
+      },
+      assert: async ({ element, window }) => {
+        if (!window) {
+          throw new Error('Missing JSDOM window for SearchBar test.')
+        }
+        await assertion({ element, window })
+      },
+    })
+  }
+
   it('hides results when query is too short', async () => {
     await runComponentRender(async ({ element, window }) => {
       const input = element.querySelector('[data-search-input]') as HTMLInputElement
@@ -108,4 +131,26 @@ describe('SearchBar web component', () => {
 
     vi.useRealTimers()
   })
+
+  it('toggles open and closes on Escape in header variant', async () => {
+    await runHeaderComponentRender(async ({ element, window }) => {
+      const toggleBtn = element.querySelector('[data-search-toggle]') as HTMLButtonElement
+      const input = element.querySelector('[data-search-input]') as HTMLInputElement
+
+      expect(toggleBtn.getAttribute('aria-expanded')).toBe('false')
+      expect(input.classList.contains('hidden')).toBe(true)
+
+      toggleBtn.click()
+      await flushMicrotasks()
+
+      expect(toggleBtn.getAttribute('aria-expanded')).toBe('true')
+      expect(input.classList.contains('hidden')).toBe(false)
+
+      input.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      await flushMicrotasks()
+
+      expect(toggleBtn.getAttribute('aria-expanded')).toBe('false')
+      expect(input.classList.contains('hidden')).toBe(true)
+    })
+  })
 })