Jekyll-toc: A GitHub Pages Compatible Table Of Contents Generator

Jekyll Pure Liquid Table of Contents

GitHub Pages can't run custom Jekyll plug-ins so when generating Tables of Contents (TOCs), you're stuck with either a JavaScript solution or using kramdown's {:toc} option. However, by using {:toc}, you are forced to have that code next to your actual markdown and you can't place it in a layout. This means every. single. post. will need to have the snippet. If you choose the JavaScript approach, that's perfectly fine but what if JS is disabled on someone's browser or your page is just really long and it becomes inefficient.

Instead, I wrote this solution entirely in Liquid and can be used as an {% include %} in any website you want, in any layout you want. Want to see it in action? Here are some awesome websites that I know of using this solution :heart:.

• the docs.docker.com website
• the UK Ministry of Justice Technical Guidance site
• "Minimal Mistakes" Jekyll Theme
• Apache's Beam and PDFBox websites
• JetBrains' OSS Jekyll Theme
• Bitcoin.org
• CloudCannon
• British Antarctic Survey
• Travis CI Docs
• the City of Amsterdam
• Intuit's Karate
• Duality's developer docs
• "Bulma Clean" Jekyll Theme
• The Google APIs team homepage, Google AIP website and API Linter project
• Shopify App CLI Extensions
• AWS' Open Distro for Elasticsearch Documentation

For more information regarding how this include works, read the blog post.

Want anchors next to your Jekyll headings without JavaScript or a plug-in?

Check out the sister project over at allejo/jekyll-anchor-headings.

Usage

Alright, so how do you use it?

Download the toc.html file from the latest release or the master branch

Toss that file in your _includes folder.

Use it in your template layout where you have {{ content }} which is the HTML rendered from the markdown source with this liquid tag:

{% include toc.html html=content %}

Parameters

This snippet is highly customizable. Here are the available parameters to change the behavior of the snippet.

Parameter	Type	Default	Description
html	string	*	the HTML of compiled markdown generated by kramdown in Jekyll
sanitize	bool	false	when set to true, the headers will be stripped of any HTML in the TOC
class	string	''	a CSS class assigned to the TOC; concat multiple classes with '.'
id	string	''	an ID to be assigned to the TOC
h_min	int	1	the minimum TOC header level to use; any heading lower than this value will be ignored
h_max	int	6	the maximum TOC header level to use; any heading greater than this value will be ignored
ordered	bool	false	when set to true, an ordered list will be outputted instead of an unordered list
item_class	string	''	add custom class for each list item; has support for %level% placeholder, which is the current heading level
submenu_class	string	''	add custom class(es) for each child group of headings; has support for %level% placeholder which is the current "submenu" heading level
base_url	string	''	add a base url to the TOC links for when your TOC is on another page than the actual content
anchor_class	string	''	add custom class(es) for each anchor element
skip_no_ids	bool	false	skip headers that do not have an id attribute

* This is a required parameter

Deprecated Variables

• baseurl has been deprecated since 1.1.0, use base_url instead
• skipNoIDs has been deprecated since 1.1.0, use skip_no_ids instead

Performance

The performance impact of this snippet on your site is pretty negligible. The stats below were gotten from Jekyll's --profile option.

Filename                              | Count |      Bytes |    Time
--------------------------------------+-------+------------+--------

# performance on docs.docker.com from ~Feb 2017
_includes/toc.html                    |   813 |    524.17K |  6.422

# performance on the "Minimal Mistakes" Jekyll theme
_includes/toc.html                    |    94 |     29.43K |  0.413

Download Details:

Author: Allejo
Source Code: https://github.com/allejo/jekyll-toc 
License: BSD-3 or MIT licenses.

#jekyll #github #pages #table #content 

What is GEEK

Buddha Community

Jekyll-toc: A GitHub Pages Compatible Table Of Contents Generator

Jekyll Pure Liquid Table of Contents

GitHub Pages can't run custom Jekyll plug-ins so when generating Tables of Contents (TOCs), you're stuck with either a JavaScript solution or using kramdown's {:toc} option. However, by using {:toc}, you are forced to have that code next to your actual markdown and you can't place it in a layout. This means every. single. post. will need to have the snippet. If you choose the JavaScript approach, that's perfectly fine but what if JS is disabled on someone's browser or your page is just really long and it becomes inefficient.

Instead, I wrote this solution entirely in Liquid and can be used as an {% include %} in any website you want, in any layout you want. Want to see it in action? Here are some awesome websites that I know of using this solution :heart:.

• the docs.docker.com website
• the UK Ministry of Justice Technical Guidance site
• "Minimal Mistakes" Jekyll Theme
• Apache's Beam and PDFBox websites
• JetBrains' OSS Jekyll Theme
• Bitcoin.org
• CloudCannon
• British Antarctic Survey
• Travis CI Docs
• the City of Amsterdam
• Intuit's Karate
• Duality's developer docs
• "Bulma Clean" Jekyll Theme
• The Google APIs team homepage, Google AIP website and API Linter project
• Shopify App CLI Extensions
• AWS' Open Distro for Elasticsearch Documentation

