Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
create-harold-app
Advanced tools
create-harold-app - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| { | ||
| "name": "create-harold-app", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "description": "Static blog/site generator", | ||
@@ -5,0 +5,0 @@ "author": "Julian Ćwirko (julian.io)", |
| ## create-harold-app | ||
| Static site and blog generator based on Handlebars and Markdown. | ||
| Harold is a static site and blog generator based on Handlebars and Markdown. | ||
| ## Intro | ||
| [Static sites and blogs with HaroldJS](https://youtu.be/DG0T1Fg0mq0) | ||
| ## Why another one? | ||
| Because I wanted to have a simple static site generator to build and host on Netlify. I know there are many of them. I built one to have better control over it. | ||
| I wanted to have a simple static site generator to build and host on Netlify. There are many such solutions, but I wanted to have complete control. | ||
| What is important, I equipped it with two themes that you can use and modify for your needs. I prepared the theme system for custom ones in the future. This is also added value. We don’t need to start every site/blog repeatedly from the ground. | ||
| What is essential, I equipped it with two templates that you can use and modify for your needs. I prepared the templates system for custom ones in the future. Templates are great because we don’t need to start every site/blog repeatedly from the ground. | ||
| ## When to use it | ||
| - wehen you want to build static website/blog with simple search functionality (default theme) | ||
| - when you want to build small (maybe medium) site or blog | ||
| - when you want to build a static website/blog with simple search functionality (default theme) | ||
| - when you want to build a small (maybe medium) site or blog | ||
| - when you don't want to use any big and complicated solution | ||
| - when you know how to use Handlebars template system | ||
| - when you know how to use the Handlebars template system | ||
| ## When not to use it | ||
| - when you want to build something big (not tested with very big projects, tested with over 120 markdown files, works quite fast) | ||
| - when you don't want to use Scss (you can still write standard css in .scss files) | ||
| - when you want to rely on something which has its own community | ||
| - when you want to build something significant (not tested with big projects, tested with over 120 markdown files, works quite fast) | ||
| - when you don't want to use Scss (you can still write standard CSS in .scss files) | ||
| - when you want to rely on something which has its community | ||
@@ -47,15 +51,15 @@ ### Creating an app | ||
| As an option you can choose with which template it should init the project. Possible choices: | ||
| As an option, you can choose with which template it should init the project. Possible choices: | ||
| - default | ||
| - bare | ||
| If you want to init the project with `bare` template pass additional option `-t bare`. For example: `npm init harold-app my-app -t bare` | ||
| If you want to init the project with `bare` template, pass additional option `-t bare`. For example: `npm init harold-app my-app -t bare` | ||
| In the future there will be a possibility to pass custom templates. | ||
| In the future, there will be a possibility to pass custom templates. | ||
| Write `create-harold-app --help` in terminal to get the list of options. | ||
| Write `create-harold-app --help` in a terminal to get the list of options. | ||
| ### Starting the app | ||
| From newly created app's directory (in our case `my-app`). Run `npm start`. It will serve the app under `localhost:3000`. To change the port just add `PORT` env, like: `PORT=3002 npm start`. | ||
| From the newly created app's directory (in our case, `my-app`), run `npm start`. It will serve the app under `localhost:3000`. To change the port, just add `PORT` env, like: `PORT=3002 npm start`. | ||
@@ -62,0 +66,0 @@ ### Documentation |
@@ -1,1 +0,11 @@ | ||
| [{"fileName":"example.html","title":"Example post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample. Ready for code highlighters, for example <a href=\"https://prismjs.com/\">PrismJS</a></p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"This is short excerpt of an example post. Lorem ipsum dolor sit amet, consectetur adipiscing elit.","publicationDate":"2021-04-15","tags":["tag 1","tag 2"],"coverImage":"https://picsum.photos/2000/1000"}] | ||
| [ | ||
| { | ||
| "fileName": "example.html", | ||
| "title": "Example post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample. Ready for code highlighters, for example <a href=\"https://prismjs.com/\">PrismJS</a></p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "This is short excerpt of an example post. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", | ||
| "publicationDate": "2021-04-15", | ||
| "tags": ["tag 1", "tag 2"], | ||
| "coverImage": "https://picsum.photos/2000/1000" | ||
| } | ||
| ] |
@@ -12,3 +12,3 @@ (function () { | ||
| }); | ||
| menuIconClose.addEventListener('click', function () { | ||
@@ -15,0 +15,0 @@ menuOverlay.classList.remove('js-visible'); |
@@ -5,3 +5,3 @@ (function () { | ||
| if (scrollTopButton) { | ||
| document.addEventListener('scroll', function() { | ||
| document.addEventListener('scroll', function () { | ||
| if (window.scrollY > 200) { | ||
@@ -14,5 +14,5 @@ scrollTopButton.classList.add('js-visible'); | ||
| scrollTopButton.addEventListener('click', function () { | ||
| window.scroll({top: 0, left: 0, behavior: 'smooth'}); | ||
| window.scroll({ top: 0, left: 0, behavior: 'smooth' }); | ||
| }); | ||
| } | ||
| })(); |
@@ -9,5 +9,13 @@ (function () { | ||
| const searchInput = document.querySelector('[data-js-search-input]'); | ||
| const searchResultsContainer = document.querySelector('[data-js-search-results]') | ||
| const searchResultsContainer = document.querySelector( | ||
| '[data-js-search-results]' | ||
| ); | ||
| if (searchIcon && searchInput && searchIconClose && searchOverlay && searchResultsContainer) { | ||
| if ( | ||
| searchIcon && | ||
| searchInput && | ||
| searchIconClose && | ||
| searchOverlay && | ||
| searchResultsContainer | ||
| ) { | ||
| searchIcon.addEventListener('click', function () { | ||
@@ -18,3 +26,3 @@ searchOverlay.classList.add('js-visible'); | ||
| }); | ||
| searchIconClose.addEventListener('click', function () { | ||
@@ -26,3 +34,3 @@ searchInput.value = ''; | ||
| }); | ||
| searchInput.addEventListener('keyup', function () { | ||
@@ -29,0 +37,0 @@ if (!this.value) { |
| const harold = (function () { | ||
| let searchIndex; | ||
| let searchIndex; | ||
| let postsJSON; | ||
| const postsJsonDataPath = '/jsonData/posts.json'; | ||
| const postsJsonDataPath = '/jsonData/posts.json'; | ||
| // Loads data for search index | ||
| const fetchPostsJsonData = () => { | ||
| return fetch(postsJsonDataPath) | ||
| .then((response) => response.json()) | ||
| .then((data) => { postsJSON = data; return data; }); | ||
| }; | ||
| // Loads data for search index | ||
| const fetchPostsJsonData = () => { | ||
| return fetch(postsJsonDataPath) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| postsJSON = data; | ||
| return data; | ||
| }); | ||
| }; | ||
| // Builds search index using json data and lunr library | ||
| const buildSearchIndexWithLunr = () => { | ||
| fetchPostsJsonData() | ||
| .then((data) => { | ||
| searchIndex = lunr(function () { | ||
| this.ref('fileName'); | ||
| this.field('title'); | ||
| this.field('body'); | ||
| this.field('excerpt'); | ||
| this.field('tags'); | ||
| data.forEach((doc) => { | ||
| this.add(Object.assign(doc, { tags: doc.tags.join(' ')})); | ||
| }, this); | ||
| }); | ||
| }); | ||
| }; | ||
| // Builds search index using json data and lunr library | ||
| const buildSearchIndexWithLunr = () => { | ||
| fetchPostsJsonData().then((data) => { | ||
| searchIndex = lunr(function () { | ||
| this.ref('fileName'); | ||
| this.field('title'); | ||
| this.field('body'); | ||
| this.field('excerpt'); | ||
| this.field('tags'); | ||
| data.forEach((doc) => { | ||
| this.add( | ||
| Object.assign(doc, { | ||
| tags: doc.tags.join(' '), | ||
| body: doc.body.replace(/(<([^>]+)>)/gi, ''), | ||
| }) | ||
| ); | ||
| }, this); | ||
| }); | ||
| }); | ||
| }; | ||
| // Search function | ||
| const search = (phrase) => { | ||
| if (searchIndex) { | ||
| const searchResults = searchIndex.search(phrase); | ||
| // Search function | ||
| const search = (phrase) => { | ||
| if (searchIndex) { | ||
| const searchResults = searchIndex.search(phrase); | ||
| const refs = searchResults.map((result) => result.ref); | ||
| return postsJSON.filter((item) => refs.includes(item.fileName)); | ||
| } else { | ||
| console.error('Search index is not ready!'); | ||
| } | ||
| }; | ||
| } else { | ||
| console.error('Search index is not ready!'); | ||
| } | ||
| }; | ||
| // Initialize whole harold app javascript logic | ||
| const init = () => { | ||
| buildSearchIndexWithLunr(); | ||
| }; | ||
| // Initialize whole harold app javascript logic | ||
| const init = () => { | ||
| buildSearchIndexWithLunr(); | ||
| }; | ||
| return { | ||
| init, | ||
| search, | ||
| }; | ||
| return { | ||
| init, | ||
| search, | ||
| }; | ||
| })(); | ||
| harold.init(); | ||
| harold.init(); |
@@ -1,1 +0,65 @@ | ||
| [{"fileName":"example1.html","title":"First post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the first example post.","publicationDate":"2021-04-15","tags":["tag1","art"],"coverImage":"https://picsum.photos/id/0/1000/1000"},{"fileName":"example2.html","title":"Second post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the second example post.","publicationDate":"2021-04-16","tags":["tag2","coding"],"coverImage":"https://picsum.photos/id/1008/1000/1000"},{"fileName":"example3.html","title":"Third post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the third example post.","publicationDate":"2021-04-18","tags":["tag3","coding"],"coverImage":"https://picsum.photos/id/1011/1000/1000"},{"fileName":"example4.html","title":"Fourth post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the fourth example post. This one is longer.","publicationDate":"2021-04-18","tags":["tag4","coding"],"coverImage":"https://picsum.photos/id/1060/1000/1000"},{"fileName":"example5.html","title":"Fifth post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the fifth example post.","publicationDate":"2021-04-18","tags":["tag5","art","design"],"coverImage":"https://picsum.photos/id/171/1000/1000"},{"fileName":"example6.html","title":"Sixth post title","body":"<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>","excerpt":"Excerpt of the sixth example post.","publicationDate":"2021-04-18","tags":["tag6","art"],"coverImage":"https://picsum.photos/id/202/1000/1000"},{"fileName":"harold-intro.html","title":"Harold is alive!","body":"<p> Harold is a static site and blog generator based on Handlebars templating system and Markdown. There are two types of presentation possibilities (Page and Post) and couple of helpers. Here are some of the features: </p> <h3>- Search system based on pre-generated JSON data, indexed with Lunr</h3> <h3>- Configurable posts lists with Handlebars helper</h3> <pre><code>{{postsList perPageLimit=6, byTagName='javascript', currentPage=1, className='hrld-post-list', noImage=false, noExcerpt=false, noTags=false, noDate=false, noReadMoreButton=false, readMoreButtonLabel='Read more', dateFormat='yyyy-mm-dd', }} </code></pre> <h3>- Scss support</h3> <h3>- Wide images:</h3> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <h3>- Embeded media:</h3> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <h3>- Code highlighter:</h3> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <h3>- Markdown Front Matter support</h3> <pre><code class=\"language-markdown\">--- layout: 'blog-post' title: 'Harold is alive!' excerpt: \"Excerpt of the featured example post.\" coverImage: 'https://picsum.photos/id/82/1500/600' tags: - tag7 - featured publicationDate: '2021-04-18' --- </code></pre> <h3>- Support for social media meta tags</h3> <p>In markdown files (for blog posts):</p> <pre><code class=\"language-markdown\">ogTitle: 'Harold is alive!' ogDescription: 'Harold is a static site generator based on Handlebars templating system and markdown' ogUrl: '' ogImage: '' twitterTitle: 'Harold is alive!' twitterDescription: 'Harold is a static site generator based on Handlebars templating system and markdown' twitterUrl: '' twitterImage: '' </code></pre> <p>Using Handlebars head partial (for subpages):</p> <pre><code>{{> head title=\"Homepage\" description=\"Harold app default theme\" ogTitle=\"Harold Homepage\" ogDescription=\"Harold Description\" ogImage=\"\" twitterTitle=\"Harold Homepage\" twitterDescription=\"Harold Description\" twitterImage=\"\" }} </code></pre> <p>These are just examples. It can be configured as you need.</p> <h3>- Handlebars support</h3> <h3>- Date formatter helper</h3> <pre><code>{{formatDate date=publicationDate format='dd mmmm yyyy'}} </code></pre> <p>You can customize it as you want. This theme is just an example. It is simple to learn such tools looking into real code example.</p>","excerpt":"Excerpt of the featured example post.","publicationDate":"2021-04-18","tags":["tag7","featured"],"coverImage":"https://picsum.photos/id/82/1500/600"}] | ||
| [ | ||
| { | ||
| "fileName": "example1.html", | ||
| "title": "First post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the first example post.", | ||
| "publicationDate": "2021-04-15", | ||
| "tags": ["tag1", "art"], | ||
| "coverImage": "https://picsum.photos/id/0/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "example2.html", | ||
| "title": "Second post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the second example post.", | ||
| "publicationDate": "2021-04-16", | ||
| "tags": ["tag2", "coding"], | ||
| "coverImage": "https://picsum.photos/id/1008/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "example3.html", | ||
| "title": "Third post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the third example post.", | ||
| "publicationDate": "2021-04-18", | ||
| "tags": ["tag3", "coding"], | ||
| "coverImage": "https://picsum.photos/id/1011/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "example4.html", | ||
| "title": "Fourth post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the fourth example post. This one is longer.", | ||
| "publicationDate": "2021-04-18", | ||
| "tags": ["tag4", "coding"], | ||
| "coverImage": "https://picsum.photos/id/1060/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "example5.html", | ||
| "title": "Fifth post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the fifth example post.", | ||
| "publicationDate": "2021-04-18", | ||
| "tags": ["tag5", "art", "design"], | ||
| "coverImage": "https://picsum.photos/id/171/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "example6.html", | ||
| "title": "Sixth post title", | ||
| "body": "<h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <h2>Lorem ipsum 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, nunc non feugiat egestas, velit sem eleifend augue, non posuere quam risus a neque. Sed sed leo turpis. Curabitur molestie nulla vitae quam porta, eget imperdiet velit gravida. In non ipsum rutrum, fermentum nibh nec, elementum sapien. Nullam eu imperdiet lacus. Vivamus consequat tellus sed nisl tempor viverra. Fusce vulputate vel diam a suscipit. Praesent vel lectus metus. In condimentum iaculis lorem ut condimentum. Vestibulum ullamcorper euismod neque vel ullamcorper. Donec auctor nisl vel urna malesuada, sit amet tempor lacus blandit. Sed eu enim felis. Maecenas sagittis justo at eleifend sagittis. Vestibulum libero magna, imperdiet id eleifend tristique, condimentum eget est.</p> <p>Ut tempor, arcu vitae lacinia iaculis, lacus neque pellentesque arcu, non blandit eros sem non nisi. Donec placerat nisi sed rhoncus mattis. Donec eu vulputate dolor. Pellentesque eget nisl faucibus, lobortis ex nec, porta arcu. Sed eu arcu sed mauris scelerisque pellentesque. Donec velit lectus, tempor eu lacus quis, tincidunt tristique libero. Praesent sit amet orci quis velit tempor volutpat gravida non dui. Morbi malesuada hendrerit nibh, vel accumsan enim volutpat nec. Morbi a justo leo. Fusce tristique quam ac pharetra commodo. Pellentesque imperdiet luctus magna sed hendrerit.</p> <p> <img src=\"https://picsum.photos/300/200?style=centered\" alt=\"alt text\"> </p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p> <p>Code sample.</p> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <p>Duis ac nunc quis lacus maximus faucibus at nec turpis. Ut ac pulvinar ex. Maecenas dignissim tellus ut facilisis tempus. Vivamus sed orci sed mi imperdiet efficitur. Ut efficitur magna sed enim ornare sagittis. Ut lacus ligula, suscipit vitae nisi at, commodo lobortis massa. Aliquam venenatis dolor a diam dapibus, at mattis velit auctor. Vestibulum laoreet sodales fringilla. Pellentesque ornare mattis turpis, in finibus lacus posuere sit amet. Cras tempor nibh ut semper fringilla. Morbi tristique lacus id dapibus mattis. Phasellus in commodo odio. In at rhoncus purus, eget elementum magna. Sed sit amet interdum metus.</p>", | ||
| "excerpt": "Excerpt of the sixth example post.", | ||
| "publicationDate": "2021-04-18", | ||
| "tags": ["tag6", "art"], | ||
| "coverImage": "https://picsum.photos/id/202/1000/1000" | ||
| }, | ||
| { | ||
| "fileName": "harold-intro.html", | ||
| "title": "Harold is alive!", | ||
| "body": "<p> Harold is a static site and blog generator based on Handlebars templating system and Markdown. There are two types of presentation possibilities (Page and Post) and couple of helpers. Here are some of the features: </p> <h3>- Search system based on pre-generated JSON data, indexed with Lunr</h3> <h3>- Configurable posts lists with Handlebars helper</h3> <pre><code>{{postsList perPageLimit=6, byTagName='javascript', currentPage=1, className='hrld-post-list', noImage=false, noExcerpt=false, noTags=false, noDate=false, noReadMoreButton=false, readMoreButtonLabel='Read more', dateFormat='yyyy-mm-dd', }} </code></pre> <h3>- Scss support</h3> <h3>- Wide images:</h3> <div class=\"wide-content\"> <img src=\"https://picsum.photos/1000/400\" alt=\"alt text\"> </div> <h3>- Embeded media:</h3> <div class=\"embeded-media-container\"> <iframe height=\"224\" title=\"Confirmation Button\" src=\"https://codepen.io/rubenasanchez/embed/preview/mdRqqbN?height=224&theme-id=dark&default-tab=css,result\"> See the Pen <a href='https://codepen.io/rubenasanchez/pen/mdRqqbN'>Confirmation Button</a> by Ruben A Sanchez (<a href='https://codepen.io/rubenasanchez'>@rubenasanchez</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> </div> <h3>- Code highlighter:</h3> <pre><code class=\"language-javascript\">const test = 'test'; console.log(test); </code></pre> <h3>- Markdown Front Matter support</h3> <pre><code class=\"language-markdown\">--- layout: 'blog-post' title: 'Harold is alive!' excerpt: \"Excerpt of the featured example post.\" coverImage: 'https://picsum.photos/id/82/1500/600' tags: - tag7 - featured publicationDate: '2021-04-18' --- </code></pre> <h3>- Support for social media meta tags</h3> <p>In markdown files (for blog posts):</p> <pre><code class=\"language-markdown\">ogTitle: 'Harold is alive!' ogDescription: 'Harold is a static site generator based on Handlebars templating system and markdown' ogUrl: '' ogImage: '' twitterTitle: 'Harold is alive!' twitterDescription: 'Harold is a static site generator based on Handlebars templating system and markdown' twitterUrl: '' twitterImage: '' </code></pre> <p>Using Handlebars head partial (for subpages):</p> <pre><code>{{> head title=\"Homepage\" description=\"Harold app default theme\" ogTitle=\"Harold Homepage\" ogDescription=\"Harold Description\" ogImage=\"\" twitterTitle=\"Harold Homepage\" twitterDescription=\"Harold Description\" twitterImage=\"\" }} </code></pre> <p>These are just examples. It can be configured as you need.</p> <h3>- Handlebars support</h3> <h3>- Date formatter helper</h3> <pre><code>{{formatDate date=publicationDate format='dd mmmm yyyy'}} </code></pre> <p>You can customize it as you want. This theme is just an example. It is simple to learn such tools looking into real code example.</p>", | ||
| "excerpt": "Excerpt of the featured example post.", | ||
| "publicationDate": "2021-04-18", | ||
| "tags": ["tag7", "featured"], | ||
| "coverImage": "https://picsum.photos/id/82/1500/600" | ||
| } | ||
| ] |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.79%
158604
- Number of package files
- increased by1.79%
57
- Lines of code
- increased by135.26%
447
- Number of lines in readme file
- increased by5.56%
76
Worsened metrics
- Number of medium supply chain risk alerts
- increased by100%
2
No dependency changes