diff --git a/assets/icons/fa/meetup.svg b/assets/icons/fa/meetup.svg new file mode 100644 index 000000000..e64dfce85 --- /dev/null +++ b/assets/icons/fa/meetup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/fa/twitter.svg b/assets/icons/fa/twitter.svg new file mode 100644 index 000000000..bb88ebe3f --- /dev/null +++ b/assets/icons/fa/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/fa/youtube.svg b/assets/icons/fa/youtube.svg new file mode 100644 index 000000000..96f13ee1d --- /dev/null +++ b/assets/icons/fa/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/check-fill.svg b/assets/icons/mingcute/check-fill.svg new file mode 100644 index 000000000..63c1c3ed3 --- /dev/null +++ b/assets/icons/mingcute/check-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/headphone-fill.svg b/assets/icons/mingcute/headphone-fill.svg new file mode 100644 index 000000000..9a4077aac --- /dev/null +++ b/assets/icons/mingcute/headphone-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/message-3-fill.svg b/assets/icons/mingcute/message-3-fill.svg new file mode 100644 index 000000000..dee4d7d96 --- /dev/null +++ b/assets/icons/mingcute/message-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/news-2-fill.svg b/assets/icons/mingcute/news-2-fill.svg new file mode 100644 index 000000000..f50a86634 --- /dev/null +++ b/assets/icons/mingcute/news-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/presentation-1-fill.svg b/assets/icons/mingcute/presentation-1-fill.svg new file mode 100644 index 000000000..43f313479 --- /dev/null +++ b/assets/icons/mingcute/presentation-1-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/rss-fill.svg b/assets/icons/mingcute/rss-fill.svg new file mode 100644 index 000000000..3162da0ba --- /dev/null +++ b/assets/icons/mingcute/rss-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/star-fill.svg b/assets/icons/mingcute/star-fill.svg new file mode 100644 index 000000000..4911e05ec --- /dev/null +++ b/assets/icons/mingcute/star-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/subtitle-fill.svg b/assets/icons/mingcute/subtitle-fill.svg new file mode 100644 index 000000000..47d65b20a --- /dev/null +++ b/assets/icons/mingcute/subtitle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mingcute/youtube-fill.svg b/assets/icons/mingcute/youtube-fill.svg new file mode 100644 index 000000000..66091c09a --- /dev/null +++ b/assets/icons/mingcute/youtube-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/htdocs/css/talk/show.css b/htdocs/css/talk/show.css deleted file mode 100644 index 68d25d8d9..000000000 --- a/htdocs/css/talk/show.css +++ /dev/null @@ -1,80 +0,0 @@ -/* cf http://alistapart.com/article/creating-intrinsic-ratios-for-video - et http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */ -.responsive-video-container { - position: relative; - padding-bottom: 56.25%; /* 16:9 */ - padding-top: 25px; - height: 0; -} -.responsive-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -div.speaker-name-container { - padding: 0 10px 10px 10px; -} - -.speaker-name-container .fa-twitter { - padding: 10px; - font-size: 1.5em; -} - -.speaker-name { - display: inline-block; -} - -.speaker-title-container, -.comments-title-container { - padding: 10px 10px 0 10px; - margin: 0 -} - -.speaker-title-container h2 { - margin: 0; -} - -.talk-title h1 { - font-size: 2.5em; -} - -.talk-date-container { - margin: 0 0 10px 0; - font-style: italic; -} - -.speaker-photo-container { - text-align: center; -} - -.speaker-talks-link { - margin: 15px 0 0 0; -} - -.speaker-photo { - max-width: 100%; -} - -.talk-complementary-information { - margin: 0 0 0 10px; - list-style: none; -} - -.talk-comment-container { - margin: 0 0 15px 0; -} - -.talk-comment { - font-size: 1.1em; - padding: 0 10px ; - border-left: 4px solid #36a7df; -} - -.talk-comment-stars { - display: inline-block; - vertical-align: middle; - margin: 0 4px; -} diff --git a/htdocs/js/talk/list.js b/htdocs/js/talk/list.js index af8c1a7ad..4ace27101 100644 --- a/htdocs/js/talk/list.js +++ b/htdocs/js/talk/list.js @@ -1,3 +1,66 @@ +/** + * Historique des conférences — instantsearch.js 1.12.1 + * + * Le rendu de cette page est intégralement produit ici : le template Twig ne fournit que des + * conteneurs vides. Les classes visuelles sont donc posées de deux façons : + * - `cssClasses` : instantsearch AJOUTE ces classes à ses classes BEM `ais-*` + * (il ne les remplace pas), ce qui permet de styler ses propres wrappers. + * - `templates` : le markup que l'on maîtrise entièrement. + * Les classes reprennent celles des composants Twig (Card, Card:Section, Button) et du thème + * de formulaire `templates/form_themes/tailwind.html.twig`, pour que la page reste alignée + * sur `templates/site/news/list.html.twig` dont elle s'inspire. + */ + +/* Icônes mingcute inlinées : on ne peut pas appeler depuis le JS. */ +var icon = function (path, extraClass) { + return ''; +}; + +var ICONS = { + rss: '', + slides: '', + comments: '', + angleLeft: '', + angleRight: '', + angleDoubleLeft: '', + angleDoubleRight: '' +}; + +/* Reprend les classes d'un champ du thème de formulaire (afup_field_class). */ +var FIELD_CLASS = 'w-full rounded-lg border-2 border-neutre-300 bg-white px-3 h-10 text-sm ' + + 'text-gray-700 placeholder:text-neutre-400 focus:border-afup-500 focus:outline-none'; + +/* Reprend afup_toggle_class du thème de formulaire. */ +var CHECKBOX_CLASS = 'size-4 shrink-0 rounded border-2 border-neutre-300 accent-ruby-500 ' + + 'focus:outline-afup-500 cursor-pointer'; + +/* Titre de section, calqué sur templates/components/Card/Section.html.twig */ +var sectionHeader = function (title) { + return '

' + + '' + + title + '

'; +}; + +/* Une ligne de filtre, calquée sur templates/components/Form/FilterList.html.twig */ +var refinementItemTemplate = function (data) { + return ''; +}; + +var refinementCssClasses = { + list: 'flex flex-col gap-1', + item: 'cursor-pointer' +}; + +var showMoreTemplates = { + active: 'Voir moins', + inactive: 'Voir plus' +}; + var search = instantsearch({ appId: document.head.querySelector("[name=algolia_appid]").content, apiKey: document.head.querySelector("[name=algolia_apikey]").content, @@ -9,8 +72,18 @@ search.addWidget( instantsearch.widgets.searchBox({ container: '#search-box', placeholder: 'Rechercher une conférence...', - poweredBy: true - + /* Attribution obligatoire sur l'offre gratuite d'Algolia. */ + poweredBy: { + cssClasses: { root: 'mt-2 flex justify-end', link: 'inline-block' }, + template: '' + }, + cssClasses: { + root: 'w-full', + input: FIELD_CLASS + } }) ); @@ -18,175 +91,89 @@ search.addWidget( instantsearch.widgets.hits({ hitsPerPage: 7, container: '#hits-container', + cssClasses: { + root: 'flex flex-col gap-4', + empty: 'font-sans text-base text-neutre-700' + }, templates: { - empty: "Pas de résultat", - item: function(data) { - var thumbnailUrl = '/images/no_video.jpg'; - - if (typeof data.video_id !== 'undefined') { - thumbnailUrl = 'https://img.youtube.com/vi/' + data.video_id + '/hqdefault.jpg'; - } - - var content = '' - + '
' - ; - - content += '' - + '
' - + '' - + '
' - ; - - content += '' - + '
' - + '
' - + '

' + data.title + '

' - + '
' - + '
' - + '' + data.speakers_label + '' - + ' - ' + data.event.title + '' - + '
' - + '' - ; - - content += '' - + '
' - + '
' - ; - - return content; + return '' + + '
' + + '' + + '' + + '' + + '
' + + '' + data.title + '' + + '

' + data.speakers_label + ' · ' + data.event.title + '

' + + (links ? '
' + links + '
' : '') + + '
' + + '
'; } } }) ); +var toggles = [ + { container: '#refinement-has-video', attributeName: 'has_video', label: 'Avec vidéo' }, + { container: '#refinement-has-slides', attributeName: 'has_slides', label: 'Avec slides' }, + { container: '#refinement-has-blog-post', attributeName: 'has_blog_post', label: 'Avec article de blog' }, + { container: '#refinement-video-has-fr-subtitles', attributeName: 'video_has_fr_subtitles', label: 'Avec sous titres français' }, + { container: '#refinement-video-has-en-subtitles', attributeName: 'video_has_en_subtitles', label: 'Avec sous titres anglais' } +]; + +toggles.forEach(function (toggle) { + search.addWidget( + instantsearch.widgets.toggle({ + container: toggle.container, + attributeName: toggle.attributeName, + label: toggle.label, + values: { on: true }, + autoHideContainer: false, + cssClasses: refinementCssClasses, + templates: { item: refinementItemTemplate } + }) + ); +}); -var refinementItemTemplate = function(data) { - var content = ""; - content += ''; - - if (data.count) { - content += ' ' + data.count + ""; +/* Les évènements les plus récents en premier. */ +var eventYear = function (name) { + if (name.substring(0, 8) === 'AFUP Day') { + return name.split(' ').splice(-2, 1).join(''); } - return content; + return parseInt(name.substring(name.length - 4), 10); }; -search.addWidget( - instantsearch.widgets.toggle({ - container: '#refinement-has-video', - attributeName: 'has_video', - label: 'Avec vidéo', - values: { - on: true - }, - autoHideContainer: false, - templates: { - item: refinementItemTemplate - } - }) -); - -search.addWidget( - instantsearch.widgets.toggle({ - container: '#refinement-has-slides', - attributeName: 'has_slides', - label: 'Avec slides', - values: { - on: true - }, - autoHideContainer: false, - templates: { - item: refinementItemTemplate - } - }) -); - - -search.addWidget( - instantsearch.widgets.toggle({ - container: '#refinement-has-blog-post', - attributeName: 'has_blog_post', - label: 'Avec article de blog', - values: { - on: true - }, - autoHideContainer: false, - templates: { - item: refinementItemTemplate - } - }) -); - -search.addWidget( - instantsearch.widgets.toggle({ - container: '#refinement-video-has-fr-subtitles', - attributeName: 'video_has_fr_subtitles', - label: 'Avec sous titres français', - values: { - on: true - }, - autoHideContainer: false, - templates: { - item: refinementItemTemplate - } - }) -); - -search.addWidget( - instantsearch.widgets.toggle({ - container: '#refinement-video-has-en-subtitles', - attributeName: 'video_has_en_subtitles', - label: 'Avec sous titres anglais', - values: { - on: true - }, - autoHideContainer: false, - templates: { - item: refinementItemTemplate - } - }) -); - search.addWidget( instantsearch.widgets.refinementList({ container: '#refinement-event', attributeName: 'event.title', - sortBy: function(a, b) { - if (a.name.substring(0, 8) === 'AFUP Day') { - var aYear = a.name.split(' ').splice(-2, 1).join(''); - } else { - var aYear = parseInt(a.name.substring(a.name.length - 4), 10); - } - - if (b.name.substring(0, 8) === 'AFUP Day') { - var bYear = b.name.split(' ').splice(-2, 1).join(''); - } else { - var bYear = parseInt(b.name.substring(b.name.length - 4), 10); - } + sortBy: function (a, b) { + var aYear = eventYear(a.name); + var bYear = eventYear(b.name); if (aYear < bYear) { return 1; @@ -198,60 +185,45 @@ search.addWidget( return 0; }, - operator: "and", + operator: 'and', + cssClasses: refinementCssClasses, templates: { - header: "

Évènement

", + header: sectionHeader('Évènement'), item: refinementItemTemplate }, - showMore: { - templates: { - active: 'Voir moins', - inactive: 'Voir plus' - } - } - }) -); - -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#refinement-type', - attributeName: 'type.label', - operator: "and", - templates: { - header: "

Format

", - item: refinementItemTemplate - } + showMore: { templates: showMoreTemplates } }) ); -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#refinement-language', - operator: "and", - attributeName: 'language.label', - templates: { - header: "

Langue

", - item: refinementItemTemplate - } - }) -); +[ + { container: '#refinement-type', attributeName: 'type.label', title: 'Format' }, + { container: '#refinement-language', attributeName: 'language.label', title: 'Langue' } +].forEach(function (refinement) { + search.addWidget( + instantsearch.widgets.refinementList({ + container: refinement.container, + attributeName: refinement.attributeName, + operator: 'and', + cssClasses: refinementCssClasses, + templates: { + header: sectionHeader(refinement.title), + item: refinementItemTemplate + } + }) + ); +}); search.addWidget( instantsearch.widgets.refinementList({ container: '#refinement-speaker', attributeName: 'speakers.label', - operator: "and", + operator: 'and', + cssClasses: refinementCssClasses, templates: { - header: "

Conférencier

", + header: sectionHeader('Conférencier'), item: refinementItemTemplate }, - showMore: { - limit: 20, - templates: { - active: 'Voir moins', - inactive: 'Voir plus' - } - } + showMore: { limit: 20, templates: showMoreTemplates } }) ); @@ -259,21 +231,51 @@ search.addWidget( instantsearch.widgets.clearAll({ container: '#refinement-clear', templates: { - link: 'Supprimer les filtres' + link: 'Effacer les filtres' }, autoHideContainer: true }) ); +/* Reprend le rendu de templates/site/pager.html.twig (composant Button). */ +var PAGINATION_LINK = 'inline-flex items-center justify-center rounded-lg border whitespace-nowrap ' + + 'px-3 py-2 text-sm font-medium no-underline'; + search.addWidget( instantsearch.widgets.pagination({ container: '#pagination', - labels : { - first: '', - previous: '', - next: '', - last: '' + cssClasses: { + root: 'mx-auto flex w-full justify-center', + list: 'flex flex-row flex-wrap gap-2 items-center', + item: 'list-none', + link: PAGINATION_LINK + ' bg-white text-neutre-700 border-neutre-300 hover:bg-afup-700 hover:text-white hover:border-afup-700', + active: '[&>*]:bg-afup-100 [&>*]:text-afup-500 [&>*]:border-transparent', + disabled: 'invisible' + }, + labels: { + first: icon(ICONS.angleDoubleLeft), + previous: icon(ICONS.angleLeft), + next: icon(ICONS.angleRight), + last: icon(ICONS.angleDoubleRight) } }) ); + +/* instantsearch 1.x n'émet pas aria-current sur la page courante. */ +search.on('render', function () { + document.querySelectorAll('#pagination .ais-pagination--item__page').forEach(function (item) { + var link = item.querySelector('.ais-pagination--link'); + + if (!link) { + return; + } + + if (item.classList.contains('ais-pagination--item__active')) { + link.setAttribute('aria-current', 'page'); + } else { + link.removeAttribute('aria-current'); + } + }); +}); + search.start(); diff --git a/templates/site/offices.html.twig b/templates/site/offices.html.twig index 98204c530..93a8ee949 100644 --- a/templates/site/offices.html.twig +++ b/templates/site/offices.html.twig @@ -403,7 +403,7 @@
{% if antenne.socials.blog is not null %} - + {% endif %} @@ -415,13 +415,13 @@ {% if antenne.socials.linkedin is not null %} - + {% endif %} {% if antenne.socials.bluesky is not null %} - + {% endif %} diff --git a/templates/site/talks/list.html.twig b/templates/site/talks/list.html.twig index 7e56c44af..19db14cf9 100644 --- a/templates/site/talks/list.html.twig +++ b/templates/site/talks/list.html.twig @@ -1,4 +1,4 @@ -{% extends 'site/base.html.twig' %} +{% extends 'layouts/site.html.twig' %} {% block title %}{{ title }}{% endblock %} @@ -6,19 +6,13 @@ {% endblock %} -{% block stylesheets %} - {{ parent() }} - - - - - -{% endblock %} - {% block javascripts %} {{ parent() }} - - + {# `defer` obligatoire : ce bloc est rendu dans le (layouts/root.html.twig), donc + sans lui instantsearch s'exécute avant l'existence de ses conteneurs et lève + « Container must be string or HTMLElement ». `defer` préserve l'ordre des deux scripts. #} + + {% endblock %} {% block metas %} @@ -35,72 +29,72 @@ {% endblock %} {% block content %} -
-
-

{{ title }}

-

Retrouvez ici toutes les conférences passées de l'AFUP. Pour s'informer sur nos prochains évènements, rendez-vous sur event.afup.org.

+
+

{{ title }}

+

+ Retrouvez ici toutes les conférences passées de l'AFUP. Pour s'informer sur nos prochains + évènements, rendez-vous sur event.afup.org. +

-
-
- -
-
-
+ {# instantsearch remplace cet input ; les classes sont posées via cssClasses.input #} + +
+ + {# flex-col et non flex-col-reverse : en mobile le bloc de filtres fait ~500px, il doit + passer APRÈS les résultats et non les repousser sous la ligne de flottaison. #} +
+
+ +
+ +
-
-
-
-
-
- -
- -
- -
- +
+
+
+
+
+
+
-
-
-

Retrouvez également les vidéos des conférences captées par nos antennes

-

- Certaines de nos antennes locales filment les conférences qu’elles organisent : leurs captations sont ensuite mises en ligne sur leur chaîne YouTube. Découvrez toutes leurs vidéos et pensez à vous abonner pour ne rien manquer de leur futures publications ! -

+
+ +
-
-
- {% for antenne in antennes %} - {% if antenne.socials.youtube is not null %} -
-
-
- -
-
-

{{ antenne.label }}

-
- -
-
- {% if loop.index is even %} -
-
- {% endif %} - {% endif %} - {% endfor %} -
-
+
+

+ Les vidéos captées par nos antennes +

+

+ Certaines de nos antennes locales filment les conférences qu'elles organisent : leurs captations + sont ensuite mises en ligne sur leur chaîne YouTube. Découvrez toutes leurs vidéos et pensez à + vous abonner pour ne rien manquer de leurs futures publications ! +

+ +
+ {% for antenne in antennes|filter(antenne => antenne.socials.youtube is not null) %} + +
+ +
+ {# min-w-0 : sans lui le titre refuse de se compresser et pousse le bouton hors de la carte #} +

{{ antenne.label }}

+ + + YouTube + +
+ {% endfor %}
+ {% endblock %} diff --git a/templates/site/talks/show.html.twig b/templates/site/talks/show.html.twig index c32778671..2a8a2f2c1 100644 --- a/templates/site/talks/show.html.twig +++ b/templates/site/talks/show.html.twig @@ -1,38 +1,4 @@ -{% extends 'site/base.html.twig' %} - -{% block stylesheets %} - {{ parent() }} - - - - - -{% endblock %} - -{% block javascripts %} - {{ parent() }} - -{% endblock %} +{% extends 'layouts/site.html.twig' %} {% block title %}{{ talk.title }} - {{ event.title }}{% endblock %} @@ -59,261 +25,246 @@ {% endblock %} {% block content %} -
-
-
-

{{ talk.title }}

-
- {% if talk.hasYoutubeId %} -
-

Vidéo

-
-
- -
-
-
- {% endif %} + {% set event_date %} + {% if event.dateStart == event.dateEnd %}le {{ event.dateStart|date('d') }}{% else %}les {{ event.dateStart|date('d') }} et {{ event.dateEnd|date('d') }}{% endif %} {{ event.dateEnd|format_date('none', 'MMMM YYYY') }} + {% endset %} + {% set event_url = url('talks_list', {"fR": { "event.title" : [ event.title ]}}) %} + {% set speakers_label = speakers|map(speaker => speaker.label)|join(', ') %} -
-
-
-

Description

- {% if talk.useMarkdown %} - {{ talk.abstract|raw|markdown }} - {% else %} - {{ talk.abstract|raw }} - {% endif %} -
-
-
-
- Conférence donnée lors du {{ event.title }}, - ayant eu lieu {% if event.dateStart == event.dateEnd %}le {{ event.dateStart|date('d') }}{% else %}les {{ event.dateStart|date('d') }} et {{ event.dateEnd|date('d') }}{% endif %} {{ event.dateEnd|format_date('none', 'MMMM YYYY') }}. -
+ {% if talk.hasYoutubeId %} + {# Scène sombre : le bandeau n'annonce pas la page, il détache le lecteur du fond. #} +
+
+
+

+ {{ event.title }} · {{ event_date|trim }} +

+

{{ talk.title }}

+

{{ speakers_label }}

- {% if talk.hasSlidesUrl or talk.hasBlogPostUrl or talk.hasInterviewUrl or talk.hasJoindinId or talk.getVideoHasEnSubtitles or talk.getVideoHasFrSubtitles or talk.hasOpenfeedbackPath %} -
-
-

Informations complémentaires

-
    - - {% if talk.hasSlidesUrl %} -
  • - Slides -
  • - {% endif %} - - {% if talk.hasBlogPostUrl %} -
  • - Article de blog -
  • - {% endif %} - - {% if talk.hasInterviewUrl %} -
  • - Interview -
  • - {% endif %} - - {% if talk.hasJoindinId %} -
  • - Fiche joind.in -
  • - {% endif %} - - {% if talk.hasOpenfeedbackPath %} -
  • - Fiche openfeedback.io -
  • - {% endif %} - -
  • Audio : {{ talk.getLanguageLabel|lower }}
  • - - {% if talk.getVideoHasEnSubtitles %} -
  • Sous titres : anglais
  • - {% endif %} - - {% if talk.getVideoHasFrSubtitles %} -
  • Sous titres : français
  • - {% endif %} -
+
+
+
- {% endif %}
- -
-
-
-
-

{% if speakers|length > 1 %}Les speakers{% else %}Le speaker{% endif %}

-
-
- - {% for speaker in speakers %} -
-
-

- {{ speaker.label }} -

- {% if speaker.twitter %} - - - - {% endif %} -
-
-
-
- {% if photo_storage.getUrl(speaker) %} - - {% endif %} - -
-
- {{ speaker.biography }} -
-
- {% endfor %} - -
+ {% else %} +
+

+ {{ event.title }} · {{ event_date|trim }} +

+

{{ talk.title }}

+

{{ speakers_label }}

+ {% endif %} +
+
- {% if talk.getTweetsHasArray|length > 0 %} -
-
-
-
-

Tweets

-
+
+ À propos +
+ {% if talk.useMarkdown %} + {{ talk.abstract|raw|markdown }} + {% else %} + {{ talk.abstract|raw }} + {% endif %}
+
+ +
+ {{ speakers|length > 1 ? 'Les speakers' : 'Le speaker' }} - {% for tweets_batchs in talk.getTweetsHasArray|batch(4) %} -
- {% for tweet in tweets_batchs %} -
- + {% for speaker in speakers %} +
+ {# La photo est facultative : elle ne doit pas laisser de colonne vide quand elle manque. #} + {% if photo_storage.getUrl(speaker) %} + + {% endif %} +
+
+

{{ speaker.label }}

+ {% if speaker.twitter %} + + + + {% endif %}
- {% endfor %} +

{{ speaker.biography }}

+ Voir tous ses talks +
{% endfor %} - -
- -
- {% endif %} - - {% if talk.getBlueskyPostsAsArray|length > 0 %} -
-
-
-
-

Posts Bluesky

-
-
- - {% for posts_batch in talk.getBlueskyPostsAsArray|batch(4) %} -
- {% for post in posts_batch %} -
- {{ bluesky_oembed(post) }} +
+ + {% if comments|filter(comment => comment.comment|length)|length %} +
+ Commentaires + {% for comment in comments|filter(comment => comment.comment|length) %} + +

{{ comment.comment }}

+
+
+ {% for i in 1..5 %} + + {% endfor %} +
+

+ {{ comment.user_display_name }}, le {{ comment.created_date|date('d/m/Y') }} +

+
+ {% endfor %} +
+ {% endif %} + + {% if transcript %} +
+ Transcription de la vidéo +
+ {% for cue in transcript %} +

{{ cue.text }}

{% endfor %}
- {% endfor %} +
+ {% endif %} + + {% if talk.verbatim %} +
+ Verbatim +
{{ talk.verbatim|markdown }}
+
+ {% endif %} -
-
- {% endif %} - {% if comments|length > 0 %} - {% include 'common/star.html.twig' %} -
-
-
-
-

Commentaires

+
+ + {% set links = [ + { shown: talk.hasSlidesUrl, url: talk.getSlidesurl, icon: 'mingcute:presentation-1-fill', label: 'Slides' }, + { shown: talk.hasBlogPostUrl, url: talk.getBlogPostUrl, icon: 'mingcute:rss-fill', label: 'Article de blog' }, + { shown: talk.hasInterviewUrl, url: talk.getInterviewUrl, icon: 'mingcute:news-2-fill', label: 'Interview' }, + { shown: talk.hasJoindinId, url: talk.getJoindinUrl, icon: 'mingcute:message-3-fill', label: 'Fiche joind.in' }, + { shown: talk.hasOpenfeedbackPath, url: talk.getOpenfeedbackUrl, icon: 'mingcute:message-3-fill', label: 'Fiche openfeedback.io' }, + ]|filter(link => link.shown) %} + + {% if links|length %} + +
+ {% for link in links %} + + + {{ link.label }} + + {% endfor %}
-
- - {% for comment in comments %} - {% if comment.comment|length %} -
-
-
{{ comment.comment }}
- {{ comment.user_display_name }}, le {{ comment.created_date|date('d/m/Y') }} + + {% endif %} -
-
- {% for i in 5..1 %} - - {% endfor %} -
-
-
-
+ +
    +
  • + + Audio : {{ talk.getLanguageLabel|lower }} +
  • + {% if talk.getVideoHasFrSubtitles %} +
  • + + Sous-titres : français +
  • {% endif %} - {% endfor %} + {% if talk.getVideoHasEnSubtitles %} +
  • + + Sous-titres : anglais +
  • + {% endif %} +
+
+ +
-
-
- {% endif %} +
- {% if transcript %} -
-
-
-
-

Transcription de la vidéo

+ {% if talk.getTweetsHasArray|length > 0 or talk.getBlueskyPostsAsArray|length > 0 %} + {# Hors du bloc à deux colonnes : les embeds Twitter et Bluesky ont une largeur + minimale et s'écrasent dans la colonne de gauche. #} +
+ {% if talk.getTweetsHasArray|length > 0 %} +
+ Tweets +
+ {% for tweet in talk.getTweetsHasArray %} + + {% endfor %}
-
+ + {% endif %} -
-
- {% for cue in transcript %} -

{{ cue.text }}

+ {% if talk.getBlueskyPostsAsArray|length > 0 %} +
+ Posts Bluesky +
+ {% for post in talk.getBlueskyPostsAsArray %} +
{{ bluesky_oembed(post) }}
{% endfor %}
-
- -
+ + {% endif %}
- {% endif %} - - {% if talk.verbatim %} -
-
-
-
-

Verbatim

-
-
- -
-
- {{ talk.verbatim|markdown }} -
+ {% endif %} +{% endblock %} -
-
-
- {% endif %} +{% block javascripts %} + {{ parent() }} + {% if talk.getTweetsHasArray|length > 0 %} + + {% endif %} + {% if talk.getBlueskyPostsAsArray|length > 0 %} + + {% endif %} -
+ {% if talk.hasYoutubeId %} + + + {% endif %} {% endblock %}