mirror of
https://github.com/safing/web
synced 2025-04-24 21:09:07 +00:00
Integrate videos into jekyll content
This commit is contained in:
davegson
parent
ad4a3e668d
commit
d31d237126
7 changed files with 119 additions and 2 deletions
_includes
_layouts
_videos
assets/img/thumbnails/video
video
|
|
@ -59,10 +59,10 @@
|
|||
<p class="text-white text-xl md:mb-6">Follow Us</p>
|
||||
<ul class="list-reset mb-6">
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.podcast_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Podcast</a>
|
||||
<a href="{{ site.video_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Video Updates</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.invidious_channel_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Video Updates</a>
|
||||
<a href="{{ site.podcast_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Podcast</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.blog_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Blog</a>
|
||||
|
|
|
|||
1
_includes/video_wrapper.html
Normal file
1
_includes/video_wrapper.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<video src="{{ page.video_source }}" controls></video>
|
||||
27
_layouts/video.html
Normal file
27
_layouts/video.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
layout: page_container
|
||||
title: "The Safing Podcast"
|
||||
heading: "The Safing Podcast"
|
||||
container_class: "podcast"
|
||||
---
|
||||
|
||||
<div class="text-center">
|
||||
{% assign title_length = page.title | size %}
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">#{{ page.title | slice: 2, 2 }}</span>
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">{{ page.title | slice: 7, title_length }}</h2>
|
||||
<p class="opacity-55">{{ page.date | date: "%B %-d, %Y" }}</p>
|
||||
<div class="flex mx-auto justify-center pt-5">
|
||||
<a href="{{ site.twitter_url }}" class="opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
|
||||
<img style="height: 1.1rem; width: auto;" src="{{ site.img_url }}icons/twitter.svg">
|
||||
</a>
|
||||
<a href="{{ site.github_url }}" class="pl-4 pr-4 opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
|
||||
<img style="height: 1.19rem; width: auto;" src="{{ site.img_url }}icons/github.svg">
|
||||
</a>
|
||||
<a href="{{ site.reddit_url }}" class="opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
|
||||
<img style="height: 1.18rem; width: auto;" src="{{ site.img_url }}icons/reddit.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ content }}
|
||||
</div>
|
||||
29
_videos/2020-05-08-the-account-server-is-up-and-running.md
Normal file
29
_videos/2020-05-08-the-account-server-is-up-and-running.md
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
# ⚠️ ALWAYS follow this format: "#001 - Some sweet title"
|
||||
# this has to be consistent for displaying only the episode number or only the title
|
||||
title: "#004 - The Account Server is up and running"
|
||||
date: 2020-05-08
|
||||
video_source: https://assets.safing.io/video/progress_updates/4.mp4
|
||||
youtube_hash: vZSZUipikh8
|
||||
custom_thumbnail_name: 004-account-server-is-running
|
||||
---
|
||||
|
||||
{% include video_wrapper.html %}
|
||||
|
||||
### Description
|
||||
|
||||
Hey there, the Safing Account server is up and running. 🙌
|
||||
<https://account.safing.io/>
|
||||
|
||||
It's the place where you can manage and sign up to your SPN/Safing account. Next to payments, the server also manages the current waitlist and the future SPN authentication. Authorization will happen on another server, but that's another story.
|
||||
|
||||
For all you Kickstarter backers, your are already first in line! We'll send you instructions how to set up or link your accounts in a few weeks.
|
||||
|
||||
### Links
|
||||
|
||||
- Listen to our Podcast:
|
||||
<https://safing.io/podcast/>
|
||||
- Download the Portmaster Download:
|
||||
<https://github.com/Safing/portmaster/#portmaster>
|
||||
- Check out our latest Newsletter:
|
||||
<https://t80607841.emailsys1a.net/mailing/184/2825189/362888995/71/1ce681e04a/index.html>
|
||||
|
Before 
(image error) Size: 99 KiB After 
(image error) Size: 99 KiB
|
BIN
assets/img/thumbnails/video/placeholder.png
Normal file
BIN
assets/img/thumbnails/video/placeholder.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 97 KiB |
60
video/index.html
Normal file
60
video/index.html
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
title: Safing - Video Updates
|
||||
layout: page
|
||||
---
|
||||
|
||||
<section style="padding-top: 16rem;">
|
||||
<div class="items-center h-full">
|
||||
<div class="container mx-auto px-8 sm:px-0 flex">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
|
||||
<div class="py-12 bg-white">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="lg:text-center">
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">Follow Us</span>
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">Video Updates</h2>
|
||||
<div class="flex mx-auto justify-center pt-5">
|
||||
<a href="{{ site.podcast_itunes_url }}" class="opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
|
||||
<img style="height: 1.3rem; width: auto;" src="{{ site.img_url }}icons/podcast.svg">
|
||||
</a>
|
||||
<a href="{{ site.podcast_feed_url }}" class="pl-4 pr-4 opacity-55 hover:opacity-100 ease-in-out duration-150" target="_blank">
|
||||
<img style="height: 1.3rem; width: auto;" src="{{ site.img_url }}icons/rss.svg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-32">
|
||||
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10">
|
||||
{% assign sorted_videos = site.videos | reverse %}
|
||||
{% for video in sorted_videos %}
|
||||
<li class="mt-10 md:mt-0">
|
||||
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
||||
<a href="{{ video.url }}">
|
||||
{% if video.custom_thumbnail_name == null %}.
|
||||
{% assign thumbnail_name = 'placeholder' %}
|
||||
{% else %}
|
||||
{% assign thumbnail_name = video.custom_thumbnail_name %}
|
||||
{% endif %}
|
||||
<img src="{{ site.img_url }}thumbnails/video/{{ thumbnail_name }}.png" alt="">
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
|
||||
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
|
||||
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
|
||||
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
|
||||
</button>
|
||||
</span>
|
||||
<div class="pt-6">
|
||||
<span class="opacity-25">{{ video.date | date: "%-d. %b %Y" }}</span>
|
||||
{% assign title_length = video.title | size %}
|
||||
<p>{{ video.title | slice: 7, title_length }} - #{{ video.title | slice: 2, 2 }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<br class="mb-12">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Reference in a new issue