chore: remove utility classes + cleanup
This commit is contained in:
parent
4302f61f8c
commit
8a8de24caa
30 changed files with 247 additions and 214 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "24.8.7",
|
||||
"version": "24.9.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "24.8.7",
|
||||
"version": "24.9.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.5.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "24.8.7",
|
||||
"version": "24.9.0",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -83,6 +83,13 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--gray-dark);
|
||||
|
|
@ -98,7 +105,7 @@ code {
|
|||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
p:not(.flex-centered):not(.banner p) > svg {
|
||||
p:not(.banner p) > svg {
|
||||
margin-bottom: var(--inline-margin-bottom);
|
||||
}
|
||||
|
||||
|
|
@ -289,6 +296,7 @@ h6 {
|
|||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
margin: var(--spacing-xl) 0 var(--spacing-lg);
|
||||
line-height: var(--line-height-sm);
|
||||
|
||||
|
|
@ -470,22 +478,32 @@ article {
|
|||
}
|
||||
|
||||
footer {
|
||||
& p:first-of-type {
|
||||
margin: var(--spacing-3xl) 0 var(--spacing-lg);
|
||||
& .updated {
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
margin: var(--spacing-3xl) 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
& nav {
|
||||
&.social,
|
||||
&.sub-pages {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.social {
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
width: 100%;
|
||||
|
||||
& svg {
|
||||
margin-top: 0;
|
||||
& .icon > span,
|
||||
& .active > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
& .active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -510,7 +528,6 @@ footer {
|
|||
article {
|
||||
& h3 {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& time {
|
||||
|
|
@ -540,29 +557,3 @@ ul, ol {
|
|||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* utilities */
|
||||
.highlight-text {
|
||||
color: var(--color-lightest);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.text-centered {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.flex-centered {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
display: grid;
|
||||
gap: var(--spacing-md);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin-top: var(--spacing-2xl);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
|
|
|||
|
|
@ -15,9 +15,6 @@ button,
|
|||
border-radius: var(--border-radius-full);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ input[type="text"],
|
|||
input[type="email"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-base);
|
||||
font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
|
|
@ -47,7 +45,7 @@ select:focus-within {
|
|||
|
||||
select {
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--text-color);
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
|
|
@ -55,12 +53,17 @@ select {
|
|||
|
||||
.search__form {
|
||||
margin-top: 0;
|
||||
|
||||
& .search__form--input::-webkit-search-cancel-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.search__results {
|
||||
margin: 0 0 var(--spacing-base);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: none;
|
||||
|
||||
& li {
|
||||
margin: var(--spacing-sm) 0;
|
||||
|
|
|
|||
|
|
@ -66,9 +66,7 @@
|
|||
height: 100%;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
transition-property: border-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
transition: border-color var(--transition-duration-default) var(--transition-ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,8 +102,8 @@
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
.menu-primary {
|
||||
menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
& .menu-primary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style: none;
|
||||
|
|
@ -20,9 +25,9 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button-container {
|
||||
& .menu-button-container {
|
||||
display: none;
|
||||
outline: none;
|
||||
margin-left: var(--spacing-md);
|
||||
|
|
@ -43,9 +48,9 @@
|
|||
&:active svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
& #menu-toggle {
|
||||
display: none;
|
||||
|
||||
&:checked + .menu-button-container {
|
||||
|
|
@ -67,9 +72,9 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.menu-primary {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -138,4 +143,5 @@
|
|||
width: var(--sizing-svg-base);
|
||||
height: var(--sizing-svg-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: #000000b3;
|
||||
background: var(--gray-overlay);
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& button {
|
||||
|
|
@ -11,6 +14,11 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
& p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& span.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
height: var(--sizing-lg);
|
||||
width: 100%;
|
||||
background-color: #d9dee499;
|
||||
background-color: var(--gray-background-transparent);
|
||||
border-radius: var(--border-radius-full);
|
||||
|
||||
& .progress-bar {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
#tracks-recent,
|
||||
#tracks-window,
|
||||
#tracks-recent ~ .tracks-recent,
|
||||
#tracks-window ~ .tracks-window {
|
||||
display: none;
|
||||
|
|
@ -8,9 +10,9 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ [for="tracks-recent"],
|
||||
input[id="tracks-window"] ~ [for="tracks-window"] {
|
||||
margin-bottom: var(--spacing-base);
|
||||
input[id="tracks-recent"] ~ .tracks-recent,
|
||||
input[id="tracks-window"] ~ .tracks-window {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@font-face {
|
||||
font-family: MonoLisa;
|
||||
src: url('/assets/fonts/MonoLisa.min.woff2') format('woff2');
|
||||
font-display: optional
|
||||
font-display: optional;
|
||||
}
|
||||
|
|
@ -30,6 +30,10 @@
|
|||
--gray-lighter: var(--gray-100);
|
||||
--gray-dark: var(--gray-950);
|
||||
|
||||
/* semi-transparent overlay color */
|
||||
--gray-overlay: #000000b3;
|
||||
--gray-background-transparent: #d9dee499;
|
||||
|
||||
/* base theme */
|
||||
--color-lightest: var(--gray-50);
|
||||
--color-darkest: var(--gray-1000);
|
||||
|
|
|
|||
|
|
@ -7,9 +7,12 @@
|
|||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
& .interior {
|
||||
display: flex;
|
||||
|
|
@ -21,3 +24,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
& label.hp,
|
||||
& label > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
height: calc(var(--sizing-3xl) * 5);
|
||||
resize: none;
|
||||
|
|
|
|||
|
|
@ -126,6 +126,8 @@ a:active > .watching.hero::after {
|
|||
}
|
||||
|
||||
.subheader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
.webring-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& .webring-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& a {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="avatar-wrapper flex-centered">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="interior">
|
||||
<img
|
||||
srcset="
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<footer{% unless updated %} style="margin-top:var(--spacing-3xl)"{% endunless %}>
|
||||
{%- if updated -%}
|
||||
<p class="text-centered"><em>This page was last updated on {{ updated | strip }}.</em></p>
|
||||
<p class="updated"><em>This page was last updated on {{ updated | strip }}.</em></p>
|
||||
{%- endif -%}
|
||||
<nav aria-label="Social icons" class="social flex-centered justify-centered text-centered">
|
||||
<nav aria-label="Social icons" class="social">
|
||||
{%- for link in nav.footer_icons -%}
|
||||
{% render "partials/nav/linked-icon.liquid", title:link.title, url:link.permalink, icon:link.icon %}
|
||||
{% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
|
||||
{%- endfor -%}
|
||||
</nav>
|
||||
<nav aria-label="Secondary site navigation" class="sub-pages flex-centered justify-centered text-centered">
|
||||
<nav aria-label="Secondary site navigation" class="sub-pages">
|
||||
{%- for link in nav.footer_text -%}
|
||||
{% render "partials/nav/link.liquid", page:page, title:link.title, url:link.permalink, icon:link.icon %}
|
||||
{% if not forloop.last %}<span>/</span>{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{%- assign posts = postData | filterByPostType: postType %}
|
||||
<div class="article-widget-wrapper">
|
||||
<div class="section-header-wrapper">
|
||||
<h2 class="section-header posts flex-centered">
|
||||
<h2 class="section-header posts">
|
||||
{% tablericon icon title %}
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
|
@ -14,8 +14,6 @@
|
|||
<a href="{{ post.slug }}">
|
||||
<h3>{{ post.title }}</h3>
|
||||
</a>
|
||||
<span class="p-author h-card hidden">{{ globals.site_name }}</span>
|
||||
<div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
|
||||
{{ post.description | normalize_whitespace | markdown | truncatewords: 50 }}
|
||||
</article>
|
||||
{%- endfor -%}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="meta-text">
|
||||
{%- if item.type == 'movie' -%}
|
||||
<div class="header">{{ item.title }}</div>
|
||||
<div class="subheader flex-centered">
|
||||
<div class="subheader">
|
||||
{%- if item.rating -%}
|
||||
<span class="rating"> {{ item.rating }}</span>
|
||||
{%- endif -%}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
{%- else -%}
|
||||
<div class="header">{{ item.name }}</div>
|
||||
<div class="subheader flex-centered">({{ item.year }})</div>
|
||||
<div class="subheader">({{ item.year }})</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- assign loadingStrategy = loading | default: 'lazy' -%}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="flex-centered">
|
||||
<menu>
|
||||
<input id="menu-toggle" type="checkbox" aria-hidden="true" />
|
||||
<label class="menu-button-container" for="menu-toggle" tabindex="0">
|
||||
<div class="menu-closed" aria-hidden="true">{% tablericon "menu-2" "Menu closed" %}</div>
|
||||
|
|
@ -10,4 +10,4 @@
|
|||
{%- endfor -%}
|
||||
</ul>
|
||||
{% render "partials/nav/theme-toggle.liquid" %}
|
||||
</div>
|
||||
</menu>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script type="module" src="/assets/scripts/components/select-pagination.js?v={% appVersion %}"></script>
|
||||
<nav aria-label="Pagination" class="pagination flex-centered">
|
||||
<nav aria-label="Pagination" class="pagination">
|
||||
{%- if pagination.href.previous -%}
|
||||
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
|
||||
{% tablericon "arrow-left" "Previous" %}
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
{%- endfor -%}
|
||||
</select>
|
||||
<noscript>
|
||||
<div class="text-centered">
|
||||
<p>
|
||||
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
|
||||
</div>
|
||||
</p>
|
||||
</noscript>
|
||||
</select-pagination>
|
||||
{%- if pagination.href.next -%}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="webring-wrapper">
|
||||
<a href="https://cs.sjoy.lol">
|
||||
<h3 class="text-centered">CSS JOY Webring</h3>
|
||||
</a>
|
||||
<div class="webring-navigation flex-centered justify-centered">
|
||||
<h3>
|
||||
<a href="https://cs.sjoy.lol">CSS JOY Webring</a>
|
||||
</h3>
|
||||
<div class="webring-navigation">
|
||||
<a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
|
||||
{% tablericon "arrow-left" "Previous site" %}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<div class="webring-wrapper">
|
||||
<div class="flex-centered justify-centered">
|
||||
<img
|
||||
srcset="
|
||||
https://cdn.coryd.dev/{{ logo }}?class=w200&type=webp 200w,
|
||||
|
|
@ -18,11 +17,10 @@
|
|||
width="200"
|
||||
height="169"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="text-centered">The Claw Webring</h3>
|
||||
<div class="flex-centered justify-centered">
|
||||
<h3>The Claw Webring</h3>
|
||||
<p>
|
||||
<strong>
|
||||
<a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
|
||||
</strong>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -26,7 +26,7 @@ schema: music-index
|
|||
</a>
|
||||
</h3>
|
||||
{% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
|
||||
<div class="section-header-wrapper flex-centered">
|
||||
<div class="section-header-wrapper">
|
||||
<h3 id="tracks" class="section-header">
|
||||
<a class="icon-link" href="/music/tracks/this-week">
|
||||
{% tablericon "playlist" "Tracks" %}
|
||||
|
|
@ -35,8 +35,8 @@ schema: music-index
|
|||
</h3>
|
||||
</div>
|
||||
<div class="track-display">
|
||||
<input id="tracks-recent" name="track-options" class="hidden" type="radio" aria-hidden="true" checked />
|
||||
<input id="tracks-window" name="track-options" class="hidden" type="radio" aria-hidden="true" />
|
||||
<input id="tracks-recent" name="track-options" type="radio" aria-hidden="true" checked />
|
||||
<input id="tracks-window" name="track-options" type="radio" aria-hidden="true" />
|
||||
<label for="tracks-recent" class="button" data-toggle="tracks-recent">Recent</label>
|
||||
<label for="tracks-window" class="button" data-toggle="tracks-window">This week</label>
|
||||
<div class="tracks-recent">
|
||||
|
|
@ -47,7 +47,7 @@ schema: music-index
|
|||
</div>
|
||||
</div>
|
||||
{% if albumReleases.size > 0 %}
|
||||
<h3 id="album-releases" class="section-header flex-centered">
|
||||
<h3 id="album-releases" class="section-header">
|
||||
{% tablericon "calendar-time" "Anticipated albums" %}
|
||||
Anticipated albums
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ permalink: /about.html
|
|||
{%- assign artist = music.week.artists | first -%}
|
||||
{%- assign book = books.all | bookStatus: 'started' | reverse | first -%}
|
||||
{%- assign show = tv.recentlyWatched | first -%}
|
||||
<div class="avatar-wrapper flex-centered">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="interior">
|
||||
{%- capture about_alt -%}{{ globals.site_name }} - image by @joel@fosstodon.org{%- endcapture -%}
|
||||
<img
|
||||
|
|
@ -25,7 +25,7 @@ permalink: /about.html
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-centered">Hi, I'm Cory</h2>
|
||||
<h2 class="about-title">Hi, I'm Cory</h2>
|
||||
|
||||
<strong class="highlight-text">I'm a software developer based in Camarillo, California</strong>. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, [music](https://coryd.dev/music), [writing](https://coryd.dev/posts), [reading](https://coryd.dev/books), [tv](https://coryd.dev/watching#tv) and [movies](https://coryd.dev/watching#movies). Lately I've been listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>, reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.
|
||||
|
||||
|
|
|
|||
|
|
@ -16,20 +16,18 @@ description: How to contact me.
|
|||
</ul>
|
||||
</div>
|
||||
<form data-form="contact" class="column" method="POST" action="https://coryd.dev/api/contact" name="contact">
|
||||
<label class="hidden">
|
||||
<label class="hp">
|
||||
Don't fill this out if you're human: <input type="text" name="hp_name">
|
||||
</label>
|
||||
<label>
|
||||
<span class="hidden">Name</span>
|
||||
<span>Name</span>
|
||||
<input type="text" name="name" placeholder="Name" required />
|
||||
</label>
|
||||
<label>
|
||||
<span class="hidden">Email</span>
|
||||
<span>Email</span>
|
||||
<input type="email" name="email" placeholder="Email" required />
|
||||
</label>
|
||||
<textarea name="message" placeholder="Message" required></textarea>
|
||||
<div class="flex-centered justify-centered">
|
||||
<button type="submit">Send message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -31,9 +31,13 @@ permalink: /search.html
|
|||
$input.addEventListener('input', () => {
|
||||
const query = $input.value
|
||||
const results = (query.length > 1) ? getSearchResults(query) : []
|
||||
if (query === '') renderSearchResults([])
|
||||
if (query.length === 0) {
|
||||
// Clear the results when input is empty
|
||||
renderSearchResults([])
|
||||
} else {
|
||||
if (query.length > 1 && window?.umami) umami.trackEvent('Search', { query: query })
|
||||
renderSearchResults(results)
|
||||
renderSearchResults(results, query)
|
||||
}
|
||||
})
|
||||
|
||||
$input.addEventListener('keydown', (event) => {
|
||||
|
|
@ -41,15 +45,20 @@ permalink: /search.html
|
|||
})
|
||||
|
||||
const getSearchResults = (query) => miniSearch.search(query, { prefix: true, fuzzy: 0.2, boost: { title: 2 } }).map(({ id }) => resultsById[id])
|
||||
const renderSearchResults = (results) => {
|
||||
|
||||
const renderSearchResults = (results, query = '') => {
|
||||
if (results.length > 0) {
|
||||
$results.innerHTML = results.map(({ title, url }) => {
|
||||
return `<li class="search__results--result"><a href="${url}">${title}</a></li>`
|
||||
}).join('\n')
|
||||
|
||||
if (results.length > 0) {
|
||||
$results.classList.remove('hidden')
|
||||
$results.style.display = 'block'
|
||||
} else {
|
||||
$results.classList.add('hidden')
|
||||
if (query.trim() !== '') {
|
||||
$results.innerHTML = `<li class="search__results--no-results">No results found for "${query}"</li>`
|
||||
} else {
|
||||
$results.innerHTML = ''
|
||||
}
|
||||
$results.style.display = 'block'
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
|
@ -64,4 +73,4 @@ permalink: /search.html
|
|||
<input class="search__form--input" placeholder="Search" type="search" name="q" autocomplete="off" autofocus>
|
||||
<input class="search__form--fallback" type="hidden" placeholder="Type away..." name="sites" value="coryd.dev">
|
||||
</form>
|
||||
<ul class="search__results hidden"></ul>
|
||||
<ul class="search__results"></ul>
|
||||
Reference in a new issue