Simple-Jekyll-Search
A JavaScript library to add search functionality to any Jekyll blog.
idea from this blog post
Promotion: check out Pomodoro.cc
Demo
Install with bower
bower install simple-jekyll-search
Getting started
Place the following code in a file called search.json in the root of your Jekyll blog.
This file will be used as a small data source to perform the searches on the client side:
---
---
[
{
"title" : "Pintos- Getting to know OS",
"category" : "",
"tags" : "",
"url" : "/pintos/",
"date" : "2024-01-17 00:00:00 +0000"
} ,
{
"title" : "Localization for Indoor Navigation",
"category" : "",
"tags" : "",
"url" : "/dloc/",
"date" : "2024-01-01 00:00:00 +0000"
} ,
{
"title" : "Pipe it up",
"category" : "",
"tags" : "",
"url" : "/redisstream/",
"date" : "2023-03-01 00:00:00 +0000"
} ,
{
"title" : "ElasticSearch - Now you Know",
"category" : "",
"tags" : "",
"url" : "/elasticsearch/",
"date" : "2022-03-22 00:00:00 +0000"
} ,
{
"title" : "SlowwProgrammar",
"category" : "",
"tags" : "",
"url" : "/slowwprogrammer/",
"date" : "2022-01-01 00:00:00 +0000"
} ,
{
"title" : "Opinionated",
"category" : "",
"tags" : "",
"url" : "/opinionated/",
"date" : "2021-12-24 00:00:00 +0000"
} ,
{
"title" : "Innovation",
"category" : "",
"tags" : "",
"url" : "/innovation/",
"date" : "2021-09-22 00:00:00 +0000"
} ,
{
"title" : "resume",
"category" : "",
"tags" : "",
"url" : "/resume/",
"date" : "2020-01-17 00:00:00 +0000"
}
]
You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)
For example in _layouts/default.html:
<!-- Html Elements for Search -->
<div id="search-container">
<input type="text" id="search-input" placeholder="search...">
<ul id="results-container"></ul>
</div>
<!-- Script pointing to jekyll-search.js -->
<script src="/bower_components/simple-jekyll-search/dest/jekyll-search.js" type="text/javascript"></script>
Configuration
Customize SimpleJekyllSearch by passing in your configuration options:
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
})
searchInput (Element) [required]
The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.
resultsContainer (Element) [required]
The container element in which the search results should be rendered in. Typically an <ul>.
json (String|JSON) [required]
You can either pass in an URL to the search.json file, or the results in form of JSON directly, to save one round trip to get the data.
searchResultTemplate (String) [optional]
The template of a single rendered search result.
The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.
E.g.
The template
<li><a href="{url}">{title}</a></li>
will render to the following
<li><a href="/jekyll/update/2014/11/01/welcome-to-jekyll.html">Welcome to Jekyll!</a></li>
If the search.json contains this data
[
{
"title" : "Welcome to Jekyll!",
"category" : "",
"tags" : "",
"url" : "/jekyll/update/2014/11/01/welcome-to-jekyll.html",
"date" : "2014-11-01 21:07:22 +0100"
}
]
templateMiddleware (Function) [optional]
A function that will be called whenever a match in the template is found.
It gets passed the current property name, property value, and the template.
If the function returns a non-undefined value, it gets replaced in the template.
This can be potentially useful for manipulating URLs etc.
Example:
SimpleJekyllSearch({
...
middleware: function(prop, value, template){
if( prop === 'bar' ){
return value.replace(/^\//, '')
}
}
...
})
See the tests for an in-depth code example
noResultsText (String) [optional]
The HTML that will be shown if the query didn’t match anything.
limit (Number) [optional]
You can limit the number of posts rendered on the page.
fuzzy (Boolean) [optional]
Enable fuzzy search to allow less restrictive matching.
exclude (Array) [optional]
Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).
Enabling full-text search
Replace ‘search.json’ with the following code:
---
layout: null
---
[
{
"title" : "Pintos- Getting to know OS",
"category" : "",
"tags" : "",
"url" : "/pintos/",
"date" : "2024-01-17 00:00:00 +0000",
"content" : "To understand operating system , pintos provides an interactive test environment to understand fundamentals in an amicable manner. There are 4 projects and as we progress , we’ll build intuition for the practicality of thread , semaphore, scheduling , process management What is PINTOSTo test out our fundamentals, PINTOS assigment provides test cases that gets us compfortable with concepts. You can read official Pintos documentationSetup:Use VScode extension dev containers,it will facilitate debugging the gdb server remotely from local machineProject 1:Stage 1:alarm-singlealarm-multiplealarm-simultaneousalarm-zeroalarm-negativeTODO: Replace busy wait with more effient approach.LEARN: Concepts of busy wait, semaphore, lock, thread structureStage 2:priority-changepriority-preemptpriority-fifopriority-semapriority-condvarpriority-donate-onepriority-donate-multiplepriority-donate-multiple2priority-donate-nestpriority-donate-chainpriority-donate-semapriority-donate-loweralarm-priorityTODO: Implement priority schedulingLEARN: How threads are maintained in different list based on their current state How the status is supposed to changed and relegation happensStage 3:TODO: Multilevel Feedback QueueLEARN: How to achieve fairness in Roundrobin scheduling ny utilising parametersProject 2: Parse Argument and push to INTR frame stack pointer Extract argument from interupt frame in syscall Parametrize the arguments with respective types and call specific system calls. responsibilty is delegated to system calls that runs at kernel level Once you are in syshandler, we have to concentrate on test cases and sync the flow to get required output.Project 3:Project 4:"
} ,
{
"title" : "Localization for Indoor Navigation",
"category" : "",
"tags" : "",
"url" : "/dloc/",
"date" : "2024-01-01 00:00:00 +0000",
"content" : "To localise wireless device in indoor setting, we can utilise CSI data from access points which we can get using SLAM techniques. Each accesspoint has inconsistant offset and need to be dealt with.Transformation:convert SxA Matrix to a heatmap using 2D-FFTEncoderThe encoder, E : H → ˆH , takes in the inputheatmaps, H , corresponding to all the APs in the environment andgenerates a concise representation2 Step Approach:Step 1:LocationThe location decoder, Dlocat ion : ˆH → Ylocation takesin the encoder representation, ˆH and outputs an estimate for thelocation, Ylocation.Step 2:ConsitencyThe consistency decoder, Dconsistency : ˆH → Yconsistency ensures that the networksees a consistent view of the environment across different trainingsamples as well as across different access points. Where Yconsistencyare output heatmaps, Y iconsistency corresponding to all the APs (sayNAP ).Architecture:"
} ,
{
"title" : "Pipe it up",
"category" : "",
"tags" : "",
"url" : "/redisstream/",
"date" : "2023-03-01 00:00:00 +0000",
"content" : "To channelise a data stream, or pipe an event from a source to a destination , we have numerous tools and technologies to utilise. We need in complex etl pipeline, or realtime event sourcing designs. Lately, there have been development of services like redisstream, kafka and evenhub to facilaitate such requirements. When i was learning bash, i came accross pipe(|) which read from a stdin(default fd) and give result to stdout. So, The pipe symbol enables the establishment of an IPC mechanism using an anonymous pipe for data transfer between the commands involved in the pipeline. In this article, i’ll start with basic implementation of IPC and gradually will dwell into similar but complex implentations.Lets StartWe can create a pipe to connect two process and execute its respective responsibilities#include <unistd.h>#include <iostream>#include <sys/wait.h>int main() { int pipefd[2]; pipe(pipefd); // Creating the anonymous pipe pid_t pid = fork(); // Forking a child process if (pid == 0) { // Child process (command 1) close(pipefd[0]); // Close unused read end of the pipe // Redirecting stdout to the write end of the pipe dup2(pipefd[1], STDOUT_FILENO); // Executing command 1 (ls) execlp("ls", "ls", nullptr); } else if (pid > 0) { // Parent process pid_t pid2 = fork(); // Forking another child process if (pid2 == 0) { // Second child process (command 2) close(pipefd[1]); // Close unused write end of the pipe // Redirecting stdin to the read end of the pipe dup2(pipefd[0], STDIN_FILENO); // Executing command 2 (grep 'a') execlp("grep", "grep", "a", nullptr); } else if (pid2 > 0) { // Parent process close(pipefd[0]); // Close both ends of the pipe in the parent close(pipefd[1]); // Waiting for the second child process to complete wait(nullptr); } } return 0;}As soon , you get a requirement, to wire up source and destination, either we use conventional event handler or use tools like kafka or redis stream or eventhub.Lets try using event handler.Now Lets try redis streamMultiple System:Issues Sequence of each event Achieving ConcurrancyFirst Refer Then InventKard: Lightweight Data Race Detection with Per-Thread Memory ProtectionRunTestDelayed Stability and Performance of Distributed Congestion Control[QueueManagement]Alagar-Venkatesan AlgorithmFlexPushdownDB"
} ,
{
"title" : "ElasticSearch - Now you Know",
"category" : "",
"tags" : "",
"url" : "/elasticsearch/",
"date" : "2022-03-22 00:00:00 +0000",
"content" : "All enterprise application are just a wrapper service that gets evolved gradually , but underneath there lies basic functions. Here, I’ll start with a simple DSA question where we add sentences and search it by some input words.The algorithm that we are using is exploits the concept called InvertedIndex and the elasticsearch uses ApacheLuceneThe following code gives a gist the undergoing logic.#include <bits/stdc++.h>using namespace std;struct Doc{ int id; string data;};class ElasticSearch{ public: unordered_map<string, vector<Doc> > invertedIndex; ElasticSearch() { } void add(Doc *d) { vector<string> characters = analyzeAndTokenize(d->data); for(auto a: characters) { // cout<<a; // cout<<endl<<d->data; invertedIndex[a].push_back(*d); // // docmap[d.id]=d.data; } } vector<string> analyzeAndTokenize(string word) { return {"Nafis" , "I" , "am"}; //hard coded, you can add a split function } void Search(string word) { vector<Doc> docs; for(auto a: invertedIndex) { if(a.first==word) { docs = invertedIndex[word]; break; } } for(auto a : docs) { cout<<a.data; } }};int main(){ ElasticSearch *e = new ElasticSearch(); Doc *d = new Doc(); d->id=1; d->data="Hey I am Nafis, Find Me"; e->add(d); e->Search("Nafis");} Fig1. - Lucene IndexLets StartOhk, now after the DSA round, you are hired. We cant just have this, we need to provide a conventional way to developers to utilise these functions.Oooh, meta programming!!Its there, but we all know, what happen, we developers play around with reflections.So, the PM comes with a solution to standardize it. Its time to get the sprint board ready.Voila!! Apache community did a commendable job to expose these logic through api. Now, all we have to learn is the schema and standard operations to manipulate default behaviour.Operations:Create indexPUT /indexLets be typesafe [Mapping]Hey All JavaScript developers who are migrating to typescript. We know, we can use “any” type but should we?Com’on , just for the sake of avoiding runtime error, please specify the type. But, this doesnt mean, elasticSearch need your help , its self-sufficient to dynamically set the type.PUT /my_index/_mapping?pretty{"properties": { "email": { "type": "keyword" }}}Get the analyzerAs earlier, you saw a analyzer function, we can replicated that too using some call. You just have to make a few call and it will break it into pieces. Fig2. - Analyzer WorkflowRequestPUT my-index-000001{"settings": { "analysis": { "analyzer": { "my_custom_analyzer": { "type": "custom", "tokenizer": "standard", "char_filter": [ "html_strip" ], "filter": [ "lowercase", "asciifolding" ] } } }}}POST my-index-000001/_analyze{"analyzer": "my_custom_analyzer","text": "Is this <b>déjà vu</b>?"}How to boost and set ScoreApologies to keep you waiting, we’ll get to search , but please let me know your preference. I know you like to meet your colleague but you are also enjoying the work from home.So, if someone ask, you have to choose. But How? I love WFH 3000 , so we have the answer.Individual fields can be boosted as we wish — count more towards the relevance score — at query time, with the boost parameter as follows:PUT my-index-000001{"mappings": { "properties": { "title": { "type": "text", "boost": 2 }, "content": { "type": "text" } }}}Wait!! What is relevance score.There is a mathematical formula for getting the relevance score..To understand and tweak the relevance score, there is a _explain api . I dont want to say it again. Just make a call. Commnication helps relationship.GET /my-index-000001/_explain/0{"query" : { "match" : { "message" : "elasticsearch" }}}Aha , we can scaleElasticSearch mm se cm ban gaya hy. Ab chahiye, full izzat.For handling huge request volumes , elasticsearch embraced the standard Distributive System concepts and provided with configurable setup to scalable search engine. Fig3. - Node ArchitectureThe ElasticSearch distributive architecture is configurable and can be orchestrated through config filesWe can specify our own routing parameters and customise our indexing.The default formula is :shard = hash(routing) % number_of_primary_shardsPUT my-index-000001/_doc/1?routing=user1&refresh=true {"title": "This is a document"}GET my-index-000001/_doc/1?routing=user1 "
} ,
{
"title" : "SlowwProgrammar",
"category" : "",
"tags" : "",
"url" : "/slowwprogrammer/",
"date" : "2022-01-01 00:00:00 +0000",
"content" : "The year 2021 was prolifirated with lots of learning. I started with Azure DevOps and ending it with Angular12. In the middle , i enrolled for a data scientist program and now i can promote myself in DataScience segment to be considered as a better novice. Didnt have any resolution for 2021, but eventually clocked a decent progress. As I always tried to dig deeper wherever i found things fascinating, I found a great blog to brush my understanding of OS 3 easy pieces. There were some brushup in my coding skills too. thanks to leetcode. With all of this, I have realised that a lot of things need to be done in my personal life too."
} ,
{
"title" : "Opinionated",
"category" : "",
"tags" : "",
"url" : "/opinionated/",
"date" : "2021-12-24 00:00:00 +0000",
"content" : "TThe struggle to get to a satisfactory conclusion is worying for any decision. I have always been a gullible listeners to ideas and somehow, i get the pros more often and have issues weighing sides. My latest take or one ways to handle is take critism from evangelist and the one who reudiates. I might not have had the right questions earlier ,but, after these discussion some viewpoints gets more clear for criticism. Few times, i just act as a delegate ."
} ,
{
"title" : "Innovation",
"category" : "",
"tags" : "",
"url" : "/innovation/",
"date" : "2021-09-22 00:00:00 +0000",
"content" : "With exposure to humongous amount of information in this digital world, we often get overwhelmed with new learnings. Here, in this blog, i’ll discuss my take on channelising our capabilities with a tool called innovation.While we are not building great things, we can always have bandwidth to make good things better. Here, comes Innovation in picture. We need to build up habit to always pick magical things up from our innovation bucket to enhance the capability of things we are building.First thing that we need to learn is , identifying the problems we come accross and try to brainstorm what more can be done. It doesn’t come naturally but can be imbibed gradually. For a habit to get built, it takes time. So, if we try ,Soon, Innovation can become like a shadow and it all shall come naturally."
} ,
{
"title" : "resume",
"category" : "",
"tags" : "",
"url" : "/resume/",
"date" : "2020-01-17 00:00:00 +0000",
"content" : ""
}
,
{
"title" : "404 - Page not found",
"category" : "",
"tags" : "",
"url" : "/404/",
"date" : "",
"content" : "Sorry, we can’t find that page that you’re looking for. You can try again by going back to the homepage."
} ,
{
"title" : "About",
"category" : "",
"tags" : "",
"url" : "/about/",
"date" : "",
"content" : "About me!I'm a Software Engineer from Jamshedpur, India, I am just a vagabond in this tech world and trying to contribute back to community. Currently working for Optum,UHG. Curious developer I have no special talent. I am only passionately curious. – Albert Einstein"
} ,
{
"title" : "Contact Mohammad Nafis Alam",
"category" : "",
"tags" : "",
"url" : "/contact/",
"date" : "",
"content" : " Contact Me If you wanna get in touch with me, feel free to write me! I receive suggestions, feedback or ideas, please be patient if I don't reply you soon. We'll get in touch! Name Email Address Message "
} ,
{
} ,
{
} ,
{
} ,
{
"title" : "Classie - class helper functions",
"category" : "",
"tags" : "",
"url" : "/bower_components/classie/",
"date" : "",
"content" : "Classie - class helper functionsRipped from bonzo :heart: @dedclassie.has( element, 'my-class' ) // returns true/falseclassie.add( element, 'my-new-class' ) // add new classclassie.remove( element, 'my-unwanted-class' ) // remove classclassie.toggle( element, 'my-class' ) // toggle classPackage managementInstall with Bower :bird:bower install classieInstall with Componentcomponent install desandro/classieMIT licenseclassie is released under the MIT license."
} ,
{
"title" : "jQuery Github",
"category" : "",
"tags" : "",
"url" : "/bower_components/jquery-github/",
"date" : "",
"content" : "jQuery Github A jQuery plugin to display your Github Repositories.Browser SupportWe do care about it. IE 8+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ Getting startedThree quick start options are available: Download latest release Clone the repo: git@github.com:zenorocha/jquery-github.git Install with Bower: bower install jquery-githubSetupUse Bower to fetch all dependencies:$ bower installNow you’re ready to go!UsageCreate an attribute called data-repo:<div data-repo="jquery-boilerplate/jquery-boilerplate"></div>Include jQuery:<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Include plugin’s CSS and JS:<link rel="stylesheet" href="assets/base.css"><script src="jquery.github.min.js"></script>Call the plugin:$("[data-repo]").github();And that’s it \o/Check full example’s source code.OptionsHere’s a list of available settings.$("[data-repo]").github({ iconStars: true, iconForks: true, iconIssues: false}); Attribute Type Default Description iconStars Boolean true Displays the number of stars in a repository. iconForks Boolean true Displays the number of forks in a repository. iconIssues Boolean false Displays the number of issues in a repository. StructureThe basic structure of the project is given in the following way:.|-- assets/|-- demo/| |-- index.html| |-- index-zepto.html|-- dist/| |-- jquery.boilerplate.js| |-- jquery.boilerplate.min.js|-- src/| |-- jquery.boilerplate.coffee| |-- jquery.boilerplate.js|-- .editorconfig|-- .gitignore|-- .jshintrc|-- .travis.yml|-- github.jquery.json|-- Gruntfile.js`-- package.jsonassets/Contains CSS and Font files to create that lovely Github box.bower_components/Contains all dependencies like jQuery and Zepto.demo/Contains a simple HTML file to demonstrate the plugin.dist/This is where the generated files are stored once Grunt runs JSHint and other stuff.src/Contains the files responsible for the plugin..editorconfigThis file is for unifying the coding style for different editors and IDEs. Check editorconfig.org if you haven’t heard about this project yet..gitignoreList of files that we don’t want Git to track. Check this Git Ignoring Files Guide for more details..jshintrcList of rules used by JSHint to detect errors and potential problems in JavaScript. Check jshint.com if you haven’t heard about this project yet..travis.ymlDefinitions for continous integration using Travis. Check travis-ci.org if you haven’t heard about this project yet.github.jquery.jsonPackage manifest file used to publish plugins in jQuery Plugin Registry. Check this Package Manifest Guide for more details.Gruntfile.jsContains all automated tasks using Grunt. Check gruntjs.com if you haven’t heard about this project yet.package.jsonSpecify all dependencies loaded via Node.JS. Check NPM for more details.Showcase zenorocha.com/projects anasnakawa.com/projectsHave you used this plugin in your project?Let me know! Send a tweet or pull request and I’ll add it here :)AlternativesPrefer a non-jquery version with pure JavaScript?No problem, @ricardobeat already did one. Check his fork!Prefer Zepto instead of jQuery?No problem, @igorlima already did that. Check demo/index-zepto.html.Prefer AngularJS instead of jQuery?No problem, @lucasconstantino already did that. Check his fork!ContributingCheck CONTRIBUTING.md.HistoryCheck Releases for detailed changelog.CreditsBuilt on top of jQuery Boilerplate.LicenseMIT License © Zeno Rocha"
} ,
{
"title" : "Simple-Jekyll-Search",
"category" : "",
"tags" : "",
"url" : "/bower_components/simple-jekyll-search/",
"date" : "",
"content" : "Simple-Jekyll-Search====================[](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)A JavaScript library to add search functionality to any Jekyll blog.---idea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)---### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)# Install with bower```bower install simple-jekyll-search```# Getting startedPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.This file will be used as a small data source to perform the searches on the client side:```------[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}" } {% unless forloop.last %},{% endunless %} {% endfor %}]```You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)For example in **_layouts/default.html**:``````# ConfigurationCustomize SimpleJekyllSearch by passing in your configuration options:```SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json',})```#### searchInput (Element) [required]The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.#### resultsContainer (Element) [required]The container element in which the search results should be rendered in. Typically an ``.#### json (String|JSON) [required]You can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.#### searchResultTemplate (String) [optional]The template of a single rendered search result.The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.E.g.The template```{title}```will render to the following```Welcome to Jekyll!```If the `search.json` contains this data```[ { "title" : "Welcome to Jekyll!", "category" : "", "tags" : "", "url" : "/jekyll/update/2014/11/01/welcome-to-jekyll.html", "date" : "2014-11-01 21:07:22 +0100" }]```#### templateMiddleware (Function) [optional]A function that will be called whenever a match in the template is found.It gets passed the current property name, property value, and the template.If the function returns a non-undefined value, it gets replaced in the template.This can be potentially useful for manipulating URLs etc.Example:```SimpleJekyllSearch({ ... middleware: function(prop, value, template){ if( prop === 'bar' ){ return value.replace(/^\//, '') } } ...})```See the [tests](src/Templater.test.js) for an in-depth code example#### noResultsText (String) [optional]The HTML that will be shown if the query didn't match anything.#### limit (Number) [optional]You can limit the number of posts rendered on the page.#### fuzzy (Boolean) [optional]Enable fuzzy search to allow less restrictive matching.#### exclude (Array) [optional]Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).## Enabling full-text searchReplace 'search.json' with the following code:```---layout: null---[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}", "content" : "{{ post.content | strip_html | strip_newlines }}" } {% unless forloop.last %},{% endunless %} {% endfor %} , {% for page in site.pages %} { {% if page.title != nil %} "title" : "{{ page.title | escape }}", "category" : "{{ page.category }}", "tags" : "{{ page.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ page.url }}", "date" : "{{ page.date }}", "content" : "{{ page.content | strip_html | strip_newlines }}" {% endif %} } {% unless forloop.last %},{% endunless %} {% endfor %}]```## If search isn't working due to invalid JSON- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.For example: in search.json, replace```"content" : "{{ page.content | strip_html | strip_newlines }}"```with```"content" : "{{ page.content | strip_html | strip_newlines | remove_chars | escape }}"```If this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:```"content" : {{ page.content | jsonify }}```**Note: you don't need to use quotes ' " ' in this since ```jsonify``` automatically inserts them.**##Browser supportBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)# Dev setup- `npm install` the dependencies.- `gulp watch` during development- `npm test` or `npm run test-watch` to run the unit tests"
} ,
{
"title" : "swipebox",
"category" : "",
"tags" : "",
"url" : "/bower_components/swipebox/grunt/",
"date" : "",
"content" : "swipebox===A touchable jQuery lightbox---This is where the build task lives."
} ,
{
"title" : "WOW.js",
"category" : "",
"tags" : "",
"url" : "/bower_components/wow/",
"date" : "",
"content" : "# WOW.js [](http://travis-ci.org/matthieua/WOW)Reveal CSS animation as you scroll down a page.By default, you can use it to trigger [animate.css](https://github.com/daneden/animate.css) animations.But you can easily change the settings to your favorite animation library.Advantages:- Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)- Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup- Fast execution and lightweight code: the browser will like it ;-)- You can change the settings - [see below](#advanced-usage)Follow [@mattaussaguel](//twitter.com/mattaussaguel) for updates as WOW evolves.### [LIVE DEMO ➫](http://mynameismatthieu.com/WOW/)## Live examples- [MaterialUp](http://www.materialup.com)- [Fliplingo](https://www.fliplingo.com)- [Streamline Icons](http://www.streamlineicons.com)- [Microsoft Stories](http://www.microsoft.com/en-us/news/stories/garage/)## Version1.1.2## DocumentationIt just take seconds to install and use WOW.js### Dependencies- [animate.css](https://github.com/daneden/animate.css)### Basic usage- HTML```html ```- JavaScript```javascriptnew WOW().init();```### Advanced usage- HTML```html ```- JavaScript```javascriptvar wow = new WOW( { boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: true, // trigger animations on mobile devices (default is true) live: true, // act on asynchronously loaded content (default is true) callback: function(box) { // the callback is fired every time an animation is started // the argument that is passed in is the DOM node being animated } });wow.init();```### Asynchronous content supportIn IE 10+, Chrome 18+ and Firefox 14+, animations will be automaticallytriggered for any DOM nodes you add after calling `wow.init()`. If you do notlike that, you can disable this by setting `live` to `false`.If you want to support older browsers (e.g. IE9+), as a fallback, you can callthe `wow.sync()` method after you have added new DOM elements to animate (but`live` should still be set to `true`). Calling `wow.sync()` has no sideeffects.## ContributeThe library is written in CoffeeScript, please update `wow.coffee` file.We use grunt to compile and minify the library:Install needed libraries```npm install```Get the compilation running in the background```grunt watch```Enjoy!## Bug trackerIf you find a bug, please report it [here on Github](https://github.com/matthieua/WOW/issues)!## DeveloperDeveloped by Matthieu Aussaguel, [mynameismatthieu.com](http://mynameismatthieu.com)+ [@mattaussaguel](//twitter.com/mattaussaguel)+ [Github Profile](//github.com/matthieua)## ContributorsThanks to everyone who has contributed to the project so far:- Attila Oláh - [@attilaolah](//twitter.com/attilaolah) - [Github Profile](//github.com/attilaolah)- [and many others](//github.com/matthieua/WOW/graphs/contributors)Initiated and designed by [Vincent Le Moign](//www.webalys.com/), [@webalys](//twitter.com/webalys)"
} ,
{
} ,
{
} ,
{
} ,
{
}
]
If search isn’t working due to invalid JSON
- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use
remove_charsas a filter.
For example: in search.json, replace
"content" : "Simple-Jekyll-Search====================[](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)A JavaScript library to add search functionality to any Jekyll blog.---idea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)---### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)# Install with bower```bower install simple-jekyll-search```# Getting startedPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.This file will be used as a small data source to perform the searches on the client side:```------[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}" } {% unless forloop.last %},{% endunless %} {% endfor %}]```You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)For example in **_layouts/default.html**:``````# ConfigurationCustomize SimpleJekyllSearch by passing in your configuration options:```SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json',})```#### searchInput (Element) [required]The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.#### resultsContainer (Element) [required]The container element in which the search results should be rendered in. Typically an ``.#### json (String|JSON) [required]You can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.#### searchResultTemplate (String) [optional]The template of a single rendered search result.The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.E.g.The template```{title}```will render to the following```Welcome to Jekyll!```If the `search.json` contains this data```[ { "title" : "Welcome to Jekyll!", "category" : "", "tags" : "", "url" : "/jekyll/update/2014/11/01/welcome-to-jekyll.html", "date" : "2014-11-01 21:07:22 +0100" }]```#### templateMiddleware (Function) [optional]A function that will be called whenever a match in the template is found.It gets passed the current property name, property value, and the template.If the function returns a non-undefined value, it gets replaced in the template.This can be potentially useful for manipulating URLs etc.Example:```SimpleJekyllSearch({ ... middleware: function(prop, value, template){ if( prop === 'bar' ){ return value.replace(/^\//, '') } } ...})```See the [tests](src/Templater.test.js) for an in-depth code example#### noResultsText (String) [optional]The HTML that will be shown if the query didn't match anything.#### limit (Number) [optional]You can limit the number of posts rendered on the page.#### fuzzy (Boolean) [optional]Enable fuzzy search to allow less restrictive matching.#### exclude (Array) [optional]Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).## Enabling full-text searchReplace 'search.json' with the following code:```---layout: null---[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}", "content" : "{{ post.content | strip_html | strip_newlines }}" } {% unless forloop.last %},{% endunless %} {% endfor %} , {% for page in site.pages %} { {% if page.title != nil %} "title" : "{{ page.title | escape }}", "category" : "{{ page.category }}", "tags" : "{{ page.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ page.url }}", "date" : "{{ page.date }}", "content" : "{{ page.content | strip_html | strip_newlines }}" {% endif %} } {% unless forloop.last %},{% endunless %} {% endfor %}]```## If search isn't working due to invalid JSON- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.For example: in search.json, replace```"content" : "{{ page.content | strip_html | strip_newlines }}"```with```"content" : "{{ page.content | strip_html | strip_newlines | remove_chars | escape }}"```If this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:```"content" : {{ page.content | jsonify }}```**Note: you don't need to use quotes ' " ' in this since ```jsonify``` automatically inserts them.**##Browser supportBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)# Dev setup- `npm install` the dependencies.- `gulp watch` during development- `npm test` or `npm run test-watch` to run the unit tests"
with
"content" : "Simple-Jekyll-Search====================[](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)A JavaScript library to add search functionality to any Jekyll blog.---idea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)---### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)# Install with bower```bower install simple-jekyll-search```# Getting startedPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.This file will be used as a small data source to perform the searches on the client side:```------[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}" } {% unless forloop.last %},{% endunless %} {% endfor %}]```You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)For example in **_layouts/default.html**:``````# ConfigurationCustomize SimpleJekyllSearch by passing in your configuration options:```SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json',})```#### searchInput (Element) [required]The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.#### resultsContainer (Element) [required]The container element in which the search results should be rendered in. Typically an ``.#### json (String|JSON) [required]You can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.#### searchResultTemplate (String) [optional]The template of a single rendered search result.The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.E.g.The template```{title}```will render to the following```Welcome to Jekyll!```If the `search.json` contains this data```[ { "title" : "Welcome to Jekyll!", "category" : "", "tags" : "", "url" : "/jekyll/update/2014/11/01/welcome-to-jekyll.html", "date" : "2014-11-01 21:07:22 +0100" }]```#### templateMiddleware (Function) [optional]A function that will be called whenever a match in the template is found.It gets passed the current property name, property value, and the template.If the function returns a non-undefined value, it gets replaced in the template.This can be potentially useful for manipulating URLs etc.Example:```SimpleJekyllSearch({ ... middleware: function(prop, value, template){ if( prop === 'bar' ){ return value.replace(/^\//, '') } } ...})```See the [tests](src/Templater.test.js) for an in-depth code example#### noResultsText (String) [optional]The HTML that will be shown if the query didn't match anything.#### limit (Number) [optional]You can limit the number of posts rendered on the page.#### fuzzy (Boolean) [optional]Enable fuzzy search to allow less restrictive matching.#### exclude (Array) [optional]Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).## Enabling full-text searchReplace 'search.json' with the following code:```---layout: null---[ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}", "content" : "{{ post.content | strip_html | strip_newlines }}" } {% unless forloop.last %},{% endunless %} {% endfor %} , {% for page in site.pages %} { {% if page.title != nil %} "title" : "{{ page.title | escape }}", "category" : "{{ page.category }}", "tags" : "{{ page.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ page.url }}", "date" : "{{ page.date }}", "content" : "{{ page.content | strip_html | strip_newlines }}" {% endif %} } {% unless forloop.last %},{% endunless %} {% endfor %}]```## If search isn't working due to invalid JSON- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.For example: in search.json, replace```"content" : "{{ page.content | strip_html | strip_newlines }}"```with```"content" : "{{ page.content | strip_html | strip_newlines | remove_chars | escape }}"```If this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:```"content" : {{ page.content | jsonify }}```**Note: you don't need to use quotes ' " ' in this since ```jsonify``` automatically inserts them.**##Browser supportBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)# Dev setup- `npm install` the dependencies.- `gulp watch` during development- `npm test` or `npm run test-watch` to run the unit tests"
If this doesn’t work when using Github pages you can try jsonify to make sure the content is json compatible:
"content" : "Simple-Jekyll-Search\n====================\n\n[](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)\n\nA JavaScript library to add search functionality to any Jekyll blog.\n\n---\n\nidea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)\n\n---\n\n\n\n### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)\n\n\n# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)\n\n\n\n\n# Install with bower\n\n```\nbower install simple-jekyll-search\n```\n\n\n\n\n# Getting started\n\nPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.\n\nThis file will be used as a small data source to perform the searches on the client side:\n\n```\n---\n---\n[\n {% for post in site.posts %}\n {\n \"title\" : \"{{ post.title | escape }}\",\n \"category\" : \"{{ post.category }}\",\n \"tags\" : \"{{ post.tags | join: ', ' }}\",\n \"url\" : \"{{ site.baseurl }}{{ post.url }}\",\n \"date\" : \"{{ post.date }}\"\n } {% unless forloop.last %},{% endunless %}\n {% endfor %}\n]\n```\n\nYou need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)\n\nFor example in **_layouts/default.html**:\n\n```\n<!-- Html Elements for Search -->\n<div id=\"search-container\">\n<input type=\"text\" id=\"search-input\" placeholder=\"search...\">\n<ul id=\"results-container\"></ul>\n</div>\n\n<!-- Script pointing to jekyll-search.js -->\n<script src=\"{{ site.baseurl }}/bower_components/simple-jekyll-search/dest/jekyll-search.js\" type=\"text/javascript\"></script>\n```\n\n\n# Configuration\n\nCustomize SimpleJekyllSearch by passing in your configuration options:\n\n```\nSimpleJekyllSearch({\n searchInput: document.getElementById('search-input'),\n resultsContainer: document.getElementById('results-container'),\n json: '/search.json',\n})\n```\n\n#### searchInput (Element) [required]\n\nThe input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.\n\n\n#### resultsContainer (Element) [required]\n\nThe container element in which the search results should be rendered in. Typically an `<ul>`.\n\n\n#### json (String|JSON) [required]\n\nYou can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.\n\n\n#### searchResultTemplate (String) [optional]\n\nThe template of a single rendered search result.\n\nThe templating syntax is very simple: You just enclose the properties you want to replace with curly braces.\n\nE.g.\n\nThe template\n\n```\n<li><a href=\"{url}\">{title}</a></li>\n```\n\nwill render to the following\n\n```\n<li><a href=\"/jekyll/update/2014/11/01/welcome-to-jekyll.html\">Welcome to Jekyll!</a></li>\n```\n\nIf the `search.json` contains this data\n\n```\n[\n {\n \"title\" : \"Welcome to Jekyll!\",\n \"category\" : \"\",\n \"tags\" : \"\",\n \"url\" : \"/jekyll/update/2014/11/01/welcome-to-jekyll.html\",\n \"date\" : \"2014-11-01 21:07:22 +0100\"\n }\n]\n```\n\n\n#### templateMiddleware (Function) [optional]\n\nA function that will be called whenever a match in the template is found.\n\nIt gets passed the current property name, property value, and the template.\n\nIf the function returns a non-undefined value, it gets replaced in the template.\n\nThis can be potentially useful for manipulating URLs etc.\n\nExample:\n\n```\nSimpleJekyllSearch({\n ...\n middleware: function(prop, value, template){\n if( prop === 'bar' ){\n return value.replace(/^\\//, '')\n }\n }\n ...\n})\n```\n\nSee the [tests](src/Templater.test.js) for an in-depth code example\n\n\n\n#### noResultsText (String) [optional]\n\nThe HTML that will be shown if the query didn't match anything.\n\n\n#### limit (Number) [optional]\n\nYou can limit the number of posts rendered on the page.\n\n\n#### fuzzy (Boolean) [optional]\n\nEnable fuzzy search to allow less restrictive matching.\n\n#### exclude (Array) [optional]\n\nPass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).\n\n\n\n\n\n\n\n## Enabling full-text search\n\nReplace 'search.json' with the following code:\n\n```\n---\nlayout: null\n---\n[\n {% for post in site.posts %}\n {\n \"title\" : \"{{ post.title | escape }}\",\n \"category\" : \"{{ post.category }}\",\n \"tags\" : \"{{ post.tags | join: ', ' }}\",\n \"url\" : \"{{ site.baseurl }}{{ post.url }}\",\n \"date\" : \"{{ post.date }}\",\n \"content\" : \"{{ post.content | strip_html | strip_newlines }}\"\n } {% unless forloop.last %},{% endunless %}\n {% endfor %}\n ,\n {% for page in site.pages %}\n {\n {% if page.title != nil %}\n \"title\" : \"{{ page.title | escape }}\",\n \"category\" : \"{{ page.category }}\",\n \"tags\" : \"{{ page.tags | join: ', ' }}\",\n \"url\" : \"{{ site.baseurl }}{{ page.url }}\",\n \"date\" : \"{{ page.date }}\",\n \"content\" : \"{{ page.content | strip_html | strip_newlines }}\"\n {% endif %}\n } {% unless forloop.last %},{% endunless %}\n {% endfor %}\n]\n```\n\n\n\n## If search isn't working due to invalid JSON\n\n- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.\n\nFor example: in search.json, replace\n```\n\"content\" : \"{{ page.content | strip_html | strip_newlines }}\"\n```\nwith\n```\n\"content\" : \"{{ page.content | strip_html | strip_newlines | remove_chars | escape }}\"\n```\n\nIf this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:\n```\n\"content\" : {{ page.content | jsonify }}\n```\n**Note: you don't need to use quotes ' \" ' in this since ```jsonify``` automatically inserts them.**\n\n\n\n\n\n##Browser support\n\nBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)\n\n\n\n\n\n\n\n# Dev setup\n\n- `npm install` the dependencies.\n\n- `gulp watch` during development\n\n- `npm test` or `npm run test-watch` to run the unit tests\n"
Note: you don’t need to use quotes ‘ “ ‘ in this since jsonify automatically inserts them.
##Browser support
Browser support should be about IE6+ with this addEventListener shim
Dev setup
-
npm installthe dependencies. -
gulp watchduring development -
npm testornpm run test-watchto run the unit tests