Skip to content

Commit

Permalink
Refactor optimized html (#1439)
Browse files Browse the repository at this point in the history 
* refactor: let's use a consistent self-enclosing tag format

* refactor: always define a buttons type

compare to e.g. https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9
  • Loading branch information
@mfranzke
mfranzke authored Sep 21, 2022
1 parent e5c6950 commit 4bf845e
Show file tree
Hide file tree
Showing 29 changed files with 88 additions and 73 deletions.
2 changes: 1 addition & 1 deletion packages/core/test/files/_meta/_head.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
4 changes: 2 additions & 2 deletions packages/core/test/files/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand All @@ -14,4 +14,4 @@

</head>
<body class="{{ bodyClass }}">

6 changes: 3 additions & 3 deletions packages/core/test/lineage_hunter_tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ tap.test('find_lineage - finds lineage', function (test) {
template:
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n\t{{> atoms-logo }}\r\n\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n\t{{> molecules-primary-nav }}\r\n\t{{> molecules-search }}\r\n</header>\r\n<!-- End .header -->\r\n',
patternPartialCode:
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n<a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n<nav id="nav" class="nav">\r\n\t<ul>\r\n\t\t<li><a href="#">Home</a></li>\r\n\t\t<li><a href="#">About</a></li>\r\n\t\t<li><a href="#">Blog</a></li>\r\n\t\t<li><a href="#">Contact</a></li>\r\n\t</ul>\r\n</nav><!--end .nav-->\r\n<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form></header>\r\n<!-- End .header -->\r\n',
'<!-- Begin .header -->\r\n<header class="header cf" role="banner">\r\n<a href="/"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>\t<a href="#" class="nav-toggle nav-toggle-search icon-search"><span class="is-vishidden">Search</span></a>\r\n\t<a href="#" class="nav-toggle nav-toggle-menu icon-menu"><span class="is-vishidden">Menu</span></a>\r\n<nav id="nav" class="nav">\r\n\t<ul>\r\n\t\t<li><a href="#">Home</a></li>\r\n\t\t<li><a href="#">About</a></li>\r\n\t\t<li><a href="#">Blog</a></li>\r\n\t\t<li><a href="#">Contact</a></li>\r\n\t</ul>\r\n</nav><!--end .nav-->\r\n<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form></header>\r\n<!-- End .header -->\r\n',
});

var patternlab = {
Expand Down Expand Up @@ -123,9 +123,9 @@ tap.test('find_lineage - finds lineage', function (test) {
filename: 'search.mustache',
data: null,
template:
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
patternPartialCode:
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
'<form action="#" method="post" class="inline-form search-form"> \r\n <fieldset>\r\n\t <legend class="is-vishidden">Search</legend>\r\n\t <label for="search-field" class="is-vishidden">Search</label>\r\n\t <input type="search" placeholder="Search" id="search-field" class="search-field" />\r\n\t <button class="search-submit" type="submit">\r\n\t \t<span class="icon-search" aria-hidden="true"></span>\r\n\t \t<span class="is-vishidden">Search</span>\r\n\t </button>\r\n </fieldset>\r\n</form>',
patternBaseName: 'search',
patternLink: 'molecules-forms-search/molecules-forms-search.html',
patternGroup: 'molecules',
Expand Down
2 changes: 1 addition & 1 deletion packages/development-edition-engine-react/source/_meta/_head.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
10 changes: 5 additions & 5 deletions packages/development-edition-engine-react/source/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />

<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{{ patternLabHead }}}
<!-- End Pattern Lab -->

</head>
<body class="{{ bodyClass }}">

7 changes: 4 additions & 3 deletions packages/docs/src/_includes/components/header.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@

<button
class="c-btn c-btn--inverted c-btn--small c-header__nav-btn js-nav-trigger c-btn--small c-header__nav-btn"
type="button"
>
Menu
</button>

<div class="c-header__nav-container js-nav-panel">
{% include "components/tree-nav.njk" %}



</div>
</div>
<!--end c-header__inner-->
</header>
<!--end c-header-->
<!--end c-header-->

10 changes: 5 additions & 5 deletions packages/docs/src/_includes/components/tree-nav.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@
{% for item in navigation.items %}
<li class="c-tree-nav__item {% if item.subnav %}js-nav-dropdown{% endif %}">
{% if item.subnav %}
<button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger" aria-expanded="true">
<button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger" aria-expanded="true" type="button">
{{ item.label }}
{% set className = "c-tree-nav__icon" %}
{% include "components/icon-chevron-down.njk" %}
</button>

<ul class="c-tree-nav__subnav">
{% for subnav in item.subnav %}

<li class="c-tree-nav__subnav-item">
<span class="c-tree-nav__subnav-title">
{{ subnav.label }}
</span><!--end c-tree-nav__subnav-link-->
{% set subnavCategory = subnav.category %}
{% include "components/tree-subnav.njk" %}
</li><!--end c-tree-nav__subnav-item-->
{% endfor %}
</li><!--end c-tree-nav__subnav-item-->
{% endfor %}
</ul><!--end c-tree-nav__subnav-->
{% else %}
<a class="c-tree-nav__link" href="{{ item.url }}">{{ item.label }}</a>
Expand Down
5 changes: 4 additions & 1 deletion packages/docs/src/js/components/theme-toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,10 @@ class ThemeToggle extends HTMLElement {
this.innerHTML = html`
<div class="[ theme-toggle ] [ md:ta-right gap-top-500 ]">
<div role="status" class="[ visually-hidden ][ js-mode-status ]"></div>
<button class="[ button ] [ font-base text-base weight-bold ] [ js-mode-toggle ]">
<button
class="[ button ] [ font-base text-base weight-bold ] [ js-mode-toggle ]"
type="button"
>
Dark theme
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/edition-node-gulp/source/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
4 changes: 2 additions & 2 deletions packages/edition-node/source/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand All @@ -14,4 +14,4 @@

</head>
<body class="{{ bodyClass }}">

4 changes: 2 additions & 2 deletions packages/edition-twig/source/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand All @@ -14,4 +14,4 @@

</head>
<body class="{{ bodyClass }}">

8 changes: 4 additions & 4 deletions packages/edition-twig/source/_meta/_head.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />

<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{ patternLabHead | raw }}
<!-- End Pattern Lab -->

</head>
<body class="{{ bodyClass }}">

2 changes: 1 addition & 1 deletion packages/edition-twig/source/_patterns/atoms/buttons/_button.twig
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<button style="{{ dark ? 'background-color: black; color: white;' }}">{{ text }}</button>
<button style="{{ dark ? 'background-color: black; color: white;' }}" type="button">{{ text }}</button>
2 changes: 1 addition & 1 deletion packages/engine-handlebars/_meta/_head.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
4 changes: 2 additions & 2 deletions packages/engine-mustache/_meta/_head.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand All @@ -14,4 +14,4 @@

</head>
<body class="{{ bodyClass }}">

2 changes: 1 addition & 1 deletion packages/engine-twig-php/_meta/_head.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
2 changes: 1 addition & 1 deletion packages/engine-twig/_meta/_head.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
2 changes: 1 addition & 1 deletion packages/starterkit-handlebars-demo/dist/_meta/_head.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html class="{{ htmlClass }}" lang="en">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
Expand Down
Loading

0 comments on commit 4bf845e

Please sign in to comment.