joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add search

Browse source
This commit is contained in:
Joshua Seigler 2025-06-11 18:11:49 -04:00
parent 36554b5b7b
commit bb3af95d19
5 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/animations.js
View file

@ -14,7 +14,7 @@ function addEffect({ target }) {
target == null || target == null ||
!target["matches"] || !target["matches"] ||
!target.matches( !target.matches(
"a[href],.nav-toggle-button,button,input,label:not(:has(input))", "a[href],.nav-toggle-button,button,input[type='radio']",
) )
) { ) {
return; return;

3
site/_includes/-header.njk
View file

@ -49,10 +49,9 @@
<a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a> <a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
<a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a> <a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
<a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a> <a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
<button id="search" type="button"><svg style="height:0.75em;margin-right:0.5ch" viewBox="0 0 12 13"><g stroke-width="1.5" stroke="currentcolor" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>search</button> <a class="{{ 'nav-active' if '/search' in page.url }}" href="{{ "/search/" | url }}">/search</a>
</div> </div>
</nav> </nav>
{% include "-search.njk" %}
<h1>{{ tag | capitalize if tag else title }}</h1> <h1>{{ tag | capitalize if tag else title }}</h1>
<div class="header-meta"> <div class="header-meta">
{%- if author -%} {%- if author -%}

4
site/_includes/-search.njk
View file

@ -1,4 +0,0 @@
<div class="searchCard">
<div id="searchbox"></div>
<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false });"></script>
</div>

37
site/_includes/css/site.css
View file

@ -113,7 +113,7 @@ body {
a { a {
color: inherit; color: inherit;
} }
a[href], button#search { a[href] {
appearance: none; appearance: none;
text-decoration-line: underline; text-decoration-line: underline;
box-decoration-break: clone; box-decoration-break: clone;
@ -121,16 +121,8 @@ a[href], button#search {
margin: -0.1em; margin: -0.1em;
position: relative; position: relative;
} }
button#search { :is(a, nav label):hover,
background: transparent; :is(a, nav label):focus-visible,
border: none;
color: inherit;
font-family: inherit;
font-size: inherit;
margin-left: auto;
}
:is(a, nav label, button#search):hover,
:is(a, nav label, button#search):focus-visible,
nav label:has(input:focus-visible), nav label:has(input:focus-visible),
nav label:has(input:checked) { nav label:has(input:checked) {
outline: none; outline: none;
@ -146,7 +138,7 @@ nav label:has(input:checked) {
0 0 1rem var(--c-accent); 0 0 1rem var(--c-accent);
} }
} }
:is(a[href], button, button#search, nav label):focus-visible, :is(a[href], button, nav label):focus-visible,
nav label:has(input:focus-visible) { nav label:has(input:focus-visible) {
z-index: 1; z-index: 1;
outline: 2px solid var(--c-text-dark); outline: 2px solid var(--c-text-dark);
@ -575,6 +567,7 @@ body .isso-input-wrapper label {
} }
body .isso-input-wrapper input, body .isso-input-wrapper input,
input[type='text'],
body .isso-textarea, body .isso-textarea,
body .isso-preview { body .isso-preview {
color: inherit; color: inherit;
@ -607,7 +600,7 @@ body .isso-preview {
var(--c-text-background-light) 20px var(--c-text-background-light) 20px
); );
} }
body .isso-post-action > input { body .isso-post-action > input, button {
color: inherit; color: inherit;
background-color: var(--c-text-background-light); background-color: var(--c-text-background-light);
font-size: 1rem; font-size: 1rem;
@ -674,3 +667,21 @@ body .isso-post-action {
); );
animation: 1s ease normal forwards ripple; animation: 1s ease normal forwards ripple;
} }
.pagefind-ui__form {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr min-content;
}
.pagefind-ui__search-input {
margin-right: 0.5rem;
grid-column-start: 0;
grid-column-end: span 1;
}
.pagefind-ui__drawer {
grid-column-start: 0;
grid-column-end: span 2;
width: 100%;
}
.pagefind-ui__result-excerpt {
margin: 0.5rem 0;
}

9
site/pages/search.njk Normal file
View file

@ -0,0 +1,9 @@
---
layout: base.njk
permalink: search/index.html
title: Search
---
<div class="searchCard">
<div id="searchbox"></div>
<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
</div>