Updated migration guide for templates

This commit is contained in:
squidfunk 2020-03-21 17:11:06 +01:00
parent 0b622b3333
commit d807cbd1fc

View File

@ -413,9 +413,10 @@ matches the new structure:
#### `partials/footer.html` #### `partials/footer.html`
``` diff ``` diff
@@ -7,32 +7,32 @@ @@ -5,34 +5,34 @@
<div class="md-footer-nav"> <div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid"> - <nav class="md-footer-nav__inner md-grid">
+ <nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
{% if page.previous_page %} {% if page.previous_page %}
- <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> - <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
- <div class="md-flex__cell md-flex__cell--shrink"> - <div class="md-flex__cell md-flex__cell--shrink">
@ -463,10 +464,11 @@ matches the new structure:
#### `partials/header.html` #### `partials/header.html`
``` diff ``` diff
@@ -3,50 +3,44 @@ @@ -2,51 +2,46 @@
This file was automatically generated - do not edit
-#} -#}
<header class="md-header" data-md-component="header"> <header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid"> - <nav class="md-header-nav md-grid">
- <div class="md-flex"> - <div class="md-flex">
- <div class="md-flex__cell md-flex__cell--shrink"> - <div class="md-flex__cell md-flex__cell--shrink">
- <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo"> - <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
@ -483,6 +485,7 @@ matches the new structure:
- <div class="md-flex__cell md-flex__cell--stretch"> - <div class="md-flex__cell md-flex__cell--stretch">
- <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title"> - <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
- {% if config.site_name == page.title %} - {% if config.site_name == page.title %}
+ <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo"> + <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
+ {% if config.theme.logo %} + {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo"> + <img src="{{ config.theme.logo | url }}" alt="logo">
@ -598,7 +601,7 @@ matches the new structure:
+ </span> + </span>
</label> </label>
- <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}"> - <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
+ <nav class="md-nav" data-md-level="{{ level }}"> + <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}"> <label class="md-nav__title" for="{{ path }}">
+ <span class="md-nav__icon md-icon"> + <span class="md-nav__icon md-icon">
+ {% include ".icons/material/arrow-left.svg" %} + {% include ".icons/material/arrow-left.svg" %}
@ -607,7 +610,7 @@ matches the new structure:
</label> </label>
<ul class="md-nav__list" data-md-scrollfix> <ul class="md-nav__list" data-md-scrollfix>
@@ -39,6 +45,9 @@ @@ -39,6 +45,9 @@
{% if toc_ | first is defined %} {% if toc | first is defined %}
<label class="md-nav__link md-nav__link--active" for="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc">
{{ nav_item.title }} {{ nav_item.title }}
+ <span class="md-nav__icon md-icon"> + <span class="md-nav__icon md-icon">
@ -621,21 +624,24 @@ matches the new structure:
#### `partials/nav.html` #### `partials/nav.html`
``` diff ``` diff
@@ -2,12 +2,12 @@ @@ -1,13 +1,14 @@
{#-
This file was automatically generated - do not edit This file was automatically generated - do not edit
-#} -#}
<nav class="md-nav md-nav--primary" data-md-level="0"> -<nav class="md-nav md-nav--primary" data-md-level="0">
- <label class="md-nav__title md-nav__title--site" for="__drawer"> - <label class="md-nav__title md-nav__title--site" for="__drawer">
- <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo"> - <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
- {% if config.theme.logo.icon %} - {% if config.theme.logo.icon %}
- <i class="md-icon">{{ config.theme.logo.icon }}</i> - <i class="md-icon">{{ config.theme.logo.icon }}</i>
+<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
+ <label class="md-nav__title" for="__drawer"> + <label class="md-nav__title" for="__drawer">
+ <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo"> + <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
+ {% if config.theme.logo %} + {% if config.theme.logo %}
+ <img src="{{ config.theme.logo | url }}" alt="logo"> + <img src="{{ config.theme.logo | url }}" alt="logo">
{% else %} {% else %}
- <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48"> - <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48">
+ {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %} + {% set icon = config.theme.icon.logo or "material/library" %}
+ {% include ".icons/" ~ icon ~ ".svg" %}
{% endif %} {% endif %}
</a> </a>
{{ config.site_name }} {{ config.site_name }}
@ -648,15 +654,15 @@ matches the new structure:
<label class="md-search__overlay" for="__search"></label> <label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search"> <div class="md-search__inner" role="search">
<form class="md-search__form" name="search"> <form class="md-search__form" name="search">
- <input type="text" class="md-search__input" aria-label="search" name="query" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active"> - <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
+ <input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required> + <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
<label class="md-search__icon md-icon" for="__search"> <label class="md-search__icon md-icon" for="__search">
+ {% include ".icons/material/magnify.svg" %} + {% include ".icons/material/magnify.svg" %}
+ {% include ".icons/material/arrow-left.svg" %} + {% include ".icons/material/arrow-left.svg" %}
</label> </label>
- <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1"> - <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
- &#xE5CD; - &#xE5CD;
+ <button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1"> + <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" data-md-component="search-reset" tabindex="-1">
+ {% include ".icons/material/close.svg" %} + {% include ".icons/material/close.svg" %}
</button> </button>
</form> </form>
@ -732,7 +738,7 @@ matches the new structure:
#### `partials/source.html` #### `partials/source.html`
``` diff ``` diff
@@ -2,24 +2,10 @@ @@ -2,24 +2,11 @@
This file was automatically generated - do not edit This file was automatically generated - do not edit
-#} -#}
{% import "partials/language.html" as lang with context %} {% import "partials/language.html" as lang with context %}
@ -756,7 +762,8 @@ matches the new structure:
- {% endif %} - {% endif %}
+<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source"> +<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
+ <div class="md-source__icon md-icon"> + <div class="md-source__icon md-icon">
+ {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %} + {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
+ {% include ".icons/" ~ icon ~ ".svg" %}
+ </div> + </div>
<div class="md-source__repository"> <div class="md-source__repository">
{{ config.repo_name }} {{ config.repo_name }}
@ -777,11 +784,43 @@ matches the new structure:
<a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active"> <a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
``` ```
#### `partials/tabs.html`
``` diff
@@ -5,7 +5,7 @@
{% if page.ancestors | length > 0 %}
{% set class = "md-tabs md-tabs--active" %}
{% endif %}
-<nav class="{{ class }}" data-md-component="tabs">
+<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
{% for nav_item in nav %}
```
#### `partials/toc-item.html`
``` diff
@@ -6,7 +6,7 @@
{{ toc_item.title }}
</a>
{% if toc_item.children %}
- <nav class="md-nav">
+ <nav class="md-nav" aria-label="{{ toc_item.title }}">
<ul class="md-nav__list">
{% for toc_item in toc_item.children %}
{% include "partials/toc-item.html" %}
```
#### `partials/toc.html` #### `partials/toc.html`
``` diff ``` diff
@@ -8,29 +8,16 @@ @@ -2,35 +2,22 @@
This file was automatically generated - do not edit
-#} -#}
{% import "partials/language.html" as lang with context %}
-<nav class="md-nav md-nav--secondary">
+<nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc.title') }}">
{% endif %} {% endif %}
{% if toc | first is defined %} {% if toc | first is defined %}
<label class="md-nav__title" for="__toc"> <label class="md-nav__title" for="__toc">