cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add site search

Browse source
This commit is contained in:
Cory Dransfeldt 2023-07-04 17:07:06 -07:00
parent dd98b01bbd
commit 74699d618c
No known key found for this signature in database
8 changed files with 129 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/_includes/base.liquid
View file

@ -57,6 +57,10 @@
{% jsonLd meta, type, tags %}
</script>
<script defer data-domain="coryd.dev" src="https://coryd.dev/js/script.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<noscript>
<style>.client-side {display:none}</style>
</noscript>
</head>
<body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800">
{{ content }}

7
src/_includes/icons/search.liquid Normal file
View file

@ -0,0 +1,7 @@
<a href="/search" title="Search posts">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/search/' %} active{% endif %}">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
</a>

3
src/_includes/nav.liquid
View file

@ -9,6 +9,9 @@
<li class="mr-6">
{% include "icons/tags.liquid" %}
</li>
<li class="mr-6 client-side">
{% include "icons/search.liquid" %}
</li>
<li>
{% include "icons/rss.liquid" %}
</li>

4
src/_includes/post.liquid
View file

@ -2,8 +2,8 @@
layout: main
---
{% include "header.liquid" %}
<article class="h-entry">
<h2 class="p-name text-xl md:text-2xl font-black leading-tight dark:text-gray-200 pt-8">{{ title }}</h2>
<article class="h-entry" data-pagefind-body>
<h2 class="p-name text-xl md:text-2xl font-black leading-tight dark:text-gray-200 pt-8" data-pagefind-meta="title">{{ title }}</h2>
<span class="p-author h-card hidden">{{ site.title }}</span>
<time class="mt-2 mb-6 block text-sm dt-published" datetime="{{ date }}">{{ date | readableDate }}</time>
<div class="p-summary hidden">{{ post_excerpt | markdown }}</div>

43
src/search.md Normal file
View file

@ -0,0 +1,43 @@
---
layout: default
title: Search
meta:
site:
name: 'Cory Dransfeldt'
description: "I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies."
url: https://coryd.dev
logo:
src: https://coryd.dev/assets/img/logo.webp
width: 2000
height: 2000
language: en-US
title: 'Cory Dransfeldt • Search'
description: "Search everything I've posted on my site."
url: https://coryd.dev/search
image:
src: https://coryd.dev/assets/img/avatar.webp
---
<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
<style>
:root {
--pagefind-ui-font: InterVariable, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--pagefind-ui-primary: #374151;
--pagefind-ui-text: #374151;
}
@media (prefers-color-scheme: dark) {
:root {
--pagefind-ui-primary: #e5e7eb;
--pagefind-ui-text: #e5e7eb;
--pagefind-ui-background: #152028;
--pagefind-ui-border: #152028;
--pagefind-ui-tag: #152028;
}
}
</style>
<div id="search" class="search"></div>
<script src="/_pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#search', showImages: false });"></script>
<script>
document.querySelector('#search').addEventListener('focusout', (e) => {
plausible('Search', { props: { query: e.target.value }})
})
</script>