Skip to content

Commit d0ba66f

Browse files
sghowerisghoweri
committed
refactor: update HTML partials to be inlined / included via Webpack; update inlined CSS used in iframe srcdoc to get bundled and inlined directly using Webpack
1 parent d8c41e4 commit d0ba66f

File tree

3 files changed

+50
-53
lines changed

3 files changed

+50
-53
lines changed

‎packages/uikit-workshop/src/html/index.html

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,49 @@
22
<html>
33

44
<head>
5-
<title id="title">Pattern Lab</title>
6-
<meta charset="UTF-8">
5+
<title id="title">Pattern Lab</title>
6+
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width" />
8-
<meta name="theme-color" content="#ababab"/>
9-
10-
<link inline href="styleguide/css/pattern-lab.critical.css" />
8+
<meta name="theme-color" content="#ababab" />
119

1210
<link rel="preload" as="script" href="styleguide/js/patternlab-viewer.js">
13-
<link rel="preload" href="styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
14-
15-
<noscript>
16-
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
17-
</noscript>
18-
19-
<script inline async src="styleguide/js/cssrelpreload.min.js"></script>
11+
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
2012

2113
</head>
2214

2315
<body class="pl-c-body">
2416

25-
@@include('./partials/header.html')
26-
@@include('./partials/iframe.html')
27-
@@include('./partials/modal.html')
17+
${require('./partials/header.html') }
18+
${require('./partials/iframe.html') }
19+
${require('./partials/modal.html') }
2820

29-
<!-- mustache templates -->
30-
<script type="text/mustache" class="pl-js-pattern-nav-template">
31-
@@include('./partials/pattern-nav.html')
21+
<script type="text/mustache" class="pl-js-pattern-nav-template">
22+
${require('./partials/pattern-nav.html') }
3223
</script>
3324

34-
<script type="text/mustache" class="pl-js-ish-controls-template">
35-
@@include('./partials/controls.html')
25+
<script type="text/mustache" class="pl-js-ish-controls-template">
26+
${require('./partials/controls.html') }
3627
</script>
3728

38-
<!-- the template for the modal slider -->
39-
<script type="text/mustache" class="pl-js-panel-template-base">
40-
@@include('./partials/base-template.html')
29+
<!-- the template for the modal slider -->
30+
<script type="text/mustache" class="pl-js-panel-template-base">
31+
${require('./partials/base-template.html') }
4132
</script>
4233

43-
<!-- the template for code-related tabs in the code view slider -->
44-
<script type="text/mustache" id="pl-panel-template-code">
45-
@@include('./partials/panel-code-template.html')
34+
<!-- the template for code-related tabs in the code view slider -->
35+
<script type="text/mustache" id="pl-panel-template-code">
36+
${require('./partials/panel-code-template.html') }
4637
</script>
4738

48-
<!-- load Pattern Lab data -->
49-
<script src="styleguide/data/patternlab-data.js" defer></script>
39+
<!-- load Pattern Lab data -->
40+
<script src="styleguide/data/patternlab-data.js" defer></script>
5041

