Search dialog tweaks #65

juancampa · 2025-01-03T00:53:54Z

Improvements to search UI by tweaking the CSS
Added some term weights to improve ranking
Upgraded pagefind

I had to copy the entire Search.astro component from starlight to configure pagefind. It still needs more tweaking but they are working on improving the ranking system so we should keep an eye on this milesone: https://github.com/CloudCannon/pagefind/milestone/6

The excerpts generated by pagefind are not very good which is why the text appear nonsensical in some cases. I'll ask if there's any work planned on this front, if not, it could be something we contribute to the project: https://github.com/CloudCannon/pagefind

height · 2025-01-03T00:53:56Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

vercel · 2025-01-03T00:53:58Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 4, 2025 10:21pm

pmillspaugh

Nice! Works well when I tested.

Some design thoughts:

I lean toward removing border-radius to make things look more Membrane-y
Maybe also the highlighted results should be grayscale?
The Starlight icons seem like a mismatch visually

pmillspaugh · 2025-01-03T21:56:00Z

src/styles/base.css

+  }
+}
+
+@media (min-width: 50rem) {


Why the rem breakpoint?

It's the break point that starlight uses. I copied it from their CSS. I'll add a comment!

pmillspaugh · 2025-01-03T22:01:02Z

src/components/Search.astro

+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke-width='0.5' stroke-dasharray='1 1' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+      0% 0% / 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke-width='0.5' stroke-dasharray='1 1' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+      0% 0% / 100% no-repeat;
+  }
+  #starlight__search .pagefind-ui__result-nested:last-child::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke-width='0.5' stroke-dasharray='1 1' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke-width='0.5' stroke-dasharray='1 1' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");


I think the dashed lines look a bit funky, especially near corners. Just my two cents 🤷‍♂️

I agree. It makes it look like it's curved or the bottom line is crooked. I was trying to prevent these gaps from happening (from the prod docs):

I just found a way to close those gaps and made them solid again 👍

pmillspaugh · 2025-01-03T22:02:18Z

src/styles/base.css

+@media (min-width: 50rem) {
+  dialog[aria-label="Search"] {
+      margin: 4rem auto auto;
+      border-radius: .5rem;


What do you think of 0 border-radius? Feels more Membrane-y to me

Fixed. This CSS was copied from the original, didn't notice it was there

juancampa · 2025-01-03T23:00:03Z

Maybe also the highlighted results should be grayscale?

I tried this initially but it made it look noisy and hard to parse visually

iamseeley

Looks great! Left a comment about a potential style change 🤘

src/components/Search.astro

iamseeley · 2025-01-04T18:29:51Z

src/components/Search.astro

+      width: 90%;
+      max-width: 40rem;
+      height: max-content;
+      min-height: 15rem;


Kinda weird they set a min-height here? It looks strange when you open the search dialog and there's so much blank space. I think this looks better:

Suggested change

min-height: 15rem;

min-height: 0 !important;

I thought the same thing 👍

Co-authored-by: Thomas Seeley <104278845+iamseeley@users.noreply.github.com>

juancampa · 2025-01-04T22:27:10Z

Thank you guys for the review. Unfortunately, pagefind's search results are not very good at the moment, weights don't do much and excerpts are poorly chosen and poorly formatted, especially around tables. The good news is that they are working on it.

In the meantime I've applied to Algolia's DocSearch which is the other search provided integrated into starlight. If we get approved we might switch to that. It comes with its own UI so hopefully is customizable too.

juancampa added 2 commits January 3, 2025 16:28

Tweak styles

c2d8e75

Improvements to search UI, added some term weights, upgraded pagefind

3239b6b

juancampa force-pushed the juan/improve-search branch from 57e115d to 3239b6b Compare January 3, 2025 21:28

vercel bot deployed to Preview January 3, 2025 21:29 View deployment

juancampa requested review from iamseeley and pmillspaugh January 3, 2025 21:39

juancampa marked this pull request as ready for review January 3, 2025 21:39

Add link to pagefind config

0fbf5a4

vercel bot deployed to Preview January 3, 2025 22:05 View deployment

pmillspaugh approved these changes Jan 3, 2025

View reviewed changes

Address Pete's feedback

9c41f0c

vercel bot deployed to Preview January 3, 2025 23:03 View deployment

iamseeley approved these changes Jan 4, 2025

View reviewed changes

src/components/Search.astro Outdated Show resolved Hide resolved

iamseeley reviewed Jan 4, 2025

View reviewed changes

Update src/components/Search.astro

879826b

Co-authored-by: Thomas Seeley <104278845+iamseeley@users.noreply.github.com>

vercel bot deployed to Preview January 4, 2025 22:21 View deployment

juancampa merged commit ef80b7a into main Jan 4, 2025
2 checks passed

juancampa deleted the juan/improve-search branch January 4, 2025 22:27

juancampa mentioned this pull request Jan 7, 2025

Test Algolia DocSearch #67

Draft

Search dialog tweaks #65

Search dialog tweaks #65

Uh oh!

Conversation

juancampa commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

height bot commented Jan 3, 2025

Uh oh!

vercel bot commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pmillspaugh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancampa commented Jan 3, 2025

Uh oh!

iamseeley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancampa commented Jan 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

juancampa commented Jan 3, 2025 •

edited

Loading

vercel bot commented Jan 3, 2025 •

edited

Loading