Merge pull request #106 from sujaykundu777/sujay/oct

hero and articles components seperated
sujaykundu777 · Oct 14, 2021 · cdbfb6f · cdbfb6f · vercel · Oct 14, 2021
2 parents 7433051 + 9fd21e3
commit cdbfb6f
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 137 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,32 +1,40 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.7.0)
+    addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     backports (3.21.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.8)
+    concurrent-ruby (1.1.9)
     em-websocket (0.5.2)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    eventmachine (1.2.7-x64-mingw32)
-    faraday (1.4.1)
+    faraday (1.8.0)
+      faraday-em_http (~> 1.0)
+      faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
+      faraday-httpclient (~> 1.0.1)
       faraday-net_http (~> 1.0)
       faraday-net_http_persistent (~> 1.1)
+      faraday-patron (~> 1.0)
+      faraday-rack (~> 1.0)
       multipart-post (>= 1.2, < 3)
       ruby2_keywords (>= 0.0.4)
+    faraday-em_http (1.0.0)
+    faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
+    faraday-httpclient (1.0.1)
     faraday-net_http (1.0.1)
-    faraday-net_http_persistent (1.1.0)
-    ffi (1.15.0)
-    ffi (1.15.0-x64-mingw32)
+    faraday-net_http_persistent (1.2.0)
+    faraday-patron (1.0.0)
+    faraday-rack (1.0.0)
+    ffi (1.15.4)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
     i18n (1.8.10)
       concurrent-ruby (~> 1.0)
-    jekyll (4.2.0)
+    jekyll (4.2.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -68,20 +76,20 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.5.1)
+    listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     multi_json (1.15.0)
     multipart-post (2.1.1)
-    nio4r (2.5.7)
+    nio4r (2.5.8)
     octokit (4.21.0)
       faraday (>= 0.9)
       sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (4.0.6)
-    puma (5.3.1)
+    puma (5.5.2)
       nio4r (~> 2.0)
     rack (1.6.13)
     rack-jekyll (0.5.0)
@@ -96,13 +104,11 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.26.0)
-    ruby2_keywords (0.0.4)
+    rouge (3.26.1)
+    ruby2_keywords (0.0.5)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
-    sassc (2.4.0-x64-mingw32)
-      ffi (~> 1.9)
     sawyer (0.8.2)
       addressable (>= 2.3.5)
       faraday (> 0.8, < 2.0)
@@ -124,14 +130,13 @@ GEM
     trollop (2.9.9)
     tzinfo (1.2.9)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2021.1)
+    tzinfo-data (1.2021.3)
       tzinfo (>= 1.0.0)
-    unicode-display_width (1.7.0)
+    unicode-display_width (1.8.0)
     wdm (0.1.1)
 
 PLATFORMS
-  ruby
-  x64-mingw32
+  x86_64-linux
 
 DEPENDENCIES
   bundler (~> 2.2.6)
@@ -153,4 +158,4 @@ DEPENDENCIES
   wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.2.16
+   2.2.29
diff --git a/README.md b/README.md
@@ -26,12 +26,18 @@ $ cd your_github_username
 $ ruby -v
 $ gem install bundler
 $ bundler -v
-$ bundle add jekyll
-$ bundle exec jekyll -v
 $ bundle update
