panthera-jekyll 1.2.1 → 1.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e698d7a1ff8dbfa0e03259d10e4df413be01a7f056c2c803bf352c887bf2b69b
-  data.tar.gz: c828eecc97bac4c876c74ce60eed510da7b1dc6fac1efd0ce76b708647c186f8
+  metadata.gz: 9901fd714c3d7a3ac57b105b8aa9645e0df295a7e83bec12ad12dc5362bd29f5
+  data.tar.gz: d39ff8e9270632607880ed87cf013a497de2c9b773c669fca3fe0cec4f92ce72
 SHA512:
-  metadata.gz: 8ed2709024e200c487b8190debdc8906da135bf85e86d7b6e1368d8b298754aae62e2ceec45ffdfc85ce9429450bb74360b22ff2c46655cdaad0334a7e5fa5ca
-  data.tar.gz: a204a1d20ec23ba90452fdefef8d06494b03f9fb9aec5888d062c394c4ffeb1cb40d9519c36538af4d8910ddf1acc7390dd46fbd32b3d9468449a726a8617e94
+  metadata.gz: c51dd8a2ffdf6696a44a6d101efa25c8059d0b2ce3e797e11c663830ac3e5418251bb665a120d027e08659a1cd4bc3ba1c51acde7bea52076156dc5dce9dae70
+  data.tar.gz: 3de15fa02321f4034aa1e6c0bd576cbb766a4e1a94bf32f0fdbac03d00cbc4743865678dbcaa4c79f631c2e89c7bff2e13f148301a12dbd93589fbbec591bb3d

data/README.md

@@ -155,6 +155,67 @@ If you'd like to add your own custom styles:
 
 *Note: If you'd like to change the theme's Sass variables, you must set new values before the `@import` line in your stylesheet.*
 
+## Blog Posts
+
+### Creating Posts
+
+To create a post, add a file to your `_posts` directory with the following format:
+
+```
+YEAR-MONTH-DAY-title.MARKUP
+```
+
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:
+
+```
+2020-07-10-new-years-eve-is-awesome.md
+```
+
+```md
+---
+layout: post
+title: First Demo Post
+date: 2020-07-10 13:32:20 +0300
+description: Post description (optional)
+image: /image.jpg (optional)
+tags: [Holidays, Hawaii]
+---
+
+Post content here
+```
+
+### Displaying an index of posts
+
+1. Create a page, e.g. `posts.md`, with the following content:
+
+```md
+---
+layout: post
+---
+
+# PAGE TITLE HERE
+
+{% include all-posts.html %}
+```
+
+2. Add a link to the left pane in your `_config.yml`
+
+```yml
+menu:
+  ...
+  - text: Blog Posts
+    link: /posts
+    icon: ""
+```
+
+...and you're good
+
+More post features are coming soon. To get updates on new features, hit the `Watch` button at the top of this page to get notifications.
+
+If you love this project, kindly hit the `Star` button at the top of this page.
+
+Follow me on [Github](//github.com/christianezeani) to see more of my projects.
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/chrisitanezeani/panthera-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://contributor-covenant.org) code of conduct.

data/_includes/all-posts.html

@@ -0,0 +1,31 @@
+
+<section class="pan-post-list">
+  {% for post in site.posts %}
+  <div class="pan-post-list__item">
+    <div class="pan-post-list--left">
+      <div class="pan-post-list--image">
+        {% if post.image %}
+        <a href="{{ post.url | relative_url }}" style="background-image: url({{ post.image | relative_url }});"></a>
+        {% else %}
+        <a href="{{ post.url | relative_url }}"></a>
+        {% endif %}
+      </div>
+    </div>
+    <div class="pan-post-list--right">
+      <div class="pan-post-list--content">
+        <div class="pan-post-list--body">
+          <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
+          <p class="info">
+            <span>{{ post.date | date: '%Y, %b %d' }}</span>
+            &nbsp;&nbsp; - &nbsp;&nbsp;
+            <span>{% capture words %}{{ post.content | number_of_words }}{% endcapture %}{% unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " minute read" }}{% endunless %}</span>
+          </p>
+          <p class="desc">{{ post.content | strip_html | truncatewords: 20 }}</p>
+        </div>
+        </div>
+    </div>
+  </div>
+  {% endfor %}
+</section>
+
+{% include pagination.html %}

data/_includes/header.html

@@ -7,11 +7,13 @@
     <div class="pan-layout-header__avatar">
       <span>{{ site.title | default: site.github.owner_name }}</span>
       
-      {% if site.github.owner_gravatar_url %}
-      <img src="{{ site.avatar | default: site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
-      {% else %}
-      <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=40" alt="">
-      {% endif %}
+      <a href="{{ site.baseurl }}">
+        {% if site.github.owner_gravatar_url %}
+        <img src="{{ site.avatar | default: site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
+        {% else %}
+        <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=40" alt="">
+        {% endif %}
+      </a>
     </div>
   </div>
 </section>

data/_includes/left.html

@@ -20,12 +20,16 @@
 
   <div class="pan-layout-left__top">
     <div class="pan-layout-left__avatar">
-      {% if site.github.owner_gravatar_url %}
-      <a href="{{ site.url }}">
-        <img src="{{ site.avatar | default: site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
+      {% if site.avatar %}
+      <a href="{{ site.baseurl }}">
+        <img src="{{ site.avatar }}" alt="{{ site.title | default: site.github.owner_name }}">
+      </a>
+      {% else if site.github.owner_gravatar_url %}
+      <a href="{{ site.baseurl }}">
+        <img src="{{ site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
       </a>
       {% else %}
-      <a href="{{ site.url }}">
+      <a href="{{ site.baseurl }}">
         <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
       </a>
       {% endif %}