5142
<!-- applying theme config to get classes on before PL renders so there's no flash of unstyled content -->
5243
<!-- @todo fold this into it's own standalone JS component -->
5344
<script>
5445
// need to make sure that window.config is defined first on acccount of us async loading everything ;)
5546
window.patternlab = window.patternlab || {};
56-
window.patternlab.applyTheme = function(){
47+
window.patternlab.applyTheme = function () {
5748
if (window.config.theme.color === 'light') {
5849
document.body.classList.add('pl-c-body--theme-light');
5950
}
@@ -81,16 +72,18 @@
8172
}
8273
</script>
8374

84-
<script src="annotations/annotations.js" defer></script>
75+
<script src="annotations/annotations.js" defer></script>
8576

86-
<!-- load the Pattern Lab viewer js -->
87-
<script inline src="styleguide/js/whenDefined.min.js"></script>
77+
<!-- load the Pattern Lab viewer js -->
78+
<script>
79+
${require('raw-loader!../../node_modules/whendefined/dist/whendefined.min.js')}
80+
</script>
8881
<script src="styleguide/js/patternlab-viewer.js" defer></script>
8982

9083
<!-- temp workaround to allow everything to be asynced / deffered with current setup. @todo: remove once refactored components + improved build process is in place. -->
9184
<script>
92-
whenDefined(window, 'config', function() {
93-
if (window.config.theme){
85+
whenDefined(window, 'config', function () {
86+
if (window.config.theme) {
9487
window.patternlab.applyTheme();
9588
}
9689
});
@@ -108,5 +101,4 @@
108101

109102
</body>
110103

111-
</html>
112-
104+
</html>

‎packages/uikit-workshop/src/html/partials/iframe-loader.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
<div class="pl-c-loader">
2-
<div class="pl-c-loader__content">
3-
<div class="pl-c-loader__message">Loading Pattern Lab</div>
4-
<div class="pl-c-loader__spinner">
5-
<svg class="pl-c-loader-svg" viewBox="0 0 268 255">
6-
<circle class="pl-c-loader-svg__outer-circle" cx="134.2" cy="127.6" r="115.1"/>
7-
<circle class="pl-c-loader-svg__inner-circle" cx="134.2" cy="127.6" r="66.3"/>
8-
<path class="pl-c-loader-svg__electron" d="M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2
9-
C240.3,28.1,253,40.7,253,56.3z"/>
1+
<style>${require('../../sass/pattern-lab--iframe-loader.scss')}</style>
2+
<!-- @todo: iterate on build so this file doesn't need to have pre-escaped quotes baked in -->
3+
<div class=&quot;pl-c-loader&quot;>
4+
<div class=&quot;pl-c-loader__content&quot;>
5+
<div class=&quot;pl-c-loader__message&quot;>Loading Pattern Lab</div>
6+
<div class=&quot;pl-c-loader__spinner&quot;>
7+
<svg class=&quot;pl-c-loader-svg&quot; viewBox=&quot;0 0 268 255&quot;>
8+
<circle class=&quot;pl-c-loader-svg__outer-circle&quot; cx=&quot;134.2&quot; cy=&quot;127.6&quot; r=&quot;115.1&quot;></circle>
9+
<circle class=&quot;pl-c-loader-svg__inner-circle&quot; cx=&quot;134.2&quot; cy=&quot;127.6&quot; r=&quot;66.3&quot;></circle>
10+
<path class=&quot;pl-c-loader-svg__electron&quot; d=&quot;M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2
11+
C240.3,28.1,253,40.7,253,56.3z&quot;></path>
1012
</svg>
1113
</div>
1214
</div>

‎packages/uikit-workshop/src/html/partials/iframe.html

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<div class="pl-c-viewport pl-js-viewport">
22

3-
<div class="pl-c-viewport__cover pl-js-viewport-cover"></div>
3+
<div class="pl-c-viewport__cover pl-js-viewport-cover"></div>
44

5-
<div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">
5+
<div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">
66

7-
<iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" srcdoc='<style>@@include('../../../dist/styleguide/css/pattern-lab--iframe-loader.css')</style>@@include('./iframe-loader.html')'></iframe>
7+
<iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" srcdoc="${ require('../partials/iframe-loader.html') }"></iframe>
88

9-
<div class="pl-c-viewport__resizer pl-js-resize-container">
9+
<div class="pl-c-viewport__resizer pl-js-resize-container">
1010

11-
<div class="pl-c-viewport__resizer-handle pl-js-resize-handle"></div>
11+
<div class="pl-c-viewport__resizer-handle pl-js-resize-handle"></div>
1212

13-
</div><!--end pl-c-viewport__resizer-->
13+
</div>
14+
<!--end pl-c-viewport__resizer-->
1415

15-
</div><!--end pl-c-viewport__iframe-wrapper-->
16+
</div>
17+
<!--end pl-c-viewport__iframe-wrapper-->
1618

17-
</div><!--end pl-c-viewport-->
19+
</div>
20+
<!--end pl-c-viewport-->

0 commit comments

Comments
 (0)