package.json and scripts

This commit is contained in:
Heydon Pickering 2017-06-26 16:32:52 +01:00
parent 8f00cbc490
commit 6d32112717
5 changed files with 77 additions and 23 deletions

View File

@ -30,18 +30,6 @@ title = "Footer"
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 2px solid; border-top: 2px solid;
} }
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
.expandable + .expandable {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid;
}
{{</codeBlock>}} {{</codeBlock>}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>

View File

@ -5,6 +5,32 @@ tags = ["animated", "interactive"]
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna {{% patternLink "Menu button and menu" %}}, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p> <p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna {{% patternLink "Menu button and menu" %}}, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p>
{{<demo>}}
<button aria-pressed="false">Press</button>
<style>
button {
background: blue;
color: white;
border: 0;
padding: 0.5rem 1rem;
text-transform: uppercase;
}
[aria-pressed="true"] {
box-shadow: inset 0 0 0.5rem #000;
}
</style>
<script>
var toggle = demo.querySelector('[aria-pressed]');
console.log(toggle);
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</script>
{{</demo>}}
{{<codeBlock lang="css" numbered="true">}} {{<codeBlock lang="css" numbered="true">}}
.expandable + .expandable { .expandable + .expandable {
margin-top: 1.5rem; margin-top: 1.5rem;
@ -19,9 +45,15 @@ tags = ["animated", "interactive"]
} }
{{</codeBlock>}} {{</codeBlock>}}
```html
{{ .Inner }}
```
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
{{<demo>}} {{<demo caption="Example caption">}}
<p>You must be having a laugh.</p> <p>You must be having a laugh.</p>
<style> <style>
p { p {

23
package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "inclusive-pattern-library",
"version": "0.0.1",
"description": "An inclusive pattern library builder for documenting inclusive interface design",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "hugo server",
"build": "hugo",
"setup": "hugo && git add public && git commit -m 'Make git acknowledge public folder' && rm -rf content && mkdir content",
"publish": "hugo && git push origin `git subtree split --prefix public master`:gh-pages --force"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Heydon/inclusive-pattern-library.git"
},
"author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
"license": "ISC",
"bugs": {
"url": "https://github.com/Heydon/inclusive-pattern-library/issues"
},
"homepage": "https://github.com/Heydon/inclusive-pattern-library#readme"
}

View File

@ -71,7 +71,6 @@
</div> </div>
{{ if eq .Type "patterns" }} {{ if eq .Type "patterns" }}
<script src="/js/prism.js"></script> <script src="/js/prism.js"></script>
<script src="/js/shadyDOM.min.js"></script>
{{ end }} {{ end }}
<script src="/js/dom-scripts.js"></script> <script src="/js/dom-scripts.js"></script>
</body> </body>

View File

@ -1,20 +1,32 @@
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }} {{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
<div class="demo-container"> <div class="demo-container">
<div id="demo-{{ $uniq }}"> {{ if .Get "caption" }}
</div> <figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }}
<div class="demo" id="demo-{{ $uniq }}"></div>
{{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" }}</figcaption>
{{ end }}
{{ if .Get "caption" }}
</figure>
{{ end }}
<template id="template-{{ $uniq }}"> <template id="template-{{ $uniq }}">
{{ .Inner }} {{ .Inner }}
</template> </template>
<script> <script>
(function() { (function() {
var root = document.getElementById('demo-{{ $uniq }}'); var root = document.getElementById('demo-{{ $uniq }}');
root.attachShadow({mode: 'open'}); if (document.head.attachShadow) {
var template = document.getElementById('template-{{ $uniq }}'); root.attachShadow({mode: 'open'});
var script = template.content.querySelector('script'); var template = document.getElementById('template-{{ $uniq }}');
if (script) { var script = template.content.querySelector('script');
script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()` if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
}
root.shadowRoot.appendChild(document.importNode(template.content, true));
} else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
} }
root.shadowRoot.appendChild(document.importNode(template.content, true));
})(); })();
</script> </script>
</div> </div>