Improve accessibility and performance
This commit is contained in:
parent
710150c550
commit
68bf50c595
2
daux_libraries/search.min.js
vendored
2
daux_libraries/search.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 81 KiB |
BIN
docs/app.png
BIN
docs/app.png
Binary file not shown.
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 100 KiB |
@ -24,9 +24,10 @@
|
|||||||
"google_analytics": false,
|
"google_analytics": false,
|
||||||
"plausible_domain": false,
|
"plausible_domain": false,
|
||||||
"links": {
|
"links": {
|
||||||
"Download": "https://github.com/dauxio/daux.io/archive/master.zip",
|
"GitHub Repository": "https://github.com/dauxio/daux.io",
|
||||||
"GitHub Repo": "https://github.com/dauxio/daux.io",
|
"Help/Support/Bugs": "https://github.com/dauxio/daux.io/issues",
|
||||||
"Help/Support/Bugs": "https://github.com/dauxio/daux.io/issues"
|
"Packagist": "https://packagist.org/packages/daux/daux.io",
|
||||||
|
"Docker Images": "https://hub.docker.com/r/daux/daux.io"
|
||||||
},
|
},
|
||||||
"powered_by": "Powered by Daux.io"
|
"powered_by": "Powered by Daux.io"
|
||||||
},
|
},
|
||||||
|
@ -310,6 +310,7 @@ Components
|
|||||||
top: 9px;
|
top: 9px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -148,3 +148,13 @@ body {
|
|||||||
// 860 == screen-width of 1200 - sidebar - margin
|
// 860 == screen-width of 1200 - sidebar - margin
|
||||||
max-width: 860px;
|
max-width: 860px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-visuallyHidden {
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
white-space: nowrap; /* added line */
|
||||||
|
}
|
||||||
|
@ -23,6 +23,7 @@ class SearchEngine {
|
|||||||
constructor(options) {
|
constructor(options) {
|
||||||
this.settings = {
|
this.settings = {
|
||||||
field: document.getElementById("search_input"),
|
field: document.getElementById("search_input"),
|
||||||
|
form: document.getElementById("search_form"),
|
||||||
show: 10,
|
show: 10,
|
||||||
showURL: true,
|
showURL: true,
|
||||||
showTitleCount: true,
|
showTitleCount: true,
|
||||||
@ -96,6 +97,13 @@ class SearchEngine {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.settings.form.addEventListener("submit", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
this.loadData().then(() => {
|
||||||
|
this.displaySearch();
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
keyUpHandler = e => {
|
keyUpHandler = e => {
|
||||||
|
@ -19,10 +19,11 @@
|
|||||||
|
|
||||||
<div class="HomepageButtons">
|
<div class="HomepageButtons">
|
||||||
<div class="Container">
|
<div class="Container">
|
||||||
<?php
|
<?php if ($config->getHTML()->hasRepository()) { ?>
|
||||||
if ($config->getHTML()->hasRepository()) {
|
<a href="https://github.com/<?= $config->getHTML()->getRepository(); ?>" class="Button Button--secondary Button--hero" rel="noopener noreferrer">
|
||||||
echo '<a href="https://github.com/' . $config->getHTML()->getRepository() . '" class="Button Button--secondary Button--hero">' . $this->translate("View_on_github") . '</a>';
|
<?= $this->translate("View_on_github") ?>
|
||||||
}
|
</a>
|
||||||
|
<?php }
|
||||||
$view_doc = $this->translate("View_documentation");
|
$view_doc = $this->translate("View_documentation");
|
||||||
foreach ($page['entry_page'] as $key => $node) {
|
foreach ($page['entry_page'] as $key => $node) {
|
||||||
echo '<a href="' . $node . '" class="Button Button--primary Button--hero">' . str_replace("__VIEW_DOCUMENTATION__", $view_doc, $key) . '</a>';
|
echo '<a href="' . $node . '" class="Button Button--primary Button--hero">' . str_replace("__VIEW_DOCUMENTATION__", $view_doc, $key) . '</a>';
|
||||||
@ -52,9 +53,9 @@
|
|||||||
<div class="Container--inner">
|
<div class="Container--inner">
|
||||||
<?php if ($config->getHTML()->hasLinks()) { ?>
|
<?php if ($config->getHTML()->hasLinks()) { ?>
|
||||||
<ul class="HomepageFooter__links">
|
<ul class="HomepageFooter__links">
|
||||||
<?php foreach ($config->getHTML()->getLinks() as $name => $url) {
|
<?php foreach ($config->getHTML()->getLinks() as $name => $url) { ?>
|
||||||
echo '<li><a href="' . $url . '" target="_blank">' . $name . '</a></li>';
|
<li><a href="<?= $url; ?>" target="_blank" rel="noopener noreferrer"><?= $name ?></a></li>
|
||||||
} ?>
|
<?php } ?>
|
||||||
</ul>
|
</ul>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
<?php if ($config->getHTML()->hasLinks()) { ?>
|
<?php if ($config->getHTML()->hasLinks()) { ?>
|
||||||
<hr/>
|
<hr/>
|
||||||
<?php foreach ($config->getHTML()->getLinks() as $name => $url) { ?>
|
<?php foreach ($config->getHTML()->getLinks() as $name => $url) { ?>
|
||||||
<a href="<?= $url ?>" target="_blank"><?= $name ?></a>
|
<a href="<?= $url ?>" target="_blank" rel="noopener noreferrer"><?= $name ?></a>
|
||||||
<br />
|
<br />
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
@ -6,11 +6,34 @@ if (!isset($config)) {
|
|||||||
<a class="Brand" href="<?= $config->getBasePage() . $config->getIndex()->getUri(); ?>"><?= $config->getTitle(); ?></a>
|
<a class="Brand" href="<?= $config->getBasePage() . $config->getIndex()->getUri(); ?>"><?= $config->getTitle(); ?></a>
|
||||||
|
|
||||||
<?php if ($config->getHTML()->hasSearch()) { ?>
|
<?php if ($config->getHTML()->hasSearch()) { ?>
|
||||||
<div class="Search">
|
<form role='search' action="/" method="get" class="Search" id="search_form">
|
||||||
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
|
<label for="search_input">
|
||||||
<path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/>
|
<span class='u-visuallyHidden'>Search</span>
|
||||||
</svg>
|
</label>
|
||||||
<input type="search" id="search_input" class="Search__field" placeholder="<?=$this->translate("Search_placeholder") ?>" autocomplete="on"
|
|
||||||
results=25 autosave=text_search>
|
<input
|
||||||
|
type="search"
|
||||||
|
id="search_input"
|
||||||
|
class="Search__field"
|
||||||
|
placeholder="<?=$this->translate("Search_placeholder") ?>"
|
||||||
|
aria-label="<?=$this->translate("Search_placeholder") ?>"
|
||||||
|
autocomplete="on"
|
||||||
|
results=25
|
||||||
|
autosave=text_search
|
||||||
|
>
|
||||||
|
<label>
|
||||||
|
<input type="submit" class='u-visuallyHidden' />
|
||||||
|
<span class='u-visuallyHidden'><?=$this->translate("Search_placeholder") ?></span>
|
||||||
|
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
|
||||||
|
<path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div role="search">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
@ -4,7 +4,7 @@ if (!isset($config)) {
|
|||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<?php foreach ($config->getHTML()->getTwitterHandles() as $handle) { ?>
|
<?php foreach ($config->getHTML()->getTwitterHandles() as $handle) { ?>
|
||||||
<a class="Twitter__button" target="_blank" title="Follow @<?= $handle; ?> on Twitter" href="https://twitter.com/intent/follow?screen_name=<?= $handle; ?>">
|
<a class="Twitter__button" target="_blank" title="Follow @<?= $handle; ?> on Twitter" href="https://twitter.com/intent/follow?screen_name=<?= $handle; ?>" rel="noopener noreferrer">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path fill="none" d="M0 0h72v72H0z"/><path class="icon" fill="#fff" d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path fill="none" d="M0 0h72v72H0z"/><path class="icon" fill="#fff" d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"/></svg>
|
||||||
<span class="Twitter__button__label">Follow @<?= $handle; ?></span>
|
<span class="Twitter__button__label">Follow @<?= $handle; ?></span>
|
||||||
</a>
|
</a>
|
||||||
|
2
themes/daux/css/theme-blue.min.css
vendored
2
themes/daux/css/theme-blue.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-green.min.css
vendored
2
themes/daux/css/theme-green.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-navy.min.css
vendored
2
themes/daux/css/theme-navy.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
themes/daux/css/theme-red.min.css
vendored
2
themes/daux/css/theme-red.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user