-$ bundle install
+$ bundle exec jekyll -v
 $ bundle exec jekyll serve --watch
 ```
+
+If you are using permission issues, running bundler:
+
+```sh
+$ sudo rm -rf _site
+$ bundle update
+$ bundle exec jekyll serve
+```
 Start the server locally at http://127.0.0.1:4000/ or http://localhost:4000/
 
 ### Deploy your devlopr-jekyll blog - One Click Deploy

diff --git a/_config.yml b/_config.yml
@@ -31,6 +31,7 @@ author_email: "[email protected]"
 author_location: India
 author_website_url: "https://sujaykundu.com"
 typewrite-text: devlopr is a jekyll framework built for developers. You can edit this in _config.yml file
+hero_cover_img: sample_cover.jpg # replace this for changing homepage cover (eg. try cover.jpeg). Image should be in /assets/img
 
 # Experiences
 author_work_experiences:
@@ -97,8 +98,8 @@ mailchimp_form_url: https://sujaykundu.us10.list-manage.com/subscribe/post?u=50b
 formspree_email: [email protected]
 
 # releases - widget can be (sidebar, modal or embed)
-# olvy_organization: devlopr
-# olvy_widget_type: sidebar
+olvy_organization: devlopr
+olvy_widget_type: sidebar
 
 # syntax highlighter
 markdown: kramdown

diff --git a/_includes/header.html b/_includes/header.html
@@ -26,26 +26,12 @@
 
             </ul>
           </div>
-          <!-- <ul class="nav justify-content-end">
-              <li class="nav-item">
-                <a class="nav-link" href="{{site.url}}{{site.baseurl}}/get-started">
-                   Get Started
-                </a>
-              </li> -->
-              <!-- <li class="nav-item">
-                  <a class="nav-link" id="olvy-target">
-                      What's New
-                  </a>
-              </li> -->
-              <!-- <li class="nav-item">
-                  <a class="nav-link" href="{{site.url}}{{site.baseurl}}/styleguide">
-                     Styleguide
-                  </a>
-                </li>
-            <li class="nav-item">
-              <button id="olvy-target" class="btn btn-dark"> What's New </button>
-            </li> -->
           <ul class="nav justify-content-end">
+            <li class="nav-item">
+              <a class="nav-link" href="{{site.url}}{{site.baseurl}}/styleguide">
+                 Styleguide
+              </a>
+            </li>
             <li class="nav-item">
               <a class="nav-link toggle-search-button" href="#search">
                 <i class="fa fa-search search-icon" aria-hidden="true"></i>

diff --git a/_includes/hero.html b/_includes/hero.html
@@ -0,0 +1,40 @@
+<style>
+/* change cover_img in config.yml */
+.jumbotron {
+    background-color: var(--main-background-color) !important;
+    background-image: url('/assets/img/{{site.hero_cover_img}}');
+    text-align: center;
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+}
+.jumbotron-btns {
+  display: block;
+  margin-top: 50px;
+}
+
+.jumbotron-heading, .lead {
+  color: #fff;
+}
+</style>
+
+<!-- home hero section -->
+<div class="jumbotron">
+  <img class="author-profile-img" src="{{site.url}}{{site.baseurl}}/assets/img/{{site.author_logo}}" />
+  <p class="jumbotron-heading">Hi, I am {{site.author}} !</p>
+
+  <p class="lead" id="typewriteText"></p>
+  <span>
+    {%- include github_star_button.html -%}
+    {%- include github_fork_button.html -%}
+  </span>
+  <!-- uncomment/modify buttons as you want-->
+  <div class="jumbotron-btns">
+    <a href="{{site.url}}{{site.baseurl}}/get-started">
+      <button class="btn btn-md btn-warning"> <strong>Get Started</strong> </button>
+    </a>
+    <a id="olvy-target">
+      <button class="btn btn-md btn-default"> <strong>What's New</strong> </button>
+     </a>
+  </div>
+</div>
diff --git a/_includes/recent_articles.html b/_includes/recent_articles.html
@@ -0,0 +1,44 @@
+<section id="recent-articles">
+  <div id="recent-articles-header">
+    <div id="recent-articles-title">
+      <h1 class="card-title">Recent Articles</h1>
+    </div>
+    <div id="recent-articles-show-all">
+      <a class="btn btn-lg btn-dark" href="/blog"> View All </a>
+    </div>
+  </div>
+  <br />
+
+  <ul>
+    {% for post in site.posts limit:5 %}
+    <li class="article-card">
+      <a href="{{post.url}}" class="article-card-link">
+        <div id="article-container">
+          <div id="article-img">
+            {% if post.author %}
+              {% assign author = post.author %}
+              {% if author %}
+               {% assign author_data = site.data.authors[author] %}
+               <img
+                src="{{site.url}}{{site.baseurl}}/assets/img/authors/{{author_data.avatar}}"
+                width="50px"
+                height="50px"
+             />
+              {% endif %}
+            {% endif %}
+
+          </div>
+          <div id="article-link">
+              <p class="recent-article-link">{{post.title}} <span style="color: #ccc; font-size: 15px;"> - <i><time datetime="{{ post.date }}" itemprop="datePublished">{{ post.date | date: "%b %-d, %Y" }}</time></i></span></p>
+            </div>
+            <div id="article-alert">
+            {% for cat in post.category limit:1 %}
+             <button class="btn btn-sm btn-dark">{{cat}}</button>
+            {% endfor %}
+            </div>
+        </div>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</section>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -39,22 +39,5 @@
       });
     }
   </script>
-     <!-- olvy releases -->
-     <!-- <script>
-      var OlvyConfig = {
-        organisation: "{{site.olvy_organization}}",
-        target: "#olvy-target",
-        type: "{{site.olvy_widget_type}}",
-        view: {
-          showSearch: true,
-          compact: true,
-          showHeader: true, /* only applies when widget type is embed. you cannot hide header for modal and sidebar widgets */
-          showUnreadIndicator: true,
-          unreadIndicatorColor: "#FFA13AFF",
-          unreadIndicatorPosition: "top-right"
-        }
-      };
-    </script>
-    <script type="text/javascript" src="https://app.olvy.co/script.js" defer="defer"></script> -->
   </body>
 </html>
diff --git a/_layouts/full-width.html b/_layouts/full-width.html
@@ -39,8 +39,8 @@
       });
     }
   </script>
-      <!-- olvy releases -->
-      <!-- <script>
+      <!-- what's new -->
+       <script>
         var OlvyConfig = {
           organisation: "{{site.olvy_organization}}",
           target: "#olvy-target",
@@ -50,11 +50,11 @@
             compact: true,
             showHeader: true, /* only applies when widget type is embed. you cannot hide header for modal and sidebar widgets */
             showUnreadIndicator: true,
-            unreadIndicatorColor: "#FFA13AFF",
+            unreadIndicatorColor: "#FF8528FF",
             unreadIndicatorPosition: "top-right"
           }
         };
       </script>
-      <script type="text/javascript" src="https://app.olvy.co/script.js" defer="defer"></script> -->
+      <script type="text/javascript" src="https://app.olvy.co/script.js" defer="defer"></script>
     </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -9,56 +9,8 @@
     });
   });
 </script>
-    <div class="jumbotron" style="text-align: center;">
-      <img class="author-profile-img" src="{{site.url}}{{site.baseurl}}/assets/img/profile.png" />
-      <p class="jumbotron-heading">Hi, I am {{site.author}} !</p>
-      <p class="lead" id="typewriteText"></p>
-         {%- include github_star_button.html -%}
-         {%- include github_fork_button.html -%}
-    </div>
+    <!-- hero section-->
+    {%- include hero.html -%}
     <div class="col-lg-8 offset-md-2">
-      <section id="recent-articles">
-        <div id="recent-articles-header">
-          <div id="recent-articles-title">
-            <h1 class="card-title">Recent Articles</h1>
-          </div>
-          <div id="recent-articles-show-all">
-            <a class="btn btn-lg btn-dark" href="/blog"> View All </a>
-          </div>
-        </div>
-        <br />
-
-        <ul>
-          {% for post in site.posts limit:5 %}
-          <li class="article-card">
-            <a href="{{post.url}}" class="article-card-link">
-              <div id="article-container">
-                <div id="article-img">
-                  {% if post.author %}
-                    {% assign author = post.author %}
-                    {% if author %}
-                     {% assign author_data = site.data.authors[author] %}
-                     <img
-                      src="{{site.url}}{{site.baseurl}}/assets/img/authors/{{author_data.avatar}}"
-                      width="50px"
-                      height="50px"
-                   />
-                    {% endif %}
-                  {% endif %}
-
-                </div>
-                <div id="article-link">
-                    <p class="recent-article-link">{{post.title}} <span style="color: #ccc; font-size: 15px;"> - <i><time datetime="{{ post.date }}" itemprop="datePublished">{{ post.date | date: "%b %-d, %Y" }}</time></i></span></p>
-                  </div>
-                  <div id="article-alert">
-                  {% for cat in post.category limit:1 %}
-                   <button class="btn btn-sm btn-dark">{{cat}}</button>
-                  {% endfor %}
-                  </div>
-              </div>
-            </a>
-          </li>
-          {% endfor %}
-        </ul>
-      </section>
+      {%- include recent_articles.html -%}
     </div>