Skip to content

Commit

Permalink
Optimize loading of icon asset files (#2357)
Browse files Browse the repository at this point in the history
  • Loading branch information
jmestxr authored Oct 23, 2023
1 parent 19ac4c2 commit 5a73c80
Show file tree
Hide file tree
Showing 105 changed files with 1,002 additions and 204 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<head-top>
<meta name="default-head-top">
</head-top>
<head-bottom>
<meta name="default-head-bottom">
<link rel="stylesheet" href="{{baseUrl}}/stylesheets/styles.css">
</head-bottom>

<include src="headers/header.md" />

<div id="flex-body">
<nav id="site-nav">
<div class="nav-component slim-scroll">\
<md>An glyphicon icon is supposed to appear here ---> :glyphicon-hand-right:</md>
</div>
</nav>
<div id="content-wrapper">
<breadcrumb />
{{ content }}
</div>
<nav id="page-nav">
<div class="nav-component slim-scroll">
<page-nav />
<md>A font-awesome icon is supposed to appear here ---> :fas-code-branch:</md>
</div>
</nav>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<head-top>
<meta name="default-head-top">
</head-top>
<head-bottom>
<meta name="default-head-bottom">
<link rel="stylesheet" href="{{baseUrl}}/stylesheets/styles.css">
</head-bottom>

<include src="headers/header.md" />

<div id="flex-body">
<nav id="site-nav">
<div class="nav-component slim-scroll">
</div>
</nav>
<div id="content-wrapper">
<breadcrumb />
{{ content }}
</div>
<nav id="page-nav">
<div class="nav-component slim-scroll">
<page-nav />
</div>
</nav>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
2 changes: 0 additions & 2 deletions packages/cli/test/functional/test_site/expected/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
30 changes: 30 additions & 0 deletions packages/cli/test/functional/test_site/expected/siteData.json
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,36 @@
"title": "web 3 forms",
"headings": {},
"headingKeywords": {}
},
{
"src": "testFontAwesomeInPage.md",
"title": "font-awesome icon in page, only font-awesome stylesheet should be loaded",
"headings": {},
"headingKeywords": {}
},
{
"src": "testGlyphiconInPage.md",
"title": "glyphicon icon in page, only glyphicon stylesheet should be loaded",
"headings": {},
"headingKeywords": {}
},
{
"src": "testMaterialIconsInPage.md",
"title": "material-icons icon in page, only material-icons stylesheet should be loaded",
"headings": {},
"headingKeywords": {}
},
{
"src": "testOcticonInPage.md",
"title": "octicon icon in page, only octicon stylesheet should be loaded",
"headings": {},
"headingKeywords": {}
},
{
"src": "testIconsInSiteLayout.md",
"title": "glyphicon & octicon icon in page, only glyphicon & octicon stylesheets should be loaded",
"headings": {},
"headingKeywords": {}
}
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/glyphicons/css/bootstrap-glyphicons.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/octicons.css">
<link rel="stylesheet" href="/test_site/markbind/material-icons/material-icons.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>

<head>

<meta name="default-head-top">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="MarkBind 5.1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-awesome icon in page, only font-awesome stylesheet should be loaded</title>
<link rel="stylesheet" href="/test_site/markbind/css/bootstrap.min.css">
<link rel="stylesheet" href="/test_site/markbind/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/codeblock-dark.min.css">
<link rel="stylesheet" href="/test_site/markbind/css/markbind.min.css">
<script src="/test_site/markbind/js/polyfill.min.js"></script>
<script src="/test_site/markbind/js/vue.min.js"></script>
<script src="/test_site/markbind/js/markbind.min.js"></script>
<script src="testFontAwesomeInPage.page-vue-render.js"></script>
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
<link rel="stylesheet" href="/test_site/plugins/web3Form/web-3-form.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-tree/markbind-plugin-tree.css">

<meta name="default-head-bottom">
<link rel="stylesheet" href="/test_site/stylesheets/styles.css">
<link rel="icon" href="/test_site/favicon.png">
</head>
<script>
const baseUrl = '/test_site'
</script>

<body>
<div id="app">

<div>
<header>
<navbar type="dark" default-highlight-on="sibling-or-child">
<template #brand><a href="/" title="Home" class="navbar-brand">MarkBind Test Site</a></template>
<li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li>
</navbar>
<div class="bg-info display-4 text-center text-white">
<br>
Test Jumbotron<br>
<br>
</div>
</header>
<p><strong>Relative Link Test</strong> This is a relative Intra-Site link in a layout (see <a href="/test_site/index.html#heading-with-hidden-keyword">link</a>)</p>
</div>
<div id="flex-body">
<overlay-source id="site-nav" tag-name="nav" to="site-nav">
<div class="nav-component slim-scroll"></div>
</overlay-source>
<div id="content-wrapper">
<breadcrumb></breadcrumb>

<p>
<trigger for="modal:fontAwesome">There is one font-awesome icon in this modal</trigger>.
</p>
<modal id="modal:fontAwesome"><template #header><strong>Modal with font-awesome icon</strong> 🚀</template>
<p>A font-awesome icon is supposed to appear here ---&gt; <span aria-hidden="true" class="fas fa-code-branch"></span></p>
</modal>
<p><strong>There is one font-awesome icon in this page content.</strong></p>
<p><strong>Open up console. Only font-awesome stylesheet should be loaded!</strong></p>
</div>
<overlay-source id="page-nav" tag-name="nav" to="page-nav">
<div class="nav-component slim-scroll">
</div>
</overlay-source>
</div>
</div>
</body>
<script src="/test_site/markbind/js/bootstrap-utility.min.js"></script>
<script>
MarkBind.setupWithSearch()
</script>
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
<script>alert("Inline plugin script loaded!")</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

<script>
function submitForm(element) {
event.preventDefault();
const formData = new FormData(element);
const formProps = Object.fromEntries(formData);
const json = JSON.stringify(formProps);
const submitButton = element.querySelector('button[type="submit"]');
const submitButtonText = submitButton.innerText;
submitButton.innerText = 'Please wait...'
fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: json,
})
.then(async (response) => {
if (response.status == 200) {
alert('Form submitted! Thank you for your response');
} else {
alert('Error submitting form! Please try again later.');
}
})
.catch(error => {
alert('Error submitting form! Please try again later.');
})
.finally(() => {
submitButton.innerText = submitButtonText;
})
}
</script>

</html>
Loading

0 comments on commit 5a73c80

Please sign in to comment.