Improved search
This commit is contained in:
parent
815ca4d528
commit
122cfaf7eb
18 changed files with 275 additions and 72 deletions
|
|
@ -5,6 +5,7 @@ import GalleryLayout from "@layouts/GalleryLayout.astro";
|
|||
import UserComponent from "@components/UserComponent.astro";
|
||||
import { markdownToPlaintext } from "@utils/markdown_to_plaintext";
|
||||
import { IconNoOneUnder18, IconSquareRSS } from "@components/icons";
|
||||
import { t } from "@i18n";
|
||||
|
||||
type PostWithPubDate = CollectionEntry<"blog"> & { data: { pubDate: Date } };
|
||||
|
||||
|
|
@ -35,7 +36,7 @@ const posts = await Promise.all(
|
|||
<ul class="my-6 flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
posts.map((post, i) => (
|
||||
<li class="h-entry" lang={post.data.lang}>
|
||||
<li class="h-entry">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/blog/${post.slug}`}
|
||||
|
|
@ -79,6 +80,9 @@ const posts = await Promise.all(
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{post.data.description}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(post.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{post.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{post.authors.map((author) => (
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const games = await Promise.all(
|
|||
<ul class="my-6 flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
games.map((game, i) => (
|
||||
<li class="h-entry" lang={game.data.lang}>
|
||||
<li class="h-entry">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/games/${game.slug}`}
|
||||
|
|
@ -79,6 +79,9 @@ const games = await Promise.all(
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(game.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{game.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{game.authors.map((author) => (
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ if (featuredItems.length > MAX_FEATURED_ITEMS) {
|
|||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
featuredItems.map((entry) => (
|
||||
<li class="h-entry break-inside-avoid" lang={entry.lang} aria-label={entry.title}>
|
||||
<li class="h-entry break-inside-avoid" aria-label={entry.title}>
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={entry.href}
|
||||
|
|
@ -235,6 +235,9 @@ if (featuredItems.length > MAX_FEATURED_ITEMS) {
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{entry.altText}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(entry.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{entry.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{entry.authors.map((author) => (
|
||||
|
|
@ -254,7 +257,7 @@ if (featuredItems.length > MAX_FEATURED_ITEMS) {
|
|||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
latestItems.map((entry) => (
|
||||
<li class="h-entry break-inside-avoid" lang={entry.lang} aria-label={entry.title}>
|
||||
<li class="h-entry break-inside-avoid" aria-label={entry.title}>
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={entry.href}
|
||||
|
|
@ -301,6 +304,9 @@ if (featuredItems.length > MAX_FEATURED_ITEMS) {
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{entry.altText}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(entry.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{entry.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{entry.authors.map((author) => (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
---
|
||||
import SearchComponent from "astro-pagefind/components/Search";
|
||||
import GalleryLayout from "@layouts/GalleryLayout.astro";
|
||||
import "@pagefind/default-ui/css/ui.css";
|
||||
|
||||
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
|
||||
---
|
||||
|
||||
<script>
|
||||
import { WebAssembly } from "polywasm";
|
||||
import { PagefindUI } from "@pagefind/default-ui";
|
||||
|
||||
globalThis.WebAssembly = globalThis.WebAssembly || WebAssembly;
|
||||
|
||||
function initPageFind() {
|
||||
const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
|
||||
new PagefindUI({
|
||||
element: "#search",
|
||||
bundlePath,
|
||||
resetStyles: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initPageFind);
|
||||
} else {
|
||||
initPageFind();
|
||||
}
|
||||
</script>
|
||||
|
||||
<GalleryLayout pageTitle="Search">
|
||||
|
|
@ -15,5 +34,5 @@ import GalleryLayout from "@layouts/GalleryLayout.astro";
|
|||
</Fragment>
|
||||
<h1 class="m-2 text-3xl font-semibold text-stone-800 dark:text-stone-100">Search</h1>
|
||||
<hr class="mb-3 ml-[2px] mt-2 h-[4px] max-w-xs rounded-sm bg-stone-800 dark:bg-stone-100" aria-hidden />
|
||||
<SearchComponent id="search" className="pagefind-ui my-4" />
|
||||
<div id="search" class="pagefind-ui pagefind-init my-4" data-pagefind-ui data-bundle-path={bundlePath}></div>
|
||||
</GalleryLayout>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const totalPages = Math.ceil(page.total / page.size);
|
|||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{
|
||||
page.data.map((story, i) => (
|
||||
<li class="h-entry break-inside-avoid" lang={story.data.lang}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/stories/${story.slug}`}
|
||||
|
|
@ -125,6 +125,9 @@ const totalPages = Math.ceil(page.total / page.size);
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(story.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{story.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{story.authors.map((author) => (
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Image } from "astro:assets";
|
|||
import GalleryLayout from "@layouts/GalleryLayout.astro";
|
||||
import mapImage from "@assets/images/tlotm_map.jpg";
|
||||
import { IconNoOneUnder18 } from "@components/icons";
|
||||
import { t } from "@i18n";
|
||||
|
||||
type StoryWithPubDate = CollectionEntry<"stories"> & { data: { pubDate: Date } };
|
||||
|
||||
|
|
@ -38,7 +39,9 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
|
|||
<h2
|
||||
id="main-chapters"
|
||||
class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100"
|
||||
data-pagefind-meta="type:series"
|
||||
data-language={t("en", "language/language")}
|
||||
data-type="series"
|
||||
data-pagefind-filter="type[data-type], language[data-language]"
|
||||
>
|
||||
Main chapters
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ const totalWorksWithTag = t(
|
|||
</h2>
|
||||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{props.stories.map((story) => (
|
||||
<li class="h-entry break-inside-avoid" lang={story.data.lang}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/stories/${story.slug}`}
|
||||
|
|
@ -211,6 +211,9 @@ const totalWorksWithTag = t(
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(story.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{story.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{story.authors.map((author) => (
|
||||
|
|
@ -232,7 +235,7 @@ const totalWorksWithTag = t(
|
|||
</h2>
|
||||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{props.games.map((game) => (
|
||||
<li class="h-entry break-inside-avoid" lang={game.data.lang}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/games/${game.slug}`}
|
||||
|
|
@ -275,6 +278,9 @@ const totalWorksWithTag = t(
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(game.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{game.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{game.authors.map((author) => (
|
||||
|
|
@ -296,7 +302,7 @@ const totalWorksWithTag = t(
|
|||
</h2>
|
||||
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
|
||||
{props.blogPosts.map((post) => (
|
||||
<li class="h-entry break-inside-avoid" lang={post.data.lang}>
|
||||
<li class="h-entry break-inside-avoid">
|
||||
<a
|
||||
class="u-url text-link hover:underline focus:underline"
|
||||
href={`/blog/${post.slug}`}
|
||||
|
|
@ -339,6 +345,9 @@ const totalWorksWithTag = t(
|
|||
<p class="p-summary" aria-label="Summary">
|
||||
{post.data.description}
|
||||
</p>
|
||||
<p class="p-language" aria-label="Language">
|
||||
{t(post.data.lang, "language/language")}
|
||||
</p>
|
||||
<div aria-label="Authors">
|
||||
<span>{post.authors.length == 1 ? "Author:" : "Authors:"}</span>
|
||||
{post.authors.map((author) => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue