greenwood-starter-presentation
Version:
A Greenwood plugin and general purpose starter kit for creating slide decks and presentations from markdown.
116 lines (99 loc) • 3.01 kB
HTML
<html>
<head>
<script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js"></script>
<script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/slide-list.js"></script>
<script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/slide-viewer.js"></script>
<script type="module">
fetch('/graph.json')
.then((response) => response.json())
.then((response) => {
// auto generated default page by Greenwood
const hideListIds = ['404'];
return response.filter(slide => hideListIds.indexOf(slide.id) < 0)
}).then((response) => {
const urlParams = new URLSearchParams(window.location.search);
const selectedSlideId = urlParams.get('selectedSlideId');
const slides = response.filter(slide => slide.id !== 'index');
const currentSlideIndex = selectedSlideId ? slides.findIndex(slide => slide.id === selectedSlideId) : 0;
document.querySelector('presenter-mode').setAttribute('slides', JSON.stringify(slides));
document.querySelector('slide-list').setAttribute('slides', JSON.stringify(slides));
document.querySelector('slide-viewer').setAttribute('slide', JSON.stringify(slides[currentSlideIndex]));
});
</script>
<script>
document.addEventListener('slide-selected', (slide) => {
document.querySelector('slide-viewer').setAttribute('slide', JSON.stringify(slide.detail));
})
</script>
<style>
body {
background-color: #e8dcd2;
}
main {
min-width: 1024px;
}
header {
width: 90%;
}
header > * {
float: right;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
min-height: 300px;
}
.left {
float: left;
min-width: 23%;
}
.right {
min-width: 67%;
}
footer {
margin-top: 20px;
}
footer a {
text-decoration: none;
}
footer a:visited {
color: #020202;
}
footer h4, header h1 {
width: 90%;
margin: 0 auto;
padding: 0;
text-align: center;
}
</style>
</head>
<body>
<main>
<section>
<header>
<presenter-mode></presenter-mode>
</header>
</section>
<section>
<div class="column left">
<h1>Slides</h1>
<slide-list></slide-list>
</div>
<div class="column right">
<h1>Current Slide</h1>
<slide-viewer></slide-viewer>
</div>
</section>
<section>
<footer>
<h4>
<a href="https://www.greenwoodjs.io/">GWD/PPT ◈ Built with GreenwoodJS</a>
</h4>
</footer>
</section>
</main>
</body>
</html>