For more information regarding how this include works, read the blog post.

Want anchors next to your Jekyll headings without JavaScript or a plug-in?

Check out the sister project over at allejo/jekyll-anchor-headings.

Usage

Alright, so how do you use it?

Download the toc.html file from the latest release or the master branch

Toss that file in your _includes folder.

Use it in your template layout where you have {{ content }} which is the HTML rendered from the markdown source with this liquid tag:

{% include toc.html html=content %}

Parameters

This snippet is highly customizable. Here are the available parameters to change the behavior of the snippet.

Parameter	Type	Default	Description
html	string	*	the HTML of compiled markdown generated by kramdown in Jekyll
sanitize	bool	false	when set to true, the headers will be stripped of any HTML in the TOC
class	string	''	a CSS class assigned to the TOC; concat multiple classes with '.'
id	string	''	an ID to be assigned to the TOC
h_min	int	1	the minimum TOC header level to use; any heading lower than this value will be ignored
h_max	int	6	the maximum TOC header level to use; any heading greater than this value will be ignored
ordered	bool	false	when set to true, an ordered list will be outputted instead of an unordered list
item_class	string	''	add custom class for each list item; has support for %level% placeholder, which is the current heading level
submenu_class	string	''	add custom class(es) for each child group of headings; has support for %level% placeholder which is the current "submenu" heading level
base_url	string	''	add a base url to the TOC links for when your TOC is on another page than the actual content
anchor_class	string	''	add custom class(es) for each anchor element
skip_no_ids	bool	false	skip headers that do not have an id attribute

* This is a required parameter

Deprecated Variables

• baseurl has been deprecated since 1.1.0, use base_url instead
• skipNoIDs has been deprecated since 1.1.0, use skip_no_ids instead

Performance

The performance impact of this snippet on your site is pretty negligible. The stats below were gotten from Jekyll's --profile option.

Filename                              | Count |      Bytes |    Time
--------------------------------------+-------+------------+--------

# performance on docs.docker.com from ~Feb 2017
_includes/toc.html                    |   813 |    524.17K |  6.422

# performance on the "Minimal Mistakes" Jekyll theme
_includes/toc.html                    |    94 |     29.43K |  0.413

Download Details:

Author: Allejo
Source Code: https://github.com/allejo/jekyll-toc 
License: BSD-3 or MIT licenses.

#jekyll #github #pages #table #content 

How To Create User-Generated Content? [A Simple Guide To Grow Your Brand]

In this digital world, online businesses aspire to catch the attention of users in a modern and smarter way. To achieve it, they need to traverse through new approaches. Here comes to spotlight is the user-generated content or UGC.

What is user-generated content?
“ It is the content by users for users.”

Generally, the UGC is the unbiased content created and published by the brand users, social media followers, fans, and influencers that highlight their experiences with the products or services. User-generated content has superseded other marketing trends and fallen into the advertising feeds of brands. Today, more than 86 percent of companies use user-generated content as part of their marketing strategy.

In this article, we have explained the ten best ideas to create wonderful user-generated content for your brand. Let’s start without any further ado.

1. Content From Social Media Platforms
   In the year 2020, there are 3.81 million people actively using social media around the globe. That is the reason social media content matters. Whenever users look at the content on social media that is posted by an individual, then they may be influenced by their content. Perhaps, it can be used to gain more customers or followers on your social media platforms.

Generally, social media platforms help the brand to generate content for your users. Any user content that promotes your brand on the social media platform is the user-generated content for your business. When users create and share content on social media, they get 28% higher engagement than a standard company post.

Furthermore, you can embed your social media feed on your website also. you can use the Social Stream Designer WordPress plugin that will integrate various social media feeds from different social media platforms like Facebook, Twitter, Instagram, and many more. With this plugin, you can create a responsive wall on your WordPress website or blog in a few minutes. In addition to this, the plugin also provides more than 40 customization options to make your social stream feeds more attractive.

2. Consumer Survey
   The customer survey provides powerful insights you need to make a better decision for your business. Moreover, it is great user-generated content that is useful for identifying unhappy consumers and those who like your product or service.

In general, surveys can be used to figure out attitudes, reactions, to evaluate customer satisfaction, estimate their opinions about different problems. Another benefit of customer surveys is that collecting outcomes can be quick. Within a few minutes, you can design and load a customer feedback survey and send it to your customers for their response. From the customer survey data, you can find your strengths, weaknesses, and get the right way to improve them to gain more customers.

