askclass-news-theme 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b13ded5da26f0b7adc34fa295fc9d018f642812c38510c25713b5c241e0e907d
-  data.tar.gz: 4de0c2c07f7f5cb3781819d2b6762dcbe612cf5c03a9f5b24e55755a7e230576
+  metadata.gz: b1d4f09a3dc76c677cd16cdddfe9c78e80e49c15fe31f32396a07e5ae6331831
+  data.tar.gz: 768058d2afcd1c9a4a94911e7f642b9ffc9b086d8391abce7f32b875556917c9
 SHA512:
-  metadata.gz: ce1854fc325620f7d67a3b145d279b857d2c75d016befed85f4061604e82fc1b0c0ece15d57194174660b514dd0484f912e4e106a5d3a80c4772bcd9145b1f61
-  data.tar.gz: 6391618c039a147c1076f3a47c0fc0ebe2f3d9d57f7b9fe1d79ddc01177cb76d50756f5be119a6ed36740e94fe243f7c15752602cb4b56f58fef53c9176dfa43
+  metadata.gz: 702cbabd277ac22b72d7bec4df42eaa82536b4206e5e218323ca53c5ea4070c7c37ae4d158aadc780d82a0eeb78c7e0140b6c3dc008102739ff16a341b9db604
+  data.tar.gz: 2de7cffd8d36c265ca56141aab34b62ffc0cb1ade81c6c7c34d1b712ac68c5e5c7863654370d4dbebdb31c33b7e538a9fea0f5d5adad1eddb855e4f893763ebd

data/README.md

