Link preview changes and video player
This commit is contained in:
parent
ad5dd633e9
commit
332becdf6f
7 changed files with 67 additions and 54 deletions
|
@ -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>
|
|
@ -9,13 +9,13 @@
|
|||
<meta property="og:url" content="{{.Permalink}}">
|
||||
{{if .Params.video}}
|
||||
<meta name="twitter:card" content="player"/>
|
||||
<meta property="og:video" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
||||
<meta property="og:video:url" content="https://libresolutions.network/video-embed?v={{.Params.video}}">
|
||||
<meta property="og:video:secure_url" 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/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 name="twitter:player:width" content="480" />
|
||||
<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}}
|
||||
{{if .Params.peertubeURL}}
|
||||
<meta property="og:video" content="{{.Params.peertubeURL}}">
|
||||
|
|
|
@ -15,12 +15,19 @@
|
|||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<hr>
|
||||
<h2>Recent Content</h2>
|
||||
{{range first 5 .Site.RegularPages}}
|
||||
|
||||
<section class="recent">
|
||||
<a href="{{.Permalink}}">
|
||||
{{if .Params.video}}
|
||||
<video controls>
|
||||
<source src="{{.Params.video}}">
|
||||
</video>
|
||||
{{else}}
|
||||
<img src="{{.Params.image}}">
|
||||
{{end}}
|
||||
</a>
|
||||
<div>
|
||||
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
|
||||
|
|
|
@ -2,8 +2,12 @@
|
|||
<channel>
|
||||
<title>{{ .Title }}</title>
|
||||
<link>{{ .Permalink }}</link>
|
||||
<description>{{.Params.description}}</description>
|
||||
<image href="{{.Site.Params.image}}"/>
|
||||
<description>{{.Site.Data.details.description}}</description>
|
||||
<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 }}
|
||||
<language>{{.}}</language>{{end}}
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
|
@ -18,10 +22,10 @@
|
|||
<guid>{{ .Permalink }}</guid>
|
||||
<image>{{.Params.image}}</image>
|
||||
{{ if .Params.audio }}
|
||||
<enclosure url="{{.Params.audio}}" />
|
||||
<enclosure url="{{.Site.BaseURL}}{{.Params.audio}}" />
|
||||
{{end}}
|
||||
{{ if .Params.video}}
|
||||
<enclosure url="{{.Params.video}}" />
|
||||
<enclosure url="{{.Site.BaseURL}}{{.Params.video}}" />
|
||||
{{end}}
|
||||
<description>{{- .Content | html -}}</description>
|
||||
</item>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<a href="{{ .Get 0 }}" class="link-preview">
|
||||
{{if .Get 3}}
|
||||
<img src='{{.Get 3}}'>
|
||||
{{end}}
|
||||
<div>
|
||||
<h3>{{ .Get 1 }}</h3>
|
||||
<p>{{.Get 2 }}</p>
|
||||
|
|
27
layouts/shortcodes/video-player.html
Normal file
27
layouts/shortcodes/video-player.html
Normal 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>
|
|
@ -42,6 +42,9 @@ nav{
|
|||
border-radius:30%;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size:250%;
|
||||
}
|
||||
p {
|
||||
}
|
||||
|
||||
|
@ -159,6 +162,7 @@ section {
|
|||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
min-width: 30vw;
|
||||
font-size:125%;
|
||||
}
|
||||
|
||||
article {
|
||||
|
@ -212,15 +216,22 @@ article img,
|
|||
article video,
|
||||
article iframe {
|
||||
align-self: center;
|
||||
max-width: 40rem;
|
||||
max-width: 60rem;
|
||||
width: 80%;
|
||||
min-height: fit-content;
|
||||
}
|
||||
article iframe{
|
||||
height:30rem;
|
||||
}
|
||||
|
||||
section iframe,
|
||||
article iframe {
|
||||
width: 80%;
|
||||
height: 25rem;
|
||||
article>section>a{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
table{
|
||||
width:fit-content;
|
||||
}
|
||||
|
@ -246,9 +257,6 @@ video{
|
|||
text-align: left;
|
||||
max-width: 80%;
|
||||
}
|
||||
.link-preview>*{
|
||||
margin:0.5rem;
|
||||
}
|
||||
.link-preview>img{
|
||||
max-width: 20%;
|
||||
}
|
||||
|
@ -285,7 +293,9 @@ aside .listing img{
|
|||
padding:0;
|
||||
}
|
||||
.recent img,
|
||||
.featured img{
|
||||
.featured img,
|
||||
.recent video,
|
||||
.featured video{
|
||||
max-width:20rem;
|
||||
max-height:10rem;
|
||||
margin:1rem;
|
||||
|
|
Loading…
Reference in a new issue