feat: add hero component, article header

.stylelintrc

@@ -256,7 +256,7 @@
     "rule-empty-line-before": null,
     "scss/dollar-variable-default": [true, { "ignore": "local" }],
     "selector-attribute-quotes": "always",
-    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-after": "always-multi-line",
     "selector-list-comma-newline-before": "never-multi-line",
     "selector-list-comma-space-after": "always-single-line",
     "selector-list-comma-space-before": "never-single-line",

_data/variables.yml

@@ -17,12 +17,22 @@ default:
   excerpt_type: text
 
   page:
+    mode: normal
     type: webpage
-    show_header: true
+    header:
+      type: normal
+      theme: light
+    article_header:
+      align: left
+      theme: light
     show_title: true
     show_edit_on_github: false
+    show_date: true
+    show_tags: true
     show_author_profile: false
     full_width: false
+    comment: true
+    license: false
     pageview: false
 
 sources:

_includes/article-footer/author-profile.html

@@ -12,7 +12,9 @@
     {%- if _author.url -%}
     <a href="{{ _author.url }}">
     {%- endif -%}
-      <img itemprop="image" class="left-col" src="{{ _author.avatar }}"></img>
+      {%- include snippets/get-nav-url.html path=_author.avatar -%}
+      {%- assign _author_avatar = __return -%}
+      <img itemprop="image" class="left-col" src="{{ _author_avatar }}"></img>
     {%- if _author.url -%}
     </a>
     {%- endif -%}

_includes/article-footer/license.html

@@ -1,22 +1,13 @@
 {%- include snippets/locale-to-string.html locale=site.data.locale.LICENSE_ANNOUNCE -%}
 {%- assign _license_announce = __return -%}
 
-{%- assign _data_license = site.data.licenses-%}
-{%- if site.license -%}
-  {%- assign _license = _data_license[site.license] -%}
-{%- endif -%}
-{%- if page.license != true -%}
-  {%- assign _license = _data_license[page.license] -%}
-{%- endif -%}
+{%- if include.license -%}
 
-
-{%- if _license -%}
-
-  {%-assign _license_name = '<a itemprop="license" rel="license" href="[URL]">[NAME]</a>' | replace: "[URL]", _license.url | replace: "[NAME]", _license.name -%}
+  {%-assign _license_name = '<a itemprop="license" rel="license" href="[URL]">[NAME]</a>' | replace: "[URL]", include.license.url | replace: "[NAME]", include.license.name -%}
   <div class="license">
     <p>{{ _license_announce | replace: "[LICENSE]", _license_name }}
-      <a rel="license" href="{{ _license.url }}">
-        <img alt="{{ _license.name }}" src="{{ _license.image }}" />
+      <a rel="license" href="{{ include.license.url }}">
+        <img alt="{{ include.license.name }}" src="{{ include.license.image }}" />
       </a>
     </p>
   </div>

_includes/article-header.html

@@ -0,0 +1,47 @@
+{%- include snippets/get-article-title.html article=include.article-%}
+{%- assign _article_title = __return -%}
+
+{%- if include.html != false -%}
+
+  {%- include snippets/assign.html
+    target=site.data.variables.default.page.show_title
+    source0=layout.show_title source1=include.article.show_title -%}
+  {%- assign _show_title = __return -%}
+
+  {%- include snippets/assign.html
+    target=site.data.variables.default.page.show_edit_on_github
+    source0=layout.show_edit_on_github source1=include.article.show_edit_on_github -%}
+  {%- assign _show_edit_on_github = __return -%}
+
+    <div class="article__header">
+      {%- if _show_title -%}
+        <header><h1>{{ _article_title }}</h1></header>
+      {%- else -%}
+        <header style="display:none;"><h1>{{ _article_title }}</h1></header>
+      {%- endif -%}
+      {%- if _show_edit_on_github -%}
+        {%- if site.repository and site.repository_tree -%}
+          {%- include snippets/is_collection.html page=include.article -%}
+          {%- assign _is_article_collection = __return -%}
+          {%- include snippets/locale-to-string.html locale=site.data.locale.POST_ON_GITHUB -%}
+          {%- assign _locale_post_on_github = __return -%}
+          {%- if _is_article_collection -%}
+            {%- include snippets/prepend-path.html path=include.article.path prepend_path=site.collections_dir -%}
+            {%- assign _article_path = __return -%}
+          {%- else -%}
+            {%- assign _article_path = include.article.path -%}
+          {%- endif -%}
+          {%- assign _github_path = site.repository | append: '/tree/' | append: site.repository_tree | append: '/' | append: _article_path | replace:'//','/' -%}
+          <span class="split-space">&nbsp;</span>
+          <a class="edit-on-github"
+            title="{{ _locale_post_on_github }}"
+            href="https://github.com/{{ _github_path }}">
+            <i class="far fa-edit"></i></a>
+        {%- endif -%}
+      {%- endif -%}
+    </div>
+{%- endif -%}
+
+{%- if include.semantic != false -%}
+  <meta itemprop="headline" content="{{ _article_title }}">
+{%- endif -%}

_includes/article-info.html

@@ -1,67 +1,96 @@
-{%- include snippets/assign.html target=site.data.variables.default.pageview source0=page.pageview -%}
-{%- assign _pageview = __return -%}
+{%- assign _author = site.data.authors[include.article.author] | default: site.author -%}
 
-{%- assign _paths_archive = site.paths.archive | default: site.data.variables.default.paths.archive -%}
+{%- if include.html != false -%}
 
-{%- if include.article.author -%}
-  {%- assign _author = site.data.authors[include.article.author] -%}
-{%- else -%}
-  {%- assign _author = site.author -%}
-{%- endif -%}
+  {%- include snippets/assign.html
+    target=site.data.variables.default.page.show_date
+    source0=layout.show_date source1=include.article.show_date -%}
+  {%- assign _show_date = __return -%}
+  {%- if _show_date and include.article.date -%}
+    {%- assign _show_date = true -%}
+  {%- else -%}
+    {%- assign _show_date = false -%}
+  {%- endif -%}
 
+  {%- include snippets/assign.html
+    target=site.data.variables.default.page.show_tags
+    source0=layout.show_tags source1=include.article.show_tags -%}
+  {%- assign _show_tags = __return -%}
+  {%- if _show_tags and include.article.tags[0] -%}
+    {%- assign _show_tags = true -%}
+  {%- else -%}
+    {%- assign _show_tags = false -%}
+  {%- endif -%}
 
-<div class="article__info clearfix">
+  {%- assign _show_author = include.article.author -%}
 
-  {%- if _author -%}
-    <meta itemprop="author" content="{{ _author.name }}"/>
+  {%- include snippets/assign.html target=site.data.variables.default.page.pageview
+    source0=layout.pageview source1=page.pageview -%}
+  {%- assign _pageview = __return -%}
+  {%- if _pageview or include.show_pageview -%}
+    {%- assign _pageview = true -%}
+  {%- else -%}
+    {%- assign _pageview = false -%}
   {%- endif -%}
 
-  {%- if include.article.tags[0] -%}
-    <ul class="left-col menu">
+  {%- assign _paths_archive = site.paths.archive | default: site.data.variables.default.paths.archive -%}
 
-      {%- assign _tag_path = _paths_archive | append: '?tag=' -%}
-      {%- include snippets/prepend-baseurl.html path=_tag_path -%}
-
-      {%- for _tag in include.article.tags -%}
-        {%- assign _tag_path = __return -%}
-        {%- assign _tag_encode = _tag | strip | url_encode } -%}
-        <li>
-          <a class="button button--secondary button--pill button--sm"
-            href="{{ _tag_path | append: _tag_encode | replace: '//', '/' }}">{{ _tag }}</a>
-        </li>
-      {%- endfor -%}
-      {%- assign _keywords = include.article.tags | join: ',' %}
-    </ul>
-    <meta itemprop="keywords" content="{{ _keywords }}">
-  {%- endif -%}
+  {%- if _show_tags or _show_author or _show_date or _pageview -%}
+    <div class="article__info clearfix">
+      {%- if _show_tags -%}
 
+        <ul class="left-col menu">
+          {%- assign _tag_path = _paths_archive | append: '?tag=' -%}
+          {%- include snippets/prepend-baseurl.html path=_tag_path -%}
 
