Skip to content

Instantly share code, notes, and snippets.

@renoirb

renoirb/README.md

Last active February 5, 2023 04:58
Show Gist options
  • Save renoirb/286211f2c32d41c955a43a40723df535 to your computer and use it in GitHub Desktop.
Save renoirb/286211f2c32d41c955a43a40723df535 to your computer and use it in GitHub Desktop.
Download ZIP
Load content from a Gist only using a Gist ID and a loader.
Raw
README.md
Raw
app-layout.html
<!DOCTYPE html>
<html data-content-gist-source="286211f2c32d41c955a43a40723df535" lang="en-CA">
<!--
TODO: Make this a customElement, then load the content into its default slot.
-->
<head>
<meta charset="utf-8" />
<title>Sharing research notes</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--meta name="viewport" content="width=device-width, initial-scale=1" /-->
<meta name="robots" content="noindex" />
<link
rel="stylesheet"
href="https://renoirb.github.io/site/_nuxt/vendors/app.css"
/>
<link
rel="stylesheet"
href="https://renoirb.github.io/site/_nuxt/app.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
<!--script src="https://hypothes.is/embed.js" async></script-->
<!--script src="https://cdn.jsdelivr.net/gh/openannotation/annotator@1.2.10/pkg/annotator.min.js" async></script-->
</head>
<body>
<script>
/**
* Something made quickly in an hour or two.
* See loader.mjs
*/
// https://gist.github.com/renoirb/<GIST_ID>/raw/
// https://api.github.com/gists/<GIST_ID>?callback=loadfromgist
const getContents = (jsonpData, fileName = 'README.md') => {
// console.log('step 1a: getContents', jsonpData)
const { data = {} } = jsonpData
const { files = {}, forks = [], ...dataRest } = data
const coverLetterData = Reflect.has(files, fileName)
? Reflect.get(files, fileName)
: {}
const { content = '' } = coverLetterData
// console.log('step 1b: getContents', { files, content })
const html = converter.makeHtml(content)
const payload = { html, data: dataRest }
// console.log('step 1c: getContents', payload)
return payload
}
const helper = window.showdown
const converter = new helper.Converter()
const loadFromGistOn = async (host) =>
fetch(`https://api.github.com/gists/${host.ownerDocument.documentElement.dataset.contentGistSource}?callback=shazam`)
.then((response) => {
const content = response.text()
// console.log('step 0: loadFromGistOn', { response, content });
return content
})
.then((content) => {
const transform = new Function('shazam', content)
let innerHTML = '<p>Nothing.</p>'
let dataRest = {}
transform(function (jsonp) {
const contents = getContents(jsonp)
// console.log('step 2: loadFromGistOn then transform', contents);
const { html = '', ...rest } = contents
dataRest = rest
innerHTML = html
})
return { html: innerHTML, ...dataRest };
})
.then(({ html = '', data = {}}) => {
console.log('step 3: loadFromGistOn then', data);
host.innerHTML = html;
const title = Reflect.get(data, 'description')
if(title) {
host.ownerDocument.title = title
}
const gistUrl = Reflect.get(data, 'html_url')
if(gistUrl) {
const link = host.ownerDocument.createElement('a')
link.textContent = 'Source Gist'
link.setAttribute('href', gistUrl)
link.setAttribute('target', '_blank')
const p = host.ownerDocument.createElement('p')
p.setAttribute('lang', 'en')
p.textContent = 'Contents from this page is coming from a GitHub Gist: '
p.appendChild(link)
host.append(host.ownerDocument.createElement('hr'))
host.append(p)
}
})
</script>
<div id="__layout">
<div class="layouts--homepage">
<nav class="app-side-bar--component fixed z-40 w-full top">
<div
class="zone__sandwich__top container flex items-center justify-between py-4 mx-auto"
style="position: relative"
>
<div class="app-side-bar__identity md:px-5 flex items-center">
<button aria-label="Open Menu" class="md:hidden ml-5 mr-2">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<a
href="https://renoirb.github.io/site/"
aria-current="page"
class="identity__text text-2xl"
>
Renoir Boulanger
</a>
</div>
<div class="app-side-bar__nav flex items-center">
<div
class="md:flex md:justify-between md:bg-transparent text-is-italicized hidden"
>
<a
href="https://renoirb.github.io/site/blog"
class="hover:opacity-100 opacity-80 hover:underline flex items-center p-3 px-4 py-2 mr-2 font-medium text-center rounded"
>
Blog </a
><a
href="https://renoirb.github.io/site/resume"
class="hover:opacity-100 opacity-80 hover:underline flex items-center p-3 px-4 py-2 mr-2 font-medium text-center rounded"
>
Resume </a
><a
href="https://renoirb.github.io/site/hello"
class="hover:opacity-100 opacity-80 hover:underline flex items-center p-3 px-4 py-2 mr-2 font-medium text-center rounded"
>
About
</a>
</div>
</div>
</div>
<aside
class="md:invisible app-side-bar__aside fixed top-0 left-0 visible w-64 h-full overflow-auto transition-all duration-500 ease-in-out transform -translate-x-full"
>
<div
class="app-side-bar__identity flex items-center w-full h-16 p-4 border-b"
>
<a
href="https://renoirb.github.io/site/"
aria-current="page"
class="identity__text nuxt-link-exact-active nuxt-link-active"
>Renoir Boulanger</a
>
</div>
<div>
<a
href="https://renoirb.github.io/site/blog"
class="hover:bg-teal-500 hover:text-white flex items-center p-4"
><span class="mr-2"> Blog </span></a
><a
href="https://renoirb.github.io/site/projects"
class="hover:bg-teal-500 hover:text-white flex items-center p-4"
><span class="mr-2"> Projects </span></a
><a
href="https://renoirb.github.io/site/resume"
class="hover:bg-teal-500 hover:text-white flex items-center p-4"
><span class="mr-2"> Resume </span></a
><a
href="https://renoirb.github.io/site/hello"
class="hover:bg-teal-500 hover:text-white flex items-center p-4"
><span class="mr-2"> About </span></a
>
</div>
</aside>
</nav>
<main class="zone__sandwich__meat middle container mx-auto">
<div class="grid">
<div class="m-20">
<div class="pages__index--parent nuxt-content">
<div data-content-gist>...</div>
</div>
</div>
</div>
</main>
<div class="app-footer--component disposition-parent w-full bottom">
<footer
class="zone__sandwich__bottom container flex items-center justify-between p-10 mx-auto"
style="position: relative"
>
<dl class="contact items-item disposition-item">
<dt class="mb-4 font-serif text-2xl">Contact</dt>
<dd>
Renoir Boulanger ✪ Full-Stack Developer &amp; Web Hosting
systems reliability professional
</dd>
<dd class="underline">
<a href="/cdn-cgi/l/email-protection#5f373a3333301f2d3a3130362d3d302a333e31383a2d713c3032"><span class="__cf_email__" data-cfemail="e58d8089898aa597808b8a8c97878a9089848b828097cb868a88">[email&#160;protected]</span></a
>
</dd>
<dt>CV</dt>
<dd>
<a
href="https://github.com/renoirb/site/blob/2020/content/resume/jsonresume-renoirb.yaml"
target="_blank"
>source stored on GitHub</a
>
</dd>
<dd>
<a
href="https://renoirb.github.io/site/files/resume/Resume-Renoir-Boulanger.doc"
target="_blank"
>Word</a
>
</dd>
<dd>
<a
href="https://renoirb.github.io/site/files/resume/Resume-Renoir-Boulanger.pdf"
target="_blank"
>PDF</a
>
</dd>
<dd>
<a href="http://registry.jsonresume.org/renoirb" target="_blank"
>HTML</a
>
</dd>
</dl>
<div class="items-item disposition-item">
<dl class="see-also">
<dt>See also…</dt>
<dd>
<a href="https://renoirb.github.io/site/glossary">
Glossary
</a>
</dd>
<dd>
<a href="https://renoirb.github.io/site/code-review">
Code-Review notes
</a>
</dd>
</dl>
</div>
</footer>
</div>
</div>
</div>
<div style="position: static !important"></div>
<script>
const canvas = document.querySelector('[data-content-gist]')
loadFromGistOn(canvas)
</script>
</body>
<style>
.nuxt-content a {
text-decoration: underline;
color: initial;
}
.nuxt-content ul strong {
font-weight: bold;
}
</style>
<style media="print">
html {
line-height: 1.2 !important;
}
#__layout .nuxt-content p {
page-break-inside: avoid !important;
}
#__layout .fixed {
position: initial;
}
#__layout footer.zone__sandwich__bottom .contact {
color: initial;
}
body,
hypothesis-highlight,
#__layout .zone__sandwich__meat.container,
#__layout footer.zone__sandwich__bottom {
background-color: initial !important;
}
#__layout footer.zone__sandwich__bottom {
display: initial;
}
#__layout .nuxt-content .app-image,
#__layout .app-side-bar__identity button,
#__layout footer.zone__sandwich__bottom .see-also,
#__layout .app-side-bar--component {
display: none !important;
}
#__layout .zone__sandwich__meat.container .grid .m-20 {
margin: initial;
}
#__layout .zone__sandwich__meat.container {
max-width: initial;
}
#__layout .zone__sandwich__top.container {
background-color: initial;
color: initial;
width: 100% !important;
max-width: initial !important;
}
hypothesis-sidebar, hypothesis-notebook, hypothesis-adder {
display: none !important;
}
</style>
</html>
Raw
loader.mjs
/**
* Something made quickly in an hour or two
*/
// https://gist.github.com/renoirb/<GIST_ID>/raw/
// https://api.github.com/gists/<GIST_ID>?callback=loadfromgist
const getContents = (jsonpData, fileName = 'README.md') => {
// console.log('step 1a: getContents', jsonpData)
const { data = {} } = jsonpData
const { files = {}, forks = [], ...dataRest } = data
const coverLetterData = Reflect.has(files, fileName)
? Reflect.get(files, fileName)
: {}
const { content = '' } = coverLetterData
// console.log('step 1b: getContents', { files, content })
const html = converter.makeHtml(content)
const payload = { html, data: dataRest }
// console.log('step 1c: getContents', payload)
return payload
}
const helper = window.showdown
const converter = new helper.Converter()
const loadFromGistOn = async (host) =>
fetch(`https://api.github.com/gists/${host.ownerDocument.documentElement.dataset.contentGistSource}?callback=shazam`)
.then((response) => {
const content = response.text()
// console.log('step 0: loadFromGistOn', { response, content });
return content
})
.then((content) => {
const transform = new Function('shazam', content)
let innerHTML = '<p>Nothing.</p>'
let dataRest = {}
transform(function (jsonp) {
const contents = getContents(jsonp)
// console.log('step 2: loadFromGistOn then transform', contents);
const { html = '', ...rest } = contents
dataRest = rest
innerHTML = html
})
return { html: innerHTML, ...dataRest };
})
.then(({ html = '', data = {}}) => {
console.log('step 3: loadFromGistOn then', data);
host.innerHTML = html;
const title = Reflect.get(data, 'description')
if(title) {
host.ownerDocument.title = title
}
const gistUrl = Reflect.get(data, 'html_url')
if(gistUrl) {
const link = host.ownerDocument.createElement('a')
link.textContent = 'Source Gist'
link.setAttribute('href', gistUrl)
link.setAttribute('target', '_blank')
const p = host.ownerDocument.createElement('p')
p.setAttribute('lang', 'en')
p.textContent = 'Contents from this page is coming from a GitHub Gist: '
p.appendChild(link)
host.append(host.ownerDocument.createElement('hr'))
host.append(p)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment