Arma3_Epoch/ACE3
1
0
Fork 0
mirror of https://github.com/acemod/ACE3.git synced 2024-08-30 18:23:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Documentation - Improve svg handling (#9575)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/_includes/_footer.html
View File

@ -15,13 +15,25 @@
<h2>Social Media</h2>
<div class="social-icons">
<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 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 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>
</div>
</div>

9
docs/_layouts/post.html
View File

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

9
docs/_layouts/wiki.html
View File

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

2
docs/dist/bundle.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/bundle.css.map vendored
View File

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>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

0
docs/img/icons/icon-128x128.png → docs/img/logo/icon-128x128.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
docs/img/icons/icon-144x144.png → docs/img/logo/icon-144x144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
docs/img/icons/icon-256x256.png → docs/img/logo/icon-256x256.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
docs/img/icons/icon-384x384.png → docs/img/logo/icon-384x384.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
docs/img/icons/icon-48x48.png → docs/img/logo/icon-48x48.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
docs/img/icons/icon-512x512.png → docs/img/logo/icon-512x512.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

0
docs/img/icons/icon-96x96.png → docs/img/logo/icon-96x96.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

10
docs/index.html
View File

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

18
docs/manifest.json
View File

@ -2,35 +2,35 @@
"name": "ACE3MOD",
"short_name": "ACE3",
"icons": [{
"src": "/img/icons/icon-48x48.png",
"src": "/img/logo/icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "/img/icons/icon-96x96.png",
"src": "/img/logo/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "/img/icons/icon-128x128.png",
"src": "/img/logo/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/img/icons/icon-144x144.png",
"src": "/img/logo/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/img/icons/icon-192x192.png",
"src": "/img/logo/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/img/icons/icon-256x256.png",
"src": "/img/logo/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/img/icons/icon-384x384.png",
"src": "/img/logo/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
}, {
"src": "/img/icons/icon-512x512.png",
"src": "/img/logo/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
@ -39,4 +39,4 @@
"background_color": "#FFFFFF",
"theme_color": "#951e14",
"lang": "en-US"
}
}

9
docs/news.md
View File

@ -28,8 +28,13 @@ parent:
</header>
{{ post.excerpt }}
<footer>
<a class="button 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">
<a class="button button--icon small" href="{{ post.url }}">
<span>Read more</span>
<i class="icon icon--white" aria-hidden="true">
<svg>
<use href="/dist/icons.svg#chevronright" />
</svg>
</i>
</a>
</footer>
</article>

6
docs/package-lock.json generated
View File

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

1
docs/src/icons/chevronleft.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 145 B

1
docs/src/icons/chevronright.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 146 B

1
docs/src/icons/download.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 219 B

1
docs/src/icons/facebook.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

1
docs/src/icons/search.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 208 B

1
docs/src/icons/twitter.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 218 B

1
docs/src/icons/youtube.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

2892
docs/src/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
docs/src/package.json
View File

@ -8,6 +8,8 @@
"@rollup/plugin-terser": "^0.4.4",
"node-sass": "^9.0.0",
"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"
}
}

5
docs/src/rollup.config.mjs
View File

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

2
docs/src/scss/_footer.scss
View File

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

4
docs/src/scss/_layout.scss
View File

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

4
docs/src/scss/_settings.scss
View File

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

17
docs/src/scss/_utils.scss
View File

@ -5,3 +5,20 @@
.hidden {
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;
}

13
docs/src/scss/ui/_buttons.scss
View File

@ -2,4 +2,17 @@
& > img {
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;
}
}

41
docs/src/scss/ui/_icons.scss
View File

@ -1,7 +1,40 @@
.icon {
margin-bottom: 0;
&-red {
color: $ace-primary-color;
display: inline-block;
inline-size: 1rem;
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;
}
&-red {
background-color: $ace-primary-color;
background-color: $primary-color;
}
}

13
docs/src/scss/ui/_social.scss
View File

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

11
docs/wiki/index.md
View File

@ -18,13 +18,20 @@ parent:
<div id="liveSearch" class="contentSearch">
<div class="contentSearch-wrapper row small-collapse">
<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">
<ul class="liveSearch-result-list hidden"></ul>
</div>
</div>
<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>

4
docs/wiki/search.md
View File

@ -16,13 +16,9 @@ parent: wiki
<div class="small-12 columns">
<div id="liveSearch" class="contentSearch">
<div class="contentSearch-wrapper row">
<!--<div class="small-12 medium-8 columns">-->
<div class="small-12 columns">
<input type="search" class="contentSearch-field" name="searchTerm" placeholder="Search &hellip;"/>
</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>

6
package-lock.json generated Normal file
View File

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