Skip to content

Factorisation des templates de slides #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ffoodd wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Factorisation des templates de slides #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions _src/_includes/accesslide.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!doctype html>
<html lang="{{ site.language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% set titre = metatitle or title %}
<title>{{ titre | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }} — {{ site.name }}</title>
<link rel="preload" as="font" href="/assets/fonts/bello-pro.woff2">
<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2">
{% set desc = metadescription or description or excerpt %}
<meta name="description" content="{{ desc | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }}">
<meta name="generator" content="{{ eleventy.generator }}">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="author" href="/humans.txt" type="text/plain">
<meta name="author" content="Gaël Poupard">
<meta property="fediverse:creator" content="@ffoodd@mamot.fr">
<link rel="stylesheet" href="/assets/accesslide/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="/assets/accesslide/css/ffoodd.css?6" type="text/css" media="screen" id="currentCSS">
<link rel="stylesheet" href="/assets/accesslide/css/print.css" type="text/css" media="print">
{%- if verbose -%}
<script src="/assets/accesslide/js/AccesSlideVerbose.min.js"></script>
{%- else -%}
<script src="/assets/accesslide/js/AccesSlide.min.js"></script>
{%- endif -%}
<script src="/assets/accesslide/lang/lang_fr.js"></script>
<script src="/assets/accesslide/js/prism.min.js"></script>
{%- block styles -%}{%- endblock -%}
</head>
<body itemscope itemtype="https:/schema.org/WebPage">
{%- if verbose -%}
<div id="screen" class="modeplan" data-effect="Eno">
{%- else -%}
<div id="screen" data-effect="ffoodd">
{%- endif -%}
<div id="volet"></div>
<header id="banner" role="banner" class="main-header clearfix">
<a href="https://www.ffoodd.fr">ffoodd</a>
<h1 class="main-title">{{ title | safe }}</h1>
</header>

<div id="nav" class="tool-bar footer-nav clearfix">
<div id="wrappernav">
{%- include '/partials/social-links.njk' -%}
</div>
</div>
<nav role="navigation" id="sommaire" class="tool-block tool-block-summary" tabindex="-1"></nav>

<div id="wrapper">
<main role="main" id="main">
{%- block slides -%}{%- endblock -%}

<section class="slide end noprint">
<h2 class="end-title">Merci</h2>
<h3>Et à bientôt<span aria-hidden="true">&nbsp;&#9786;</span></h3>
<h4>Crédits</h4>
<ul class="credit">
<li>Moteur de présentation&nbsp;: <a href="https://github.com/access42/accesSlide" hreflang="en">AccesSlide</a> —&nbsp;par <a href="https://access42.net/">Access42</a>&nbsp;;</li>
<li>Pictogrammes&nbsp;: <a href="https://thenounproject.com/marekpolakovic/collection/rounded-ui" hreflang="en">Rounded UI</a> —&nbsp;par <a href="https://www.marekpolakovic.sk/">Marek Polakovic</a>&nbsp;;</li>
<li>Typographie de titraille&nbsp;: <a hreflang="en" href="https://typekit.com/fonts/bello-pro">Bello Pro</a> —&nbsp;créée par <a hreflang="en" href="https://www.underware.nl/">Underware</a>&nbsp;;</li>
<li>Typographie de labeur&nbsp;: <a hreflang="en" href="https://typekit.com/fonts/museo-slab">Museo Slab</a> —&nbsp;créée par <a hreflang="en" href="https://www.exljbris.com/">Exljbris</a>.</li>
</ul>
</section>
</main>
</div>
<div id="setting" class="tool-block tool-block-settings " role="dialog" tabindex="-1" style="display:none"></div>
</div>
<div id="Caudio"></div>
<div id="Dcourante" aria-live="polite" aria-atomic="true" aria-hidden="true"></div>

