This content originally appeared on DEV Community and was authored by Chris Bongers
I'll let you in on a little secret while writing this article; I'm also working on this site and finding a neat, low JS alternative to a search function.
Don't get me wrong, Lunr and Algolia are great options, but I would like to keep my website as low impact as possible.
So starting to think about some solutions I remembered a while ago, I made a static JSON search for a website.
This is a great alternative, surely it won't have a fuzzy search or extensive power, but it will be better than having no search.
In today's article, I'll focus on making an endpoint, a JSON file collecting all of my post's titles and URLs.
The whole process will be similar to how I created a XML sitemap for this website.
Adding a JSON endpoint to an Eleventy website
Let's start by making a new file in the src directory. I'm calling this file static_search.njk.
---
permalink: '/search.json'
---
[
{% for post in collections.posts %}
{
"title":"{{ post.data.title }}",
"url":"{{ post.url | url }}"
}
{% if loop.last == false %},{% endif %} {% endfor %} {%
]
With this, we tell Eleventy to output this file as search.json, forcing the JSON extension.
Inside we loop over our post collection and create a JSON structure with the title and URL of the post.
Last we check once we hit the last loop that we don't add a , since it would be invalid JSON.
Now when we build our website, we get the following result.
[
{
"title": "Linux adding a timestamp to the bash history",
"url": "/posts/linux-adding-a-timestamp-to-the-bash-history/"
},
{
"title": "JavaScript insert newly created element after another element",
"url": "/posts/javascript-insert-newly-created-element-after-another-element/"
},
{
"title": "JavaScript insert newly created element before another element",
"url": "/posts/javascript-insert-newly-created-element-before-another-element/"
}
]
Pretty solid, right!
In another article, I'll be guiding you through using this data for a search function.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
This content originally appeared on DEV Community and was authored by Chris Bongers
Chris Bongers | Sciencx (2021-06-18T05:53:36+00:00) Eleventy JSON endpoint with posts. Retrieved from https://www.scien.cx/2021/06/18/eleventy-json-endpoint-with-posts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.