Documentation - Improve svg handling (#9575)

* fix tabs in xm157

* use rollup, remove grunt, fix scss build

* add svg bundler. rework to use svg element instead of images
This commit is contained in:
Jo David 2023-10-24 14:04:58 +02:00 committed by GitHub
parent 697a4b75ca
commit 9641fe490b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 554 additions and 2553 deletions

View File

@ -15,13 +15,25 @@
<h2>Social Media</h2> <h2>Social Media</h2>
<div class="social-icons"> <div class="social-icons">
<a class="social-icons__icon" href="https://twitter.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on X (Twitter)"> <a class="social-icons__icon" href="https://twitter.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on X (Twitter)">
<img class="icon" src="{{ site.baseurl }}/img/icons/twitter.svg" alt="ACE3 on X (Twitter)" width="32" height="32"> <i class="icon icon--2x" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#twitter" />
</svg>
</i>
</a> </a>
<a class="social-icons__icon" href="https://facebook.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on Facebook"> <a class="social-icons__icon" href="https://facebook.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on Facebook">
<img class="icon" src="{{ site.baseurl }}/img/icons/facebook.svg" alt="ACE3 on Facebook" width="32" height="32"> <i class="icon icon--2x" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#facebook" />
</svg>
</i>
</a> </a>
<a class="social-icons__icon" href="https://youtube.com/c/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on YouTube"> <a class="social-icons__icon" href="https://youtube.com/c/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on YouTube">
<img class="icon" src="{{ site.baseurl }}/img/icons/youtube.svg" alt="ACE3 on YouTube" width="32" height="32"> <i class="icon icon--2x" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#youtube" />
</svg>
</i>
</a> </a>
</div> </div>
</div> </div>

View File

@ -7,8 +7,13 @@ layout: compress
<main> <main>
<div class="row"> <div class="row">
<div class="medium-8 columns"> <div class="medium-8 columns">
<a href="{{site.baseUrl}}/news.html" class="button tiny"> <a href="{{site.baseUrl}}/news.html" class="button button--icon tiny">
<img class="icon" src="{{ site.baseurl }}/img/icons/chevronleftwhite.svg" alt="Back" width="16" height="16" aria-hidden="true">&nbsp;Back <i class="icon icon--white" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#chevronleft" />
</svg>
</i>
<span>Back</span>
</a> </a>
<br/> <br/>
<article class="post" itemscope itemtype="http://schema.org/BlogPosting"> <article class="post" itemscope itemtype="http://schema.org/BlogPosting">

View File

@ -47,8 +47,13 @@ layout: compress
<div class="row"> <div class="row">
<div class="large-12 columns"> <div class="large-12 columns">
<p> <p>
<a href="./"> <a href="./" class="flex gap-1 leading-none items-center">
<img class="icon" src="{{ site.baseurl }}/img/icons/chevronleft.svg" alt="Back" width="16" height="16" aria-hidden="true">&nbsp;&nbsp;Back to overview <i class="icon icon--red" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#chevronleft" />
</svg>
</i>
<span>Back to overview</span>
</a> </a>
</p> </p>
</div> </div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
docs/dist/icons.svg vendored Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/><symbol id="chevronleft" viewBox="0 0 32 32"><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z"/></symbol><symbol id="chevronright" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"/></symbol><symbol id="download" viewBox="0 0 32 32"><path d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"/></symbol><symbol id="facebook" viewBox="0 0 24 24"><path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.19 19.19 0 0 0-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4.598Z"/></symbol><symbol id="search" viewBox="0 0 32 32"><path d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"/></symbol><symbol id="twitter" viewBox="0 0 24 24"><path d="M8 2H1l8.26 11.014L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886L8 2Zm9 18L5 4h2l12 16h-2Z"/></symbol><symbol id="youtube" viewBox="0 0 24 24"><path d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476h.489ZM9.999 8.5v7l6-3.5l-6-3.5Z"/></symbol></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -43,9 +43,13 @@ sitemap:
<h2 class="subheader">{{ page.browserTitle }}</h2> <h2 class="subheader">{{ page.browserTitle }}</h2>
</div> </div>
<div class="large-5 columns"> <div class="large-5 columns">
<a class="button" target="_blank" href="{{site.ace.githubUrl}}/releases/latest" rel="noopener"> <a class="button button--icon" target="_blank" href="{{site.ace.githubUrl}}/releases/latest" rel="noopener">
Get ACE3 v{{site.ace.version.major}}.{{site.ace.version.minor}}.{{site.ace.version.patch}} <span>Get ACE3 v{{site.ace.version.major}}.{{site.ace.version.minor}}.{{site.ace.version.patch}}</span>
<img class="icon" src="{{ site.baseurl }}/img/icons/download.svg" alt="Download ACE3" width="24" height="24" aria-hidden="true"> <i class="icon icon--white icon--1-5x" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#download" />
</svg>
</i>
</a> </a>
<br> <br>
<a href="{{site.baseurl}}/wiki/user/installation-guide.html">Installation Guide</a> <a href="{{site.baseurl}}/wiki/user/installation-guide.html">Installation Guide</a>

View File

@ -2,35 +2,35 @@
"name": "ACE3MOD", "name": "ACE3MOD",
"short_name": "ACE3", "short_name": "ACE3",
"icons": [{ "icons": [{
"src": "/img/icons/icon-48x48.png", "src": "/img/logo/icon-48x48.png",
"sizes": "48x48", "sizes": "48x48",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-96x96.png", "src": "/img/logo/icon-96x96.png",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-128x128.png", "src": "/img/logo/icon-128x128.png",
"sizes": "128x128", "sizes": "128x128",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-144x144.png", "src": "/img/logo/icon-144x144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-192x192.png", "src": "/img/logo/icon-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-256x256.png", "src": "/img/logo/icon-256x256.png",
"sizes": "256x256", "sizes": "256x256",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-384x384.png", "src": "/img/logo/icon-384x384.png",
"sizes": "384x384", "sizes": "384x384",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "/img/icons/icon-512x512.png", "src": "/img/logo/icon-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
}], }],

View File

@ -28,8 +28,13 @@ parent:
</header> </header>
{{ post.excerpt }} {{ post.excerpt }}
<footer> <footer>
<a class="button small" href="{{ post.url }}"> <a class="button button--icon small" href="{{ post.url }}">
Read more&nbsp;<img class="icon" src="{{ site.baseurl }}/img/icons/chevronrightwhite.svg" alt="Back" width="16" height="16" aria-hidden="true"> <span>Read more</span>
<i class="icon icon--white" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#chevronright" />
</svg>
</i>
</a> </a>
</footer> </footer>
</article> </article>

View File

@ -1,6 +0,0 @@
{
"name": "docs",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z"/></svg>

After

Width:  |  Height:  |  Size: 145 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"/></svg>

After

Width:  |  Height:  |  Size: 146 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"/></svg>

After

Width:  |  Height:  |  Size: 219 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.19 19.19 0 0 0-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4.598Z"/></svg>

After

Width:  |  Height:  |  Size: 352 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"/></svg>

After

Width:  |  Height:  |  Size: 208 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M8 2H1l8.26 11.014L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886L8 2Zm9 18L5 4h2l12 16h-2Z"/></svg>

After

Width:  |  Height:  |  Size: 218 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476h.489ZM9.999 8.5v7l6-3.5l-6-3.5Z"/></svg>

After

Width:  |  Height:  |  Size: 619 B

File diff suppressed because it is too large Load Diff

View File

@ -8,6 +8,8 @@
"@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-terser": "^0.4.4",
"node-sass": "^9.0.0", "node-sass": "^9.0.0",
"rollup": "^4.1.4", "rollup": "^4.1.4",
"rollup-plugin-scss": "^4.0.0" "rollup-plugin-scss": "^4.0.0",
"rollup-plugin-svg-icons": "^2.1.2",
"rollup-plugin-svg-sprite-loader": "^0.0.4"
} }
} }

View File

@ -1,5 +1,6 @@
import terser from "@rollup/plugin-terser"; import terser from "@rollup/plugin-terser";
import scss from "rollup-plugin-scss"; import scss from "rollup-plugin-scss";
import svgicons from "rollup-plugin-svg-icons";
export default { export default {
input: "./main.js", input: "./main.js",
@ -20,5 +21,9 @@ export default {
sourceMap: true, sourceMap: true,
outputStyle: "compressed", outputStyle: "compressed",
}), }),
svgicons({
inputFolder: "./icons",
output: "../dist/icons.svg",
}),
], ],
}; };

View File

@ -14,6 +14,6 @@ body > footer {
} }
a { a {
color: lighten($primary-color, 28%); color: $primary-color-lighter;
} }
} }

View File

@ -27,3 +27,7 @@ aside {
overflow: hidden; overflow: hidden;
} }
} }
a {
transition: $transition-default;
}

View File

@ -120,10 +120,12 @@ $font-weight-bold: 700;
// $jet : #222222; // $jet : #222222;
// $black : #000000; // $black : #000000;
$transition-default: all .15s ease;
// We use these as default colors throughout // We use these as default colors throughout
// $primary-color: #008CBA; // $primary-color: #008CBA;
$primary-color: $ace-primary-color; $primary-color: $ace-primary-color;
$primary-color-lighter: lighten($primary-color, 28%);
// $secondary-color: #e7e7e7; // $secondary-color: #e7e7e7;
// $alert-color: #f04124; // $alert-color: #f04124;
// $success-color: #43AC6A; // $success-color: #43AC6A;

View File

@ -5,3 +5,20 @@
.hidden { .hidden {
display: none; display: none;
} }
.flex {
display: flex;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.items-center {
align-items: center;
}
.leading-none {
line-height: 1;
}

View File

@ -2,4 +2,17 @@
& > img { & > img {
margin-bottom: 0; margin-bottom: 0;
} }
svg {
fill: #fff;
}
&--icon {
display: inline-flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 0.25rem;
}
} }

View File

@ -1,7 +1,40 @@
.icon { .icon {
margin-bottom: 0; display: inline-block;
&-red { inline-size: 1rem;
color: $ace-primary-color; block-size: 1rem;
font-style: unset;
svg {
inline-size: inherit;
block-size: inherit;
transition: $transition-default;
}
&--1-25x {
inline-size: 1.25rem;
block-size: 1.25rem;
}
&--1-5x {
inline-size: 1.5rem;
block-size: 1.5rem;
}
&--2x {
inline-size: 2rem;
block-size: 2rem;
}
&--white {
svg {
fill: #ffffff;
}
}
&--red {
svg {
fill: $primary-color;
}
} }
} }
@ -20,6 +53,6 @@
background-color: #000; background-color: #000;
} }
&-red { &-red {
background-color: $ace-primary-color; background-color: $primary-color;
} }
} }

View File

@ -1,4 +1,17 @@
.social-icons { .social-icons {
display: flex; display: flex;
gap: 10px; gap: 10px;
&__icon {
svg {
fill: $primary-color-lighter;
}
&:hover {
svg {
fill: $primary-color;
}
}
}
} }

View File

@ -18,13 +18,20 @@ parent:
<div id="liveSearch" class="contentSearch"> <div id="liveSearch" class="contentSearch">
<div class="contentSearch-wrapper row small-collapse"> <div class="contentSearch-wrapper row small-collapse">
<div class="small-12 medium-8 columns"> <div class="small-12 medium-8 columns">
<input type="search" class="liveSearch-field" name="searchTerm" placeholder="Search &hellip;"/> <input type="search" class="liveSearch-field" name="searchTerm" />
<div class="liveSearch-result"> <div class="liveSearch-result">
<ul class="liveSearch-result-list hidden"></ul> <ul class="liveSearch-result-list hidden"></ul>
</div> </div>
</div> </div>
<div class="hide-for-small-only medium-4 columns"> <div class="hide-for-small-only medium-4 columns">
<a href="#" class="liveSearch-button button tiny"><i class="fa fa-search"></i>&nbsp;Search</a> <button type="button" class="liveSearch-button button button--icon tiny">
<span>Search</span>
<i class="icon icon--white" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#search" />
</svg>
</i>
</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -16,13 +16,9 @@ parent: wiki
<div class="small-12 columns"> <div class="small-12 columns">
<div id="liveSearch" class="contentSearch"> <div id="liveSearch" class="contentSearch">
<div class="contentSearch-wrapper row"> <div class="contentSearch-wrapper row">
<!--<div class="small-12 medium-8 columns">-->
<div class="small-12 columns"> <div class="small-12 columns">
<input type="search" class="contentSearch-field" name="searchTerm" placeholder="Search &hellip;"/> <input type="search" class="contentSearch-field" name="searchTerm" placeholder="Search &hellip;"/>
</div> </div>
<!--<div class="hide-for-small-only medium-4 columns">
<a href="#" class="contentSearch-button button tiny"><i class="fa fa-search"></i>&nbsp;Search</a>
</div>-->
</div> </div>
</div> </div>
</div> </div>

6
package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "ACE3",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}