panthera-jekyll 1.2.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e698d7a1ff8dbfa0e03259d10e4df413be01a7f056c2c803bf352c887bf2b69b
-  data.tar.gz: c828eecc97bac4c876c74ce60eed510da7b1dc6fac1efd0ce76b708647c186f8
+  metadata.gz: 97dff38fb777f88d514d40bb480844699b89fbea648eb18138dceeccd92d6fd8
+  data.tar.gz: 8729ed86c622920e7805920c2d85f78c94598c1ff0197f3d37e153046ac47a09
 SHA512:
-  metadata.gz: 8ed2709024e200c487b8190debdc8906da135bf85e86d7b6e1368d8b298754aae62e2ceec45ffdfc85ce9429450bb74360b22ff2c46655cdaad0334a7e5fa5ca
-  data.tar.gz: a204a1d20ec23ba90452fdefef8d06494b03f9fb9aec5888d062c394c4ffeb1cb40d9519c36538af4d8910ddf1acc7390dd46fbd32b3d9468449a726a8617e94
+  metadata.gz: 012d47efcef47ea5205f4aceffa965e9f09d710b41d2a20868504d9d3c95d153bdf075bf9980af9ba755b88655989b27b5f0e398660afe2783e2972bbf084d7b
+  data.tar.gz: '06655518c4c5c050ef8b5c755286fe9fc8f4e8fab6f682026929dd2fcaf01862e3189bfea0a40fb8c80d75568ef0489ff5e68ac581927a4ac6e373ce84ecc2f2'

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 | prepend: site.baseurl }}" style="background-image: url({{ '/' | prepend: site.baseurl | append: post.image }});"></a>
+        {% else %}
+        <a href="{{ post.url | prepend: site.baseurl }}"></a>
+        {% endif %}
+      </div>
+    </div>
+    <div class="pan-post-list--right">
+      <div class="pan-post-list--content">
+        <h2><a href="{{ post.url | prepend: site.baseurl }}">{{ 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/_layouts/post.html

@@ -2,4 +2,23 @@
 layout: default
 ---
 
-{{ content }}
+<section class="post-view">
+  <div class="post-view__image">
+    {% if page.image %}
+    <img src="{{ '/' | prepend: site.baseurl | append: post.image }}" alt="{{ page.title }}">
+    {% else %}
+    <img src="{{ '/assets/images/post.jpg' | prepend: site.baseurl }}" alt="{{ page.title }}">
+    {% endif %}
+  </div>
+
+  <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/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.0
 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