<script src="/assets/accesslide/js/slide.min.js"></script>
{%- if verbose -%}
<script>
window.addEventListener('load', () => {
window.addEventListener('message', (e) => {
if (e.origin !== 'http://localhost:8080') {
return;
}
document.getElementById('tocP').value = e.data - 1;
document.getElementById('tocp')?.click();
}, false);
});
</script>
{%- elseif hasVerbose -%}
<script>
let verbose;
window.addEventListener('load', () => {
if (window.location.host === 'localhost:8080') {
setTimeout(() => {
verbose = window.open('http://localhost:8080/{{ permalink | replace('/index.html', '') }}/verbose.html', 'verboseSlides');

const current = document.getElementById('current').childNodes[0];
const observer = new MutationObserver((mutations) => {
verbose.postMessage(mutations[0].target.data, 'http://localhost:8080');
});

observer.observe(current, {characterData: true});
}, 500);
}
});
</script>
{%- endif -%}
{%- block script -%}{%- endblock -%}
</body>
</html>
4 changes: 2 additions & 2 deletions _src/_includes/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% set titre = metatitle or title %}
{% set titre = metatitle or title %}
<title>{{ titre | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }} — {{ site.name }}</title>
<link rel="preload" as="font" href="/assets/fonts/bello-pro.woff2">
<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2">
Expand All @@ -12,7 +12,7 @@
{%- endif -%}
<link rel="stylesheet" href="/assets/styles.min.css" media="all">
<link rel="stylesheet" href="/assets/impression.min.css" media="print">
{% set desc = metadescription or description or excerpt %}
{% set desc = metadescription or description or excerpt %}
<meta name="description" content="{{ desc | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }}">
<meta name="generator" content="{{ eleventy.generator }}">
<link rel="icon" href="/favicon.ico" sizes="32x32">
Expand Down
27 changes: 27 additions & 0 deletions _src/_includes/partials/social-links.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<ul role="list" class="related">
<li>
<a href="https://www.ffoodd.fr">
<img src="/assets/accesslide/img/ffoodd.svg" alt="Blog de Gaël Poupard" height="32" width="32">
</a>
</li>
<li>
<a href="https://mamot.fr/@ffoodd" rel="me">
<img src="/assets/accesslide/img/mastodon.svg" alt="@ffoodd sur Mastodon" height="32" width="32">
</a>
</li>
<li>
<a href="https://github.com/ffoodd/">
<img src="/assets/accesslide/img/github.svg" alt="@ffoodd sur Github" height="32" width="32">
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/ga%C3%ABl-poupard-40117b30/">
<img src="/assets/accesslide/img/linkedin.svg" alt="Gaël Poupard sur Linkedin" height="32" width="32">
</a>
</li>
<li>
<a href="https://www.paris-web.fr/">
<img src="/assets/accesslide/img/pw.svg" alt="Paris Web" height="32" width="32">
</a>
</li>
</ul>
132 changes: 132 additions & 0 deletions _src/_includes/sliide.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
<html lang="{{ site.language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% set titre = metatitle or title %}
<title>{{ titre | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }} — {{ site.name }}</title>
<link rel="preconnect" href="https://twemoji.maxcdn.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preload" as="font" href="/assets/fonts/bello-pro.woff2">
<link rel="preload" as="font" href="/assets/fonts/museo-slab-300.woff2">
{% set desc = metadescription or description or excerpt %}
<meta name="description" content="{{ desc | striptags | replace('&nbsp;', ' ') | replace('&thinsp;', ' ') }}">
<meta name="generator" content="{{ eleventy.generator }}">
<link rel="icon" href="../favicon.ico" sizes="32x32">
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
<meta name="author" content="Gaël Poupard">
<link rel="author" href="../humans.txt" type="text/plain">
<meta property="fediverse:creator" content="@ffoodd@mamot.fr">
<link rel="stylesheet" href="/assets/sliide/sliide.css?5" type="text/css" media="screen">
<link rel="stylesheet" href="/assets/sliide/prism.min.css" type="text/css" media="screen">
{%- block styles -%}{%- endblock -%}
</head>
<body itemscope itemtype="https:/schema.org/WebPage">
<main role="main" tabindex="0">
<section id="slide-1" data-note="2m" class="d-flex flex-column justify-between">
<h1>{{ title | safe }}</h1>
<dl>
<dt>Slides en ligne</dt>
<dd><a href="{{ permalink }}">{{ permalink | replace('https://www.', '') }}</a></dd>
{%- block links -%}{%- endblock -%}
</dl>
<footer>
<div class="d-flex">
<p class="my-0">Raconté par <a href="https://www.ffoodd.fr">Gaël Poupard</a></p>
{%- include '/partials/social-links.njk' -%}
</div>
<p class="d-flex align-center">
<a href="https://www.groupeonepoint.com">
<img src="/assets/accesslide/img/onepoint.svg" width="166" height="80" alt="onepoint">
</a>
{%- block crossover -%}{%- endblock -%}
</p>
</footer>
</section>

{%- block slides -%}{%- endblock -%}
</main>
<script src="/assets/sliide/js/prism.min.js"></script>
<script src="/assets/accesslide/js/twemoji.min.js"></script>
<script>
twemoji.parse(document.body, {folder: 'svg', ext: '.svg'});

let view;
switchSlide = (id) => {
// Historique
history.pushState({}, "", `#slide-${id}`);
// Vue présentateur
//// Aperçu du slide suivant
document.body.style.setProperty('--next', String(`-moz-element(#slide-${Number(id) + 1})`));
//// Synchro de la vue présentateur
if (view) {
view.postMessage(`slide-${id}`, `http://localhost:8080${document.location.pathname}index.html`);
}
//// Notes dans la vue présentateur
if('note' in document.getElementById(`slide-${id}`).dataset) {
document.body.dataset.note = document.getElementById(`slide-${id}`).dataset.note;
} else {
delete document.body.dataset.note;
}
}

document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll('section[id^="slide-"]');

// Nombre total de slides, pour la pagination
document.body.style.setProperty('--slides', String(slides.length));
document.body.style.setProperty('--next', String(`-moz-element(#slide-2)`));

// Gestion de l’historique
let io = new IntersectionObserver(entries => {
if (entries[0].isIntersecting === true) {
switchSlide(entries[0].target.id.split('-')[1]);
}
}, {
root: document.querySelector('main'),
threshold: [1]
});
slides.forEach(slide => io.observe(slide));

document.addEventListener('keydown', event => {
const index = Number(window.location.hash.split('-')[1]);
let id = null;
switch (event.key) {
// Activer la vue présentateur
case 's':
if (event.altKey) {
view = window.open(`http://localhost:8080${document.location.pathname}index.html`, 'speakerView');
view.addEventListener('load', () => {
view.document.body.classList.add('speaker');
})
}
break;
// Télécommande ++
case 'PageDown':
id = index + 1;
break;
// Télécommande --
case 'PageUp':
id = index - 1;
break;
default:
break;
}

if (id !== null && id >= 1) {
document.getElementById(`slide-${id}`).scrollIntoView({ behavior: 'smooth' });
switchSlide(id);
}
});
});

window.addEventListener('message', (e) => {
if (e.origin === 'http://localhost:8080/') {
document.getElementById(e.data).scrollIntoView({ behavior: 'smooth' });
switchSlide(e.data.split('-')[1]);
}
}, false);
</script>
{%- block script -%}{%- endblock -%}
</body>
</html>
0 _src/talks/accesslide/css/charts.css → _src/assets/accesslide/css/charts.css
View file
Open in desktop
File renamed without changes.
Loading