refactor search

README.md

@@ -23,8 +23,9 @@
   - [🕸 Related Posts](#-related-posts)
   - [📝 GitHub changelog rendering](#-github-changelog-rendering)
   - [🌗 Theme Switcher](#-theme-switcher)
-  - [`redirect_from`](#redirect_from)
   - [💎 SVG assets as components](#-svg-assets-as-components)
+  - [`redirect_from`](#redirect_from)
+  - [RSS \& JSON feeds](#rss--json-feeds)
 - [✨ Development](#-development)
   - [🔮 Linting](#-linting)
   - [👩‍🔬 Testing](#-testing)
@@ -133,6 +134,16 @@ If you want to know how, have a look at the respective components:
 - [`src/components/ThemeSwitch/`](src/components/ThemeSwitch/)
 - [`src/stores/theme.ts`](src/stores/theme.ts)
 
+### 💎 SVG assets as components
+
+All SVG assets under `src/images/` and from select iconset dependencies are converted to Astro components before building the site. Compiled components are placed under `src/images/icons/` and all include the cleaned SVGs as inline HTML.
+
+All SVGs can then be imported from `@images/icons` in all Astro components.
+
+If you want to know how this works, have a look at the respective files:
+
+- [`scripts/create-icons/`](scripts/create-icons/)
+
 ### `redirect_from`
 
 Still a remnant of the old [Jekyll](https://jekyllrb.com) days, which survived in [gatsby-redirect-from](/gatsby-redirect-from/) and now works in Astro. For all post slugs defined in a `redirect_from` frontmatter key, redirects will be put in place by Astro.
@@ -143,15 +154,7 @@ If you want to know how, have a look at the respective files:
 
 - [`scripts/redirect-from.ts`](scripts/redirect-from.ts)
 
-### 💎 SVG assets as components
-
-All SVG assets under `src/images/` and from select iconset dependencies are converted to Astro components before building the site. Compiled components are placed under `src/images/icons/` and all include the cleaned SVGs as inline HTML.
-
-All SVGs can then be imported from `@images/icons` in all Astro components.
-
-If you want to know how this works, have a look at the respective files:
-
-- [`scripts/create-icons/`](scripts/create-icons/)
+### RSS & JSON feeds
 
 ## ✨ Development
 
@@ -204,6 +207,7 @@ npm run build && npm run preview
 npm run test:e2e
 npm run test:e2e -- --ui
 npm run test:e2e -- path/to/file.spec.ts.
+npm run test:e2e -- --update-snapshots
 ```
 
 ## 🎈 Content creation helpers

package.json

@@ -12,9 +12,8 @@
     "preview": "astro preview",
     "prebuild": "run-p --silent --continue-on-error create:symlinks create:icons create:redirects move:downloads",
     "test:unit": "npm run lint && npm run vitest",
-    "test:e2e": "npm run playwright",
+    "test:e2e": "playwright test --config './test/playwright.config.ts'",
     "vitest": "vitest run --config './test/vitest.config.ts' --coverage --silent",
-    "playwright": "playwright test --config './test/playwright.config.ts'",
     "lint": "run-p --silent lint:js lint:css lint:md",
     "lint:js": "eslint --ignore-path .gitignore --ext .ts,.tsx,.astro,.mjs,.js,.cjs .",
     "lint:css": "stylelint --config '.config/.stylelintrc.json' 'src/**/*.css'",
@@ -42,8 +41,8 @@
     "fast-exif": "^2.0.1",
     "feather-icons": "^4.29.1",
     "fraction.js": "^4.3.6",
-    "framer-motion": "^10.16.4",
     "fuse.js": "^6.6.2",
+    "motion": "^10.16.2",
     "nanostores": "^0.9.3",
     "pigeon-maps": "^0.21.3",
     "react": "^18.2.0",

src/components/Input/index.module.css

@@ -8,7 +8,7 @@
   color: var(--input-color);
   background-color: var(--input-bg);
   background-image: none;
-  border: var(--stroke-width) solid transparent;
+  border: var(--stroke-width) solid var(--border-color);
   border-radius: var(--border-radius);
   box-shadow: none;
   transition: all ease-in-out 0.15s;

src/components/Search/Results/Empty.tsx

@@ -14,7 +14,7 @@ const SearchResultsEmpty = ({
       <p className={styles.emptyMessageText}>
         {query.length > 0 && results?.length === 0
           ? 'No results found'
-          : 'Awaiting your input'}
+          : 'Awaiting your input fellow web wanderer'}
       </p>
     </header>
   </div>

src/components/Search/Results/index.module.css

@@ -10,7 +10,7 @@
 }
 
 .results {
-  composes: container from '@layouts/Base/index.module.css';
+  composes: content from '@layouts/Base/index.module.css';
   padding: var(--spacer) calc(var(--spacer) / 2);
   margin-bottom: 0;
   display: flex;
@@ -25,6 +25,14 @@
   }
 }
 
+.post {
+  composes: post from '@components/PostTeaser/index.module.css';
+}
+
+.title {
+  composes: title from '@components/PostTeaser/index.module.css';
+}
+
 .results li {
   display: block;
   flex: 0 0 48%;
@@ -45,19 +53,6 @@
   margin-bottom: 0;
 }
 
-.results a {
-  display: block;
-}
-
-.results a > div {
-  margin-bottom: 0;
-}
-
-.results a:hover h4,
-.results a:focus h4 {
-  color: var(--link-color);
-}
-
 @keyframes fadein {
   0% {
     opacity: 0;

src/components/Search/Results/index.tsx

@@ -17,9 +17,9 @@ function SearchResultsPure({
         <ul className={styles.results}>
           {results.map((post) => (
             <li key={post.slug}>
-              <h3>
-                <a href={post.slug}>{post.data.title}</a>
-              </h3>
+              <a className={styles.post} href={post.slug}>
+                <h3 className={styles.title}>{post.data.title}</h3>
+              </a>
             </li>
           ))}
         </ul>

src/components/Search/Search.module.css

@@ -2,12 +2,10 @@
   position: absolute;
   left: calc(var(--spacer) / 2);
   right: calc(var(--spacer) / 2);
-  top: calc(var(--spacer) / 4);
+  top: calc(var(--spacer) / 3);
   z-index: 10;
-}
-
-.search input {
-  width: 100%;
+  transform: translate3d(0, 80px, 0);
+  will-change: transform;
 }
 
 @media (min-width: 40rem) {
@@ -17,30 +15,27 @@
   }
 }
 
-.appear,
-.enter {
-  opacity: 0.01;
-  transform: translate3d(0, -100px, 0);
+.searchInput {
+  width: 100%;
 }
 
-.appearActive,
-.enterActive {
-  opacity: 1;
-  transition: 0.2s ease-out;
-  transform: translate3d(0, 0, 0);
+.searchInput::-webkit-search-cancel-button {
+  display: none;
 }
 
-.exit {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
+.searchInputClose {
+  position: absolute;
+  right: calc(var(--spacer) / 2);
+  top: calc(var(--spacer) / 2);
 }
 
-.exitActive {
-  opacity: 0.01;
-  transition: 0.2s ease-in;
-  transform: translate3d(0, -100px, 0);
+.searchInputClose svg {
+  stroke: var(--brand-grey-light);
+  width: 24px;
+  height: 24px;
 }
 
-:global(.hasSearchOpen) {
-  overflow: hidden;
+.searchInputClose:hover svg,
+.searchInputClose:focus svg {
+  stroke: var(--link-color);
 }