data/_layouts/post.html

@@ -2,4 +2,21 @@
 layout: default
 ---
 
-{{ content }}
+<section class="post-view">
+  {% if page.image %}
+  <div class="post-view__image">
+    <img src="{{ page.image | relative_url }}" alt="{{ page.title }}">
+  </div>
+  {% endif %}
+
+  <div class="post-view__header">
+    <h1>{{ page.title }}</h1>
+    <div class="post-view__info">
+      <span><strong>Date:</strong> {{ page.date | date: '%Y, %b %d' }}</span>
+    </div>
+  </div>
+  
+  <div class="post-view__body">
+    {{ content }}
+  </div>
+</section>

data/_sass/includes/all-posts.scss

@@ -0,0 +1,102 @@
+.pan-post-list {
+  --display: block;
+
+  --left-width: auto;
+  --left-height: 150px;
+
+  --right-width: auto;
+  --right-height: auto;
+  --right-padding: 0px 20px;
+
+  --border-radius: 5px;
+
+  --content-top: 0px;
+  --content-transform: none;
+  --content-height: 100px;
+  --content-margin: -30px auto 0px auto;
+  --content-shadow: -2px 4px 8px rgba(0, 0, 0, .2);
+  
+  @media (min-width: pan-device(lg)) {
+    --display: flex;
+
+    --left-width: 300px;
+    --left-height: auto;
+
+    --right-width: auto;
+    --right-padding: 20px 0px;
+
+    --content-top: 50%;
+    --content-transform: translateY(-50%);
+    --content-margin: 0px 0px 0px -30px;
+  }
+
+  &__item {
+    display: var(--display) !important;
+    flex-direction: row;
+    margin-bottom: 20px;
+
+    &:hover {
+      --content-shadow: -3px 5px 12px rgba(0, 0, 0, .4);
+    }
+  }
+
+  &--left {
+    width: var(--left-width) !important;
+    height: var(--left-height) !important;
+  }
+
+  &--right {
+    flex: 1;
+    padding: var(--right-padding) !important;
+    width: var(--right-width) !important;
+  }
+
+  &--image {
+    overflow: hidden;
+    border: 1px solid #DDD;
+    border-radius: var(--border-radius) !important;
+    width: 100% !important;
+    height: 100% !important;
+
+    > a {
+      display: block;
+      min-width: 100%;
+      min-height: 100%;
+      background-image: url(../images/post.jpg);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+
+  &--content {
+    position: relative;
+    top: var(--content-top) !important;
+    transform: var(--content-transform) !important;
+    background-color: #FFF;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--content-shadow) !important;
+    margin: var(--content-margin) !important;
+    transition: all 0.5s ease-in-out 0s;
+    padding: 20px;
+  }
+
+  &--body {
+    overflow: hidden;
+    min-height: var(--content-height) !important;
+  }
+
+  h2 {
+    margin: 0px 0px 5px 0px;
+  }
+
+  .info {
+    font-size: 12px;
+    margin: 0px 0px 10px 0px;
+  }
+
+  .desc {
+    font-size: 15px;
+    margin: 0px;
+  }
+}

data/_sass/includes/header.scss

@@ -43,11 +43,18 @@
       margin-left: 10px;
     }
 
-    img {
+    a {
+      display: inline-block;
       width: 40px;
       height: 40px;
-      border-radius: 50%;
-      vertical-align: middle;
+
+      > img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        vertical-align: middle;
+      }
     }
+
   }
 }

data/_sass/includes/post-view.scss

@@ -0,0 +1,37 @@
+.post-view {
+  
+  &__image {
+    display: block;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+
+    > img {
+      display: block;
+      width: 100%;
+    }
+  }
+  
+  &__header {
+    text-align: center;
+    border-bottom: 1px solid #F0F0F0;
+    margin-bottom: 20px;
+
+    h1 {
+      border-bottom: none;
+      padding-bottom: 0px;
+      margin-bottom: 5px;
+    }
+  }
+  
+  &__info {
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #333;
+  }
+
+  &__body {
+    // 
+  }
+
+}

data/_sass/panthera-jekyll.scss

@@ -9,4 +9,7 @@
 @import './includes/right.scss';
 @import './includes/header.scss';
 @import './includes/footer.scss';
-@import './includes/content.scss';
+@import './includes/content.scss';
+@import './includes/all-posts.scss';
+@import './includes/pagination.scss';
+@import './includes/post-view.scss';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: panthera-jekyll
 version: !ruby/object:Gem::Version
-  version: 1.2.1
+  version: 1.3.4
 platform: ruby
 authors:
 - Christian Ezeani
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-03 00:00:00.000000000 Z
+date: 2020-07-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -75,16 +75,21 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _includes/all-posts.html
 - _includes/footer.html
 - _includes/header.html
 - _includes/left.html
+- _includes/pagination.html
 - _layouts/default.html
 - _layouts/page.html
 - _layouts/post.html
+- _sass/includes/all-posts.scss
 - _sass/includes/content.scss
 - _sass/includes/footer.scss
 - _sass/includes/header.scss
 - _sass/includes/left.scss
+- _sass/includes/pagination.scss
+- _sass/includes/post-view.scss
 - _sass/includes/right.scss
 - _sass/main.scss
 - _sass/panthera-jekyll.scss
@@ -94,6 +99,7 @@ files:
 - _sass/root/variables.scss
 - assets/css/style.scss
 - assets/images/left-background.jpg
+- assets/images/post.jpg
 - assets/js/panthera-jekyll.js
 - assets/libs/fontawesome-5.9.0/css/all.css
 - assets/libs/fontawesome-5.9.0/css/all.min.css