feat: new layout articles, componnets refactor

_data/variables.yml

@@ -14,7 +14,6 @@ default:
   toc:
     selectors: 'h1,h2,h3'
   sources: bootcdn
-  excerpt_type: text
 
   page:
     mode: normal
@@ -25,6 +24,11 @@ default:
     article_header:
       align: left
       theme: light
+    articles:
+      show_cover: true
+      show_excerpt: false
+      show_readmore: false
+      show_info: false
     show_title: true
     show_edit_on_github: false
     show_date: true

_includes/article-list.html

@@ -1,6 +1,9 @@
 {%- assign _excerpt_truncate = include.excerpt_truncate | default: 350 -%}
 
-{%- assign _excerpt_type = include.excerpt_type | default: site.data.variables.default.excerpt_type  -%}
+{%- assign _excerpt_type = include.excerpt_type -%}
+
+{%- include snippets/locale-to-string.html locale=site.data.locale.READMORE -%}
+{%- assign _locale_readmore = __return -%}
 
 {%- assign _sorted_list = include.articles -%}
 {%- if include.group_by == 'year' -%}
@@ -11,18 +14,22 @@
 {%- endif -%}
 
 {%- if include.type == 'common' -%}
-<div class="items items--divided">
+<div class="article-list items items--divided">
 {%- elsif include.type == 'brief' -%}
-<div class="items">
+<div class="article-list items">
+{%- elsif include.type == 'grid' -%}
+<div class="article-list grid grid--p-3">
 {%- endif -%}
 
   {%- for _article in _sorted_list -%}
 
     {%- include snippets/prepend-baseurl.html path=_article.url -%}
     {%- assign _article_url = __return -%}
 
-    {%- include snippets/locale-to-string.html locale=site.data.locale.READMORE -%}
-    {%- assign _locale_readmore = __return -%}
+    {%- if _article.cover -%}
+      {%- include snippets/get-nav-url.html path=_article.cover -%}
+      {%- assign _article_cover = __return -%}
+    {%- endif -%}
 
     {%- if include.type == 'common' -%}
       {%- if include.article_type == 'BlogPosting' -%}
@@ -86,9 +93,45 @@
       {%- endif -%}
       {%- include snippets/locale-to-string.html locale=site.data.locale.ARTICLE_LIST_DATE_FORMAT -%}
       <li class="item" itemscope itemtype="http://schema.org/BlogPosting" data-tags="{{ _tags }}">
-        <div class="item__content"><span class="item__meta">{{ _article.date | date: __return }}</span><a itemprop="headline" class="item__header" href="{{ _article_url }}">{{ _article.title }}</a></div>
+        <div class="item__content">
+          {%- if include.show_info -%}
+            <span class="item__meta">{{ _article.date | date: __return }}</span>
+          {%- endif -%}
+          <a itemprop="headline" class="item__header" href="{{ _article_url }}">{{ _article.title }}</a></div>
       </li>
-    {%- endif -%}
 
+    {%- elsif include.type == 'grid' -%}
+      {%- if include.size == 'sm' -%}
+        <div class="cell cell--3 cell--md-4 cell--sm-12">
+          <div class="new-card">
+            {%- if _article_cover -%}
+              <div class="card__image">
+                <img class="image" src="{{ _article_cover }}" />
+                <div class="overlay overlay--bottom">
+                  <header>
+                    <a class="card__header" href="{{ _article_url }}">{{ _article.title }}</a>
+                  </header>
+                </div>
+              </div>
+            {%- endif -%}
+            </div>
+        </div>
+      {%- else -%}
+
+        <div class="cell cell--4 cell--md-6 cell--sm-12">
+          <div class="new-card card--flat">
+            {%- if _article_cover -%}
+              <div class="card__image"><img src="{{ _article_cover }}" /></div>
+            {%- endif -%}
+              <div class="card__content">
+                <header>
+                  <h2 class="card__header"><a href="{{ _article_url }}">{{ _article.title }}</a></h2>
+                </header>
+              </div>
+          </div>
+        </div>
+      {%- endif -%}
+    {%- endif -%}
   {%- endfor -%}
+
 </div>

_layouts/archive.html

@@ -10,7 +10,7 @@
 <div class="layout--archive js-all">
   {%- include tags.html -%}
   <div class="js-result layout--archive__result d-none">
