panthera-jekyll 1.1.1 → 1.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8378c999584abc7ba7e42be307c521e2b2f6fd9af035913d61b93d7c0e70fd2b
-  data.tar.gz: 0be50858cc0e461d6034cfb2eb51e972d3c418a25692d7dc750f5284ca706360
+  metadata.gz: b330a3828138ae1ac2b996b6ef776d5d991f19dcaf629ffab0ffc27f8dcfd424
+  data.tar.gz: 92ba99917e3e285a3e0cde004795390300dc95ab4e4d6bfe958ffa7a7665e49e
 SHA512:
-  metadata.gz: 787d624fd0b095ec10f77fef71f5add820aaa737403edc0ebe1ef45cf2137cdb5cfcdd5b0a492c6868b9dde97dea52750deec22f84a8e5867ba97c14197f89a3
-  data.tar.gz: 04eaa149b2c5b3ebce5ad9ad09642b071e21a1185199907d92223f63a1710adc9950b684ac01409a219009904b078ad43261fb30d04b8fe730178a7ebd0803ad
+  metadata.gz: 3c1cc9d3b66c7b65cbccff8a6c6feaa3dd5cc21dd6115baaa8814adb38ce4d89a2955fe057506951c22bf5178f02e5b2928807add6c5492ad70dddefe30f9688
+  data.tar.gz: 9b91c4ee1ac7ff15fa2692e1714b46cac7ad908b868d61864fa73b6a106a765255d849fa712dd54e3eca94f514438f701e91e9f776ac3f38cc54c2912c52b88b

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,29 @@
+
+<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">
+        <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>
+  {% endfor %}
+</section>
+
+{% include pagination.html %}

data/_includes/left.html

@@ -20,10 +20,18 @@
 
   <div class="pan-layout-left__top">
     <div class="pan-layout-left__avatar">
-      {% if site.github.owner_gravatar_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 %}
-      <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
+      <a href="{{ site.baseurl }}">
+        <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
+      </a>
       {% endif %}
     </div>
     

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,99 @@
+.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: auto;
+  --content-margin: -30px auto 0px auto;
+  --content-shadow: -2px 4px 8px rgba(0, 0, 0, .2);
+  
+  @media (min-width: pan-device(md)) {
+    --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;
+    --content-height: 140px;
+  }
+
+  &__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;
+    height: var(--content-height) !important;
+    transition: all 0.5s ease-in-out 0s;
+    padding: 20px;
+  }
+
+  h2 {
+    margin: 0px 0px 5px 0px;
+  }
+
+  .info {
+    font-size: 12px;
+    margin: 0px 0px 10px 0px;
+  }
+
+  .desc {
+    font-size: 15px;
+    margin: 0px;
+  }
+}

data/_sass/includes/left.scss

@@ -105,17 +105,23 @@
     right: 0px;
     height: 200px;
 
-    img {
+    a {
       display: block;
-      margin: 0px auto;
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-
       position: relative;
       top: 50%;
       transform: translateY(-50%);
+      width: 150px;
+      height: 150px;
+      margin: 0px auto;
+
+      > img {
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: 50%;
+      }
     }
+
   }
 
   &__info {

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.1.1
+  version: 1.3.3
 platform: ruby
 authors:
 - Christian Ezeani
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-06-24 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