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

docs/_includes/_footer.html

@@ -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>

docs/_layouts/post.html

@@ -7,8 +7,13 @@ layout: compress
 <main>
     <div class="row">
         <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>
             <br/>
             <article class="post" itemscope itemtype="http://schema.org/BlogPosting">

docs/_layouts/wiki.html

@@ -47,8 +47,13 @@ layout: compress
             <div class="row">
                 <div class="large-12 columns">
                     <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>
                     </p>
                 </div>

docs/dist/icons.svg

@@ -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>

docs/index.html

@@ -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">
+                    <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>
                     <br>
                     <a href="{{site.baseurl}}/wiki/user/installation-guide.html">Installation Guide</a>

docs/manifest.json

@@ -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"
-}
+}

docs/news.md

@@ -28,8 +28,13 @@ parent:
                     </header>
                     {{ post.excerpt }}
                     <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>
                     </footer>
                 </article>

docs/package-lock.json

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

docs/src/icons/chevronleft.svg

@@ -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>

docs/src/icons/chevronright.svg

@@ -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>

docs/src/icons/download.svg

@@ -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>

docs/src/icons/facebook.svg

@@ -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>

docs/src/icons/search.svg

@@ -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>

docs/src/icons/twitter.svg

@@ -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>

docs/src/icons/youtube.svg

@@ -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>

docs/src/package.json

@@ -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"
   }
 }

docs/src/rollup.config.mjs

@@ -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",
+        }),
     ],
 };

docs/src/scss/_footer.scss

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

docs/src/scss/_layout.scss

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

docs/src/scss/_settings.scss

@@ -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;

docs/src/scss/_utils.scss

@@ -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;
+}

docs/src/scss/ui/_buttons.scss

@@ -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;
+    }
 }

docs/src/scss/ui/_icons.scss

@@ -1,7 +1,40 @@
 .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;
     }
     &-red {
-        background-color: $ace-primary-color;
+        background-color: $primary-color;
     }
 }

docs/src/scss/ui/_social.scss

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

docs/wiki/index.md

@@ -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>

docs/wiki/search.md

@@ -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>

package-lock.json

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