-    {%- include article-list.html articles=site.posts type='brief' reverse=true group_by='year' -%}
+    {%- include article-list.html articles=site.posts type='brief' show_info=true reverse=true group_by='year' -%}
   </div>
 </div>
 

_layouts/articles.html

@@ -0,0 +1,86 @@
+---
+layout: page
+---
+
+{%- assign _page_articles_data_source = page.articles.data_source | default: layout.articles.data_source -%}
+
+{%- if _page_articles_data_source -%}
+{%- assign _keys = _page_articles_data_source | split: '.' -%}
+{%- endif -%}
+
+{%- assign _articles = nil -%}
+{%- for _key in _keys -%}
+  {%- if forloop.first -%}
+    {%- case _key -%}
+      {%- when 'site' -%}
+        {%- assign _articles = site -%}
+      {%- when 'page' -%}
+        {%- assign _articles = page -%}
+      {%- when 'layout' -%}
+        {%- assign _articles = layout -%}
+      {%- when 'paginator' -%}
+        {%- assign _articles = paginator -%}
+    {%- endcase -%}
+  {%- else -%}
+    {%- assign _articles = _articles[_key] -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- assign _type = page.articles.type | default: layout.articles.type -%}
+
+{%- if _articles -%}
+
+  <div class="layout--articles">
+
+    {%- if _type == 'grid' -%}
+      {%- if page.articles.size == 'sm' -%}
+        {%- include article-list.html articles=_articles type='grid' size='sm' -%}
+      {%- else -%}
+        {%- include article-list.html articles=_articles type='grid' -%}
+      {%- endif -%}
+
+    {%- elsif _type == 'brief' -%}
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_info
+        source0=layout.articles.show_info source1=page.articles.show_info -%}
+      {%- assign _show_info = __return -%}
+
+      {%- include article-list.html articles=_articles type='brief' show_info=_show_info -%}
+
+    {%- else -%}
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_cover
+        source0=layout.articles.show_cover source1=page.articles.show_cover -%}
+      {%- assign _show_cover = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_excerpt
+        source0=layout.articles.show_excerpt source1=page.articles.show_excerpt -%}
+      {%- assign _show_excerpt = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_readmore
+        source0=layout.articles.show_readmore source1=page.articles.show_readmore -%}
+      {%- assign _show_readmore = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_info
+        source0=layout.articles.show_info source1=page.articles.show_info -%}
+      {%- assign _show_info = __return -%}
+
+      {%- assign _article_type = page.articles.article_type | default: layout.articles.article_type -%}
+      {%- assign _cover_size = page.articles.cover_size | default: layout.articles.cover_size -%}
+      {%- assign _excerpt_type = page.articles.excerpt_type | default: layout.articles.excerpt_type -%}
+
+      {%- include article-list.html articles=_articles type='common'
+        article_type=_article_type
+        show_cover=_show_cover cover_size=_cover_size
+        show_excerpt=_show_excerpt excerpt_type=_excerpt_type
+        show_readmore=_show_readmore show_info=_show_info -%}
+
+    {%- endif -%}
+
+  </div>
+{%- endif -%}
+
+{{ content }}

_layouts/home.html

@@ -1,15 +1,20 @@
 ---
-layout: page
+layout: articles
 titles:
   en: Home
   zh: 主页
   zh-Hans: 主頁
   zh-Hant: 主頁
 show_title: false
+articles:
+  data_source: paginator.posts
+  article_type: BlogPosting
+  show_cover: false
+  show_excerpt: true
+  show_readmore: true
+  show_info: true
 ---
 <div class="layout--home">
-  {%- include article-list.html articles=paginator.posts type='common' article_type='BlogPosting'
-    show_excerpt=true excerpt_type=site.excerpt_type show_readmore=true show_info=true -%}
   {%- include paginator.html -%}
 </div>
 <script>

_sass/common/_classes.scss

@@ -9,6 +9,7 @@
   "common/classes/horizontal-rules",
   "common/classes/pseudo",
   "common/classes/link",
+  "common/classes/text",
   "common/classes/media",
   "common/classes/overflow",
   "common/classes/shadow",

_sass/common/classes/_spacing.scss