3. Run Contests
   A contest is a wonderful way to increase awareness about a product or service. Contest not just helps you to enhance the volume of user-generated content submissions, but they also help increase their quality. However, when you create a contest, it is important to keep things as simple as possible.

Additionally, it is the best way to convert your brand leads to valuable customers. The key to running a successful contest is to make sure that the reward is fair enough to motivate your participation. If the product is relevant to your participant, then chances are they were looking for it in the first place, and giving it to them for free just made you move forward ahead of your competitors. They will most likely purchase more if your product or service satisfies them.

Furthermore, running contests also improve the customer-brand relationship and allows more people to participate in it. It will drive a real result for your online business. If your WordPress website has Google Analytics, then track contest page visits, referral traffic, other website traffic, and many more.

4. Review And Testimonials
   Customer reviews are a popular user-generated content strategy. One research found that around 68% of customers must see at least four reviews before trusting a brand. And, approximately 40 percent of consumers will stop using a business after they read negative reviews.

The business reviews help your consumers to make a buying decision without any hurdle. While you may decide to remove all the negative reviews about your business, those are still valuable user-generated content that provides honest opinions from real users. Customer feedback can help you with what needs to be improved with your products or services. This thing is not only beneficial to the next customer but your business as a whole.

Reviews are powerful as the platform they are built upon. That is the reason it is important to gather reviews from third-party review websites like Google review, Facebook review, and many more, or direct reviews on a website. It is the most vital form of feedback that can help brands grow globally and motivate audience interactions.

However, you can also invite your customers to share their unique or successful testimonials. It is a great way to display your products while inspiring others to purchase from your website.

5. Video Content
   A great video is a video that is enjoyed by visitors. These different types of videos, such as 360-degree product videos, product demo videos, animated videos, and corporate videos. The Facebook study has demonstrated that users spend 3x more time watching live videos than normal videos. With the live video, you can get more user-created content.

Moreover, Instagram videos create around 3x more comments rather than Instagram photo posts. Instagram videos generally include short videos posted by real customers on Instagram with the tag of a particular brand. Brands can repost the stories as user-generated content to engage more audiences and create valid promotions on social media.

Similarly, imagine you are browsing a YouTube channel, and you look at a brand being supported by some authentic customers through a small video. So, it will catch your attention. With the videos, they can tell you about the branded products, especially the unboxing videos displaying all the inside products and how well it works for them. That type of video is enough to create a sense of desire in the consumers.

Continue Reading

#how to get more user generated content #importance of user generated content #user generated content #user generated content advantages #user generated content best practices #user generated content pros and cons

A Simple Guide to Github Page Deployment

Long story short: Jekyll is a template engine changing

markdowndocuments on staticHTMLwebpages, that you can then host anywyere, because you don’t need databases or server that has PHP or Python.

Usual Process

Normally the process of adding new post looks like this:

• I write markdown document with setting parameters like title, date and tags
• when I’m happy with what I wrote (never), I commit changes and push it to repository on GitHub. Repository name comes from my nick and is also address for blog asvid.github.io
• Github after pushing to branch master builds website from sources using Jekyll - probably something like running jekyll build
• result of Jekyll build is not present in a repository, but you see it right now after visiting bloga page

#github-pages #github-page-with-jekyll #jekyll #github-actions #github #deployment #continuous-deployment #web-development

Deploying my portfolio website on Github Pages using Github Actions.

I recently deployed  my portfolio site and wanted to try out github actions and this is my experience of automating the deployment.

This article is more focused on how you can use the GitHub actions and how easy it is to deploy your code to GitHub pages rather than the portfolio site code.So every time you make an update or build to your website ,the changes are automatically reflected and this automated deploying process makes work much faster.

The way GitHub action works is you create actions in your repositories by creating one or more yaml files and these are called workflows.Workflows now can handle build tasks like CI CD. This means you use the action to test your code and push the site to the desired hosting platform (in this case GitHub pages ) when the main branch changes .

First step assuming that you have a GitHub account is to create a repository having your website code in it.Now I have a bootstrap website but in the future I do plan on adding node JS so I already added package.json.

#workflow #portfolio #github #github-actions #github-pages

How to Compare Multiple GitHub Projects with Our GitHub Stats tool

If you have project code hosted on GitHub, chances are you might be interested in checking some numbers and stats such as stars, commits and pull requests.

You might also want to compare some similar projects in terms of the above mentioned stats, for whatever reasons that interest you.

We have the right tool for you: the simple and easy-to-use little tool called GitHub Stats.

Let’s dive right in to what we can get out of it.

Getting started

This interactive tool is really easy to use. Follow the three steps below and you’ll get what you want in real-time:

1. Head to the GitHub repo of the tool

2. Enter as many projects as you need to check on

3. Hit the Update button beside each metric

In this article we are going to compare three most popular machine learning projects for you.

#github #tools #github-statistics-react #github-stats-tool #compare-github-projects #github-projects #software-development #programming