Add search bar, fix storybook, fix other minor errors

[grmbyrn]

Search Bar

This setup creates a SearchBar component that allows users to search for blog posts based on what they input into a search bar which appears in the Header on all pages. The functionality works as below:

• types.ts defines the structure of a BlogPost, including properties like tags, excerpt, title, etc. This type is then imported into other files to ensure consistency in data handling.
• +layout.ts in the root imports filteredPosts from a data source ($lib/data/blog-posts) and exports an async function load() that returns the filtered posts.
• +layout.svelte, also in the root, imports BlogPost type and receives data containing posts. It passes this data down to the Header component.
• The Header.svelte component contains the search bar UI. It imports the BlogPost type and receives an array of posts. When a user interacts with the search bar, it emits a search event. It also imports SearchBar.svelte, where the actual search logic resides.
• The SearchBar.svelte component handles the search functionality. It imports BlogPost type and receives an array of posts. It uses FlexSearch to create an index of posts and then performs a search based on the user input. The search results are updated dynamically as the user types.
• The search.ts module contains the search logic. It imports the BlogPost type and defines functions to create an index of posts (createPostsIndex) and search this index (searchPostsIndex). The createPostsIndex function initialises a FlexSearch index and adds each post to it, while the searchPostsIndex function performs a search based on the user input and returns the matching posts.

Previous and Next Posts

In the PrevNextPost.svelte component which appears below each blog post, I switched previous and next post to make it natural by the user accessing newer posts by clicking right and older posts by clicking left.

Storybook

Fixed errors in Histoire mentioned here by updating dependencies.

Favicon error

Fixed error mentioned here by fixing the file path in the href as below:
Before:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

After:

<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />

Links error

Fixed error mentioned here by finding links in the Table of Contents for Containerizing Rust Applications and Deploying Torrust To Production wasn't working due to a lack of # so changed from

- [Links](links)

to

- [Links](#links)

[josecelano]

Good job @grmbyrn!

[josecelano]

ACK f7a737b

[grmbyrn]

Good job @grmbyrn!

Thanks @josecelano I'm glad to see that it worked.