@@ -1,79 +1,79 @@
-@mixin make-spacing($type, $direction, $spacer, $negative: false) {
+@mixin make-spacing($property, $side, $spacer, $negative: false) {
 
-  $css_type: null;
-  $css_directions: null;
+  $css_property: null;
+  $css_sides: null;
 
-  @if ($type == "m") {
-    $css_type: "margin";
-  } @else if ($type == "p") {
-    $css_type: "padding";
+  @if ($property == "m") {
+    $css_property: "margin";
+  } @else if ($property == "p") {
+    $css_property: "padding";
   }
 
-  @if ($direction == "t") {
-    $css_directions: ("top");
+  @if ($side == "t") {
+    $css_sides: ("top");
   }
-  @else if ($direction == "b") {
-    $css_directions: ("bottom");
+  @else if ($side == "b") {
+    $css_sides: ("bottom");
   }
-  @else if ($direction == "l") {
-    $css_directions: ("left");
+  @else if ($side == "l") {
+    $css_sides: ("left");
   }
-  @else if ($direction == "r") {
-    $css_directions: ("right");
+  @else if ($side == "r") {
+    $css_sides: ("right");
   }
-  @else if ($direction == "x") {
-    $css_directions: ("left", "right");
+  @else if ($side == "x") {
+    $css_sides: ("left", "right");
   }
-  @else if ($direction == "y") {
-    $css_directions: ("top", "bottom");
+  @else if ($side == "y") {
+    $css_sides: ("top", "bottom");
   }
-  @else if ($direction == "") {
-    $css_directions: ("");
+  @else if ($side == "") {
+    $css_sides: ("");
   }
 
-  @each $direction in $css_directions {
+  @each $side in $css_sides {
     @if ($spacer == "auto") {
-      @if ($direction == "") {
-        #{$css_type}: auto;
+      @if ($side == "") {
+        #{$css_property}: auto;
       } @else {
-        #{$css_type}-#{$direction}: auto;
+        #{$css_property}-#{$side}: auto;
       }
     } @else {
-      @if ($direction == "") {
+      @if ($side == "") {
         @if ($negative == true) {
-          #{$css_type}: - map-get($spacers, $spacer);
+          #{$css_property}: - map-get($spacers, $spacer);
         } @else {
-          #{$css_type}: map-get($spacers, $spacer);
+          #{$css_property}: map-get($spacers, $spacer);
         }
       } @else {
         @if ($negative == true) {
-          #{$css_type}-#{$direction}: - map-get($spacers, $spacer);
+          #{$css_property}-#{$side}: - map-get($spacers, $spacer);
         } @else {
-          #{$css_type}-#{$direction}: map-get($spacers, $spacer);
+          #{$css_property}-#{$side}: map-get($spacers, $spacer);
         }
       }
     }
   }
 }
 
 @mixin make-spacings() {
-  $types: ("m", "p");
-  $directions: ("t", "b", "l", "r", "x", "y", "");
+  $propertys: ("m", "p");
+  $sides: ("t", "b", "l", "r", "x", "y", "");
   $spacers: (0, 1, 2, 3, 4, 5);
 
-  @each $type in $types {
-    @each $direction in $directions {
+  @each $property in $propertys {
+    @each $side in $sides {
       @each $spacer in $spacers {
-        .#{$type}#{$direction}-#{$spacer} {
-          @include make-spacing($type, $direction, $spacer);
+        .#{$property}#{$side}-#{$spacer} {
+          @include make-spacing($property, $side, $spacer);
         }
       }
     }
   }
 
-  @each $direction in $directions {
-    .m#{$direction}-auto {
-      @include make-spacing("m", $direction, "auto");
+  @each $side in $sides {
+    .m#{$side}-auto {
+      @include make-spacing("m", $side, "auto");
     }
   }
 }

_sass/common/classes/_text.scss

@@ -0,0 +1,37 @@
+@mixin text-light {
+  color: $text-color-theme-light;
+  h1, h2, h3 {
+    color: $text-color-theme-light-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-light;
+  }
+  h6 {
+    color: $text-color-theme-light-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-light, $main-color-1);
+  }
+}
+@mixin text-dark {
+  color: $text-color-theme-dark;
+  h1, h2, h3 {
+    color: $text-color-theme-dark-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-dark;
+  }
+  h6 {
+    color: $text-color-theme-dark-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-dark, $main-color-1);
+  }
+}
+
+.text--light {
+  @include text-light();
+}
+.text--dark {
+  @include text-dark();
+}