+{/if}
+
+ {
+ if (e[env.getModifierKey()] && e.key === 'k') {
+ if (isSearching) {
+ endSearch();
+ } else {
+ e.preventDefault();
+ searchInput?.focus();
+ searchInput?.select();
+ isSearching = true;
+ }
+ } else if (e.key === 'Escape' && isSearching) {
+ endSearch();
+ }
+ }}
+/>
diff --git a/docs/src/routes/docs/search/search.ts b/docs/src/routes/docs/search/search.ts
new file mode 100644
index 000000000..d1d3c6746
--- /dev/null
+++ b/docs/src/routes/docs/search/search.ts
@@ -0,0 +1,77 @@
+import FlexSearch from 'flexsearch';
+
+export type Post = {
+ content: string;
+ slug: string;
+ title: string;
+};
+
+export type Result = {
+ content: string[];
+ slug: string;
+ title: string;
+};
+
+let postsIndex: InstanceType;
+let posts: Post[];
+
+export function createPostsIndex(data: Post[]) {
+ postsIndex = new FlexSearch.Index({ tokenize: 'forward' });
+
+ data.forEach((post, i) => {
+ const item = `${post.title} ${post.content}`;
+ postsIndex.add(i, item);
+ });
+
+ posts = data;
+}
+
+export function searchPostsIndex(searchTerm: string) {
+ const match = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const results = postsIndex.search(match) as number[];
+
+ // Filter to only include results that actually match the search term
+ // Create a function to test matches to avoid regex state issues
+ const testMatch = (text: string) => {
+ const regex = new RegExp(match, 'gi');
+ return regex.test(text);
+ };
+
+ return results
+ .map((index: number) => posts[index])
+ .filter(({ title, content }: { title: string; content: string }) => {
+ // Only include if the search term actually appears in title or content
+ return testMatch(title) || testMatch(content);
+ })
+ .map(({ slug, title, content }: { slug: string; title: string; content: string }) => {
+ return {
+ slug,
+ title: replaceTextWithMarker(title, match),
+ content: getMatches(content, match)
+ };
+ });
+}
+
+function replaceTextWithMarker(text: string, match: string) {
+ const regex = new RegExp(match, 'gi');
+ return text.replaceAll(regex, (match) => `${match}`);
+}
+
+function getMatches(text: string, searchTerm: string, limit = 1) {
+ const regex = new RegExp(searchTerm, 'gi');
+ const indexes = [];
+ let matches = 0;
+ let match;
+
+ while ((match = regex.exec(text)) !== null && matches < limit) {
+ indexes.push(match.index);
+ matches++;
+ }
+
+ return indexes.map((index) => {
+ const start = index - 20;
+ const end = index + 80;
+ const excerpt = text.substring(start, end).trim();
+ return `...${replaceTextWithMarker(excerpt, searchTerm)}...`;
+ });
+}
diff --git a/docs/src/routes/docs/search/searchIndex.ts b/docs/src/routes/docs/search/searchIndex.ts
new file mode 100644
index 000000000..4fc4934b4
--- /dev/null
+++ b/docs/src/routes/docs/search/searchIndex.ts
@@ -0,0 +1,62 @@
+export const searchIndex = [
+ {
+ title: 'The Joy of Painting',
+ slug: 'the-joy-of-painting',
+ content:
+ 'Imagine you are painting a beautiful sunset over a calm lake. Each stroke of your brush brings another layer of rich color onto the canvas. The sky is a mix of orange, red, and purple hues, gently blending together. The water reflects the colors of the sky, adding depth to the scene. Take your time to add details, like the silhouette of trees on the shore. Remember, every stroke counts. Your painting is a reflection of your emotions and thoughts. Keep adding layers until you are satisfied with the final result.'
+ },
+ {
+ title: 'The Power of Nature',
+ slug: 'the-power-of-nature',
+ content:
+ 'Imagine you are painting a dense forest. The trees are tall and majestic, their leaves shimmering in the sunlight. The ground beneath them is covered in a carpet of green, broken up by patches of brightly colored wildflowers. Add depth to your painting by including a winding path that leads deeper into the forest. Remember, every tree and flower adds to the beauty of nature. Your painting is a celebration of life and the natural world around us.'
+ },
+ {
+ title: 'The Beauty of Abstract Art',
+ slug: 'the-beauty-of-abstract-art',
+ content:
+ 'Imagine you are painting a piece of abstract art. Start with a blank canvas. Then, slowly begin to add shapes and colors. There are no rules here. You can use any color that makes you happy. Add circles, squares, triangles, and lines. Mix different shades and tones. The goal is not to replicate reality, but to express yourself through color and shape. Your painting is a unique creation that comes from your imagination.'
+ },
+ {
+ title: 'The Calm of Water',
+ slug: 'the-calm-of-water',
+ content:
+ 'Imagine you are painting a peaceful river. The water flows smoothly, its surface reflecting the surrounding landscape. Trees grow alongside the riverbank, their branches reaching out towards the water. Birds fly overhead, their wings spread wide. Add details like fish swimming in the water, or a small boat floating downstream. Your painting captures the serene beauty of nature and the calmness it brings.'
+ },
+ {
+ title: 'The Energy of Landscapes',
+ slug: 'the-energy-of-landscapes',
+ content:
+ 'Imagine you are painting a dynamic landscape. Mountains rise high into the sky, their peaks covered in snow. A river cuts through the mountains, its flow powerful and relentless. Trees cling to the sides of the mountains, their roots reaching out towards the soil. Clouds float overhead, their shapes constantly changing. Your painting captures the raw energy of nature and the power of its elements.'
+ },
+ {
+ title: 'The Warmth of Autumn',
+ slug: 'the-warmth-of-autumn',
+ content:
+ 'Imagine you are painting an autumn scene. Leaves change color, transitioning from green to yellow, orange, and red. They fall gently from the trees, covering the ground in a thick layer. A warm sun hangs low in the sky, casting long shadows across the landscape. Your painting captures the beauty and tranquility of autumn, a time of year that is filled with warmth and coziness.'
+ },
+ {
+ title: 'The Serenity of Winter',
+ slug: 'the-serenity-of-winter',
+ content:
+ 'Imagine you are painting a winter scene. Snow covers the ground, creating a pristine white canvas. Trees stand bare, their branches stark against the white background. Ice forms on a nearby body of water, creating a shiny mirror. Your painting captures the quiet beauty and serenity of winter, a time of year that offers a peaceful respite from the busy summer months.'
+ },
+ {
+ title: 'The Elegance of Spring',
+ slug: 'the-elegance-of-spring',
+ content:
+ 'Imagine you are painting a spring scene. Flowers bloom in full force, their petals a riot of colors. Blossoms cover the trees, their fragrance filling the air. Birds sing, their melodious songs echoing through the landscape. Your painting captures the elegance and freshness of spring, a time of renewal and growth.'
+ },
+ {
+ title: 'The Mystery of Summer',
+ slug: 'the-mystery-of-summer',
+ content:
+ 'Imagine you are painting a summer scene. The sun is hot, the sky is blue, and the air is still. A gentle breeze rustles the leaves of the trees. Butterflies flutter from flower to flower, their wings a blur of color. Your painting captures the mystery and heat of summer, a time of year that is filled with life and activity.'
+ },
+ {
+ title: 'The Magic of Fall',
+ slug: 'the-magic-of-fall',
+ content:
+ 'Imagine you are painting a fall scene. Leaves change color, their hues ranging from green to gold, orange, and red. They fall gently from the trees, forming a carpet on the ground. A cool breeze blows, carrying the scent of decaying leaves. Your painting captures the magic and beauty of fall, a transitional season that marks the end of summer and the beginning of winter.'
+ }
+];