askclass-news-theme 0.4.0 → 0.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe2831ba003b1d4e6dee8eb49bdbbea8b1ef9daaaa6f73cab331ec15bd9b9981
-  data.tar.gz: c06277f57206b19c316507ffa198859ef16d8f2420d6c57b9a249c6c42aa21a2
+  metadata.gz: b13ded5da26f0b7adc34fa295fc9d018f642812c38510c25713b5c241e0e907d
+  data.tar.gz: 4de0c2c07f7f5cb3781819d2b6762dcbe612cf5c03a9f5b24e55755a7e230576
 SHA512:
-  metadata.gz: '03180d790acd0b4526e9e2307b688fcc685759a03f3e518295336cce2a7cb33d7b084a3a5a50f09cf7759ce4136ec70294df58eed5fa2942de292a8bcf16ce97'
-  data.tar.gz: df3f0c2b3d8cd4409046ea1cf8e208d9dd78d6c09aa12b4e14a08a6406a184bbaaedd19950a9392575da2a8b0703cde14296942cb92dc9f789a2e01020e016a2
+  metadata.gz: ce1854fc325620f7d67a3b145d279b857d2c75d016befed85f4061604e82fc1b0c0ece15d57194174660b514dd0484f912e4e106a5d3a80c4772bcd9145b1f61
+  data.tar.gz: 6391618c039a147c1076f3a47c0fc0ebe2f3d9d57f7b9fe1d79ddc01177cb76d50756f5be119a6ed36740e94fe243f7c15752602cb4b56f58fef53c9176dfa43

data/README.md

@@ -1,6 +1,7 @@
 # AskClass News Theme
+[![Build]][Build Link] [![CodeQL]][CodeQL Link]
 
-Simple responsive Jekyll theme featuring posts and authors.
+Simple responsive Jekyll theme puts posts and authors front and center.
 
 ## Installation
 
@@ -15,57 +16,83 @@ $ bundle
 
 ## Configuration
 
-Copy these files:
-- `index.html`
-- `config.yml` (edit this to fit your need)
-- `content/` (whole folder as an example)
-- `pwabuilder-sw.js` (PWA)
+Copy these files to your main folder.
+Edit `_config.yml` to your need.
+The `content` folder requires 3 sub-folders.
+`content/_hastags` folder requires `index.html`; copy content of `index.html` for every named tag.
 
-## Post File Format
+```
+/
+│   index.html (required)
+│   404.html
+│   _config.yml (edit this file)
+│   pwabuilder-sw.js (PWA)
+│
+└── content/
+│   │
+│   └── _posts/
+│   │   │   2022-06-15-the-academy.md
+│   │   │   ...
+│   │
+│   └── _writers/
+│   │   │   plato.md
+│   │   │   ...
+│   │
+│   └── _hashtags/
+│   │   │   index.html (required)
+│   │   │   bio.md
+│   │   │   ...
+```
+
+## Post Frontmatter
+
+Field        | Example               | Description
+---          | ---                   | :---
+`layout`     | `post`                | Don't add this unless you know what you're doing
+`title`      | `The Hobbit`          | Main title of the post
+`category`   | `J.R.R._Tolkien`      | Make author clickable (note the `_`)
+`writer`     | `J.R.R. Tolkien`      | Non-clickable writer's name (note no `_`)
+`color`      | `c5`                  | Values: `c1` .. `c10` (see [Card Colors]);
+`tags`       | `fantasy fiction`     | Alphanumeric words, use `-` to connect words
+`image`      | URL                   | Optional main image
+`source`     | `The Tolkien Society` | Optional main source
+`source_url` | URL                   | Optional link to `source`
+
+Example
 
 ```md
 ---
-# Don't change this
-layout: post
-# Well, what else could this be?
-title: The Hobbit
-# This is your author's name
+title: The Hobbit: An Unexpected Party
 category: J.R.R._Tolkien
-# Alternatively
-writer: J.R.R Tolkien
-# Values: c1 .. c10
-color: c1
-# Tags separated by spaces
-tags: fiction fantasy
-# Optional title image (shows up on index)
-image: https://article.images/iamge.jpg
-# Optional source info
-source: The Tolkien Society
-source_url: https://www.tolkiensociety.org/
+color: c5
+tags: fantasy fiction
 ---
 
-Whatever is here goes gets on index.
+In a hole in the ground there lived a hobbit.
 <!--more-->
-The rest of the article.
+Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.
 ```
 
