diff --git a/.eleventy.js b/.eleventy.js index d32c0228..7b238c15 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -11,7 +11,7 @@ import filters from './config/filters/index.js' import { slugifyString } from './config/utils/index.js' import { svgToJpeg } from './config/events/index.js' import { minifyJsComponents } from './config/events/index.js' -import { tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js' +import { searchIndex, tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js' import { img } from './config/shortcodes/index.js' import { execSync } from 'child_process' @@ -56,7 +56,7 @@ export default async function (eleventyConfig) { 'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/components/mastodon-post.js' }) eleventyConfig.addPassthroughCopy({ - 'node_modules/@zachleat/pagefind-search/pagefind-search.js': 'assets/scripts/components/pagefind-search.js', + 'node_modules/minisearch/dist/umd/index.js': 'assets/scripts/components/minisearch.js', }) eleventyConfig.addPassthroughCopy({ 'node_modules/@cdransf/api-text/api-text.js': 'assets/scripts/components/api-text.js', @@ -82,6 +82,7 @@ export default async function (eleventyConfig) { }) // collections + eleventyConfig.addCollection('searchIndex', searchIndex) eleventyConfig.addCollection('tagList', tagList) eleventyConfig.addCollection('tagMap', tagMap) eleventyConfig.addCollection('postStats', postStats) @@ -137,9 +138,6 @@ export default async function (eleventyConfig) { // events eleventyConfig.on('afterBuild', svgToJpeg) eleventyConfig.on('afterBuild', minifyJsComponents) - eleventyConfig.on('eleventy.after', () => { - execSync(`npx pagefind --site _site --glob "**/*.html"`, { encoding: 'utf-8' }) - }) return { passthroughFileCopy: true, diff --git a/config/collections/index.js b/config/collections/index.js index 80c7e864..1bcc13c3 100644 --- a/config/collections/index.js +++ b/config/collections/index.js @@ -2,6 +2,40 @@ import { DateTime } from 'luxon' import tagAliases from '../data/tag-aliases.js' import { makeYearStats, processPostFile } from './utils.js' +export const searchIndex = (collection) => { + const searchIndex = [] + let id = 0 + const collectionData = collection.getAll()[0] + const posts = collectionData.data.collections.posts + const links = collectionData.data.links + if (posts) { + posts.forEach((post) => { + const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` + searchIndex.push({ + id, + url, + title: `📝: ${post.data.title}`, + text: post.data.description, + tags: post.data.tags.filter((tag) => tag !== 'posts'), + }) + id++; + }) + } + if (links) { + links.forEach((link) => { + searchIndex.push({ + id, + url: link.url, + title: `🔗: ${link.title}`, + text: link.summary, + tags: link.tags, + }) + id++; + }) + } + return searchIndex +} + export const tagList = (collection) => { const tagsSet = new Set() collection.getAll().forEach((item) => { @@ -15,45 +49,45 @@ export const tagList = (collection) => { export const tagMap = (collection) => { const tags = {} - collection.getAll().forEach((item) => { - if (item.data.collections.posts) { - item.data.collections.posts.forEach((post) => { - const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` - const tagString = [...new Set(post.data.tags.map((tag) => tagAliases[tag.toLowerCase()]))] - .join(' ') - .trim() - if (tagString) tags[url] = tagString.replace(/\s+/g,' ') - }) - } - if (item.data.links) { - item.data.links.forEach((link) => { - const tagString = link['tags'] - .map((tag) => tagAliases[tag.toLowerCase()]) - .join(' ') - .trim() - if (tagString) tags[link.url] = tagString.replace(/\s+/g,' ') - }) - } - }) + const collectionData = collection.getAll()[0] + const posts = collectionData.data.collections.posts + const links = collectionData.data.links + if (posts) { + posts.forEach((post) => { + const url = post.url.includes('http') ? post.url : `https://coryd.dev${post.url}` + const tagString = [...new Set(post.data.tags.map((tag) => tagAliases[tag.toLowerCase()]))] + .join(' ') + .trim() + if (tagString) tags[url] = tagString.replace(/\s+/g,' ') + }) + } + if (links) { + links.forEach((link) => { + const tagString = link['tags'] + .map((tag) => tagAliases[tag.toLowerCase()]) + .join(' ') + .trim() + if (tagString) tags[link.url] = tagString.replace(/\s+/g,' ') + }) + } return tags } -export const tagsSortedByCount = (collectionApi) => { +export const tagsSortedByCount = (collection) => { const tagStats = {}; - const posts = collectionApi.getFilteredByGlob('src/posts/**/*.*'); - posts.forEach((post) => { - post.data.tags.forEach((tag) => { + collection.getFilteredByGlob('src/posts/**/*.*').forEach((item) => { + if (!item.data.tags) return; + item.data.tags + .filter((tag) => !['posts', 'all', 'politics', 'net neutrality'].includes(tag)) + .forEach((tag) => { if (!tagStats[tag]) tagStats[tag] = 1; if (tagStats[tag]) tagStats[tag] = tagStats[tag] + 1; }); }); - const deletedTags = ['posts', 'politics', 'net neutrality']; - deletedTags.forEach(tag => delete tagStats[tag]); - const tagStatsArr = Object.entries(tagStats); - return tagStatsArr.sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`); + return Object.entries(tagStats).sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`); } -export const postStats = (collectionApi) => { +export const postStats = (collection) => { const oneDayMilliseconds = 1000 * 60 * 60 * 24 const statsObject = { avgDays: 0, @@ -87,7 +121,7 @@ export const postStats = (collectionApi) => { let highPostCount = 0 let yearProgress = 0 - const posts = collectionApi.getFilteredByGlob('src/posts/**/*.*').sort((a, b) => { + const posts = collection.getFilteredByGlob('src/posts/**/*.*').sort((a, b) => { return a.date - b.date }) diff --git a/package-lock.json b/package-lock.json index ed9bc2d6..09f08bd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,20 +1,20 @@ { "name": "coryd.dev", - "version": "7.10.7", + "version": "7.11.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "7.10.7", + "version": "7.11.11", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.2.2", "@cdransf/theme-toggle": "^1.2.3", "@daviddarnes/mastodon-post": "^1.1.1", "@remy/webmention": "^1.5.0", - "@zachleat/pagefind-search": "^1.0.3", "@zachleat/webcare-webshare": "^1.0.3", + "minisearch": "^6.3.0", "terser": "^5.29.1", "youtube-video-element": "^1.0.0" }, @@ -2892,11 +2892,6 @@ "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==", "dev": true }, - "node_modules/@zachleat/pagefind-search": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@zachleat/pagefind-search/-/pagefind-search-1.0.3.tgz", - "integrity": "sha512-WKBkvx6gOSgbPcAKjhT1NLT8OXxrSKhgUUhWIdp1DfG3C8l13Cg3+mSC1ZMOEBVwUKRrwBYElJVju/Te/NrHAA==" - }, "node_modules/@zachleat/webcare-webshare": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@zachleat/webcare-webshare/-/webcare-webshare-1.0.3.tgz", @@ -5596,6 +5591,11 @@ "node": ">=8" } }, + "node_modules/minisearch": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-6.3.0.tgz", + "integrity": "sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==" + }, "node_modules/mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", diff --git a/package.json b/package.json index f8a9b0dc..0b8fbb70 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,13 @@ { "name": "coryd.dev", - "version": "7.11.11", + "version": "8.0.0", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { "start": "eleventy --serve", "start:search": "run-s build:11ty index:local", "start:quick": "eleventy --serve --incremental --ignore-initial", - "build": "ELEVENTY_PRODUCTION=true eleventy && npm run build:index", - "build:index": "npx -y pagefind --site _site", - "index:serve": "npx -y pagefind --site _site --serve", + "build": "ELEVENTY_PRODUCTION=true eleventy", "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve", "postbuild": "webmention _site/feeds/posts --limit 1 --send && webmention _site/feeds/links --limit 1 --send" }, @@ -25,8 +23,8 @@ "@cdransf/theme-toggle": "^1.2.3", "@daviddarnes/mastodon-post": "^1.1.1", "@remy/webmention": "^1.5.0", - "@zachleat/pagefind-search": "^1.0.3", "@zachleat/webcare-webshare": "^1.0.3", + "minisearch": "^6.3.0", "terser": "^5.29.1", "youtube-video-element": "^1.0.0" }, diff --git a/src/_includes/partials/tags.liquid b/src/_includes/partials/tags.liquid index f83849f1..02717202 100644 --- a/src/_includes/partials/tags.liquid +++ b/src/_includes/partials/tags.liquid @@ -1,6 +1,6 @@ {% assign filteredTags = tags | filterTags %} {% for tag in filteredTags limit: 10 %} - {{ tag | formatTag }} + {{ tag | formatTag }} {% endfor %} \ No newline at end of file diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid index e808efe5..06797c79 100644 --- a/src/_includes/post.liquid +++ b/src/_includes/post.liquid @@ -10,7 +10,7 @@ schema: blog {% endcapture %}
-
+
{% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
-

{{ title }}

+

{{ title }}

{% render "partials/tags.liquid", tags:tags %}
diff --git a/src/api/search.liquid b/src/api/search.liquid new file mode 100644 index 00000000..9fee56c0 --- /dev/null +++ b/src/api/search.liquid @@ -0,0 +1,6 @@ +--- +layout: null +eleventyExcludeFromCollections: true +permalink: /api/search +--- +{{ collections.searchIndex | json }} \ No newline at end of file diff --git a/src/assets/scripts/search.js b/src/assets/scripts/search.js new file mode 100644 index 00000000..0d6ab9c5 --- /dev/null +++ b/src/assets/scripts/search.js @@ -0,0 +1,47 @@ +(() => { + const miniSearch = new MiniSearch({ + fields: ['title', 'text', 'tags'] + }) + + const $form = document.querySelector('.search__form') + const $input = document.querySelector('.search__form--input') + const $fallback = document.querySelector('.search__form--fallback') + const $results = document.querySelector('.search__results') + + // remove no-js fallbacks + $form.removeAttribute('action') + $form.removeAttribute('method') + $fallback.remove() + + let resultsById = {} + + // fetch index + const results = fetch('/api/search').then(response => response.json()) + .then((results) => { + resultsById = results.reduce((byId, result) => { + byId[result.id] = result + return byId + }, {}) + return miniSearch.addAll(results) + }) + + $input.addEventListener('input', (event) => { + const query = $input.value + const results = (query.length > 1) ? getSearchResults(query) : [] + if (query === '') renderSearchResults([]) + renderSearchResults(results) + }) + + const getSearchResults = (query) => miniSearch.search(query, {}).map(({ id }) => resultsById[id]) + const renderSearchResults = (results) => { + $results.innerHTML = results.map(({ title, url }) => { + return `
  • ${title}
    • ` + }).join('\n') + + if (results.length > 0) { + $results.classList.remove('hidden') + } else { + $results.classList.add('hidden') + } + } +})(); \ No newline at end of file diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 987025b8..c1029b1a 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -1,26 +1,23 @@ ::placeholder { - color: var(--text-color) !important; - opacity: .5 !important; + color: var(--text-color); + opacity: .5; } input[type="text"], input[type="email"], input[type="search"], textarea { - /* necessary for pagefind overrides */ - font-family: var(--font-sans) !important; - color: var(--text-color) !important; - background-color: var(--background-color) !important; - border: 1px solid var(--accent-color) !important; + font-family: var(--font-sans); + color: var(--text-color); + background-color: var(--background-color); + border: 1px solid var(--accent-color); padding: var(--sizing-sm); - font-size: var(--font-size-base) !important; - width: 100% !important; - border-radius: var(--rounded-md) !important; - /* necessary for pagefind overrides */ - + font-size: var(--font-size-base); + width: 100%; + border-radius: var(--rounded-md); outline: none; margin-bottom: var(--sizing-base); - font-weight: var(--font-weight-base) !important; + font-weight: var(--font-weight-base); line-height: var(--line-height-base); transition-property: border-color; transition-timing-function: var(--transition-ease-in-out); @@ -31,10 +28,10 @@ input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, textarea:focus { - border: 1px solid var(--accent-color-hover) !important; + border: 1px solid var(--accent-color-hover); } -button:not(.theme__toggle, .share, .pagefind-ui__search-clear) { +button:not(.theme__toggle, .share) { border-radius: var(--rounded-full); padding: var(--sizing-sm) var(--sizing-lg); margin: 0 var(--sizing-xs) var(--sizing-md) 0; @@ -52,11 +49,22 @@ button:not(.theme__toggle, .share, .pagefind-ui__search-clear) { transition-property: background-color; } -button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover, -button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active, -button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus { +button:not(.theme__toggle, .share):hover, +button:not(.theme__toggle, .share):active, +button:not(.theme__toggle, .share):focus { color: var(--color-lightest); - background-color: var(--accent-color-hover) !important; + background-color: var(--accent-color-hover); transition-timing-function: var(--transition-ease-in-out); transition-duration: var(--transition-duration-default); +} + +.search__results { + margin-top: 0; + padding: 0; + list-style: none; +} + +.search__results li { + margin-top: var(--sizing-sm); + margin-bottom: var(--sizing-sm); } \ No newline at end of file diff --git a/src/assets/styles/components/pagefind.css b/src/assets/styles/components/pagefind.css deleted file mode 100644 index 5724dad0..00000000 --- a/src/assets/styles/components/pagefind.css +++ /dev/null @@ -1,115 +0,0 @@ -.pagefind-ui { - margin-bottom: var(--sizing-base); - --pagefind-ui-primary: var(--accent-color); - --pagefind-ui-text: var(--text-color); - --pagefind-ui-background: var(--color-lightest); - --pagefind-ui-border: var(--gray-light); - --pagefind-ui-tag: var(--gray-light); - --pagefind-ui-border-width: 1px; - --pagefind-ui-border-radius: 0; - --pagefind-ui-image-border-radius: 0; - --pagefind-ui-image-box-ratio: 3 / 2; - --pagefind-ui-font: var(--font-sans); -} - -.pagefind-ui, -.pagefind-ui__filter-name, -.pagefind-ui__filter-label, -.pagefind-ui__result-excerpt, -.pagefind-ui__message, -.pagefind-ui__button { - font-size: var(--font-size-base) !important; -} - -.pagefind-ui__result-excerpt { - word-break: break-word !important; -} - -.pagefind-ui__form:before { - opacity: 1 !important; - top: calc(19px * var(--pagefind-ui-scale)) !important; -} - -.pagefind-ui__result-title { - color: var(--accent-color); - font-size: var(--font-size-2xl); - line-height: var(--line-height-2xl); - font-weight: var(--font-weight-heavy); - margin: 0; - transition-property: color; - transition-timing-function: var(--transition-ease-in-out); - transition-duration: var(--transition-duration-default); -} - -.pagefind-ui__result-title:hover, -.pagefind-ui__result-title:focus, -.pagefind-ui__result-title:active { - color: var(--accent-color-hover); -} - -.pagefind-ui__results-area { - margin-bottom: var(--sizing-base); -} - -:is(input[type="text"], input[type="search"]).pagefind-ui__search-input { - padding-left: 2.375rem !important; - padding-top: 0 !important; - padding-bottom: 0 !important; - height: 42px !important; -} - -.pagefind-ui__search-clear { - color: var(--text-color); - background-color: transparent !important; -} - -.pagefind-ui__search-clear:hover, -.pagefind-ui__search-clear:focus, -.pagefind-ui__search-clear:active { - color: var(--accent-color-hover) !important; -} - -.pagefind-ui__result-title { - margin-bottom: var(--sizing-xs) !important; -} - -.pagefind-ui__result-link { - font-size: var(--font-size-2xl) !important; - color: var(--accent-color) !important; -} - -.pagefind-ui__result-link:hover, -.pagefind-ui__result-link:focus, -.pagefind-ui__result-link:active { - color: var(--accent-color-hover) !important; -} - -.pagefind-ui__button { - color: var(--color-lightest) !important; - line-height: var(--line-height-base); - border-radius: var(--rounded-full) !important; - padding: var(--sizing-sm) var(--sizing-lg) !important; - margin: 0 var(--sizing-xs) var(--sizing-md) 0; - cursor: pointer !important; - height: unset !important; - background-color: var(--accent-color) !important; - transition-property: background-color; - transition-timing-function: var(--transition-ease-in-out); - transition-duration: var(--transition-duration-default); -} - -.pagefind-ui__search-clear { - height: calc(48px * var(--pagefind-ui-scale)) !important; -} - -.pagefind-ui__button:hover, -.pagefind-ui__button:active, -.pagefind-ui__button:focus { - color: var(--color-lightest) !important; - background-color: var(--accent-color-hover) !important; -} - -.pagefind__placeholder { - height: 42px !important; - font-weight: var(--font-weight-heavy); -} \ No newline at end of file diff --git a/src/pages/search.html b/src/pages/search.html index 1b7c50c7..e52ebcab 100644 --- a/src/pages/search.html +++ b/src/pages/search.html @@ -4,19 +4,19 @@ description: "Search through and find the posts on my site." layout: default permalink: /search.html --- - {% capture css %} {% render "../assets/styles/components/forms.css" %} -{% render "../assets/styles/components/pagefind.css" %} {% endcapture %} - -
    - - -
    -     + +{% capture js %} +{% render "../assets/scripts/search.js" %} +{% endcapture %} + +
    + + +
    + {% render "partials/tags.liquid", tags:collections.tagsSortedByCount, hasSpace:true %} {% render "partials/addon-links.liquid", posts:collections.posts, analytics:analytics, links:links %} \ No newline at end of file diff --git a/src/posts/2024/link-blogging-using-readwise.md b/src/posts/2024/link-blogging-using-readwise.md index da1f1ef4..6aab3dfa 100644 --- a/src/posts/2024/link-blogging-using-readwise.md +++ b/src/posts/2024/link-blogging-using-readwise.md @@ -76,9 +76,9 @@ pagination: size: 8 --- {% for link in pagination.items %} -
    +
    -

    {{ link.title }}

    +

    {{ link.title }}