Add default layouts, update site index

INRIA · Nov 19, 2019 · 5044d8e · 5044d8e
1 parent 4cd37aa
commit 5044d8e
Show file tree

Hide file tree

Showing 20 changed files with 634 additions and 78 deletions.
diff --git a/config.toml b/config.toml
@@ -1,7 +1,7 @@
 baseURL = "https://mooc-accessibility.inria.fr/"
 languageCode = "fr-fr"
 title = "Inria MOOC Accessibility"
-disableKinds = ["section", "taxonomy", "taxonomyTerm", "sitemap"]
+disableKinds = ["taxonomy", "taxonomyTerm", "sitemap"]
 enableGitInfo = true
 
 [mediaTypes]

diff --git a/content/course/_index.md b/content/course/_index.md
@@ -0,0 +1,3 @@
+---
+title: "Toutes les séquences du MOOC"
+---
diff --git a/data/index.yml b/data/index.yml
@@ -0,0 +1,28 @@
+---
+sponsors:
+  - url: "https://team.inria.fr/potioc/fr/"
+    name: "Équipe Potioc"
+    logo: "img/sponsors/logo-equipe-potioc.png"
+  - url: "https://www.inria.fr/"
+    name: "Inria"
+    logo: "img/sponsors/logo-inria.png"
+  - url: "https://www.u-bordeaux.fr/"
+    name: "Université de Bordeaux"
+    logo: "img/sponsors/logo-universite-de-bordeaux.jpg"
+  - url: "https://cnrs.fr/"
+    name: "Centre National de la Recherche Scientifique"
+    logo: "img/sponsors/logo-cnrs.svg"
+
+publications:
+  - url: http://binaire.blog.lemonde.fr/2018/07/10/pourquoi-il-faut-developper-laccessibilite-numerique
+    description: Pourquoi il faut développer l’accessibilité numérique !
+    lang: fr
+  - url: https://hal.archives-ouvertes.fr/hal-01954983
+    description: "Online e-learning and cognitive disabilities: A systematic review"
+    lang: en
+  - url: https://hal.inria.fr/hal-01761462
+    description: "Towards Truly Accessible MOOCs for Persons with Cognitive Disabilities: Design and Field Assessment"
+    lang: en
+  - url: https://hal.inria.fr/hal-01848103
+    description: Improving the Academic Inclusion of a Student with Special Needs at University Bordeaux
+    lang: en
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+
+<head>
+  <meta charset="utf-8">
+
+  {{ hugo.Generator }}
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:url" content="{{ .Permalink }}">
+
+  <meta name="application-name" content="mooc-accessibility.inria.fr" />
+
+  {{ if .IsHome -}}
+  <title>{{ .Site.Title }}</title>
+  <meta property="og:title" content="{{ .Site.Title }}">
+  <meta property="og:type" content="website">
+  <meta name="description" content="{{ .Site.Params.Description }}">
+  {{- else -}}
+  <title>{{ .Title }} – {{ .Site.Title }}</title>
+  <meta property="og:title" content="{{ .Title }} – {{ .Site.Title }}">
+  <meta property="og:type" content="article">
+  <meta name="description" content="{{ .Description }}">
+  {{- end }}
+
+  {{ block "styles" . -}}
+  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
+  <link rel="stylesheet" href="{{ "css/index.css" | relURL }}">
+  {{- end }}
+
+  {{- if isset .Site.Data "matomo" }}
+  <script type="text/javascript">
+    var _paq = window._paq || [];
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function () {
+      var u = "https://piwik.inria.fr/";
+      _paq.push(['setTrackerUrl', u + 'matomo.php']);
+      _paq.push(['setSiteId', '{{ $.Site.Data.matomo.site_id }}']);
+      var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+      g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+    })();
+  </script>
+  {{- end }}
+</head>
+
+{{ block "main" . }}{{ end }}
+
+</body>
+
+</html>
diff --git a/layouts/course/section.html b/layouts/course/section.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+  <header>
+    {{ partial "topbar.html" . }}
+
+    <div class="site-header">
+      <div class="container">
+        <h1 class="page-name">Les séquences du MOOC</h1>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <div class="container container--small">
+      <ol>
+      {{ range .Pages.ByWeight }}
+        <li>
+          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        </li>
+      {{ end }}
+      </ol>
+    </div>
+  </main>
+
+  {{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/course/single.fun.html b/layouts/course/single.fun.html
@@ -1,20 +1,8 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>{{ .Title }}</title>
-  <meta name="description" content="{{ .Description }}">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+{{ define "styles"}}
   <link rel="stylesheet" href="{{ "/css/aiana.css" | relURL }}">
+{{ end }}
 
-  {{- if isset .Site.Data "matomo" }}
-  {{ partial "matomo.html" . }}
-  {{- end }}
-</head>
-
-<body>
+{{ define "main" }}
   <noscript>
     {{ $video_src := (index (.Params.player.sources) 0).src -}}
     <video src="{{ $.Site.Params.mediaBaseURL }}/videos/{{ $.File.ContentBaseName }}/{{ $video_src }}" type="video/mp4" autoplay="false" preload="auto" controls>
@@ -52,6 +40,5 @@
   {{- end }}
 
   {{ printf "<!-- Build date: %s - Version: %s -->" (now.Format "Mon, 02 Jan 2006 15:04:05 MST") .GitInfo.AbbreviatedHash | safeHTML }}
-</body>
 
-</html>
+{{ end }}
diff --git a/layouts/course/single.html b/layouts/course/single.html
@@ -1,48 +1,57 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>{{ .Title }}</title>
-  <meta name="description" content="{{ .Description }}">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+{{ define "styles" }}
+  <link rel="stylesheet" href="{{ "/css/index.css" | relURL }}">
   <link rel="stylesheet" href="{{ "/css/aiana.css" | relURL }}">
+{{ end }}
 
-  {{- if isset .Site.Data "matomo" }}
-  {{ partial "matomo.html" . }}
-  {{- end }}
-</head>
-
-<body>
-  <noscript>
-    <h1>{{ .Params.title }}</h1>
-    {{ $video_src := (index (.Params.player.sources) 0).src -}}
-    <video src="{{ $.Site.Params.mediaBaseURL }}/videos/{{ $.File.ContentBaseName }}/{{ $video_src }}" type="video/mp4" autoplay="false" preload="auto" controls>
-      {{- if isset .Params "subtitles" -}}
-      {{- range .Params.subtitles.sources }}
-      <track kind="captions" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
-      {{- end -}}
-      {{- end -}}
-      {{- if isset .Params "chapters" -}}
-      {{ range .Params.chapters.sources }}
-      <track kind="chapters" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
-      {{- end -}}
-      {{- end -}}
-      {{- if isset .Params "additionalinformation" -}}
-      {{ range .Params.additionalinformation.sources }}
-      <track kind="metadata" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
-      {{- end -}}
-      {{- end -}}
-      {{- if isset .Params "slides" -}}
-      {{ range .Params.slides.sources }}
-      <track kind="metadata" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
-      {{- end -}}
-      {{- end }}
-    </video>
-  </noscript>
-
-  <div id="root"></div>
+{{ define "main" }}
+  <main>
+    <noscript>
+      <h1>{{ .Params.title }}</h1>
+      {{ $video_src := (index (.Params.player.sources) 0).src -}}
+      <video src="{{ $.Site.Params.mediaBaseURL }}/videos/{{ $.File.ContentBaseName }}/{{ $video_src }}" type="video/mp4" autoplay="false" preload="auto" controls>
+        {{- if isset .Params "subtitles" -}}
+        {{- range .Params.subtitles.sources }}
+        <track kind="captions" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
+        {{- end -}}
+        {{- end -}}
+        {{- if isset .Params "chapters" -}}
+        {{ range .Params.chapters.sources }}
+        <track kind="chapters" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
+        {{- end -}}
+        {{- end -}}
+        {{- if isset .Params "additionalinformation" -}}
+        {{ range .Params.additionalinformation.sources }}
+        <track kind="metadata" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
+        {{- end -}}
+        {{- end -}}
+        {{- if isset .Params "slides" -}}
+        {{ range .Params.slides.sources }}
+        <track kind="metadata" label="{{ .label }}" src="{{ ($.Resources.GetMatch .src).RelPermalink }}" srclang="{{ .srcLang }}">
+        {{- end -}}
+        {{- end }}
+      </video>
+
+      {{ partial "prev-next.html" . }}
+    </noscript>
+
+    <header>
+      {{ partial "topbar.html" . }}
+
+      <div class="site-header">
+        <div class="container">
+          <h1 class="page-name">{{ .Params.title }}</h1>
+        </div>
+      </div>
+    </header>
+
+    <div class="container">
+      <div class="player-wrapper">
+        <div id="root"></div>
+      </div>
+    </div>
+
+    {{ partial "prev-next.html" . }}
+  </main>
 
   <script>
     window.aiana = {{ (partial "configuration.json" .) | safeJS }};
@@ -55,6 +64,4 @@ <h1>{{ .Params.title }}</h1>
   {{- end }}
 
   {{ printf "<!-- Build date: %s - Version: %s -->" (now.Format "Mon, 02 Jan 2006 15:04:05 MST") .GitInfo.AbbreviatedHash | safeHTML }}
-</body>
-
-</html>
+{{ end }}
diff --git a/layouts/course/single.json.json b/layouts/course/single.json.json
diff --git a/layouts/index.html b/layouts/index.html
@@ -1 +1,56 @@
-Inria MOOC Accessibilité Numérique
+{{ define "main" }}
+  <header>
+    {{ partial "topbar.html" . }}
+
+    <div class="site-header">
+      <div class="container">
+        <h1 class="site-name">MOOC Accessibilité Numérique</h1>
+        <p class="site-lead">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam dignissimos possimus blanditiis aut beatae, in reprehenderit nisi vitae non nostrum suscipit dolores ipsum adipisci quod voluptatum, quibusdam dolorem assumenda magnam.
+        </p>
+      </div>
+    </div>
+  </header>
+
+  <main>
+
+    <div class="container presentation">
+      <section>
+        <h2 class="section-title visually-hidden">Présentation du projet</h2>
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet beatae numquam eos quaerat esse dolorem dolores, tenetur facere aperiam, laborum sint soluta laboriosam nam eius quasi dolor. Ipsa, quisquam maxime?</p>
+        <p class="cta">
+          {{ with .Site.GetPage "/course/w0-s1" -}}
+          <a href="{{ .RelPermalink }}" class="btn btn--large">Démarrer le MOOC Accessibilité Numérique</a>{{ end }}
+          <br>
+          ou
+          {{ with .Site.GetPage "section" "course" -}}
+          <a href="{{ .RelPermalink }}">voir la liste des séquences</a>{{ end }}.
+        </p>
+      </section>
+    </div>
+
+    <div class="contributors">
+      <section class="container container--large">
+        <h2 class="section-title visually-hidden">Contributeurs</h2>
+        <ul class="contributors-list">
+          {{ range $.Site.Data.index.sponsors }}
+          <li><a href="{{ .url }}"><img src="{{ .logo }}" alt="{{ .name }}"></a></li>
+          {{ end }}
+        </ul>
+      </section>
+    </div>
+
+    <div class="container publications">
+      <section>
+        <h2 class="section-title">Présentations et publications</h2>
+        <ul class="publications-list">
+          {{ range $.Site.Data.index.publications }}
+          <li><a href="{{ .url }}" lang="{{ .lang }}">{{ .description }}</a></li>
+          {{ end }}
+        </ul>
+      </section>
+    </div>
+  </main>
+
+  {{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,7 @@
+<div class="container">
+  <footer class="site-footer">
+    <div>
+      &copy; Inria 2018 - present
+    </div>
+  </footer>
+</div>
diff --git a/layouts/partials/matomo.html b/layouts/partials/matomo.html
diff --git a/layouts/partials/prev-next.html b/layouts/partials/prev-next.html
@@ -0,0 +1,23 @@
+{{ if .PrevInSection | or .NextInSection -}}
+
+<hr>
+
+<div class="container container--small">
+  <nav aria-label="Posts pagination">
+    <ul class="posts-pagination">
+      {{ if .NextInSection -}}
+      <li class="posts-pagination__item posts-pagination__prev">
+        <a rel="prev" href="{{ .NextInSection.Permalink }}">← Séquence précédente</a>
+      </li>
+      {{- end }}
+
+      {{ if .PrevInSection -}}
+      <li class="posts-pagination__item posts-pagination__next">
+        <a rel="next" href="{{ .PrevInSection.Permalink }}">Séquence suivante →</a>
+      </li>
+      {{- end }}
+    </ul>
+  </nav>
+</div>
+
+{{- end }}
diff --git a/layouts/partials/topbar.html b/layouts/partials/topbar.html
@@ -0,0 +1,5 @@
+<nav class="site-nav">
+  <a href="{{ .Site.BaseURL }}" aria-label="Aller à la page d’accueil">
+    <img src="{{ "img/logo-aiana.png" | relURL }}" alt="Aiana">
+  </a>
+</nav>
diff --git a/static/css/aiana.css b/static/css/aiana.css
@@ -22,6 +22,7 @@ body {
 */
 .aip-app {
   display: block;
+
   width: 800px;
   height: 546px;