Jekyll2021-08-09T08:33:30+00:00https://simply-jekyll.netlify.app//feed.xmlIntroduction to Simply Jekyll2020-05-01T00:00:00+00:002020-05-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/intro<p>Simply Jekyll is a highly functional jekyll-based theme that combines the best of different worlds. It is a minimal and distraction free theme that strives to provide maximum value all without holding back on any essential features that a user would benefit from or would desire for. This is an evolving project and is garanteed to be maintained at least for quite some time as I myself am a beneficiary of this theme and the project.</p>
<p>The theme provides a rich set of features that include:</p>
<ul>
<li>Wiki-style markdown syntax for both internal as well as external links.</li>
<li>Support for backlinks and related posts to exhort serendipitous encounters.</li>
<li>Feed-specific context menu for instantly accessing the related posts and references.</li>
<li>Lunrjs based search with previews and shortcut to trigger search.</li>
<li>Auto stale-link management for internal links.</li>
<li>Custom syntax for sidenotes and marginnotes on either side of the feed/post.</li>
<li>Support for partial transclusion of posts.</li>
<li>On hover page preview.</li>
<li>Custom classes to style phrasing elements like quotes, callouts, etc by mentioning size, font-types, weight, box etc.</li>
<li>Preliminary support for flashcards.</li>
<li>Custom syntax to highlight your favorite part of the post (No, I am not talking about code syntax highlighting, which is already provided by Jekyll through Rouge).</li>
<li>Support for external link identifier through icons.</li>
<li>Finally, the most important of them all — No bloatware or frameworks!</li>
</ul>
<p>Plus everything else that you can already do with jekyll like write something on a bunch of markdown files and convert it into a HTML file or sprinkle in some inline html can still be done alongside these features.</p>
<p>Neat stuff, isn't it? To see the above mentioned features in action go check out the next post. :P</p>
<p>Also see the sample post—[[Lorem ipsum dolor sit amet]]—to get a feel for how an actual essay would look like. :)</p>Simply Jekyll is a highly functional jekyll-based theme that combines the best of different worlds. It is a minimal and distraction free theme that strives to provide maximum value all without holding back on any essential features that a user would benefit from or would desire for. This is an evolving project and is garanteed to be maintained at least for quite some time as I myself am a beneficiary of this theme and the project.Exploring the features of Simply Jekyll2020-04-01T00:00:00+00:002020-04-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/explore<p>Essentiality is the heart of any good software, and this theme is designed to ensure that I don't add things that I won't use on a daily basis or not have things that would be important for my personal usecase. It has been designed carefully to get rid of all the feature creeps, bloatwares, etc. i.e., no bootstrap, no semantic, no jquery, no nothing…</p>
<p>That said, this is a ready made theme and I am making it public so that more number of people will use it and enjoy the experience of using it. So, pardon my bigotry there😅.</p>
<p>As for the list of features, this website steals features from every website that I can think of, or more appropriately the design inspiration for this website is derived from multiple sources; Here is the tiny list for the curious:</p>
<ul>
<li>Backlinks: Roam Research</li>
<li>Transclusion: Tiddlywiki</li>
<li>Sidenote: Edward Tufte, Gwern Branwen</li>
<li>Stale Link Highlighting: Tiddlywiki</li>
<li>Wiki-style links: Every wiki ever</li>
<li>Text highlighting: Roam Research</li>
<li>Page preview: Wikipedia</li>
<li>Context menu: Google Docs</li>
<li>Notes: Andy Matuschak's Evergreen Notes</li>
<li>Color scheme: Github</li>
<li>Feed like structure for home page: Twitter</li>
<li>Omnisearch box at the top: Google</li>
<li>Profile board: Twitter/Instagram</li>
</ul>
<p>Now that you know all my secrets let us not waste any more time into further exposing my true nature in its entirety and get started with tour:P</p>
<p class="boxit"><strong>Note:</strong> This page only showcases the features. How to use these feature is mentioned in a separate article.</p>
<h3 id="backlinks">Backlinks</h3>
<p>Backlinks or as Roam Research calls it "Birdirectional Links" is a nifty little feature that allows not only users reading your essays/articles to encounter interesting related articles, this is something you as a author yourself will see how powerful it is once you start browsing around your website. Backlinks are basically a link on PostA indicating all the mentions of PostA on different Posts.</p>
<p>The neat stuff is it won't show up with an empty box if a given post doesn't have any backlinks and if it is already included in backlinks, it won't show up in your related posts[[<strong>Related Posts:</strong> Posts that share same tag(s).<br /> <strong>Linked References(Backlinks):</strong> Posts that link other posts inside your blog.::rmn]]. :)</p>
<p>Here is a screenshot of what mentions/backlinks will look like in a page:</p>
<p><img src="/assets/img/backlinks.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%" /></p>
<p>In the above example, it can be seen that there are three links, it means that all the three pages have a link to the page in which they are being displayed as a backlink.</p>
<p>For eg. If you scroll all the way to the bottom, you will something similar i.e., you will see a link to the pages that has a link to this page.</p>
<h3 id="sidenotes-and-marginnotes">Sidenotes and Marginnotes</h3>
<p>Of what use are such wide margins when you can't make efficient use of them. Fear not, we have a way to handle that too — Marginnotes[[There are two types of people, those who have taste and those who don't. And anyone who has even a tiny bit of taste will never, never-ever use footnotes over sidenotes.<br /><cite>—Some random blogger who shall remain unamed</cite>::rmn]]. For what it's worth, when you stroll down a garden, you don't ever see a flower bloom 10 miles away from the plant do you? This is where sidenotes come in and replace their paper-era sibling ie., footnotes. If it is relevant you see it right there. (No scrolling = No cognitive strain). The entire idea is to allow users to have a pleasant time on your blog i.e., Not too distracting(offputting), not too mesmerizing, just the right amount of ornamentation to allow seamless reading experience[[I see it as an issue of managing & exposing the length. Some readers want to go as deep as you can take them, but others are frustrated if you block them from moving on. I deal with it by use of collapsible sections+abstracts, margin notes, and explicit topics in list items.<br /><cite>—Tweet by Gwern Branwen</cite>::lsn]]. The added advantage we have with this website is it has wide margins allowing us to use both sides for sidenotes. So we can use them for quotations, small snippets, and also for interactive/expository animations.</p>
<p>The first one on the right is a marginnote and the second one on the left is a sidenote. You may ask what is the difference, it looks all the same to me. You are right to some extent, but if you look closely you will see that the one on left has a number attached to it while the one on the right doesn't. Yes, that is all the difference there is, at least [[Edward Tufte::https://edwardtufte.github.io/tufte-css/]] says.</p>
<h3 id="on-feed-context-menu">On-feed context menu</h3>
<p>Context menus are a great way to improve user experience if they are done correctly. Given that our theme has a feed-link structure for the landing page, it leverages the opportunity and saves second time visitors who have already read the article and are only here to see other related articles or the backlinks by just simply right clicking on the feed. Thereby saving users the unnecessay time involved with clicking on a link and scrolling all the way down to see the backlinks or related articles.</p>
<p>Here is a screenshot for people who are too lazy, while the rest of you can go back to the home page and try it out by right clicking on a particular feed entry:</p>
<p><img src="/assets/img/context_menu.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd; fload: left;" height="70%" width="45%" />
<img src="/assets/img/context_menu_backlinks.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="70%" width="45%" /></p>
<h3 id="on-hover-page-preview">On-hover page preview</h3>
<p>Ever been to a blog or a tutorial site and seen links to other pages without any clue as to what that page is about apart from vague statements like "See Related" or "Click here for Part II". We all have had that experience, haven't we? Wouldn't it be nice to be able to take a cursory glance at the page just so that you could get a feel of it and decide quickly as to whether or not do you really want to read that post without having to click on the link and wait for the ginormous scroll of text to load? That is precisely what page previews are for. For eg, try to hover over this link: [[Lorem ipsum dolor sit amet]].</p>
<p>And yes, all of what you see is available right out of the box. No configuration, no sh*t, no shinola.</p>
<h3 id="transclusion">Transclusion</h3>
<p>Once I had sidenotes and page preview for my blog, transclusion[[Lorem ipsum dolor sit amet::rmn-transclude]] just felt like the natural next step to it. I mean there are less important pages that you can leave at the discretion of the readers to hover-over and take a peak, and then there are pages that you want to explicity show a glimpse of, but how do you do it? Obviously, putting a chunk of random text in the most of your post is just unacceptable UX, but then how else do you do it? You could just combine the nifty little preview thingy with your nice little sidenote thingy and let users get a glimpse of the important stuff without getting distracted. Amazing, isn't it?</p>
<h3 id="link-management">Link Management</h3>
<p>Now the biggest of them all: the permalink curse. Most of us are never happy with the first title that we come up with, and when you excitingly write a new post embedding an old post—the title of which you always wanted to change but never got time to do so because you were busy creating content—it sometimes happens that you forget to update the relevant link all the associated places that you linked it in. And I think this is worst of them all in terms of an UX nightmare.</p>
<p>Although we don't have a complete solution given that we are using a static site generator, I think we have a decent mechanism to atleast find the culprit links without clicking at them (a.k.a highlighting links that don't point anywhere, but ideally must be pointing to some location due to which they cannot be deleted).</p>
<p>Here is an example of:</p>
<ul>
<li>A perfectly valid link: [[Lorem ipsum dolor sit amet]]</li>
<li>A bad link that does not point anywhere: [[Some non-existing title]]</li>
</ul>
<p>See how it highlights in yellow? I feel this is a game-changer that anyone who has a personal website should at least think of incorporating in their website given the number of deadlink issues we face.</p>
<p><strong>Note</strong>: This only works with local/internal links.</p>
<h3 id="miscellaneous-features-highlighting-text-primitive-flash-cards-and-some-gimmicks">Miscellaneous Features: Highlighting text, Primitive Flash Cards, and Some gimmicks</h3>
<h4 id="text-highlighting">Text Highlighting</h4>
<p>So you are writing an essay and you want to emphasize a particular portion of your essay to your audience that you think is just mindblowing. Tools like Medium provide such an easy way to do this while we still keep scratching our head with mark tags and p tag with a background color and what not.. Worry not, this theme allows you to easily highlight a portion of a text without any hassle.</p>
<p>Here is an example of it:</p>
<p class="boxit">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, [[quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident::highlight]], sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h4 id="primitive-flashcards">Primitive Flashcards</h4>
<p>Anki has been my friend, my well-wisher, my guardian, pretty much everything for the last one year of my intellectual life. I have a half-hour morning routine that I follow dilligently in going through the scheduled anki decks to strengthen my neuronal connection on a particular topic/subject. And I have been doing it consistently for almost a year now. This is an attempt at recreating the aspect of spaced-repetition to allow my brain to form interesting connections based on things I have already written. The plan is to extend it using local storage and somekind of firebase like service to provide a constant reminder to users using the supermemo algorithm, but as of now, this is where I stand — a simple on-click card to keep the thing going until I build something better.</p>
<p>Here is an example(click on the card):</p>
<p>"Lorem ipsum dolor sit amet, [[consectetur adipiscing elit, sed do eiusmod tempor::srs]] incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>For all you know, this could be used for some interesting things if you have a tutorials website where you write posts on technical concepts. So that's that.</p>
<h4 id="the-gimmicks">The Gimmicks</h4>
<h5 id="profile-board-for-main-site">Profile Board for Main Site</h5>
<p>If you have ever used a social media with feeds you probably have stalked the profiles of people you find interesting, but the problem is as much as the mystery gets someone into look at your profile, it also makes them form opinions. If the profile reads author, you see their feed one way; and if it says scientist from Caltech, you see it the other. I mean as much as authority is a thing to form opinions about, it also alienates people from what could potentially have been a great relation if not for the credentiality and appearance. So, the idea with the profile board was to get done with this stuff right away so that people can enjoy the content instead of going profile hunting on your credibility and accomplishments and appearances to judge and validate their opinions by validating you.</p>
<p>Here is the screenshot:</p>
<p><img src="/assets/img/profile_board.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%" /></p>
<h5 id="omnisearch-bar">Omnisearch bar</h5>
<p>This is inspired by the browsers like Chrome and Firefox where the searchbar is always placed at the top so that readers can easily search for the next thing without having to go back to the main page and scroll through dozens of articles.</p>
<p>And I personally like this one because, it allows me as an author/writer to quickly jump between different posts while I am reading my articles to reference in my other articles.</p>
<p>Here is a screenshot:</p>
<p><img src="/assets/img/search.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%" /></p>
<p><strong>Note</strong>: The searchbar is not implemented as a scrollspying widget that pins itself automatically is because I have a preference for distraction free content when reading, that is why the website provides a chevron to scroll to the top easily instead of pinning the search to the header.</p>
<h5 id="feed-like-structure">Feed-like structure</h5>
<p>I am a big fan of Aza Raskin's infinite scroll design and the fact that it provides such an easy way to engage users is just mind-blowing. That said, I must also confess that I am not a big fan of infinite scrolls on social media websites given their addictive nature. Blogs are fundamentally finite in nature. I mean even if you are a highly productive individual who writes a thousand page essay a day, you would have only written 365 essays and not all of them interesting to me. So having a feed-like structure on blogs I feel is fundamental to allowing users to engage in a more neutral way.</p>
<p>And if you are still not sure of its utility, go join twitter or facebook or instagram, and comeback to read this again after a month or so.</p>
<p>Untill then here is the screenshot:</p>
<p><img src="/assets/img/feed.png" style="box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%" /></p>
<h5 id="auto-tagging-wip-posts-on-the-feed">Auto-tagging WIP posts on the feed</h5>
<p>Sometimes you are writing something interesting but have not completed the entire thing, lets say like a series of posts on single, it can be helpful to show users right away on the feed/homepage the status so that when they click the post, their expectations are already managed.</p>
<p>Here is a screenshot.</p>
<p><img src="/assets/img/ongoing.png" style="border: 1px solid #f7f7f7; box-shadow: 2px 2px 20px 0 #ddd;" height="100%" width="80%" /></p>
<h5 id="clickable-tags">Clickable tags</h5>
<p>If you go the posts on the homepage, and go inside any of them and try to click on the tags such as date or category, you will see that it takes you to a page with all the posts belonging to that tag or date. Just a nifty little feature.</p>
<p>And that is all! Thanks for scrolling all the way through to see all the features. Now if you'd like to know how to use this theme, head over to the post titled [[How to setup Simply Jekyll]]. And if you would like to see how to use these features, head over to [[How to use Simply Jekyll features on your website]]</p>
<p>P.S If you use VSCode like me for content creation and authoring, and are interested in autocompletion of titles when you write your notes. You can use a small VSCode plugin that I wrote for myself to ease up my writing process: [[Notecomplete::https://github.com/rgvr/scratchpad/tree/master/note-complete]]</p>Essentiality is the heart of any good software, and this theme is designed to ensure that I don't add things that I won't use on a daily basis or not have things that would be important for my personal usecase. It has been designed carefully to get rid of all the feature creeps, bloatwares, etc. i.e., no bootstrap, no semantic, no jquery, no nothing…Lorem ipsum dolor sit amet2020-04-01T00:00:00+00:002020-04-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/lorem<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem elit, rutrum et nibh ac, vulputate mollis lorem. Fusce at lectus id risus scelerisque suscipit. Vestibulum nec lobortis ex. Proin augue odio, euismod a vehicula ut, auctor ac turpis. Morbi eget facilisis turpis, quis tincidunt neque. Nulla facilisi. Pellentesque porta vel purus eget vulputate. Etiam sodales tincidunt nibh, eget pharetra augue aliquam id. Praesent varius egestas leo, ut luctus risus molestie ut. Integer sapien neque, efficitur vel leo in, aliquet lacinia elit. Nulla a magna ut dui blandit tempus id nec sem.</p>
<p>Donec imperdiet lacus posuere quam imperdiet, sed pharetra nulla fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ante neque, ullamcorper at porttitor nec, scelerisque vel neque. Sed ac aliquam leo. Sed nec elementum est. Quisque sed massa vulputate, ultrices risus eu, blandit tellus. Maecenas sed cursus lacus, vitae molestie nunc. Morbi vel ex leo. Maecenas eu orci non nisl aliquam ullamcorper. Phasellus dapibus eget arcu ut laoreet. Vestibulum semper nec justo et venenatis.</p>
<h2 id="cras-venenatis">Cras Venenatis</h2>
<p>Cras venenatis ut tortor eu vestibulum. Mauris viverra dui vel eros consectetur pretium. Praesent a vestibulum quam, at vestibulum risus. Aenean sed lobortis felis. Phasellus a fermentum nibh. Integer in purus ex. Cras fermentum hendrerit nisi. Sed aliquet ut nunc eget tristique. Vestibulum in volutpat lorem. Pellentesque turpis metus, facilisis vitae tincidunt vulputate, elementum quis nulla. Nulla ac nibh nec urna blandit venenatis. Etiam lectus diam, maximus vel felis eu, facilisis egestas tellus. Curabitur tellus ex, blandit et ex vitae, dignissim auctor orci.</p>
<p>Sed molestie quam ut venenatis congue. Praesent posuere, massa nec ullamcorper porta, libero neque tincidunt sem, et posuere leo sapien ut tellus. Phasellus in purus gravida, lobortis felis quis, consequat tortor. Vivamus lobortis sem massa, dignissim porta magna tincidunt ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut viverra orci risus, in efficitur mi venenatis nec. Maecenas ac risus eu magna euismod faucibus. Quisque at ante ut ante vehicula commodo. Praesent lacinia turpis ex, vitae vehicula purus luctus a. Donec mattis accumsan tincidunt. Fusce ac lectus augue.</p>
<p>Cras aliquam massa aliquet orci ultricies, sit amet ultrices ipsum dignissim. Quisque non faucibus dui. Donec euismod nulla nec arcu malesuada, ac fermentum ligula consequat. Maecenas pellentesque massa quis pretium sollicitudin. Mauris vel felis hendrerit, tristique purus eget, venenatis metus. Praesent urna est, aliquet non blandit quis, tristique sit amet nulla. Donec ut malesuada libero. In hac habitasse platea dictumst. Donec nisi quam, lacinia gravida dui sed, vulputate egestas neque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem elit, rutrum et nibh ac, vulputate mollis lorem. Fusce at lectus id risus scelerisque suscipit. Vestibulum nec lobortis ex. Proin augue odio, euismod a vehicula ut, auctor ac turpis. Morbi eget facilisis turpis, quis tincidunt neque. Nulla facilisi. Pellentesque porta vel purus eget vulputate. Etiam sodales tincidunt nibh, eget pharetra augue aliquam id. Praesent varius egestas leo, ut luctus risus molestie ut. Integer sapien neque, efficitur vel leo in, aliquet lacinia elit. Nulla a magna ut dui blandit tempus id nec sem.</p>
<p>Donec imperdiet lacus posuere quam imperdiet, sed pharetra nulla fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ante neque, ullamcorper at porttitor nec, scelerisque vel neque. Sed ac aliquam leo. Sed nec elementum est. Quisque sed massa vulputate, ultrices risus eu, blandit tellus. Maecenas sed cursus lacus, vitae molestie nunc. Morbi vel ex leo. Maecenas eu orci non nisl aliquam ullamcorper. Phasellus dapibus eget arcu ut laoreet. Vestibulum semper nec justo et venenatis.</p>
<p>Cras venenatis ut tortor eu vestibulum. Mauris viverra dui vel eros consectetur pretium. Praesent a vestibulum quam, at vestibulum risus. Aenean sed lobortis felis. Phasellus a fermentum nibh. Integer in purus ex. Cras fermentum hendrerit nisi. Sed aliquet ut nunc eget tristique. Vestibulum in volutpat lorem. Pellentesque turpis metus, facilisis vitae tincidunt vulputate, elementum quis nulla. Nulla ac nibh nec urna blandit venenatis. Etiam lectus diam, maximus vel felis eu, facilisis egestas tellus. Curabitur tellus ex, blandit et ex vitae, dignissim auctor orci.</p>
<h2 id="sed-molestie">Sed molestie</h2>
<p>Sed molestie quam ut venenatis congue. Praesent posuere, massa nec ullamcorper porta, libero neque tincidunt sem, et posuere leo sapien ut tellus. Phasellus in purus gravida, lobortis felis quis, consequat tortor. Vivamus lobortis sem massa, dignissim porta magna tincidunt ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut viverra orci risus, in efficitur mi venenatis nec. Maecenas ac risus eu magna euismod faucibus. Quisque at ante ut ante vehicula commodo. Praesent lacinia turpis ex, vitae vehicula purus luctus a. Donec mattis accumsan tincidunt. Fusce ac lectus augue.</p>
<h3 id="cras-aliquam">Cras aliquam</h3>
<p>Cras aliquam massa aliquet orci ultricies, sit amet ultrices ipsum dignissim. Quisque non faucibus dui. Donec euismod nulla nec arcu malesuada, ac fermentum ligula consequat. Maecenas pellentesque massa quis pretium sollicitudin. Mauris vel felis hendrerit, tristique purus eget, venenatis metus. Praesent urna est, aliquet non blandit quis, tristique sit amet nulla. Donec ut malesuada libero. In hac habitasse platea dictumst. Donec nisi quam, lacinia gravida dui sed, vulputate egestas neque</p>
<h2 id="references">References</h2>
<ol>
<li>SomeLatinGuy. <em>(1920)</em>. [[Ipsum Dolor Sit Amet::https://www.lipsum.com/feed/html]]</li>
</ol>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem elit, rutrum et nibh ac, vulputate mollis lorem. Fusce at lectus id risus scelerisque suscipit. Vestibulum nec lobortis ex. Proin augue odio, euismod a vehicula ut, auctor ac turpis. Morbi eget facilisis turpis, quis tincidunt neque. Nulla facilisi. Pellentesque porta vel purus eget vulputate. Etiam sodales tincidunt nibh, eget pharetra augue aliquam id. Praesent varius egestas leo, ut luctus risus molestie ut. Integer sapien neque, efficitur vel leo in, aliquet lacinia elit. Nulla a magna ut dui blandit tempus id nec sem.How to customize your _config.yml2020-03-01T00:00:00+00:002020-03-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/customizable<p>One of the most common complaints I recieved after opensourcing the theme was that the customizability of the site at the level of liquid and ruby code was extremely inaccessible to people who just wanted to get it up and running. To be honest, up until then I was under the impression that everyone using the theme were some kind of technically proficient people who just didn't have the time to whip up their own theme, and are resorting to themes such as mine just so that they could have a decent looking site to share their works. The reality only dawned upon me when I got like several emails from people involved in the digital garden subculture—most of them from outside of tech—told me how they liked the features but were unable to use it effectively because it was obscured by something-something-brackety-brackets-and-colons-and-equalsigns. So this is my attempt at trying to ease the customization process.</p>
<p>If you are someone with even a tiny bit of programming background, I would advice you to look into <em>'_includes'</em> folder and go to the corresponding file name and tinker with it.</p>
<p>For those of you who are not into programming, I have tried to extract as many features as I can to <em>_config.yml</em> file, so that you can at least take the advantage of some if not all the features that are customizable.</p>
<p>This table explains all the customizable variables in <em>_config.yml</em>. Most of the main variables have a property called <code class="highlighter-rouge">enabled</code>, which when set to true will enable the main variable. For eg. turn on subheading by setting the enabled property to true, if it is already true, set it to false and see what happens.</p>
<table>
<thead>
<tr>
<th style="text-align: left">Variables</th>
<th style="text-align: left">Behavior</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">baseurl</code></td>
<td style="text-align: left">Base Url is where do you want the site to be served from, the top level directory. You can set it to <code class="highlighter-rouge">/</code> if you want to be served from the root directory, or else you can set to something like <code class="highlighter-rouge">post</code> or <code class="highlighter-rouge">blog</code> or something similar</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">url</code></td>
<td style="text-align: left">This variable takes in the url of your site. This is the url that you registered with you domain registrar. Sometimes it can also be something different, such as in the case of github pages it would something like <code class="highlighter-rouge"><username>.github.io</code></td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">heading</code></td>
<td style="text-align: left">This is the name of the site, this can only be renamed. It cannot be turned on or off</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">subheading</code></td>
<td style="text-align: left">This is the subheading of the site, you can enable or disable it. You can change the subheading by changing the <code class="highlighter-rouge">name</code> property in it. Note: This cannot be toggled if the site tagline is turned off</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">tagline</code></td>
<td style="text-align: left">This is the tagline of the site, you can toggle it using the <code class="highlighter-rouge">enabled</code> property in it. You can change the tagline by change the <code class="highlighter-rouge">name</code> property in it. Note: Toggling this off will also toggle off the subheading. This is a design decision because it looks ugly to have heading and subheading without anything to distinguish between the two.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">copyright</code></td>
<td style="text-align: left">I believe this is sort of self-explanatory. The <code class="highlighter-rouge">year</code> property takes the year and <code class="highlighter-rouge">msg</code> property takes the message, which in most cases is just your name or your organization's name. Oh and <code class="highlighter-rouge">msg</code> is a mandatory property for the copyright to enabled as it doesn't have any <code class="highlighter-rouge">enabled</code> property</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">user</code></td>
<td style="text-align: left">This is one of the most interesting variables there is. Turning it on or off will remove the profile dashboard on the home-screen.It can be turned on or off using the <code class="highlighter-rouge">display</code> property. <strong>Setting <code class="highlighter-rouge">display</code> to true will look like this:</strong> <img src="/assets/img/profile_board.png" /> and <strong>With it turned off like this:</strong> <img src="/assets/img/site_without_profile.png" /></td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">name</code></td>
<td style="text-align: left">Self-Explanatory. Note: Depends on <code class="highlighter-rouge">user</code> variable being turned on/off. If the <code class="highlighter-rouge">user</code> variable is turned off, none of its properties like name, bio, email, social will show up on the profile board.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">bio</code></td>
<td style="text-align: left">Self-Explanatory. Note: Depends on <code class="highlighter-rouge">user</code> variable being turned on/off. If the <code class="highlighter-rouge">user</code> variable is turned off, none of its properties like name, bio, email, social will show up on the profile board.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">email</code></td>
<td style="text-align: left">Self-Explanatory. Note: Depends on <code class="highlighter-rouge">user</code> variable being turned on/off. If the <code class="highlighter-rouge">user</code> variable is turned off, none of its properties like name, bio, email, social will show up on the profile board.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">photo</code></td>
<td style="text-align: left">This is the avatar that you see on the profile board when you turn the <code class="highlighter-rouge">user</code> variable on. Note: Depends on <code class="highlighter-rouge">user</code> variable being turned on/off. If the <code class="highlighter-rouge">user</code> variable is turned off, none of its properties like name, bio, email, social will show up on the profile board.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">social</code></td>
<td style="text-align: left">This is similar to the <code class="highlighter-rouge">user</code> property in that you can toggle the sub-properties by toggling it on/off. You can enable or disable the <code class="highlighter-rouge">social</code> variable by setting the <code class="highlighter-rouge">enabled</code> property to true/false. All the subproperties are fixed. You cannot add a new social media site, design constraint :( <br /><br /> All the social media properties take a username as input, if you don't want a particular social handle to be displayed, please leave the field blank or type in null.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">preferences</code></td>
<td style="text-align: left">This variable is a special type of variable. It is only for usage in the code. Don't worry, if you are not interested in the code, you won't have any use for it anyway.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">search</code></td>
<td style="text-align: left">This variable can toggled on or off by setting the <code class="highlighter-rouge">enabled</code> property. The <code class="highlighter-rouge">shortcut_hint</code> property is just a toggle for the markup that show <code class="highlighter-rouge">Shift + S</code> on the search bar</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">wiki-style link</code></td>
<td style="text-align: left">This variable allows you to opt-in or out of the wiki-style double brackets for specifiying internal and external links.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">sidenotes</code></td>
<td style="text-align: left">This variable covers both sidenotes and margin notes. Toggling this on-or-off will allow you use the custom sidenote syntax you saw in the [[How to use Simply Jekyll features on your website]] post.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">transclusion</code></td>
<td style="text-align: left">Similar to sidenotes</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">pagepreview</code></td>
<td style="text-align: left">This variable controls the on-hover behavior of internal links, that is, if you hover over an internal link it will show a small preview tooltip thingy if this variable turned on.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">wrapping</code></td>
<td style="text-align: left">This variable allows you to wrap text using a wrapped box. Eg. [[Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.::wrap]]</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">highlight</code></td>
<td style="text-align: left">Any text inside the highlight syntax mentioned in the [[How to use Simply Jekyll features on your website]] will be highlighted based on the color you mention in the <code class="highlighter-rouge">color</code> property of the variable. Eg. This is how it will look when [[highlighted::highlight]].</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">backlinks</code></td>
<td style="text-align: left">This variable controls the references that you see at the bottom of a post. Note that toggling it off will also remove it from the contextmenu. SEE Below: <img src="/assets/img/backlinks.png" /></td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">related</code></td>
<td style="text-align: left">This variable controls the references related by tags that you see at the bottom of a post. Note that toggling it off will also remove it from the contextmenu. Similar to backlinks.</td>
</tr>
<tr>
<td style="text-align: left"><code class="highlighter-rouge">contextmenu</code></td>
<td style="text-align: left">This variable allows you to right click on the post list on the home page to do things like copy links, see backlinks and related posts without going in.</td>
</tr>
</tbody>
</table>One of the most common complaints I recieved after opensourcing the theme was that the customizability of the site at the level of liquid and ruby code was extremely inaccessible to people who just wanted to get it up and running. To be honest, up until then I was under the impression that everyone using the theme were some kind of technically proficient people who just didn't have the time to whip up their own theme, and are resorting to themes such as mine just so that they could have a decent looking site to share their works. The reality only dawned upon me when I got like several emails from people involved in the digital garden subculture—most of them from outside of tech—told me how they liked the features but were unable to use it effectively because it was obscured by something-something-brackety-brackets-and-colons-and-equalsigns. So this is my attempt at trying to ease the customization process.How to setup Simply Jekyll2020-03-01T00:00:00+00:002020-03-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/setup<p>This is going to be a super simple post about how to setup and use this theme for your own website.</p>
<h2 id="usage">Usage</h2>
<p class="boxit">Q. What will it look like when I am done setting it up?</p>
<blockquote>
<p>This is what it should look (minus the exact essays ofcourse):
<img src="/assets/img/end_result.jpg" style="box-shadow: 2px 2px 20px 0 #ddd;" /></p>
</blockquote>
<p>Now without further ado, let's get started!</p>
<h3 id="setup-prerequisites">Setup Prerequisites</h3>
<p>For this tutorial, we’ll need to install a few things on your machine (you may have some of these already). Following the instructions on each website to install them.</p>
<ul>
<li>[[Ruby::https://www.ruby-lang.org/]]</li>
<li>[[RubyGems::https://rubygems.org/]]</li>
<li>[[Git::https://git-scm.com/downloads]]</li>
</ul>
<p>You’ll also need to create accounts on the following services:</p>
<ul>
<li>[[GitHub::https://www.github.com/join]] (to store the website)</li>
<li>[[Netlify::https://app.netlify.com/signup]] (to serve the website so others can see)</li>
</ul>
<p>Once you are all set with the prerequisites, we can then get to the fun part of getting it to appear on your screen. Let's get started with that.</p>
<h3 id="1-create-a-fork-of-the-template-repository">1. Create a fork of the template repository</h3>
<p>To simplify things, I provide the template showed in the image above to get started. You can always tweak this template to your taste later.</p>
<p>Visit the GitHub page for my template repository ([[rgvr/simply-jekyll::https://github.com/rgvr/simply-jekyll]]), and fork it to your account using the Fork button:</p>
<blockquote>
<p><img src="/assets/img/fork_button.jpg" style="box-shadow: 2px 2px 20px 0 #ddd;" /></p>
</blockquote>
<p>Once the forking process is complete, you should have a fork (essentially a copy) of my template in your own GitHub account. On the GitHub page for your repository, click on the green “Clone or download” button, and copy the URL: we’ll need it for the next step.</p>
<h3 id="2-clone-your-repository-locally">2. Clone your repository locally</h3>
<p>Next, we want to download the files from your GitHub repository onto your local machine. To do this, replace <YOUR_COPIED_URL_HERE> in the command below with the URL you copied in the previous step, then execute this command:</YOUR_COPIED_URL_HERE></p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone <YOUR_COPIED_URL_HERE> my-personal-website
</code></pre></div></div>
<p>As a reference point, this is how it looks like for me (the difference is likely just the GitHub username):</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git@github.com:rgvr/simply-jekyll.git my-personal-website
</code></pre></div></div>
<p>Then, navigate into the directory that was just created:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd my-personal-website
</code></pre></div></div>
<h3 id="3-test-out-the-site-locally">3. Test out the site locally</h3>
<p>Sweet! You now have your repository’s source code on your machine. Within the my-personal-website directory, run the following command to install the necessary dependencies like Jekyll:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ bundle
</code></pre></div></div>
<p>Once that’s done, ask Jekyll to start serving the site locally:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ bundle exec jekyll serve
</code></pre></div></div>
<p>Then, open up [[http://localhost:4000::http://localhost:4000]] in your browser.</p>
<p>If everything’s done correctly, you should now see the home page of your Personal Jekyll Website with Simply Jekyll Theme. 🎉</p>
<p>Keep in mind that this site is only available locally (notice the <code class="highlighter-rouge">localhost</code> part of the URL), so if we want it to be available on the Internet for everyone to enjoy, we need to deploy it to the Internet: we’ll use Netlify for that in the next step.</p>
<h3 id="4-connect-your-github-repository-to-netlify">4. Connect your GitHub repository to Netlify</h3>
<p>Netlify lets you automatically deploy your personal website on to the Internet when you update your GitHub repository. To do this, we need to connect your GitHub repository to Netlify:</p>
<ol>
<li>Log in to Netlify</li>
<li>Once logged in, click the “New site from Git” button</li>
<li>On the next page, select GitHub as the continuous deployment provider (you may need to authorize the connection, in which case, approve it)</li>
<li>On the next page, select your website repository from the list.</li>
<li>On the next page, replace the basic build settings with the following.
<ol>
<li>Type in "jekyll build" (without the quotes) inside the text field titled "Build Command".</li>
<li>Similarly type in "_site/" (without the quotes) inside the text field titled "Publish Directory".</li>
</ol>
</li>
<li>On the next page, keep the default settings, and click on “Deploy site”.</li>
</ol>
<p>That was easy! We’re almost done.</p>
<p>Wait a couple of minutes for the initial deploy to complete.</p>
<p>Once that’s done, your website should be available on the Internet via a generic Netlify URL, which you can change to a custom domain later if you’d like.</p>
<p>Now the cool thing is this: whenever you push an update to your GitHub repository, Netlify will automatically deploy your updates to the Internet.</p>
<h3 id="5-start-producing-content-with-your-simply-jekyll-based-website">5. Start producing content with your Simply Jekyll based Website</h3>
<p>At this point, you can start updating the files on your machine (in the my-personal-website folder) to change your simply-jekyll based website to your liking: update the copy, add some notes, tweak the layout, customize the colors, etc. Once you have something you’re happy with, push your changes to your GitHub repository with the following commands:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add --all
$ git commit -m 'Update content'
$ git push origin master
</code></pre></div></div>
<p>If that command succeeds and the rest of the tutorial was done correctly, in a couple of minutes, you should see your changes live on your Netlify website. 🚀</p>
<p>And we’re done! You now have your own Simply Jekyll based Personal Website .</p>
<hr />
<p>If you’re curious, take a look at [[my personal simply jekyll based website here::https://www.rgvr.me]].</p>This is going to be a super simple post about how to setup and use this theme for your own website.How to use Simply Jekyll features on your website2020-02-01T00:00:00+00:002020-02-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/usage<p>Welcome to this feature usage tour. This is going to be another short post that describes how to use all the fancy features we saw in [[Exploring the features of Simply Jekyll]]. So without further ado, let's get started.</p>
<h2 id="the-default-features">The default features</h2>
<p>All the default jekyll markdown features are made available such that they don't cause any conflict with the custom features that we have implemented. To see how to the raw markdown gets generated, go to the [[Test page to see how the raw markdown is rendered]]</p>
<h2 id="the-custom-features">The Custom features</h2>
<h3 id="1-creating-a-wiki-style-link">1. Creating a wiki-style link</h3>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li>
<p><strong>Internal links:</strong> <strong>[[</strong>Some Link<strong>]]</strong></p>
</li>
<li>
<p><strong>External links:</strong> <strong>[[</strong>Some Text::https://address-to-the-website<strong>]]</strong></p>
</li>
</ul>
<p>Anything text inside a double square bracket is considered as an internal link. The text has to be a valid title, if you provide a random text inside double square brackets, it will showup highlighted in yellow telling you that there is no essay/article/file with the mentioned title.</p>
<p>Similarly, for external links all you have to do is add a double colon after the "Alt text" and enter the link to the website after the double colon as seen below.</p>
<p><strong>Examples</strong></p>
<p>Example of an internal link that points to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets.</p>
<blockquote>
<p><strong>Raw Syntax:</strong> <strong>[[</strong>Lorem ipsum dolor sit amet<strong>]]</strong></p>
<p><strong>Rendered Text:</strong> [[Lorem ipsum dolor sit amet]]</p>
</blockquote>
<p>Example of an internal link that do not point to a valid post or page, that is, a page with the title (not url) mentioned in the double brackets.</p>
<blockquote>
<p><strong>Raw Syntax:</strong> <strong>[[</strong>Title of a non-existent page<strong>]]</strong></p>
<p><strong>Rendered Text:</strong> [[Title of a non-existent page]]</p>
</blockquote>
<h3 id="2-creating-a-sidenote-or-a-marginnote">2. Creating a sidenote or a marginnote</h3>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li>
<p><strong>Sidenote:</strong> <strong>[[</strong>Some Text<strong>::keyword-of-the-type-of-the-sidenote]]</strong></p>
</li>
<li>
<p><strong>Marginnote:</strong> <strong>[[</strong>Some Text<strong>::keyword-of-the-type-of-the-marginnote]]</strong></p>
</li>
</ul>
<blockquote>
<table>
<thead>
<tr>
<th style="text-align: left">Type of the sidenote/marginnote</th>
<th style="text-align: left">keyword</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Left Sidenote</td>
<td style="text-align: left"><code class="highlighter-rouge">lsn</code></td>
</tr>
<tr>
<td style="text-align: left">Right Sidenote</td>
<td style="text-align: left"><code class="highlighter-rouge">rsn</code></td>
</tr>
<tr>
<td style="text-align: left">Left Marginnote</td>
<td style="text-align: left"><code class="highlighter-rouge">lmn</code></td>
</tr>
<tr>
<td style="text-align: left">Right Marginnote</td>
<td style="text-align: left"><code class="highlighter-rouge">rmn</code></td>
</tr>
</tbody>
</table>
</blockquote>
<p>So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax</p>
<p><strong>Examples</strong></p>
<p>Example of a sidenote to the right side of the page:</p>
<blockquote>
<p><strong>Raw Syntax:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. <strong>[[</strong>Phasellus mollis lectus id efficitur mollis.<strong>::rsn]]</strong> Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
<p><strong>Rendered Text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::rsn]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
</blockquote>
<p>Same goes with <code class="highlighter-rouge">lsn</code>, <code class="highlighter-rouge">rmn</code>, <code class="highlighter-rouge">lmn</code></p>
<h3 id="3-highlighting-a-piece-of-text">3. Highlighting a piece of text</h3>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li><strong>[[</strong>Some Link<strong>::highlight]]</strong></li>
</ul>
<p>There is only one color right now in which it highlights, a light bluish color, but you can easily extend it to support multiple colors by tinkering with it in <code class="highlighter-rouge">content.html</code> file in <code class="highlighter-rouge">_includes</code> directory.</p>
<p><strong>Examples</strong></p>
<blockquote>
<p><strong>Raw Syntax:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. <strong>[[</strong>Phasellus mollis lectus id efficitur mollis.<strong>::highlight]]</strong> Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
<p><strong>Rendered Text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Phasellus mollis lectus id efficitur mollis.::highlight]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
</blockquote>
<h3 id="4-partial-transclusion">4. Partial Transclusion</h3>
<p>Transclusion is just a natural extension of sidenote and marginnote feature.</p>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li>
<p><strong>Sidenote-transclusion:</strong> <strong>[[</strong>Some Text<strong>::keyword-of-the-type-of-the-sidenote-transclusion]]</strong></p>
</li>
<li>
<p><strong>Marginnote-transclusion:</strong> <strong>[[</strong>Some Text<strong>::keyword-of-the-type-of-the-marginnote-transclusion]]</strong></p>
</li>
</ul>
<blockquote>
<table>
<thead>
<tr>
<th style="text-align: left">Type of the sidenote/marginnote transclusion</th>
<th style="text-align: left">keyword</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Left Sidenote Transclusion</td>
<td style="text-align: left"><code class="highlighter-rouge">lsn-transclude</code></td>
</tr>
<tr>
<td style="text-align: left">Right Sidenote Transclusion</td>
<td style="text-align: left"><code class="highlighter-rouge">rsn-transclude</code></td>
</tr>
<tr>
<td style="text-align: left">Left Marginnote Transclusion</td>
<td style="text-align: left"><code class="highlighter-rouge">lmn-transclude</code></td>
</tr>
<tr>
<td style="text-align: left">Right Marginnote Transclusion</td>
<td style="text-align: left"><code class="highlighter-rouge">rmn-transclude</code></td>
</tr>
</tbody>
</table>
</blockquote>
<p>So, all you have to do is type in the keywords of the corresponding type of sidenote or marginnote after the double colon in the above syntax</p>
<p><strong>Examples</strong></p>
<p>Example of a transclusion to the right side of the page:</p>
<blockquote>
<p><strong>Raw Syntax:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. <strong>[[</strong>Lorem ipsum dolor sit amet<strong>::rmn-transclude]]</strong> Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
<p><strong>Rendered Text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. [[Lorem ipsum dolor sit amet::rmn-transclude]] Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
</blockquote>
<p>Same goes with <code class="highlighter-rouge">rsn</code>, <code class="highlighter-rouge">lsn</code>, <code class="highlighter-rouge">lmn</code></p>
<h3 id="5-wrapping-a-text-inside-a-box">5. Wrapping a text inside a box</h3>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li><strong>[[</strong>Some Text<strong>::wrap]]</strong></li>
</ul>
<p><strong>Examples</strong></p>
<blockquote>
<p><strong>Raw Syntax:</strong> <strong>[[</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis<strong>::wrap]]</strong>.</p>
<p><strong>Rendered Text:</strong> [[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum tortor in pharetra vehicula. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.::wrap]]</p>
</blockquote>
<h3 id="6-flashcard">6. Flashcard</h3>
<p><strong><u>General Syntax</u></strong></p>
<ul>
<li><strong>[[</strong>Some Text<strong>::srs]]</strong></li>
</ul>
<p><strong>Examples</strong></p>
<blockquote>
<p><strong>Raw Syntax:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>[[</strong>Donec rutrum tortor in pharetra vehicula<strong>::srs]]</strong>. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
<p><strong>Rendered Text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. [[Donec rutrum tortor in pharetra vehicula::srs]]. Fusce gravida lacus ac sem luctus congue at id justo. Ut sed tempus ante. Suspendisse sit amet diam nec justo rhoncus tristique. Ut blandit faucibus nisi vitae rutrum. Vivamus fermentum efficitur justo non facilisis.</p>
</blockquote>
<h3 id="7-specific-classes-for-changing-font-type-font-size-and-font-weight">7. Specific classes for changing font-type, font-size, and font-weight</h3>
<p>There are classes like very-small, medium-small, small, small-medium, medium, medium-large, large, very-large; that can be used to change the size of your text directly from markdown like this:</p>
<blockquote>
<p class="regular-sans"><strong>Raw Syntax:</strong></p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{:.large}
Some text here that needs to be enlarged
</code></pre></div> </div>
<p><strong>Rendered Text:</strong></p>
<p class="large">Some text here that needs to be enlarged</p>
</blockquote>
<p>Similarly there are classes like regular-sans, serif, bold, italic, oblique, bolder, etc for formatting the text.</p>
<blockquote>
<p><strong>Raw Syntax:</strong></p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{:.medium .serif .oblique}
Some text here that needs to be enlarged
</code></pre></div> </div>
<p><strong>Rendered Text:</strong></p>
<p class="medium serif oblique">Some text here that needs to be enlarged</p>
</blockquote>
<p>Other common classes are .boxit that is used to wrap the text, .disable-user-select to disallow users from being able to select a particular piece of text by selecting it, etc. There are more classes like these which you can see in the file <code class="highlighter-rouge">style.css</code>. Once you figure out which class to use, all you have to do is just add the class before the text you want inside a curl brace like this {:<classnames-with-dot-prepended-to-them>}</p>
<h3 id="8-other-implicit-features">8. Other implicit features.</h3>
<p>Features like backlinks, context menu, related posts, page preview are available by default as they are implemented using CSS and JS. So, you don't have to do anything other than write as you would normally to make use of those features.</p>
<h4 id="note">Note:</h4>
<p>When you typeout square brackets, it can be frustrating to type out the entire file title everytime. At least it was for me, so I created a small VSCode plugin, the editor in which I write my essays to autocomplete the titles as soon as I type double squarebrackets. It has been pretty handy for me, if you are interested in using VSCode or already use it, you can find it here: [[Notecomplete::https://github.com/rgvr/scratchpad/tree/master/note-complete]]. It is pretty simple to use, all you have to do is just download the note-complete folder and copy it to .vscode directory in your OS to start using it. :)</p>
<p>For setting up the theme on your website checkout [[How to setup Simply Jekyll]]</p>Welcome to this feature usage tour. This is going to be another short post that describes how to use all the fancy features we saw in [[Exploring the features of Simply Jekyll]]. So without further ado, let's get started.Test page to see how the raw markdown is rendered2020-01-01T00:00:00+00:002020-01-01T00:00:00+00:00https://simply-jekyll.netlify.app//posts/test<p>This is intended as a quick reference and showcase.</p>
<ul id="markdown-toc">
<li><a href="#heading" id="markdown-toc-heading">Headings</a></li>
<li><a href="#h1" id="markdown-toc-h1">H1</a> <ul>
<li><a href="#h2" id="markdown-toc-h2">H2</a> <ul>
<li><a href="#h3" id="markdown-toc-h3">H3</a> <ul>
<li><a href="#h4" id="markdown-toc-h4">H4</a> <ul>
<li><a href="#h5" id="markdown-toc-h5">H5</a> <ul>
<li><a href="#h6" id="markdown-toc-h6">H6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#emphasis" id="markdown-toc-emphasis">Emphasis</a></li>
<li><a href="#lists" id="markdown-toc-lists">Lists</a></li>
<li><a href="#links" id="markdown-toc-links">Links</a></li>
<li><a href="#images" id="markdown-toc-images">Images</a></li>
<li><a href="#syntax" id="markdown-toc-syntax">Code and Syntax Highlighting</a></li>
<li><a href="#math" id="markdown-toc-math">Math expressions</a></li>
<li><a href="#tables" id="markdown-toc-tables">Tables</a></li>
<li><a href="#blockquotes" id="markdown-toc-blockquotes">Blockquotes</a></li>
</ul>
</li>
<li><a href="#inline" id="markdown-toc-inline">Inline HTML</a> <ul>
<li><a href="#hr" id="markdown-toc-hr">Horizontal Rule</a></li>
<li><a href="#br" id="markdown-toc-br">Line Breaks</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="heading">Headings</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code># H1
## H2
### H3
#### H4
##### H5
###### H6
</code></pre></div></div>
<h1 id="h1">H1</h1>
<h2 id="h2">H2</h2>
<h3 id="h3">H3</h3>
<h4 id="h4">H4</h4>
<h5 id="h5">H5</h5>
<h6 id="h6">H6</h6>
<h3 id="emphasis">Emphasis</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
</code></pre></div></div>
<p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p>
<p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p>
<p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p>
<p>Strikethrough uses two tildes. <del>Scratch this.</del></p>
<h3 id="lists">Lists</h3>
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1. First ordered list item
...1. Ordered sublist
2. Another item
...* Unordered sublist
3. Actual numbers don't matter, just that it's a number
4. And another item.
⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
* Unordered list can use asterisks
- Or minuses
+ Or pluses
</code></pre></div></div>
<ol>
<li>First ordered list item
<ol>
<li>Ordered sublist</li>
</ol>
</li>
<li>Another item
<ul>
<li>Unordered sublist</li>
</ul>
</li>
<li>Actual numbers don't matter, just that it's a number</li>
<li>
<p>And another item.</p>
<p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).</p>
<p>To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
Note that this line is separate, but within the same paragraph.⋅⋅
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p>
</li>
</ol>
<ul>
<li>Unordered list can use asterisks</li>
<li>Or minuses</li>
<li>Or pluses</li>
</ul>
<h3 id="links">Links</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[I'm a relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself].
URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
</code></pre></div></div>
<p><a href="https://www.google.com">I'm an inline-style link</a></p>
<p><a href="https://www.google.com" title="Google's Homepage">I'm an inline-style link with title</a></p>
<p><a href="https://www.mozilla.org">I'm a reference-style link</a></p>
<p><a href="../blob/master/LICENSE">I'm a relative reference to a repository file</a></p>
<p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p>
<p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a>.</p>
<p>URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <a href="http://www.example.com">http://www.example.com</a> and sometimes
example.com (but not on Github, for example).</p>
<p>Some text to show that the reference links can follow later.</p>
<h3 id="images">Images</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Here's our logo (hover to see the title text):
Inline-style:
![alt text](/assets/img/profile.png "Logo Title Text 1")
Reference-style:
![alt text][logo]
[logo]: /assets/img/profile.png "Logo Title Text 2"
</code></pre></div></div>
<p>Here's our logo (hover to see the title text):</p>
<p>Inline-style:
<img src="/assets/img/profile.png" alt="alt text" title="Logo Title Text 1" /></p>
<p>Reference-style:
<img src="/assets/img/profile.png" alt="alt text" title="Logo Title Text 2" /></p>
<h3 id="syntax">Code and Syntax Highlighting</h3>
<hr />
<p>Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers – like Github's and Markdown Here – support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers);</p>
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Inline `code` has `back-ticks around` it.
</code></pre></div></div>
<p>Inline <code class="highlighter-rouge">code</code> has <code class="highlighter-rouge">back-ticks around</code> it.</p>
<p>Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks – they're easier and only they support syntax highlighting.</p>
<pre class="regular-sans">
<code>
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
</code>
</pre>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">JavaScript syntax highlighting</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span>
</code></pre></div></div>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">s</span> <span class="o">=</span> <span class="s">"Python syntax highlighting"</span>
<span class="k">print</span> <span class="n">s</span>
</code></pre></div></div>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
</code></pre></div></div>
<h3 id="math">Math expressions</h3>
<hr />
<p>You can write math expressions using the <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\LateX</mtext></mstyle></mrow><annotation encoding="application/x-tex">\LateX</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord text" style="color:#cc0000;"><span class="mord" style="color:#cc0000;">\LateX</span></span></span></span></span> <a href="https://en.wikipedia.org/wiki/LaTeX">markup language</a> between double dollar signs : $$…$$. They can be written inline or as a single block.</p>
<p>For example,</p>
<table>
<tbody>
<tr>
<td>$$P(A</td>
<td>B) = \frac{P(B</td>
<td>A)\cdot P(A)}{P(B)}$$ will render as :</td>
</tr>
</tbody>
</table>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>P</mi><mo stretchy="false">(</mo><mi>A</mi><mi mathvariant="normal">∣</mi><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mrow><mi>P</mi><mo stretchy="false">(</mo><mi>B</mi><mi mathvariant="normal">∣</mi><mi>A</mi><mo stretchy="false">)</mo><mo>⋅</mo><mi>P</mi><mo stretchy="false">(</mo><mi>A</mi><mo stretchy="false">)</mo></mrow><mrow><mi>P</mi><mo stretchy="false">(</mo><mi>B</mi><mo stretchy="false">)</mo></mrow></mfrac></mrow><annotation encoding="application/x-tex">P(A|B) = \frac{P(B | A)\cdot P(A)}{P(B)}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathnormal" style="margin-right:0.13889em;">P</span><span class="mopen">(</span><span class="mord mathnormal">A</span><span class="mord">∣</span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:2.363em;vertical-align:-0.936em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.427em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.13889em;">P</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span><span class="mclose">)</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.13889em;">P</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.05017em;">B</span><span class="mord">∣</span><span class="mord mathnormal">A</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord mathnormal" style="margin-right:0.13889em;">P</span><span class="mopen">(</span><span class="mord mathnormal">A</span><span class="mclose">)</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.936em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span>
<table>
<tbody>
<tr>
<td>Please note that for a math block to be displayed correctly, it needs to be separated by an empty line, above and below. Besides, the pipe character</td>
<td>may conflict with markdown : it is recommended to use \vert instead.</td>
</tr>
</tbody>
</table>
<h3 id="tables">Tables</h3>
<hr />
<p>Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.</p>
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
</code></pre></div></div>
<p>Colons can be used to align columns.</p>
<table>
<thead>
<tr>
<th>Tables</th>
<th style="text-align: center">Are</th>
<th style="text-align: right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td style="text-align: center">right-aligned</td>
<td style="text-align: right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td style="text-align: center">centered</td>
<td style="text-align: right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td style="text-align: center">are neat</td>
<td style="text-align: right">$1</td>
</tr>
</tbody>
</table>
<p>There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.</p>
<table>
<thead>
<tr>
<th>Markdown</th>
<th>Less</th>
<th>Pretty</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>Still</em></td>
<td><code class="highlighter-rouge">renders</code></td>
<td><strong>nicely</strong></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<h3 id="blockquotes">Blockquotes</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
</code></pre></div></div>
<blockquote>
<p>Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.</p>
</blockquote>
<p>Quote break.</p>
<blockquote>
<p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p>
</blockquote>
<h2 id="inline">Inline HTML</h2>
<p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p>
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code><dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
</code></pre></div></div>
<p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p>
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
<h3 id="hr">Horizontal Rule</h3>
<hr />
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Three or more...
---
Hyphens
***
Asterisks
___
Underscores
</code></pre></div></div>
<p>Three or more…</p>
<hr />
<p>Hyphens</p>
<hr />
<p>Asterisks</p>
<hr />
<p>Underscores</p>
<h3 id="br">Line Breaks</h3>
<hr />
<p>My basic recommendation for learning how line breaks work is to experiment and discover – hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.</Enter></p>
<p>Here are some things to try out:</p>
<div class="regular-sans highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
</code></pre></div></div>
<p>Here's a line for us to start with.</p>
<p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p>
<p>This line is also a separate paragraph, but…
This line is only separated by a single newline, so it's a separate line in the <em>same paragraph</em>.</p>
<p>License: CC-BY</p>This is intended as a quick reference and showcase.