-  {%- if include.article.author or include.article.date or _pageview or post -%}
-    <ul class="right-col menu">
-      {%- if include.article.author -%}
-        <li><i class="fas fa-user"></i> <span>{{ _author.name }}</span></li>
+          {%- for _tag in include.article.tags -%}
+            {%- assign _tag_path = __return -%}
+            {%- assign _tag_encode = _tag | strip | url_encode } -%}
+            <li>
+              <a class="button button--secondary button--pill button--sm"
+                href="{{ _tag_path | append: _tag_encode | replace: '//', '/' }}">{{ _tag }}</a>
+            </li>
+          {%- endfor -%}
+        </ul>
       {%- endif -%}
 
-      {%- if include.article.date -%}
-        <li>
-          {%- include snippets/locale-to-string.html locale=site.data.locale.ARTICLE_DATE_FORMAT -%}
-          <i class="far fa-calendar-alt"></i> <span>{{ include.article.date | date: __return }}</span>
-          <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}">
-        </li>
-      {%- endif -%}
+      {%- if _show_author or _show_date or _pageview -%}
+        <ul class="right-col menu">
+          {%- if _show_author  -%}
+            <li><i class="fas fa-user"></i> <span>{{ _author.name }}</span></li>
+          {%- endif -%}
+
+          {%- if _show_date -%}
+            <li>
+              {%- include snippets/locale-to-string.html locale=site.data.locale.ARTICLE_DATE_FORMAT -%}
+              <i class="far fa-calendar-alt"></i> <span>{{ include.article.date | date: __return }}</span>
+            </li>
+          {%- endif -%}
 
-      {%- if _pageview or include.show_pageview -%}
-        {%- if site.pageview.provider -%}
-          {%- include snippets/locale-to-string.html locale=site.data.locale.VIEWS -%}
-          {%- assign _locale_views = __return -%}
-          <li itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
-            <link itemprop="interactionType" href="http://schema.org/WatchAction"/>
-            <i class="far fa-eye"></i> <span class="js-pageview" data-page-key="{{ include.article.key }}">0</span> {{ _locale_views }}
-          </li>
-        {%- endif -%}
+          {%- if _pageview -%}
+            {%- if site.pageview.provider -%}
+              {%- include snippets/locale-to-string.html locale=site.data.locale.VIEWS -%}
+              {%- assign _locale_views = __return -%}
+              <li><i class="far fa-eye"></i> <span class="js-pageview" data-page-key="{{ include.article.key }}">0</span> {{ _locale_views }}</li>
+            {%- endif -%}
+          {%- endif -%}
+        </ul>
       {%- endif -%}
 
-    </ul>
+    </div>
   {%- endif -%}
+{%- endif -%}
+
 
-</div>
+{%- if include.semantic != false -%}
+  {%- if _author -%}
+    <meta itemprop="author" content="{{ _author.name }}"/>
+  {%- endif -%}
+  {%- if include.article.date -%}
+    <meta itemprop="datePublished" content="{{ include.article.date | date_to_xmlschema }}">
+  {%- endif -%}
+  {%- if include.article.tags[0] -%}
+    {%- assign _keywords = include.article.tags | join: ',' %}
+    <meta itemprop="keywords" content="{{ _keywords }}">
+  {%- endif -%}
+{%- endif -%}

_includes/article-section-navigator.html

@@ -30,8 +30,8 @@
   {%- endif -%}
 
 {%- else -%}
-  {%- assign _previous = page.next -%}
-  {%- assign _next = page.previous -%}
+  {%- assign _previous = page.previous -%}
+  {%- assign _next = page.next -%}
 {%- endif -%}
 
 {%- if _next or _previous -%}

_includes/head.html

@@ -2,7 +2,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
-{%- include snippets/page-title.html -%}
+{%- include snippets/get-article-title.html article=page -%}
 <title>{%- if __return -%}{{ __return }} - {{ site.title }}{%- else -%}{{ site.title }}{%- endif -%}</title>
 
 <meta name="description" content="{%- if page.excerpt -%}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{%- else -%}{{ site.description }}{%- endif -%}">

_includes/header.html

