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}}"> | <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}}"> | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  |  | ||||||
							
								
								
									
										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%; |     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; | ||||||
|  |  | ||||||
		Loading…
	
		Reference in a new issue