-## Writer File Format
+## Writer Frontmatter
 
+Field      | Example   | Description
+---        | ---       | :---
+`layout`   | `writer`  | Don't add this unless you know what you're doing
+`size`     | `100`     | Optional profile image size
+`style`    | `center`  | Optional alignment either (`center` or `left`)
+`image`    | URL       | Optional link to profile image
 ```md
 ---
-# Don't change this
-layout: writer
-# Optional size of image
 size: 100
-# Optional position of the profile image either center or left
-style: center
-# Optional image
+style: left
 image: https://author.images/tolkien.jpg
 ---
 
 Biography.
 ```
 
+----
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/beAuthentic/askclass-news-theme.
@@ -94,3 +121,8 @@ The theme is available as open source under the terms of the [MPL-2.0 License].
 [Google Fonts]: https://fonts.google.com/
 [MPL-2.0 License]: https://opensource.org/licenses/MPL-2.0
 [Contributor Covenant]: http://contributor-covenant.org
+[Card Colors]: https://acn.askclass.com/2022/06/18/card-colors
+[Build]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml/badge.svg
+[Build Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/gem-push.yml
+[CodeQL]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml/badge.svg
+[CodeQL Link]: https://github.com/beAuthentic/askclass-news-theme/actions/workflows/codeql-analysis.yml

data/_config.yml

@@ -84,7 +84,7 @@ defaults:
 sass:
   style: compact
 
-keep_files:
+include:
   - index.html
   - 404.html
   - pwabuilder-sw.js

data/_includes/logo.html

@@ -4,5 +4,9 @@
       width="{{ include.size | default: site.acn.logo.size }}"
       title="{{ site.title }}"/>
   </a>
+  {%- if include.href %}
+  <h3 class="special"><a href="{{ include.href }}">{{ include.title | default: site.title }}</a></h3>
+  {% else %}
   <h3 class="special">{{ include.title | default: site.title }}</h3>
+  {% endif -%}
 </section>

data/_layouts/hashtag.html

@@ -12,14 +12,18 @@
       {%- break -%}
     {%- endfor -%}
 
-    {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag -%}
+    {% include logo.html image=site.acn.logo.alt_image size=site.acn.logo.alt_size title=tag href='/hashtags' -%}
     {%- if posts.size -%}
       {% include grid.html posts=posts %}
     {%- else -%}
+      {%- capture site_tags -%}
+        {% for tag in site.tags %}{{ tag[0] }}{% unless forloop.last %},{% endunless %}{% endfor -%}
+      {% endcapture -%}
+      {% assign tags_list = site_tags | split: ',' | sort_natural -%}
       <article class="tiles">
         <ul>
-          {%- for t in site.tags -%}
-            <li><a href="/hashtags/{{ t[0] }}">{{ t[0] }}<sup>{{ t[1].size }}</sup></a></li>
+          {%- for item in tags_list -%}
+            <li><a href="/hashtags/{{ item }}">{{ item }}<sup>{{ site.tags[item].size }}</sup></a></li>
           {%- endfor -%}
         </ul>
       </article>
@@ -27,5 +31,3 @@
     {%- include footer.html %}
   </body>
 </html>
-
-

data/_layouts/post.html

@@ -12,13 +12,15 @@
           {% endif %}
 
           <h1>{{ page.title }}</h1>
-          <small>{{ page.date | date: site.acn.date_format }}</small>
+          {% assign ymd = page.date | date: "%Y-%M-%D" %}
+          {% assign date = page.date | date: site.acn.date_format %}
+          <time pubdate datetime="{{ ymd }}" title="{{ date }}">{{ date }}</time>
 
           {% include writer.html info=page %}
           {% if writer_url %}
-            <h5><a href="{{ writer_url }}">{{ writer }}</a></h5>
+            <address><a rel="author" href="{{ writer_url }}">{{ writer }}</a></address>
           {% else %}
-            <h5>{{ writer }}</h5>
+            <address rel="author">{{ writer }}</address>
           {% endif %}
         </header>
 

data/_sass/_default.scss

@@ -1,39 +1,39 @@
-$mainFont: 'Open Sans', sans-serif;
-$secondaryFont: 'Teko', sans-serif;
-$specialFont: 'Josefin Sans', sans-serif;
-$monoFont: 'Share Tech Mono', monospace;
-$primaryColor: aliceblue;
-$secondaryColor: skyblue;
-$linkColor: deeppink;
-$bgColor: #222;
-$fgColor: ivory;
-$darkColor: gray;
-$contentWidth: 600px;
-$themeColor: #ffc100;
-$tertiaryColor: #2cdd88;
+$font-main: 'Open Sans', sans-serif;
+$font-secondary: 'Teko', sans-serif;
+$font-special: 'Josefin Sans', sans-serif;
+$font-mono: 'Share Tech Mono', monospace;
+$color-primary: aliceblue;
+$color-secondary: skyblue;
+$color-tertiary: #2cdd88;
+$color-bg: #222;
+$color-fg: ivory;
+$color-dark: gray;
+$color-link: deeppink;
+$color-theme: #ffc100;
+$content-width: 600px;
 
 html {
-  --specialFont: #{$specialFont};
-  --mainFont: #{$mainFont};
-  --secondaryFont: #{$secondaryFont};
-  --monoFont: #{$monoFont};
-  --primaryColor: #{$primaryColor};
-  --secondaryColor: #{$secondaryColor};
-  --linkColor: #{$linkColor};
-  --bgColor: #{$bgColor};
-  --fgColor: #{$fgColor};
-  --darkColor: #{$darkColor};
-  --contentWidth: #{$contentWidth};
-  --themeColor: #{$themeColor};
-  --tertiaryColor: #{$tertiaryColor};
+  --specialFont: #{$font-special};
+  --mainFont: #{$font-main};
+  --secondaryFont: #{$font-secondary};
+  --monoFont: #{$font-mono};
+  --primaryColor: #{$color-primary};
+  --secondaryColor: #{$color-secondary};
+  --linkColor: #{$color-link};
+  --bgColor: #{$color-bg};
+  --fgColor: #{$color-fg};
+  --darkColor: #{$color-dark};
+  --contentWidth: #{$content-width};
+  --themeColor: #{$color-theme};
+  --tertiaryColor: #{$color-tertiary};
 }
 
 body {
-  font-family: $mainFont;
+  font-family: $font-main;
   font-size: 17px;
   line-height: 1.6;
-  background-color: $bgColor;
-  color: $fgColor;
+  background-color: $color-bg;
+  color: $color-fg;
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -51,18 +51,18 @@ hr {
   width: 300px;
   margin-bottom: 20px;
   margin-top: 40px;
-  border-color: $bgColor;
+  border-color: $color-bg;
 }
 
 a {
-  color: $linkColor;
+  color: $color-link;
   text-decoration: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: $secondaryFont;
+  font-family: $font-secondary;
   font-weight: normal;
-  color: $secondaryColor;
+  color: $color-secondary;
   line-height: 1;
 }
 
@@ -74,19 +74,19 @@ h5 { font-size: 1.2em }
 h6 { font-size: 1em }
 
 .special {
-  font-family: $specialFont;
+  font-family: $font-special;
   text-align: center;
-  color: $primaryColor;
+  color: $color-primary;
   margin: 10px 0 5px 0;
 }
 
 code, pre {
-  font-family: $specialFont;
+  font-family: $font-special;
 }
 
 code {
   white-space: pre-wrap;
-  color: $primaryColor;
+  color: $color-primary;
 }
 
 pre {
@@ -156,7 +156,7 @@ sub {
 footer {
   @include margin-top();
   @include align-center();
-  color: $darkColor;
+  color: $color-dark;
   font-size: 14px;
   ul {
     padding: 0;
@@ -165,7 +165,7 @@ footer {
       @include align-middle();
       margin: 0 5px;
       a {
-        color: $darkColor;
+        color: $color-dark;
       }
     }
   }
@@ -195,13 +195,20 @@ article.tiles {
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     li {
-      padding: 10px;
+      padding: 5px;
       margin: 5px;
       border-radius: 5px;
       text-align: center;
-      background-color: $secondaryColor;
+      background-color: $color-theme;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       a {
-        color: $bgColor;
+        color: $color-bg;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
       }
       sup {
         vertical-align: 3px;

data/_sass/_grid.scss

@@ -1,12 +1,12 @@
-$width: 180px;
-$height: 180px;
+$size-width: 180px;
+$size-height: 180px;
 
 ul.grid {
   list-style-type: none;
   padding-inline-start: unset;
   display: grid;
   grid-gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax($width, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax($size-width, 1fr));
   clear: both;
 
   li {
@@ -19,6 +19,6 @@ ul.grid {
   img {
     object-fit: cover;
     width: 100%;
-    height: $height;
+    height: $size-height;
   }
 }

data/_sass/_paginator.scss

@@ -1,4 +1,4 @@
-$width: 150px;
+$size-width: 150px;
 
 .paginator-container {
   max-width: var(--contentWidth);
@@ -8,7 +8,7 @@ $width: 150px;
 }
 
 .paginator {
-  width: $width;
+  width: $size-width;
   a {
     text-align: center;
     display: block;

data/_sass/_post.scss

@@ -9,12 +9,19 @@ article {
   }
   h1 {
     margin-bottom: 0;
-    & + small {
+    & + time {
       color: var(--darkColor);
+      font-size: 16px;
     }
   }
-  h5, h5 a {
-    color: var(--tertiaryColor);
+  address {
+    font-style: normal;
+    font-family: var(--secondaryFont);
+    margin-top: 1.5em;
+    font-size: 1.3em;
+    a {
+      color: var(--tertiaryColor);
+    }
   }
   .text > p:first-child {
     font-size: 25px;

data/_sass/_tab-colors.scss

@@ -1,25 +1,25 @@
-$c1: #005F73;
-$c2: #03989E;
-$c3: #CA6702;
-$c4: #EE9B00;
-$c5: #355691;
-$c6: #4073A0;
-$c7: #3C5A14;
-$c8: #598B2C;
-$c9: #9B2226;
-$c10: #B18FCF;
+$color-1: #005F73;
+$color-2: #03989E;
+$color-3: #CA6702;
+$color-4: #EE9B00;
+$color-5: #355691;
+$color-6: #4073A0;
+$color-7: #3C5A14;
+$color-8: #598B2C;
+$color-9: #9B2226;
+$color-10: #B18FCF;
 
 html {
-  --c1: #{$c1};
-  --c2: #{$c2};
-  --c3: #{$c3};
-  --c4: #{$c4};
-  --c5: #{$c5};
-  --c6: #{$c6};
-  --c7: #{$c7};
-  --c8: #{$c8};
-  --c9: #{$c9};
-  --c10: #{$c10};
+  --c1: #{$color-1};
+  --c2: #{$color-2};
+  --c3: #{$color-3};
+  --c4: #{$color-4};
+  --c5: #{$color-5};
+  --c6: #{$color-6};
+  --c7: #{$color-7};
+  --c8: #{$color-8};
+  --c9: #{$color-9};
+  --c10: #{$color-10};
 }
 
 @mixin paint($color) {
@@ -46,32 +46,32 @@ html {
 }
 
 .c1 {
-  @include paint($c1);
+  @include paint($color-1);
 }
 .c2 {
-  @include paint($c2);
+  @include paint($color-2);
 }
 .c3 {
-  @include paint($c3);
+  @include paint($color-3);
 }
 .c4 {
-  @include paint($c4);
+  @include paint($color-4);
 }
 .c5 {
-  @include paint($c5);
+  @include paint($color-5);
 }
 .c6 {
-  @include paint($c6);
+  @include paint($color-6);
 }
 .c7 {
-  @include paint($c7);
+  @include paint($color-7);
 }
 .c8 {
-  @include paint($c8);
+  @include paint($color-8);
 }
 .c9 {
-  @include paint($c9);
+  @include paint($color-9);
 }
 .c10 {
-  @include paint($c10);
+  @include paint($color-10);
 }

data/_sass/_tab.scss

@@ -1,23 +1,23 @@
-$bg: whitesmoke;
-$fg: #444;
-$fontSize: 16px;
+$color-bg: whitesmoke;
+$color-fg: #444;
+$size-font: 16px;
 
 @mixin special() {
-  color: $bg;
+  color: $color-bg;
   font-family: var(--specialFont);
 }
 
 html {
-  --bg: #{$bg};
-  --fg: #{$fg};
-  --fontSize: #{$fontSize};
+  --bg: #{$color-bg};
+  --fg: #{$color-fg};
+  --fontSize: #{$size-font};
 }
 
 .card-tab {
   display: flex;
   flex-direction: column;
   position: relative;
-  background-image: linear-gradient(225deg, $fg 50%, transparent 50%);
+  background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
   background-size: 120px 27px;
   background-repeat: no-repeat;
   background-position: right top;
@@ -25,9 +25,9 @@ html {
   box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
   border-top-width: 22px;
   border-top-style: solid;
-  border-top-color: $fg;
-  background-color: $bg;
-  color: $fg;
+  border-top-color: $color-fg;
+  background-color: $color-bg;
+  color: $color-fg;
   text-transform: none;
   height: calc(100% - 22px);
 }
@@ -85,12 +85,12 @@ html {
   .item {
     margin-bottom: 20px;
     text-align: left;
-    font-size: $fontSize;
+    font-size: $size-font;
     border-top: 3px outset;
     line-height: normal;
     h3 {
       margin: 0 0 0 5px;
-      color: $fg;
+      color: $color-fg;
     }
   }
   pre, code {
@@ -105,14 +105,14 @@ html {
   justify-content: space-between;
   a {
     text-decoration: none;
-    font-size: $fontSize;
+    font-size: $size-font;
     display: contents;
     &.button {
       display: flex;
       border-radius: 5px;
       padding: 5px 10px;
       color: white!important;
-      background-color: $fg;
+      background-color: $color-fg;
     }
   }
   .tags {

data/_sass/_table.scss

@@ -1,16 +1,13 @@
-$odd: #2a2a2a;
-$even: #2f2f2f;
+$color-odd: #2a2a2a;
+$color-even: #2f2f2f;
 
 table {
   table-layout: fixed;
-  th {
-    background-color: $even;
-  }
   tr:nth-child(odd) {
-    background-color: $odd;
+    background-color: $color-odd;
   }
-  tr:nth-child(even) {
-    background-color: $even;
+  th, tr:nth-child(even) {
+    background-color: $color-even;
   }
   td, th {
     vertical-align: top;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: askclass-news-theme
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.3
 platform: ruby
 authors:
 - AskClass
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-22 00:00:00.000000000 Z
+date: 2022-06-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll