dev-portfolio-blog 0.1.3 → 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f6e2cd76ca1b7bb0e1d221f5e3909aab3ed0341f7e0cb87d0b132a3c2bb70787
4
- data.tar.gz: 48c2b51910ff6c1d75895ea8baeb054570b4a914f277fb6ff8935d38d8f202cf
3
+ metadata.gz: 0de55e7c3e8526383f45882825764623a4fc6bad8bf0fc85797bdf9f97478419
4
+ data.tar.gz: b53a9c97c8694a36577efc9e655fb80837698f5db9769d156e4e4c5dc7516446
5
5
  SHA512:
6
- metadata.gz: da921aeba3a3fcff87a5c9164829293475c6ee632c177ac0493e1ce682a512e154f20b2d29b1d26b43d4ada619fdcfc455c6c98d70f90521c31a734b4ddc880b
7
- data.tar.gz: c10b4364a4908718d1a78d60ddb1c4021ca442812aeb8cfa18b0b5964442170a98b3de357b21ffbba237207f2719f5bf280b0879144b71d25dea0d44d9383d54
6
+ metadata.gz: ad3235d3f5e7ca36a8782f1c3d8758dcf5a0cc6a482d7011d4bd290402ce4e6300dd9fa5daefaa864f9c6f7c28f6e43e4c73c81e92ab77cecc414a50278a671c
7
+ data.tar.gz: 4fe40435955c13ef723194ef1139a9f940ee7bd0cdabe0c6e136113cd4c5bcddd86d689f47b976cc40dbd91cbe1087d5a2e7d028cded8406c78df3fcbc66d6d1
data/README.md CHANGED
@@ -1,14 +1,42 @@
1
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
1
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
2
2
  [![Gem Version](https://badge.fury.io/rb/dev-portfolio-blog.svg)](https://badge.fury.io/rb/dev-portfolio-blog)
3
3
  ![](https://ruby-gem-downloads-badge.herokuapp.com/dev-portfolio-blog)
4
4
 
5
5
  [![CodeFactor](https://www.codefactor.io/repository/github/rohitjain00/dev-portfolio-blog/badge)](https://www.codefactor.io/repository/github/rohitjain00/dev-portfolio-blog)
6
6
  [![Codacy Badge](https://api.codacy.com/project/badge/Grade/d0b9f1c23f564a8195a8588de7895c4c)](https://www.codacy.com/manual/rohitjain00/dev-portfolio-blog?utm_source=github.com&utm_medium=referral&utm_content=rohitjain00/dev-portfolio-blog&utm_campaign=Badge_Grade)
7
7
 
8
+ [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Frohitjain00%2Fdev-portfolio-blog&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
9
+
10
+ ## Home pagespeed
11
+
12
+ ![GitHub PageSpeed](https://api.speedbadge.io/v1?url=therohitjain.com&showStratLabel=true)
13
+ ![GitHub PageSpeed](https://api.speedbadge.io/v1?url=therohitjain.com&strat=desktop&showStratLabel=true)
14
+
15
+
16
+ ## Blog pagespeed
17
+
18
+ ![GitHub PageSpeed](https://api.speedbadge.io/v1?url=therohitjain.com/blog&showStratLabel=true)
19
+ ![GitHub PageSpeed](https://api.speedbadge.io/v1?url=therohitjain.com/blog&strat=desktop&showStratLabel=true)
20
+
21
+
22
+
8
23
  # dev-portfolio-blog
9
24
 
10
25
  This is a minimal jekyll theme for writing blogs and about yourself.
11
26
 
27
+ ## features
28
+ 1. Google Analytics
29
+ 2. Dark mode
30
+ 3. Disqus comments
31
+ 4. Categorization
32
+ 5. Emojis Support
33
+ 6. Highly optimized blog
34
+ #### PageSpeed Insights
35
+ * [Home](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftherohitjain.com)[(therohitjain.com)](https://therohitjain.com)
36
+ * [Blog](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftherohitjain.com/blog/)[(therohitjain.com/blog/)](https://therohitjain.com/blog/)
37
+ * [About](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftherohitjain.com/about/)[(therohitjain.com/about/)](https://therohitjain.com/about/)
38
+
39
+
12
40
  ## Desktop Preview
13
41
 
14
42
  ![Home Page](/screenshots/Home.png?raw=true "Home View of the website")
@@ -38,7 +66,7 @@ theme: dev-portfolio-blog
38
66
 
39
67
  And then execute:
40
68
 
41
- $ bundle
69
+ $ bundle install
42
70
 
43
71
  Or install it yourself as:
44
72
 
@@ -46,50 +74,98 @@ Or install it yourself as:
46
74
 
47
75
  ## Usage
48
76
 
49
- To start using the theme you need to create and edit some extra files in the root directory
77
+ To start using the theme you either follow these steps or simply fork my repo https://github.com/rohitjain00/rohitjain00.github.io and update the files.
78
+
79
+ ### Recommended
80
+ Please use the theme as the plugin so that all the latest updated for this theme comes directly in your website.
81
+
82
+ #### Clone the branch `master` and change the theme accordingly.
83
+
84
+
85
+ ### Starting from the beginning:
86
+ Assuming that you started your first website based on `minima` theme from [here](https://jekyllrb.com/docs/)
50
87
 
51
- 1. Create `blog.md` in the root folder ans set its yaml parameters to
88
+ 1. Add a `favicon.ico` to the root directory for favicon.
89
+
90
+ 2. Create `blog.md` in the root folder ans set its yaml parameters to
52
91
 
53
92
  ```yaml
54
93
  layout: blog
55
- title: blog
56
94
  permalink: /blog/
95
+ title: [Blog Page Title]
96
+ pagination:
97
+ enabled: true
57
98
  ```
58
99
 
59
- 2. Change your `about.md` yaml parameters to following
100
+ 3. Change your `about.md` yaml parameters to following
60
101
 
61
102
  ```yaml
62
103
  layout: description
63
104
  permalink: /about/
105
+ title: About
64
106
  ```
65
107
 
66
- 3. In the `_congif.yml` file add a key `resume_url` and set it to the path of the Resume. Also add `author_name` to your name to appear on the website.
108
+ 3. In the `index.md` file add
109
+
110
+ ```yaml
111
+ layout: home
112
+ home_text: Text
113
+ title: [Home Page Title]
114
+ ```
115
+
116
+ 4. Create a new `categories.md` file in root with following yaml parameters
117
+ ```yaml
118
+ layout: categories
119
+ permalink: /categories/
120
+ title: Categories
121
+ ```
67
122
 
68
- For example if the Resume is located in the root directory
123
+ 4. In the `_config.yml` file add following and change accordingly
69
124
 
125
+ Path is relative to the root directory
70
126
  ```yaml
71
- resume_url: 'Resume.pdf'
72
- author_name: [YOUR-NAME]
127
+ resume_url: [PATH_TO_RESUME]
128
+ author_name: [YOUR_NAME]
129
+ description: [SITE_DESCRIPTION]
130
+ url: [WEBSITE_URL]
131
+ google_analytics: '[google analytics Id]'
132
+ disqus:
133
+ shortname: [discus-shotname]
73
134
  ```
74
135
 
136
+ ### Minifier
137
+
138
+ Visit [Jekyll-minifier](https://github.com/digitalsparky/jekyll-minifier) and add this to your `_config.yml` file to enable minifier.
139
+
75
140
  ### Pagination
76
141
 
77
142
  Visit [jekyll-paginate-v2](https://github.com/sverrirs/jekyll-paginate-v2/blob/master/README-GENERATOR.md#site-configuration) and add this to your `_config.yml` file to enable pagination.
78
143
 
79
- Check [_config.yml](https://github.com/rohitjain00/dev-portfolio-blog/blob/master/_config.yml).
144
+ ### Check here [_config.yml](https://github.com/rohitjain00/rohitjain00.github.io/blob/site/_config.yml) for example config file.
145
+
80
146
 
147
+ ## Writing a new blog
81
148
 
82
- 1. In the `index.md` file add
149
+ Create a new folder `_posts` in root folder if not already exists.
150
+
151
+ 1. Create a new markdown file in the format `yyyy-mm-dd-postname.md`
152
+ 2. Make sure that disqus's shortname is valid.
153
+ 3. Add yaml configuartion to the post
83
154
 
84
155
  ```yaml
85
- home_text : some-text
156
+ ---
157
+ layout: post
158
+ comments: [true | false]
159
+ title: Hello World
160
+ categories: [category1, category2]
161
+ ---
162
+ Post Text.
86
163
  ```
87
164
 
88
- Replace "some-text" with your text
89
165
 
90
166
  ## Contributing
91
167
 
92
- Bug reports and pull requests are welcome on GitHub at <https://github.com/[USERNAME]/dev-portfolio-blog/.> This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
168
+ Bug reports and pull requests are welcome on GitHub at <https://github.com/rohitjain00/dev-portfolio-blog/.> This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
93
169
 
94
170
  ## Development
95
171
 
@@ -100,7 +176,12 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
100
176
  When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
101
177
  To add a custom directory to your theme-gem, please edit the regexp in `dev-portfolio-blog.gemspec` accordingly.
102
178
 
179
+ ### Read about the themes and how it's implemented [here](https://github.com/rohitjain00/dev-portfolio-blog/wiki/Theme-Management)
180
+
103
181
  ## License
104
182
 
105
183
  The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
106
184
 
185
+ If you like my work, you can buy me a coffee here :smile:
186
+
187
+ <a href="https://www.buymeacoffee.com/rohitjain00" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
@@ -0,0 +1,9 @@
1
+ <!-- Global site tag (gtag.js) - Google Analytics -->
2
+ <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
3
+ <script>
4
+ window.dataLayer = window.dataLayer || [];
5
+ function gtag(){dataLayer.push(arguments);}
6
+ gtag('js', new Date());
7
+
8
+ gtag('config', '{{ site.google_analytics }}');
9
+ </script>
@@ -0,0 +1,14 @@
1
+ <div id="disqus_thread"></div>
2
+ <script>
3
+ var disqus_config = function () {
4
+ this.page.url = '{{ page.url | absolute_url }}';
5
+ this.page.identifier = '{{ page.url | absolute_url }}';
6
+ };
7
+ (function() {
8
+ var d = document, s = d.createElement('script');
9
+ s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
10
+ s.setAttribute('data-timestamp', +new Date());
11
+ (d.head || d.body).appendChild(s);
12
+ })();
13
+ </script>
14
+ <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
@@ -0,0 +1,41 @@
1
+ {% if include.pageurl != nil and include.pageurl != '' %}
2
+ {% assign pageurl = include.pageurl %}
3
+ {% else %}
4
+ {% assign pageurl = page.url %}
5
+ {% endif %}
6
+
7
+ <style>
8
+ #share-buttons {display: inline-block; vertical-align: middle; }
9
+ #share-buttons:after {content: ""; display: block; clear: both;}
10
+ #share-buttons > div {
11
+ position: relative;
12
+ text-align: left;
13
+ height: 36px;
14
+ width: 32px;
15
+ float: left;
16
+ text-align: center;
17
+ }
18
+ #share-buttons > div > svg {height: 16px; fill: #d5d5d5; margin-top: 10px;}
19
+ #share-buttons > div:hover {cursor: pointer;}
20
+ #share-buttons > div.facebook:hover > svg {fill: #3B5998;}
21
+ #share-buttons > div.twitter:hover > svg {fill: #55ACEE;}
22
+ #share-buttons > div.linkedin:hover > svg {fill: #0077b5;}
23
+ #share-buttons > div.pinterest:hover > svg {fill: #CB2027;}
24
+ #share-buttons > div.mail:hover > svg {fill: #7D7D7D;}
25
+ #share-buttons > div.instagram:hover > svg {fill: #C73B92;}
26
+ #share-buttons > div.facebook > svg {height: 18px; margin-top: 9px;}
27
+ #share-buttons > div.twitter > svg {height: 20px; margin-top: 8px;}
28
+ #share-buttons > div.linkedin > svg {height: 19px; margin-top: 7px;}
29
+ #share-buttons > div.pinterest > svg {height: 20px; margin-top: 9px;}
30
+ #share-buttons > div.mail > svg {height: 14px; margin-top: 11px;}
31
+ </style>
32
+
33
+ <span>Share on: </span><div id="share-buttons">
34
+ <div class="facebook" title="Share this on Facebook" onclick="window.open('http://www.facebook.com/share.php?u={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1343 12v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg></div>
35
+ <div class="twitter" title="Share this on Twitter" onclick="window.open('http://twitter.com/home?status={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/></svg></div>
36
+ <div class="linkedin" title="Share this on Linkedin" onclick="window.open('https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ pageurl }}&title=&summary=&source=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M477 625v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"/></svg></div>
37
+ {% if page.image %}<div class="pinterest" title="Share this on Pinterest" onclick="window.open('https://pinterest.com/pin/create/button/?url=&media={{ site.url }}{{ page.image }}&description=');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 597q0-108 37.5-203.5t103.5-166.5 152-123 185-78 202-26q158 0 294 66.5t221 193.5 85 287q0 96-19 188t-60 177-100 149.5-145 103-189 38.5q-68 0-135-32t-96-88q-10 39-28 112.5t-23.5 95-20.5 71-26 71-32 62.5-46 77.5-62 86.5l-14 5-9-10q-15-157-15-188 0-92 21.5-206.5t66.5-287.5 52-203q-32-65-32-169 0-83 52-156t132-73q61 0 95 40.5t34 102.5q0 66-44 191t-44 187q0 63 45 104.5t109 41.5q55 0 102-25t78.5-68 56-95 38-110.5 20-111 6.5-99.5q0-173-109.5-269.5t-285.5-96.5q-200 0-334 129.5t-134 328.5q0 44 12.5 85t27 65 27 45.5 12.5 30.5q0 28-15 73t-37 45q-2 0-17-3-51-15-90.5-56t-61-94.5-32.5-108-11-106.5z"/></svg></div>{% endif %}
38
+ <div class="mail" title="Share this through Email" onclick="window.open('mailto:?subject=Hey Checkout this Amazing Blog I Found&body={{ site.url }}{{ pageurl }}');"><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z"/></svg></div>
39
+ </div>
40
+
41
+ <!--- Special thanks to https://jekyllcodex.org/without-plugin/share-buttons for this amazing piece of code without the use of actual images--->
@@ -0,0 +1,2 @@
1
+ <select id='themeSelector' onchange="toggleTheme()" aria-label="Select theme">
2
+ </select>
data/_layouts/blog.html CHANGED
@@ -2,17 +2,32 @@
2
2
  layout: description
3
3
  title: Blog
4
4
  pagetype: blog
5
- pagination:
6
- enabled: true
7
5
  ---
8
6
  <!-- This loops through the paginated posts -->
9
- <ul>
7
+
8
+
9
+ {% if paginator.total_posts == 0 %}
10
+ <p>No posts right now.</p>
11
+ {% else %}
12
+ <div class="blogPage-categoryList">
13
+ <ul>
14
+ <li><a href="{{ "/categories/" | relative_url }}">Categories</a> : </li>
15
+ {% for category in site.categories %}
16
+ {% capture category_name %}{{ category | first }}{% endcapture %}
17
+ <li><a href="{{"/categories/#" | append: category_name | relative_url}}">{{category_name}}</a></li>
18
+ {% endfor %}
19
+ </ul>
20
+ </div>
21
+ <ul class="blog-list">
10
22
  {% for post in paginator.posts %}
11
- <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
12
- <small>{{ post.date | date_to_string }}</small>
13
- <p>{{ post.excerpt }}</p>
23
+ <li>
24
+ <a class="blog-heading" href="{{ post.url | relative_url }}">{{ post.title }}</a><span class="date">{{ post.date | date_to_string }}</span>
25
+ <div class="excerpt">{{ post.excerpt }}</div>
26
+ </li>
14
27
  {% endfor %}
15
28
  </ul>
29
+ {% endif %}
30
+
16
31
  <hr>
17
32
  {% if paginator.total_pages > 1 %}
18
33
  <ul>
@@ -28,4 +43,4 @@ pagination:
28
43
  </li>
29
44
  {% endif %}
30
45
  </ul>
31
- {% endif %}
46
+ {% endif %}
@@ -0,0 +1,23 @@
1
+ ---
2
+ layout: description
3
+ permalink: /categories/
4
+ title: Categories
5
+ ---
6
+
7
+
8
+ <div id="archives">
9
+ {% for category in site.categories %}
10
+ <div class="archive-group">
11
+ {% capture category_name %}{{ category | first }}{% endcapture %}
12
+ <div id="#{{ category_name | slugize }}"></div>
13
+ <h3 class="category-head">{{ category_name }}</h3>
14
+ <a name="{{ category_name | slugize }}"></a>
15
+ {% for post in site.categories[category_name] %}
16
+ <article class="archive-item">
17
+ &nbsp;&nbsp;<a href="{{ post.url | relative_url }}">{{post.title}} - {{ post.date | date_to_string }}</a>
18
+ </article>
19
+ <br>
20
+ {% endfor %}
21
+ </div>
22
+ {% endfor %}
23
+ </div>
@@ -1,16 +1,49 @@
1
1
  <!doctype html>
2
- <html>
2
+ <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>{{ page.title }}</title>
6
+ <link rel="shortcut icon" href="{{"/favicon.ico" | relative_url }}" type="image/x-icon" />
7
+ <link rel="dns-prefetch" href="https://{{ site.disqus.shortname }}.disqus.com">
8
+ <meta
9
+ itemprop="description"
10
+ name="description"
11
+ content="
12
+ {% if page.description %}
13
+ {{ page.description | truncate: 160 }}
14
+ {% else %}
15
+ {{ site.description | truncate: 160 }}
16
+ {% endif %}"
17
+ />
18
+ <title>
19
+ {%if page.title %}
20
+ {{ page.title }}
21
+ {% else %}
22
+ {{ site.title }}
23
+ {% endif %}
24
+ </title>
25
+ <!-- async load css file -->
26
+ <link rel="stylesheet" href="{{"/assets/css/styles.css" | relative_url}}" media="none" onload="if(media!='all')media='all'">
27
+ <!-- Load css when script is disabled -->
28
+ <noscript><link rel="stylesheet" href="{{"/assets/css/styles.css" | relative_url}}"></noscript>
7
29
 
8
- <link rel="stylesheet" href="{{"/assets/css/styles.css" | relative_url}}">
30
+ <!-- Dns Prefetch the google analytics -->
31
+ <link rel="dns-prefetch" href="www.googletagmanager.com">
32
+ <link rel="dns-prefetch" href="www.google-analytics.com">
9
33
 
34
+
35
+
36
+ <!-- Load the script async and wait for the page to render for script to execute -->
37
+ <script defer src="{{"/assets/js/theme.js" | relative_url }}"></script>
38
+ <script defer src="{{"/assets/js/script.js" | relative_url }}"></script>
39
+
40
+ {% include analytics.html %}
10
41
  {% feed_meta %}
11
42
  {% seo %}
43
+
12
44
  </head>
13
- <body>
14
- {{ content }}
15
- </body>
45
+ <body onload="onLoad()">
46
+ {% include themeSelector.html %}
47
+ {{ content }}
48
+ </body>
16
49
  </html>
data/_layouts/post.html CHANGED
@@ -5,6 +5,23 @@ layout: description
5
5
  <small>{{ post.date | date_to_string }}</small>
6
6
  {{content}}
7
7
 
8
- {% if page.comments%}
9
- <hr>
10
- {% endif %}
8
+ <div class="post-footer">
9
+ <div class="post-categories">
10
+ Categories :
11
+ {% if post %}
12
+ {% assign categories = post.categories %}
13
+ {% else %}
14
+ {% assign categories = page.categories %}
15
+ {% endif %}
16
+ {% for category in categories %}
17
+ <a href="{{site.url}}/categories/#{{category|slugize}}">{{category}}</a>
18
+ {% unless forloop.last %}&nbsp;{% endunless %}
19
+ {% endfor %}
20
+ </div>
21
+ <div>{% include share_buttons.html %}</div>
22
+
23
+ </div>
24
+ {% if site.disqus.shortname and page.comments %}
25
+ <hr>
26
+ {% include disqus_comments.html %}
27
+ {% endif %}
data/_sass/main.scss CHANGED
@@ -1,187 +1,322 @@
1
1
  @mixin mediaQuery($point) {
2
- @if $point == phone-width {
3
- @media (max-width: 480px) { @content; }
2
+ @if $point==phone-width {
3
+ @media (max-width: 480px) {
4
+ @content;
4
5
  }
5
- @else if $point == tablet-width {
6
- @media (max-width: 768px) { @content; }
6
+ }
7
+
8
+ @else if $point==tablet-width {
9
+ @media (max-width: 768px) {
10
+ @content;
7
11
  }
8
12
  }
13
+ }
14
+
15
+ html {
16
+ --primary-background-color: white;
17
+ --primary-text-color: #222;
18
+ --primary-highlight-color: #eeeeee;
19
+ padding: 0;
20
+ margin: 0;
21
+ }
22
+
9
23
  body {
10
- background-color: white;
11
- color: #222;
12
- // font-family: ;
13
- font-size: 120%;
24
+ background-color: var(--primary-background-color);
25
+ color: var(--primary-text-color);
26
+ transition: background 0.1s ease-in, color 0.1s ease-in;
27
+ // font-size: 120%;
28
+ }
14
29
 
15
- .mid-section-home {
16
- text-align: center;
17
- display: inline-block;
18
- position: fixed;
19
- top: 0;
20
- bottom: 0;
21
- left: 0;
22
- right: 0;
23
- width: 400px;
24
- height: 350px;
25
- margin: auto;
26
- font-size: 1.5rem;
30
+ .mid-section-home {
31
+ text-align: center;
32
+ display: flex;
33
+ flex-direction: column;
34
+ justify-content: center;
35
+ align-content: center;
36
+ width: 100%;
37
+ max-width: 400px;
38
+ height: 100vh;
39
+ margin: auto;
40
+ font-size: 1.5rem;
27
41
 
28
- @include mediaQuery(phone-width) {
29
- font-size: 1 rem;
30
- height: 350px;
31
- width: 100%;
32
- span {
33
- display: none;
34
- }
35
- }
36
- h1 {
37
- font-size: 3.5rem;
38
- font-weight: 600;
42
+ @include mediaQuery(phone-width) {
43
+ font-size: 1 rem;
44
+
45
+ span {
46
+ display: none;
47
+ }
48
+ }
49
+
50
+ h1 {
51
+ font-size: 3.5rem;
52
+ font-weight: 600;
53
+ }
54
+ }
55
+
56
+ .sub-heading {
57
+ width: 80%;
58
+ margin: 0 auto;
59
+ display: flex;
60
+
61
+ @include mediaQuery(phone-width) {
62
+ width: 60%;
63
+ min-width: 270px;
64
+ }
65
+ }
66
+
67
+ .summary-about-me {
68
+ width: 50%;
69
+ text-align: right;
70
+ padding-right: 20px;
71
+ }
72
+
73
+ .nav-link {
74
+ ul {
75
+ padding-inline-start: 0;
76
+ }
77
+
78
+ li {
79
+ display: block;
80
+ text-align: left;
81
+
82
+ a {
83
+ text-decoration: none;
84
+ color: var(--primary-text-color);
85
+
86
+ &:hover {
87
+ border-bottom: 2px solid var(--primary-text-color);
88
+ color: var(--primary-text-color);
89
+ }
90
+ }
91
+ }
92
+
93
+ border-left: 2px solid var(--primary-text-color);
94
+ width: 50%;
95
+ padding-left: 20px;
96
+
97
+ // .toNav {
98
+ // }
99
+ @include mediaQuery(phone-width) {
100
+ li {
101
+ display: block;
102
+ margin-left: 10px;
103
+ }
104
+ }
105
+ }
106
+
107
+ .mid-section-cover {
108
+ width: 60%;
109
+ margin: 0 auto;
110
+ margin-top: 50px;
111
+
112
+ @include mediaQuery(tablet-width) {
113
+ width: 70%;
114
+ }
115
+
116
+ @include mediaQuery(phone-width) {
117
+ width: 95%;
118
+ }
119
+
120
+ nav {
121
+ display: flex;
122
+ flex-direction: row;
123
+ justify-content: space-between;
124
+ flex-wrap: wrap;
125
+ border-bottom: 2px solid var(--primary-text-color);
126
+
127
+ h1 {
128
+ // align-self: flex-start;
129
+ font-size: 40px;
130
+ flex-grow: 2;
131
+ text-align: left;
132
+ margin: 10px;
133
+ }
134
+
135
+ ul {
136
+ display: flex;
137
+ flex-direction: row;
138
+ flex-wrap: wrap;
139
+ justify-content: flex-end;
140
+ align-items: center;
141
+ flex-grow: 5;
142
+ padding-inline-start: 0;
143
+
144
+ li {
145
+ padding: 0 20px;
146
+ list-style-type: none;
147
+
148
+ a {
149
+ text-decoration: none;
150
+ color: var(--primary-text-color);
151
+
152
+ &:hover {
153
+ border-bottom: 2px solid var(--primary-text-color);
154
+ color: var(--primary-text-color);
155
+ }
39
156
  }
40
- .sub-heading {
41
- width: 80%;
42
- margin: 0 auto;
43
- display: flex;
44
- .summary-about-me {
45
- width: 50%;
46
- text-align: right;
47
- padding-right: 20px;
48
- }
49
- .nav-link {
50
- ul {
51
- padding-inline-start: 0px;
52
- }
53
- li {
54
- display: block;
55
- text-align: left;
56
- a {
57
- text-decoration : none;
58
- color: #222;
59
- &:hover {
60
- border-bottom: 2px solid black;
61
- color: #333;
62
- }
63
- }
64
- }
65
-
66
- border-left: 2px solid black;
67
- width: 50%;
68
- padding-left: 20px;
69
- // .toNav {
70
- // }
71
- @include mediaQuery(phone-width) {
72
- li {
73
- display: block;
74
- margin-left: 10px;
75
- }
76
- }
77
- }
78
- @include mediaQuery(phone-width) {
79
- width: 60%;
80
- min-width: 270px;
81
- }
157
+
158
+ @include mediaQuery(phone-width) {
159
+ text-align: center;
160
+ padding: 0 10px;
82
161
  }
162
+ }
83
163
  }
84
- .mid-section-cover {
85
- width: 60%;
86
- margin: 0 auto;
87
- margin-top: 50px;
88
-
89
- nav {
90
- display: flex;
91
- flex-direction: row;
92
- justify-content: space-between;
93
- align-items: stretch;
94
- flex-wrap: wrap;
95
- border-bottom: 2px solid #222;
96
- * {
97
- margin: 10px 10px;
98
- }
99
164
 
100
- h1 {
101
- // align-self: flex-start;
102
- font-size: 40px;
103
- }
104
- ul {
105
- flex-shrink: 1;
106
- padding: 0px 10px;
107
- li {
108
- padding: 0px 10px;
109
- display: inline-block;
110
- a {
111
- text-decoration : none;
112
- color: #222;
113
- &:hover {
114
- border-bottom: 2px solid black;
115
- color: #333;
116
- }
117
- }
118
- @include mediaQuery(phone-width) {
119
- text-align: center;
120
- padding: 0px 10px;
121
- }
122
- }
123
- }
124
- @include mediaQuery(phone-width) {
125
- flex-direction: column;
126
- justify-content: center;
127
- text-align: center;
128
- * {
129
- flex-basis: 100%;
130
- }
131
- }
165
+ @include mediaQuery(tablet-width) {
166
+ flex-direction: column;
167
+ justify-content: center;
168
+ align-items: center;
169
+
170
+ ul {
171
+ justify-content: center;
172
+ }
173
+
174
+ h1 {
175
+ text-align: center;
176
+ }
177
+ }
178
+ }
179
+
180
+ .sub-mid-section-cover {
181
+ width: 100%;
182
+ margin: 0 auto;
183
+ overflow: hidden;
184
+
185
+ img {
186
+ max-width: 100%;
187
+ }
188
+
189
+ a {
190
+ color: var(--primary-text-color);
191
+
192
+ nav {
193
+ display: flex;
194
+ flex-direction: row;
195
+ justify-content: space-between;
196
+ flex-wrap: wrap;
197
+ border-bottom: 2px solid var(--primary-text-color);
198
+
199
+ h1 {
200
+ // align-self: flex-start;
201
+ font-size: 40px;
202
+ flex-grow: 2;
203
+ text-align: left;
204
+ margin: 10px;
132
205
  }
133
206
 
134
- .sub-mid-section-cover {
135
- width: 90%;
136
- margin: 0 auto;
207
+ ul {
208
+ display: flex;
209
+ flex-direction: row;
210
+ flex-wrap: wrap;
211
+ justify-content: flex-end;
212
+ align-items: center;
213
+ flex-grow: 5;
214
+ padding-inline-start: 0;
215
+
216
+ li {
217
+ padding: 0 20px;
218
+ list-style-type: none;
137
219
 
138
- * {
139
- max-width: 100%;
140
- overflow-x: scroll;
141
- }
142
220
  a {
143
- color: black;
221
+ text-decoration: none;
222
+ color: var(--primary-text-color);
223
+
224
+ &:hover {
225
+ border-bottom: 2px solid var(--primary-text-color);
226
+ color: var(--primary-text-color);
227
+ }
144
228
  }
145
- .blog-section-list {
146
- a {
147
- color: black;
148
- }
229
+
230
+ @include mediaQuery(phone-width) {
231
+ text-align: center;
232
+ padding: 0 10px;
149
233
  }
234
+ }
150
235
  }
236
+
151
237
  @include mediaQuery(tablet-width) {
152
- width: 70%;
153
- }
154
- @include mediaQuery(phone-width) {
155
- width: 95%;
238
+ flex-direction: column;
239
+ justify-content: center;
240
+ align-items: center;
241
+
242
+ ul {
243
+ justify-content: center;
244
+ }
245
+
246
+ h1 {
247
+ text-align: center;
248
+ }
156
249
  }
250
+ }
157
251
  }
158
- // .page_trail {
159
- // text-align: right;
160
- // font-size: 30px;
161
- // ul {
162
- // li {
163
- // display: inline-block;
164
- // padding: 2px;
165
- // a {
166
- // text-decoration: none;
167
- // color: #222;
168
- // &:hover {
169
- // color: #222;
170
- // border-bottom: 1px solid black;
171
- // }
172
- // }
173
- // }
174
- // .selected {
175
- // a {
176
- // color: #222;
177
- // border-bottom: 1px solid black;
178
- // }
179
-
180
- // }
181
- // }
182
- // }
183
-
184
- .container-404 {
185
- text-align: center;
252
+ }
253
+ }
254
+
255
+ #themeSelector {
256
+ position: fixed;
257
+ top: 5px;
258
+ right: 5px;
259
+ background: var(--primary-background-color);
260
+ color: var(--primary-text-color);
261
+ border-radius: 5px;
262
+ border: 0;
263
+ }
264
+
265
+ .post-footer {
266
+ margin-top: 50px;
267
+ display: flex;
268
+ flex-direction: row-reverse;
269
+ justify-content: space-between;
270
+ align-items: center;
271
+ }
272
+
273
+ .blog-list {
274
+ list-style: none;
275
+ padding-left: 0;
276
+
277
+ li {
278
+ margin-bottom: 50px;
279
+
280
+ .excerpt {
281
+ font-size: 15px;
282
+ }
283
+
284
+ .blog-heading {
285
+ font-size: 25px;
286
+ font-weight: 800;
186
287
  }
288
+
289
+ .date {
290
+ font-size: 15px;
291
+ opacity: 0.8;
292
+ margin-left: 20px;
293
+ }
294
+ }
295
+ }
296
+
297
+ .blogPage-categoryList {
298
+ ul {
299
+ list-style-type: none;
300
+ display: flex;
301
+ flex-wrap: wrap;
302
+ padding-left: 0;
303
+
304
+ li {
305
+ margin: 10px 10px;
306
+ }
307
+
308
+ li:first-child {
309
+ margin-left: 0;
310
+ }
311
+ }
312
+ }
313
+
314
+
315
+ //custom md tags styles
316
+ div.highlight {
317
+ background: var(--primary-highlight-color);
318
+ padding: 5px;
319
+ border-radius: 5px;
320
+ margin: 10px 0px;
321
+ overflow: auto;
187
322
  }
@@ -0,0 +1,30 @@
1
+ function onLoad() {
2
+ var themeSelector = document.getElementById('themeSelector');
3
+ for (var themeName in themeMap) {
4
+ var opt = document.createElement('option');
5
+ opt.value = themeName;
6
+ opt.innerHTML = capitalizeFirstLetter(themeName);
7
+ themeSelector.appendChild(opt);
8
+ }
9
+ if (localStorage.getItem('theme') != null) {
10
+ themeSelector.value = localStorage.getItem('theme');
11
+ toggleTheme();
12
+ }
13
+ }
14
+
15
+ function toggleTheme() {
16
+ var themeName = themeSelector.value;
17
+ localStorage.setItem('theme', themeName);
18
+ var element = document.getElementsByTagName('html')[0];
19
+ changeTheme(element, themeMap[themeName]);
20
+ }
21
+
22
+ function changeTheme(element, theme) {
23
+ element.style.setProperty("--primary-background-color", theme['background-color']);
24
+ element.style.setProperty("--primary-text-color", theme['text-color']);
25
+ element.style.setProperty("--primary-highlight-color", theme['highlight-color']);
26
+ }
27
+
28
+ function capitalizeFirstLetter(string) {
29
+ return string.charAt(0).toUpperCase() + string.slice(1);
30
+ }
@@ -0,0 +1,12 @@
1
+ const themeMap = {
2
+ 'default': {
3
+ 'background-color': 'white',
4
+ 'text-color': '#222',
5
+ 'highlight-color': '#eee'
6
+ },
7
+ 'dark': {
8
+ 'background-color': '#222',
9
+ 'text-color': 'white',
10
+ 'highlight-color': '#2e2e2e'
11
+ }
12
+ }
data/blog.md ADDED
@@ -0,0 +1,8 @@
1
+ ---
2
+ layout: blog
3
+ permalink: /blog/
4
+ title: Rohit Jain | Blog
5
+ pagination:
6
+ enabled: true
7
+ ---
8
+
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dev-portfolio-blog
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.3
4
+ version: 0.1.9
5
5
  platform: ruby
6
6
  authors:
7
7
  - Rohit Jain
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-19 00:00:00.000000000 Z
11
+ date: 2021-11-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -16,14 +16,14 @@ dependencies:
16
16
  requirements:
17
17
  - - "~>"
18
18
  - !ruby/object:Gem::Version
19
- version: '3.8'
19
+ version: 3.8.7
20
20
  type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
24
  - - "~>"
25
25
  - !ruby/object:Gem::Version
26
- version: '3.8'
26
+ version: 3.8.7
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: jekyll-seo-tag
29
29
  requirement: !ruby/object:Gem::Requirement
@@ -81,33 +81,103 @@ dependencies:
81
81
  - !ruby/object:Gem::Version
82
82
  version: '0'
83
83
  - !ruby/object:Gem::Dependency
84
- name: bundler
84
+ name: jekyll-minifier
85
+ requirement: !ruby/object:Gem::Requirement
86
+ requirements:
87
+ - - ">="
88
+ - !ruby/object:Gem::Version
89
+ version: '0'
90
+ type: :runtime
91
+ prerelease: false
92
+ version_requirements: !ruby/object:Gem::Requirement
93
+ requirements:
94
+ - - ">="
95
+ - !ruby/object:Gem::Version
96
+ version: '0'
97
+ - !ruby/object:Gem::Dependency
98
+ name: jekyll-assets
99
+ requirement: !ruby/object:Gem::Requirement
100
+ requirements:
101
+ - - ">="
102
+ - !ruby/object:Gem::Version
103
+ version: '0'
104
+ type: :runtime
105
+ prerelease: false
106
+ version_requirements: !ruby/object:Gem::Requirement
107
+ requirements:
108
+ - - ">="
109
+ - !ruby/object:Gem::Version
110
+ version: '0'
111
+ - !ruby/object:Gem::Dependency
112
+ name: sprockets
85
113
  requirement: !ruby/object:Gem::Requirement
86
114
  requirements:
87
115
  - - "~>"
88
116
  - !ruby/object:Gem::Version
89
- version: '1.16'
90
- type: :development
117
+ version: '3.7'
118
+ type: :runtime
91
119
  prerelease: false
92
120
  version_requirements: !ruby/object:Gem::Requirement
93
121
  requirements:
94
122
  - - "~>"
95
123
  - !ruby/object:Gem::Version
96
- version: '1.16'
124
+ version: '3.7'
125
+ - !ruby/object:Gem::Dependency
126
+ name: autoprefixer-rails
127
+ requirement: !ruby/object:Gem::Requirement
128
+ requirements:
129
+ - - ">="
130
+ - !ruby/object:Gem::Version
131
+ version: '0'
132
+ type: :runtime
133
+ prerelease: false
134
+ version_requirements: !ruby/object:Gem::Requirement
135
+ requirements:
136
+ - - ">="
137
+ - !ruby/object:Gem::Version
138
+ version: '0'
139
+ - !ruby/object:Gem::Dependency
140
+ name: jemoji
141
+ requirement: !ruby/object:Gem::Requirement
142
+ requirements:
143
+ - - ">="
144
+ - !ruby/object:Gem::Version
145
+ version: '0'
146
+ type: :runtime
147
+ prerelease: false
148
+ version_requirements: !ruby/object:Gem::Requirement
149
+ requirements:
150
+ - - ">="
151
+ - !ruby/object:Gem::Version
152
+ version: '0'
153
+ - !ruby/object:Gem::Dependency
154
+ name: bundler
155
+ requirement: !ruby/object:Gem::Requirement
156
+ requirements:
157
+ - - ">="
158
+ - !ruby/object:Gem::Version
159
+ version: '0'
160
+ type: :development
161
+ prerelease: false
162
+ version_requirements: !ruby/object:Gem::Requirement
163
+ requirements:
164
+ - - ">="
165
+ - !ruby/object:Gem::Version
166
+ version: '0'
97
167
  - !ruby/object:Gem::Dependency
98
168
  name: rake
99
169
  requirement: !ruby/object:Gem::Requirement
100
170
  requirements:
101
- - - "~>"
171
+ - - ">="
102
172
  - !ruby/object:Gem::Version
103
- version: '12.0'
173
+ version: '0'
104
174
  type: :development
105
175
  prerelease: false
106
176
  version_requirements: !ruby/object:Gem::Requirement
107
177
  requirements:
108
- - - "~>"
178
+ - - ">="
109
179
  - !ruby/object:Gem::Version
110
- version: '12.0'
180
+ version: '0'
111
181
  description:
112
182
  email:
113
183
  - rohitjain18005@gmail.com
@@ -117,8 +187,13 @@ extra_rdoc_files: []
117
187
  files:
118
188
  - LICENSE.txt
119
189
  - README.md
190
+ - _includes/analytics.html
191
+ - _includes/disqus_comments.html
120
192
  - _includes/navigation.html
193
+ - _includes/share_buttons.html
194
+ - _includes/themeSelector.html
121
195
  - _layouts/blog.html
196
+ - _layouts/categories.html
122
197
  - _layouts/default.html
123
198
  - _layouts/description.html
124
199
  - _layouts/home.html
@@ -127,6 +202,9 @@ files:
127
202
  - _layouts/post.html
128
203
  - _sass/main.scss
129
204
  - assets/css/styles.scss
205
+ - assets/js/script.js
206
+ - assets/js/theme.js
207
+ - blog.md
130
208
  homepage: https://github.com/rohitjain00/dev-portfolio-blog
131
209
  licenses:
132
210
  - MIT
@@ -146,7 +224,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
146
224
  - !ruby/object:Gem::Version
147
225
  version: '0'
148
226
  requirements: []
149
- rubygems_version: 3.0.3
227
+ rubygems_version: 3.1.2
150
228
  signing_key:
151
229
  specification_version: 4
152
230
  summary: This is a simple efficient blog and portfolio