@@ -54,6 +54,7 @@ Field        | Example               | Description
 `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
+`thumb`      | URL                   | Optional thumb image
 `image`      | URL                   | Optional main image
 `source`     | `The Tolkien Society` | Optional main source
 `source_url` | URL                   | Optional link to `source`

data/_config.yml

@@ -1,5 +1,5 @@
 # Custom fields
-title: "AskClass News"
+title: "AskClass News Template"
 description: >
   Exploring the intersection between education and technology;
   how innovations in cross-disciplinary learning reorients our
@@ -19,6 +19,7 @@ acn:
   logo:
     image: "logo-icon.svg"
     size: 70
+    height: 70
     alt_image: "logo.svg"
     alt_size: 200
     sizes: [ 48, 96, 144, 192, 300, 512 ]
@@ -45,6 +46,9 @@ acn:
     - icon: "copyright"
       href: "https://askclass.com"
       text: "AskClass"
+    - icon: "newspaper"
+      href: "https://news.askclass.com"
+      text: "News"
     - icon: "toys"
       href: "https://app.askclass.com"
       text: "Icebreakers"

data/_includes/foot/mathjax.html

@@ -1,2 +1,2 @@
-<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

data/_includes/{head → foot}/pwaupdate.html

@@ -1,6 +1,6 @@
 {% assign file = site.static_files | where: "path", "/pwabuilder-sw.js" %}
 {% if file.size != 0 %}
-  <script type="module">
+  <script defer type="module">
     import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
     const el = document.createElement('pwa-update');
     document.body.appendChild(el);

data/_includes/footer.html

@@ -9,4 +9,3 @@
     {%- endfor %}
   </ul>
 </footer>
-{% include foot/mathjax.html -%}

data/_includes/grid.html

@@ -20,7 +20,7 @@
       </div>
       <div class="body">
         {% if post.image %}
-          <img src="{{ post.image }}" alt="{{ post.title }}" />
+          <img src="/assets/loading.svg" data="{{ post.thumb | default: post.image }}" alt="{{ post.title }}" />
         {% endif %}
         <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
         {{ post.excerpt }}
@@ -40,3 +40,12 @@
     </li>
   {% endfor %}
 </ul>
+
+<script defer>
+  const samps = document.querySelectorAll('img');
+  samps.forEach( el => {
+    if (el.src.match(/loading\.svg$/) && el.attributes.data) {
+      el.src = el.attributes.data.value;
+    }
+  } );
+</script>

data/_includes/head/common.html

@@ -27,8 +27,13 @@
   {% endif % %}
 
   <link rel="manifest" href="/assets/site.webmanifest" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel='preconnect' href="https://fonts.googleapis.com" crossorigin />
+  <link rel="preload" as="style"
+        href="https://fonts.googleapis.com/css2?family={{ families }}&display=swap"
+        onload='this.onload=null;this.rel="stylesheet"' />
   <link rel="shortcut icon" href="/assets/{{ acn.meta.shortcut.favicon }}" />
   <link rel="icon" type="{{ acn.meta.shotcut.type }}" href="/assets/{{ acn.meta.shortcut.image }}" />
   <link rel="icon" type="image/svg+xml" href="/assets/{{ acn.logo.image }}" />

data/_includes/header.html

@@ -1,12 +1,12 @@
 <head>
   {% include head/meta.html %}
   {% include head/common.html %}
-  {% include head/pwaupdate.html %}
   {% if page.collection == 'posts' %}
-  <link href="{{ 'assets/css/md.css' | relative_url }}" rel="stylesheet" />
+  <link rel="preload" as="style" href="{{ 'assets/css/md.css' |  relative_url }}"
+        onload='this.onload=null;this.rel="stylesheet"' />
   {% else %}
-  <link href="{{ 'assets/css/grid.css' |  relative_url }}" rel="stylesheet" />
-  <link href="{{ 'assets/css/tab.css' |  relative_url }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{ 'assets/css/grid.css' |  relative_url }}" />
+  <link rel="stylesheet" href="{{ 'assets/css/tab.css' |  relative_url }}" />
   {% endif %}
-  <link href="{{ 'assets/css/style.css' |  relative_url }}" rel="stylesheet" />
+  <link rel="stylesheet" href="{{ 'assets/css/style.css' |  relative_url }}" />
 </head>

data/_includes/logo.html

@@ -2,6 +2,7 @@
   <a href="/">
     <img src="/assets/{{ include.image | default: site.acn.logo.image }}"
       width="{{ include.size | default: site.acn.logo.size }}"
+      height="{{ include.height | default: site.acn.logo.height | default: site.acn.logo.size }}"
       title="{{ site.title }}"/>
   </a>
   {%- if include.href %}

data/_layouts/default.html

@@ -4,6 +4,7 @@
   <body>
     {{ content }}
     {% include footer.html %}
+    {% include foot/pwaupdate.html %}
   </body>
 </html>
 

data/_layouts/post.html

@@ -49,5 +49,6 @@
 
     {% include post/paginator.html %}
     {% include footer.html %}
+    {% include foot/mathjax.html -%}
   </body>
 </html>

data/_sass/_default.scss

@@ -81,12 +81,13 @@ h6 { font-size: 1em }
 }
 
 code, pre {
-  font-family: $font-special;
+  font-family: $font-mono;
+  font-size: 19px;
 }
 
 code {
   white-space: pre-wrap;
-  color: $color-primary;
+  color: $color-secondary;
 }
 
 pre {
@@ -165,7 +166,7 @@ footer {
       @include align-middle();
       margin: 0 5px;
       a {
-        color: $color-dark;
+        color: $color-secondary;
       }
     }
   }

data/_sass/_post.scss

@@ -11,14 +11,14 @@ article {
     margin-bottom: 0;
     & + time {
       color: var(--darkColor);
-      font-size: 16px;
+      font-size: 15px;
     }
   }
   address {
     font-style: normal;
     font-family: var(--secondaryFont);
     margin-top: 1.5em;
-    font-size: 1.3em;
+    font-size: 1.4em;
     a {
       color: var(--tertiaryColor);
     }

data/assets/loading.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+<g transform="translate(50 50)">
+<g>
+<animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" repeatCount="indefinite"></animateTransform><path d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001
+L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" fill="#eee"></path></g></g>
+</svg>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: askclass-news-theme
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - AskClass
@@ -35,11 +35,11 @@ files:
 - README.md
 - _config.yml
 - _includes/foot/mathjax.html
+- _includes/foot/pwaupdate.html
 - _includes/footer.html
 - _includes/grid.html
 - _includes/head/common.html
 - _includes/head/meta.html
-- _includes/head/pwaupdate.html
 - _includes/header.html
 - _includes/logo.html
 - _includes/post/nextprev.html
@@ -64,6 +64,7 @@ files:
 - assets/css/style.scss
 - assets/css/tab.scss
 - assets/favicon.ico
+- assets/loading.svg
 - assets/logo-144.png
 - assets/logo-192.png
 - assets/logo-300.png