Link preview changes and video player

This commit is contained in:
Gabriel 2022-08-29 19:54:54 -04:00
parent ad5dd633e9
commit 332becdf6f
7 changed files with 67 additions and 54 deletions

View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
margin:0;
background-color: black;
overflow: hidden;
}
video{
width:100vw;
max-height: 100vh;
}
</style>
</head>
<body>
<video controls id="main">
<source src="">
</video>
<script>
//https://davidwalsh.name/query-string-javascript
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var source = document.createElement('source')
source.src = '/media/'+getUrlParameter('v');
document.getElementById('main').appendChild(source);
</script>
</body>
</html>

View file

@ -9,13 +9,13 @@
<meta property="og:url" content="{{.Permalink}}"> <meta property="og:url" content="{{.Permalink}}">
{{if .Params.video}} {{if .Params.video}}
<meta name="twitter:card" content="player"/> <meta name="twitter:card" content="player"/>
<meta property="og:video" content="https://libresolutions.network/video-embed?v={{.Params.video}}"> <meta property="og:video" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:video:url" content="https://libresolutions.network/video-embed?v={{.Params.video}}"> <meta property="og:video:url" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:video:secure_url" content="https://libresolutions.network/video-embed?v={{.Params.video}}"> <meta property="og:video:secure_url" content="https://libresolutions.network/embed?v={{.Params.video}}">
<meta property="og:type" content="video"> <meta property="og:type" content="video">
<meta name="twitter:player:width" content="480" /> <meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="360" /> <meta name="twitter:player:height" content="360" />
<meta property="twitter:player" content="https://libresolutions.network/video-embed?v={{.Params.video}}"> <meta property="twitter:player" content="https://libresolutions.network/embed?v={{.Params.video}}">
{{else}} {{else}}
{{if .Params.peertubeURL}} {{if .Params.peertubeURL}}
<meta property="og:video" content="{{.Params.peertubeURL}}"> <meta property="og:video" content="{{.Params.peertubeURL}}">

View file

@ -15,12 +15,19 @@
</section> </section>
{{end}} {{end}}
{{end}} {{end}}
<hr>
<h2>Recent Content</h2> <h2>Recent Content</h2>
{{range first 5 .Site.RegularPages}} {{range first 5 .Site.RegularPages}}
<section class="recent"> <section class="recent">
<a href="{{.Permalink}}"> <a href="{{.Permalink}}">
{{if .Params.video}}
<video controls>
<source src="{{.Params.video}}">
</video>
{{else}}
<img src="{{.Params.image}}"> <img src="{{.Params.image}}">
{{end}}
</a> </a>
<div> <div>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a> <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>

View file

@ -2,8 +2,12 @@
<channel> <channel>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<link>{{ .Permalink }}</link> <link>{{ .Permalink }}</link>
<description>{{.Params.description}}</description> <description>{{.Site.Data.details.description}}</description>
<image href="{{.Site.Params.image}}"/> <image>
<title>Libre Solutions Network</title>
<link>https://libresolutions.network</link>
<url>{{.Site.BaseURL}}{{.Site.Data.details.logo}}</url>
</image>
<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }} <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
<language>{{.}}</language>{{end}} <language>{{.}}</language>{{end}}
{{ with .OutputFormats.Get "RSS" }} {{ with .OutputFormats.Get "RSS" }}
@ -18,10 +22,10 @@
<guid>{{ .Permalink }}</guid> <guid>{{ .Permalink }}</guid>
<image>{{.Params.image}}</image> <image>{{.Params.image}}</image>
{{ if .Params.audio }} {{ if .Params.audio }}
<enclosure url="{{.Params.audio}}" /> <enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" />
{{end}} {{end}}
{{ if .Params.video}} {{ if .Params.video}}
<enclosure url="{{.Params.video}}" /> <enclosure url="{{.Site.BaseURL}}{{.Params.video}}" />
{{end}} {{end}}
<description>{{- .Content | html -}}</description> <description>{{- .Content | html -}}</description>
</item> </item>

View file

@ -1,5 +1,7 @@
<a href="{{ .Get 0 }}" class="link-preview"> <a href="{{ .Get 0 }}" class="link-preview">
{{if .Get 3}}
<img src='{{.Get 3}}'> <img src='{{.Get 3}}'>
{{end}}
<div> <div>
<h3>{{ .Get 1 }}</h3> <h3>{{ .Get 1 }}</h3>
<p>{{.Get 2 }}</p> <p>{{.Get 2 }}</p>

View file

@ -0,0 +1,27 @@
<style>
article video{
position: absolute;
top:0;
left: 0;
width:100vw;
max-height: 100vh;
max-width: initial;
}
</style>
<video controls id="main">
<source src="">
</video>
<script>
//https://davidwalsh.name/query-string-javascript
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var source = document.createElement('source')
source.src = '/media/'+getUrlParameter('v');
document.getElementById('main').appendChild(source);
</script>

View file

@ -42,6 +42,9 @@ nav{
border-radius:30%; border-radius:30%;
} }
h1{
font-size:250%;
}
p { p {
} }
@ -159,6 +162,7 @@ section {
padding: 1.25rem; padding: 1.25rem;
border-radius: 1rem; border-radius: 1rem;
min-width: 30vw; min-width: 30vw;
font-size:125%;
} }
article { article {
@ -212,15 +216,22 @@ article img,
article video, article video,
article iframe { article iframe {
align-self: center; align-self: center;
max-width: 40rem; max-width: 60rem;
width: 80%;
min-height: fit-content;
}
article iframe{
height:30rem;
} }
section iframe, article>section>a{
article iframe { display:flex;
width: 80%; flex-direction: column;
height: 25rem; align-items: center;
} }
table{ table{
width:fit-content; width:fit-content;
} }
@ -246,9 +257,6 @@ video{
text-align: left; text-align: left;
max-width: 80%; max-width: 80%;
} }
.link-preview>*{
margin:0.5rem;
}
.link-preview>img{ .link-preview>img{
max-width: 20%; max-width: 20%;
} }
@ -285,7 +293,9 @@ aside .listing img{
padding:0; padding:0;
} }
.recent img, .recent img,
.featured img{ .featured img,
.recent video,
.featured video{
max-width:20rem; max-width:20rem;
max-height:10rem; max-height:10rem;
margin:1rem; margin:1rem;