@@ -1,34 +1,40 @@
-<header class="header">
-  <div class="main">
-    <div class="header__main">
-      <div class="logo">
-        {%- include svg/logo.svg -%}
-        {%- assign _paths_root = site.paths.root | default: site.data.variables.default.paths.root  -%}
-        {%- include snippets/get-nav-url.html path=_paths_root -%}
-        {%- if site.title -%}
-          <a title="{%- if site.description -%}{{ site.description }}{%- endif -%}" href="{{ __return }}">{{ site.title }}</a>
-        {%- endif -%}
+{%- if include.theme == 'dark' -%}
+  <header class="header header--dark">
+{%- elsif include.theme == 'light' -%}
+  <header class="header header--light">
+{%- else -%}
+  <header class="header">
+{%- endif -%}
+    <div class="main">
+      <div class="header__main">
+        <div class="logo">
+          {%- include svg/logo.svg -%}
+          {%- assign _paths_root = site.paths.root | default: site.data.variables.default.paths.root  -%}
+          {%- include snippets/get-nav-url.html path=_paths_root -%}
+          {%- if site.title -%}
+            <a title="{%- if site.description -%}{{ site.description }}{%- endif -%}" href="{{ __return }}">{{ site.title }}</a>
+          {%- endif -%}
+        </div>
+        <button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button>
       </div>
-      <button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button>
+      {%- if site.data.navigation.header -%}
+      <nav class="navigation">
+        <ul>
+          {%- for _item in site.data.navigation.header -%}
+            {%- include snippets/get-nav-url.html path=_item.url -%}
+            {%- assign _nav_url = __return -%}
+            {%- include snippets/get-nav-url.html path=page.url -%}
+            {%- assign _page_url = __return -%}
+            {%- include snippets/locale-to-string.html locale=_item.titles -%}
+            {%- if _nav_url == _page_url -%}
+              <li class="active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
+            {%- else -%}
+              <li><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
+            {%- endif -%}
+          {%- endfor -%}
+          <li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li>
+        </ul>
+      </nav>
+      {%- endif -%}
     </div>
-    {%- if site.data.navigation.header -%}
-    <nav class="navigation">
-      <ul>
-        {%- for _item in site.data.navigation.header -%}
-          {%- include snippets/get-nav-url.html path=_item.url -%}
-          {%- assign _nav_url = __return -%}
-          {%- include snippets/get-nav-url.html path=page.url -%}
-          {%- assign _page_url = __return -%}
-          {%- include snippets/locale-to-string.html locale=_item.titles -%}
-          {%- if _nav_url == _page_url -%}
-            <li class="active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
-          {%- else -%}
-            <li><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
-          {%- endif -%}
-        {%- endfor -%}
-        <li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li>
-      </ul>
-    </nav>
-    {%- endif -%}
-  </div>
-</header>
+  </header>

_includes/markdown-enhancements.html

@@ -1,20 +1,17 @@
-{%- include snippets/assign.html target=site.data.variables.default.chart source0=site.chart -%}
-{%- include snippets/assign.html target=__return source0=page.chart -%}
-
+{%- include snippets/assign.html target=site.data.variables.default.chart
+  source0=site.chart source1=page.chart -%}
 {%- if __return == true -%}
   {%- include markdown-enhancements/chart.html -%}
 {%- endif -%}
 
-{%- include snippets/assign.html target=site.data.variables.default.mathjax source0=site.mathjax -%}
-{%- include snippets/assign.html target=__return source0=page.mathjax -%}
-
+{%- include snippets/assign.html target=site.data.variables.default.mathjax
+  source0=site.mathjax source1=page.mathjax -%}
 {%- if __return == true -%}
   {%- include markdown-enhancements/mathjax.html -%}
 {%- endif -%}
 
-{%- include snippets/assign.html target=site.data.variables.default.mermaid source0=site.mermaid -%}
-{%- include snippets/assign.html target=__return source0=page.mermaid -%}
-
+{%- include snippets/assign.html target=site.data.variables.default.mermaid
+  source0=site.mermaid source1=page.mermaid -%}
 {%- if __return == true -%}
   {%- include markdown-enhancements/mermaid.html -%}
 {%- endif -%}

_includes/markdown-enhancements/mathjax.html

@@ -1,8 +1,8 @@
 {%- include snippets/get-sources.html -%}
 {%- assign _sources = __return -%}
 
-{%- include snippets/assign.html target=site.data.variables.default.mathjax_autoNumber source0=site.mathjax_autoNumber -%}
-{%- include snippets/assign.html target=__return source0=page.mathjax_autoNumber -%}
+{%- include snippets/assign.html target=site.data.variables.default.mathjax_autoNumber
+  source0=site.mathjax_autoNumber source1=page.mathjax_autoNumber -%}
 {%- assign _mathjax_autoNumber = __return -%}
 
 <script type="text/x-mathjax-config">