mirror of
https://github.com/privacyguides/privacyguides.org.git
synced 2025-06-05 21:39:18 -04:00
feat!: Add videos section to website (#2861)
This commit is contained in:
Jonah Aragon
parent
d904114f81
commit
c3e2dc65d8
18 changed files with 848 additions and 14 deletions
109
theme/layouts/video.yml
Normal file
109
theme/layouts/video.yml
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
definitions:
|
||||
- &site_name >-
|
||||
{{ config.site_name }}
|
||||
|
||||
- &page_title >-
|
||||
{{ page.meta.get("title", page.title) }}
|
||||
|
||||
- &page_description >-
|
||||
{{ page.meta.get("description", config.site_description) or "" }}
|
||||
|
||||
- &page_logo >-
|
||||
{% if page.meta.preview and page.meta.preview.logo %}
|
||||
{{- page.meta.preview.logo -}}
|
||||
{% endif %}
|
||||
|
||||
- &page_icon >-
|
||||
{%- if not page.meta.preview or not page.meta.preview.logo -%}
|
||||
material/video-box
|
||||
{%- endif -%}
|
||||
|
||||
- &logo >-
|
||||
theme/assets/brand/logos/svg/logo/privacy-guides-logo-notext-colorbg.svg
|
||||
|
||||
# Meta tags
|
||||
tags:
|
||||
# Open Graph
|
||||
og:type: video.other
|
||||
og:title: *page_title
|
||||
og:description: *page_description
|
||||
og:image: "{{ image.url }}"
|
||||
og:image:type: "{{ image.type }}"
|
||||
og:image:width: "{{ image.width }}"
|
||||
og:image:height: "{{ image.height }}"
|
||||
og:url: "{{ page.canonical_url }}"
|
||||
|
||||
# Video
|
||||
og:video: "{{ page.meta.embed }}"
|
||||
og:video:url: "{{ page.meta.embed }}"
|
||||
og:video:secure_url: "{{ page.meta.embed }}"
|
||||
og:video:type: "text/html"
|
||||
og:video:width: "560"
|
||||
og:video:height: "315"
|
||||
|
||||
# Mastodon
|
||||
fediverse:creator: "@privacyguides@neat.computer"
|
||||
|
||||
# Twitter
|
||||
twitter:site: "@privacy_guides"
|
||||
twitter:creator: "@privacy_guides"
|
||||
twitter:card: summary_large_image
|
||||
twitter:title: *page_title
|
||||
twitter:description: *page_description
|
||||
twitter:image: "{{ image.url }}"
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Specification
|
||||
# -----------------------------------------------------------------------------
|
||||
|
||||
# Card size and layers
|
||||
size: { width: 1200, height: 630 }
|
||||
layers:
|
||||
# Background
|
||||
- background:
|
||||
color: "#FFD06F"
|
||||
|
||||
- size: { width: 512, height: 512 }
|
||||
offset: { x: 600, y: 59 }
|
||||
background:
|
||||
image: *page_logo
|
||||
|
||||
- background:
|
||||
color: "#FFD06F99"
|
||||
|
||||
# Page icon
|
||||
- size: { width: 630, height: 630 }
|
||||
offset: { x: 570, y: 0 }
|
||||
icon:
|
||||
value: *page_icon
|
||||
color: "#00000033"
|
||||
|
||||
# Logo
|
||||
- size: { width: 64, height: 64 }
|
||||
offset: { x: 64, y: 64 }
|
||||
background:
|
||||
image: *logo
|
||||
|
||||
# Site name
|
||||
- size: { width: 768, height: 42 }
|
||||
offset: { x: 160, y: 78 }
|
||||
typography:
|
||||
content: *site_name
|
||||
color: "#2d2d2d"
|
||||
font:
|
||||
family: Bagnard
|
||||
style: Bold
|
||||
|
||||
# Page title
|
||||
- size: { width: 864, height: 256 }
|
||||
offset: { x: 62, y: 192 }
|
||||
typography:
|
||||
content: *page_title
|
||||
align: start
|
||||
color: "#2d2d2d"
|
||||
line:
|
||||
amount: 3
|
||||
height: 1.5
|
||||
font:
|
||||
family: Bagnard
|
||||
style: Bold
|
||||
41
theme/partials/video.html
Normal file
41
theme/partials/video.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!-- Post excerpt -->
|
||||
<article class="md-post md-post--excerpt">
|
||||
<header class="md-post__header">
|
||||
|
||||
<!-- Post metadata -->
|
||||
<div class="md-post__meta md-meta">
|
||||
<ul class="md-meta__list">
|
||||
|
||||
<!-- Post date -->
|
||||
<li class="md-meta__item">
|
||||
<time datetime="{{ post.config.date.created }}">
|
||||
{{- post.config.date.created | date -}}
|
||||
</time>
|
||||
{#- Collapse whitespace -#}
|
||||
</li>
|
||||
|
||||
<!-- Post readtime -->
|
||||
{% if post.config.readtime %}
|
||||
{% set time = post.config.readtime %}
|
||||
<li class="md-meta__item">
|
||||
{{ "# min watch" | replace("#", time) }}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Post content -->
|
||||
<div class="md-post__content md-typeset">
|
||||
<h2 class="toclink">
|
||||
<a href="{{ post.url | url }}">
|
||||
{{ post.title | d(config.site_name, true)}}
|
||||
</a>
|
||||
</h2>
|
||||
<div>
|
||||
<a href="{{ post.url | url }}">
|
||||
<img width="100%" height="100%" src="{{ post.meta.thumbnail }}"></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
232
theme/video-post.html
Normal file
232
theme/video-post.html
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<!--
|
||||
Copyright (c) 2024-2025 Jonah Aragon <jonah@triplebit.net>
|
||||
Copyright (c) 2016-2025 Martin Donath <martin.donath@squidfunk.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to
|
||||
deal in the Software without restriction, including without limitation the
|
||||
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||
sell copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
{% extends "main.html" %}
|
||||
|
||||
{% import "partials/nav-item.html" as item with context %}
|
||||
|
||||
{% block extrahead %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "VideoObject",
|
||||
"name": "{{ page.title }}",
|
||||
"description": "{{ page.meta.description }}",
|
||||
"thumbnailUrl": [
|
||||
"{{ page.meta.thumbnail }}"
|
||||
],
|
||||
"uploadDate": "{{ page.meta.date.created }}Z",
|
||||
"embedUrl": "{{ page.meta.embed }}"
|
||||
}
|
||||
</script>
|
||||
<link rel="alternate" type="application/json+oembed" href="https://neat.tube/services/oembed?url={{ page.meta.peertube | urlencode |replace('/', '%2F')}}" title="It's time to stop using SMS, here's why!" />
|
||||
{% endblock %}
|
||||
|
||||
<!-- Page content -->
|
||||
{% block container %}
|
||||
<div class="md-content md-content--post" data-md-component="content">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
class="md-sidebar md-sidebar--post"
|
||||
data-md-component="sidebar"
|
||||
data-md-type="navigation"
|
||||
>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner md-post">
|
||||
<nav class="md-nav md-nav--primary">
|
||||
|
||||
<!-- Back to overview link -->
|
||||
<div class="md-post__back">
|
||||
<div class="md-nav__title md-nav__container">
|
||||
<a href="{{ page.parent.url | url }}" class=" md-nav__link">
|
||||
{% include ".icons/material/arrow-left.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.index") }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post authors -->
|
||||
{% if page.authors %}
|
||||
<ul class="md-post__meta md-nav__list">
|
||||
<li class="md-nav__item md-nav__item--section">
|
||||
<div class="md-post__title">
|
||||
<span class="md-ellipsis">
|
||||
Host
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="md-post__authors md-typeset">
|
||||
{% for author in page.authors %}
|
||||
<div class="md-profile md-post__profile">
|
||||
<span class="md-author md-author--long">
|
||||
<img src="{{ author.avatar | url }}" alt="{{ author.name }}" />
|
||||
</span>
|
||||
<span class="md-profile__description">
|
||||
<strong>
|
||||
{% if author.url %}
|
||||
<a href="{{ author.url }}">{{ author.name }}</a>
|
||||
{% else %}
|
||||
{{ author.name }}
|
||||
{% endif %}
|
||||
</strong>
|
||||
<br />
|
||||
{{ author.description }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Post metadata -->
|
||||
<ul class="md-post__meta md-nav__list">
|
||||
<li class="md-nav__item md-nav__item--section">
|
||||
<div class="md-post__title">
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.meta") }}
|
||||
</span>
|
||||
</div>
|
||||
<nav class="md-nav">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<!-- Post date -->
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar.svg" %}
|
||||
<time
|
||||
datetime="{{ page.config.date.created }}"
|
||||
class="md-ellipsis"
|
||||
>
|
||||
{{- page.config.date.created | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Post date updated -->
|
||||
{% if page.config.date.updated %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/calendar-clock.svg" %}
|
||||
<time
|
||||
datetime="{{ page.config.date.updated }}"
|
||||
class="md-ellipsis"
|
||||
>
|
||||
{{- page.config.date.updated | date -}}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Post categories -->
|
||||
{% if page.categories %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/bookshelf.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ lang.t("blog.categories.in") }}
|
||||
{% for category in page.categories %}
|
||||
<a href="{{ category.url | url }}">
|
||||
{{- category.title -}}
|
||||
</a>
|
||||
{%- if loop.revindex > 1 %}, {% endif -%}
|
||||
{% endfor -%}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Post readtime -->
|
||||
{% if page.config.readtime %}
|
||||
{% set time = page.config.readtime %}
|
||||
<li class="md-nav__item">
|
||||
<div class="md-nav__link">
|
||||
{% include ".icons/material/clock-outline.svg" %}
|
||||
<span class="md-ellipsis">
|
||||
{{ "# minute watch" | replace("#", time) }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Table of contents, if integrated -->
|
||||
{% if "toc.integrate" in features %}
|
||||
{% include "partials/toc.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page content ?title=0&warningTitle=0 -->
|
||||
<article class="md-content__inner md-typeset">
|
||||
{% block content %}
|
||||
<!-- Tags -->
|
||||
{% include "partials/tags.html" %}
|
||||
|
||||
<!-- Actions -->
|
||||
{% include "partials/actions.html" %}
|
||||
|
||||
{% if "\x3ch1" not in page.content and not page.meta.cover %}
|
||||
<h1>{{ page.title | d(config.site_name, true)}}</h1>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
<div style="position: relative; padding-top: 56.25%;">
|
||||
<iframe width="100%" height="100%" src="{{ page.meta.embed }}?autoplay=1&title=0" allow="autoplay" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" style="position: absolute; inset: 0px;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a class="md-button md-button--primary" href="{{ page.meta.youtube }}">
|
||||
<span class="twemoji">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/></svg>
|
||||
</span>
|
||||
Watch on YouTube</a>
|
||||
<a class="md-button md-button--primary" href="{{ page.meta.peertube }}">
|
||||
<span class="twemoji">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 6.545v10.91L20.727 12M3.273 12v12L12 17.455M3.273 0v12L12 6.545"/></svg>
|
||||
</span>
|
||||
Watch on PeerTube</a>
|
||||
</p>
|
||||
|
||||
<!-- Page content -->
|
||||
<div>
|
||||
{{ page.content }}
|
||||
</div>
|
||||
|
||||
<!-- Source file information -->
|
||||
{% include "partials/source-file.html" %}
|
||||
|
||||
<!-- Was this page helpful? -->
|
||||
{% include "partials/feedback.html" %}
|
||||
{% endblock %}
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
26
theme/video.html
Normal file
26
theme/video.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{% extends "main.html" %}
|
||||
|
||||
<!-- Page content -->
|
||||
{% block container %}
|
||||
<div class="md-content" data-md-component="content">
|
||||
<div class="md-content__inner">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="md-typeset">
|
||||
{{ page.content }}
|
||||
</header>
|
||||
|
||||
<!-- Posts -->
|
||||
{% for post in posts %}
|
||||
{% include "partials/video.html" %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination %}
|
||||
{% block pagination %}
|
||||
{% include "partials/pagination.html" %}
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue