Skip to content

Instantly share code, notes, and snippets.

@sujaykundu777

sujaykundu777/dark_mode.js

Last active August 1, 2020 07:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sujaykundu777/505c38470a7b5608cc1c4b3705fd8e99 to your computer and use it in GitHub Desktop.
Save sujaykundu777/505c38470a7b5608cc1c4b3705fd8e99 to your computer and use it in GitHub Desktop.
Download ZIP
customizing devlopr-jekyll
Raw
dark_mode.js
/* Switch to Dark Mode Only */
function modeSwitcher() {
sessionStorage.setItem('theme', 'dark');
let theme = sessionStorage.getItem('theme');
document.documentElement.setAttribute('data-theme', 'dark');
}
$(document).ready(function () {
modeSwitcher();
});
Raw
seo-head.html
<head>
<meta charset="utf-8" />
<title>
{% if {page.title %}{{ page.title }} -{{site.title}}{% else %}{{ site.title }} - {{
site.subtitle }}{% endif %}
</title>
<meta http-equip="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% if page.summary %}
<meta name="description" content="{{ page.summary | escape }}- {% if {page.title %}{{ page.title }}{% else %}{{ site.description }}{% endif %}">
{% endif %}
<meta name="keywords" content="{% if page.title %}{{ page.title }}, {{ site.title }}, {% for categ in page.categories %}{{ categ }}{% if forloop.last == false %}, {% endif %}{% endfor %}{% else %}{{ site.title }}, {% for category in site.categories %}{% capture categories_slug %}{{ category | first }}{% endcapture %}{% for categ in categories_slug %}{{ categ }}{% endfor %}{% if forloop.last == false %}, {% endif %}{% endfor %}{% endif %},{{ page.keywords | escape }}"/>
<link
rel="alternate"
type="application/rss+xml"
title="RSS"
href="/feed.xml"
/>
<meta content="{{ site.share.fb_appid }}" property="fb:app_id" />
<meta content="{{ site.title }}" property="og:site_name" />
{% if page.noindex %}
<meta name="robots" content="noindex" />
{% endif %} {% if page.title %}
<meta content="{{ page.title }}" property="og:title" />
<meta content="article" property="og:type" />
{% else %}
<meta content="{{ site.title }}" property="og:title" />
<meta content="website" property="og:type" />
{% endif %} {% if page.summary %}
<meta content="{{ page.summary }}" property="og:description" />
{% else %}
<meta content="{{ site.description }}" property="og:description" />
{% endif %} {% if page.url %}
<meta content="{{ site.url }}{{ page.url }}" property="og:url" />
{% endif %} {% if page.date %}
<meta
content="{{ page.date | date_to_xmlschema }}"
property="article:published_time"
/>
<meta content="{{ site.url }}/about/" property="article:author" />
{% endif %} {% if page.thumbnail %}
<meta content="{{ site.url }}{{ page.thumbnail }}" property="og:image" />
{% endif %} {% if page.categories %} {% for category in page.categories
limit:1 %}
<meta content="{{ category }}" property="article:section" />
{% endfor %} {% endif %} {% if page.tags %} {% for tag in page.tags %}
<meta content="{{ tag }}" property="article:tag" />
{% endfor %} {% endif %}
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ site.share.twitter_username }}" />
<meta name="twitter:creator" content="@{{ site.share.twitter_username }}" />
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }}" />
{% else %}
<meta name="twitter:title" content="{{ site.title }}" />
{% endif %}
{% if page.url %}
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
{% endif %} {% if page.summary %}
<meta name="twitter:description" content="{{ page.summary }}" />
{% else %}
<meta name="twitter:description" content="{{ site.description }}" />
{% endif %} {% if page.header-img %}
<meta
name="twitter:image:src"
content="{{ site.url }}{{ page.thumbnail }}"
/>
{% endif %}
</head>
Raw
styleguide.md

devlopr jekyll - Styleguide

Lets try the different text styles Bold , Strong , Emphasis , Italic

Now, lets try different heading styles :

Hello in h1 !

Hello in h2 !

Hello in h3 !

Hello in h4 !

Hello in h5 !
Hello in h6 !

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List Item 5

This is a Block Quote, It can Expand Multiple Lines

You can use the mark tag to highlight text.

This line of text is meant to be deleted text

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

YouTube Responsive Embed

<iframe width="560" height="315" src="https://www.youtube.com/embed/nuwjUZCSB2Y?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

Vimeo Responsive Embed

<iframe src="https://player.vimeo.com/video/212114694?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

TED Responsive Embed

<iframe src="https://embed.ted.com/talks/ted_halstead_a_climate_solution_where_all_sides_can_win" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen=""></iframe>

Twitch Responsive Embed

<iframe src="https://player.twitch.tv/?autoplay=false&video=v248755437" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

SoundCloud Embed

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/29738591&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>

CodePen Embed

<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Syntax Highlighting

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

GitHub gist Embed

<script src="https://gist.github.com/ahmadajmi/dbb4f713317721668bcbc39420562afc.js"></script>

Input Style

Twitter Embed

I just published “Deploying a blog using Jekyll and Github Pages with SSL certificate for Free” https://t.co/B3T3IQVU93

— Sujay Kundu (@SujayKundu777) June 29, 2018
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Instagram Embed

A post shared by Ahmad Ajmi (@ahmadajme) on Apr 2, 2018 at 2:18pm PDT

<script async defer src="//www.instagram.com/embed.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment