gabriel/freedom
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Activity

RSS updates, and additional features

Browse source
This commit is contained in:
Gabriel 2022-08-22 20:03:48 -04:00
parent eebfde5c9a
commit ad5dd633e9
16 changed files with 761 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
layouts/_default/list.html
View file

@ -4,15 +4,39 @@
{{partial "head" .}}
</head>
<body>
{{partial "header" .}}<hr>
<main>{{.Content}}</main>
<aside>
<ul>
{{range .Pages}}
<li><a href="{{.Permalink}}">{{.Title}}</a></li>
{{partial "header" .}}
<main>
<section>
{{ if .Content}}
<article>
{{.Content}}
</article>
{{end}}
</ul></aside>
</body>
<hr>
{{ if .Pages }}
<article>
{{range .Pages}}
<section class="listing">
<div>
{{ if .Params.video}}
<video autoplay muted>
<source src="{{.Params.video}}">
</video>
{{else}}
<a href="{{.Permalink}}">
<img src="{{.Params.image}}">
</a>
{{end}}
</div>
<div>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
<p>{{.Params.description}}</p>
</div>
</section>
{{end}}
</article>
{{end}}
</main>
{{partial "footer" .}}
</body>
</html>

2
layouts/_default/rss.xml
View file

@ -17,7 +17,7 @@
{{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
<guid>{{ .Permalink }}</guid>
<itunes:image href="{{.Params.image}}"/>
<enclosure url="{{.Params.videoURL}}" />
<enclosure url="{{.Params.video}}" />
<description>{{- .Content | html -}}</description>
</item>
{{ end }}

18
layouts/_default/single.html
View file

@ -4,9 +4,19 @@
{{partial "head" .}}
</head>
<body>
{{partial "header" .}}<hr>
<main>{{.Content}}</main>
</body>
<hr>
{{partial "header" .}}
<main>
<article>
<section>
{{.Content}}
</section>
{{ if .Params.author}}
<section>
{{partial "metadata" .}}
</section>
{{end}}
</article>
</main>
{{partial "footer" .}}
</body>
</html>

34
layouts/index.html
View file

@ -4,10 +4,34 @@
{{partial "head" .}}
</head>
<body>
{{partial "header" .}}<hr>
<main>{{.Content}}</main>
<aside>{{partial "sidebar" .}}</aside>
</body>
{{partial "header" .}}
<main>
<section>
<article>
{{.Content}}
</article>
{{ if .Site.Data.details.social_links}}
<hr>
{{partial "footer" .}}
<article>
<h2>Stay up to date</h2>
<div id="social-links">
{{range .Site.Data.details.social_links}}
<div class="social-link">
<a href="{{.href}}">
<img src="{{.img}}">
</a>
<a href="{{.href}}"><strong>{{.title}}</strong></a>
</div>
{{end}}
</div>
</article>
{{end}}
</section>
<article id="sidebar">
{{partial "sidebar" .}}
</article>
</main>
{{ partial "footer" .}}
</body>
</html>

214
layouts/interverse/list.html Normal file
View file

@ -0,0 +1,214 @@
<!DOCTYPE html>
<html>
<head>
{{partial "head" .}}
<script defer src="/alpine.js" type="text/javascript"></script>
<script src="/helper.js"></script>
<style>
.interverse {
display: flex;
flex-direction: column;
align-items: center;
}
.interverse h1 {
text-align: center;
}
.interverse img {
max-width: 15rem;
max-height: 15rem;
}
.interverse section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
box-shadow: none;
}
.interverse-connection-preview {
display: flex;
flex-direction: column;
padding: 1rem;
margin: 0.5rem;
align-items: center;
}
.interverse-connection {
margin: 0.25rem;
padding: 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.interverse-resource {
margin: 2rem;
}
#interverse-resource-groups {
align-items: flex-start;
}
</style>
</head>
<body>
{{partial "header" .}}
<main class="interverse" x-data x-if="Alpine.store('data')">
<section>{{.Content}}</section>
<section id="interverse-details">
<img x-bind:src="Alpine.store('data')['image']">
<div style="margin-left:3rem;">
<h1 x-text="Alpine.store('data')['name']"></h1>
<a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a>
</div>
</section>
<section id="interverse-resource-groups">
<template x-for="(group,name) in Alpine.store('data')['resource_groups']">
<div>
<h1 x-text="name"></h1>
<div class="interverse-group">
<template x-for="resource in group">
<a x-bind:href="resource['location']">
<div class="interverse-resource">
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
</div>
</div>
</template>
</section>
<section id="interverse-resources">
<template x-for="resource in Alpine.store('data')['resources']">
<a x-bind:href="resource['location']">
<div class="interverse-resource">
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
</section>
<div id="interverse-groups">
<template x-for="(group,name) in Alpine.store('data')['connection_groups']">
<div>
<h1 x-text="name"></h1>
<section class="interverse-group">
<template x-for="link in group">
<div class="interverse-connection" x-data="{connected:false">
<template x-if="Alpine.store(link)['name'] !=''">
<div class='interverse-connection-preview'
x-on:click="initialize(link+'/.well-known/interverse')">
<h3 x-text="Alpine.store(link)['name']"></h3>
<img x-bind:src="Alpine.store(link)['image']">
<a x-bind:href="link" x-text="link"></a>
</div>
</template>
<template x-if="Alpine.store(link) == undefined">
<div>
<a x-bind:href="link">
<p x-text="link"></p>
</a>
</div>
</template>
</div>
</template>
</section>
</div>
</template>
</div>
<h3 style="text-align:center"></h3>
<section id="interverse-connections">
<template x-for="connection in Alpine.store('data')['connections']">
<div class="interverse-connection">
<template x-if="Alpine.store(connection)['version'] >=0">
<div x-on:click="initialize(connection+'/.well-known/interverse')">
<h3 x-text="Alpine.store(connection)['name']"></h3>
<template x-if="Alpine.store(connection)['image']!=''">
<img x-bind:src="Alpine.store(connection)['image']">
</template>
</div>
</template>
<template x-if="name == ''">
<div>
<a x-bind:href="connection" x-text="connection"></a>
</template>
</div>
</template>
</div>
<div id="interverse-contact">
<template x-for="contact in Alpine.store('data')['contact']">
<div class="interverse-contact">
</div>
</template>
</div>
</main>
<script>
var t = new Date();
var timestamp = t.getTime();
var main_url = "/.well-known/interverse";
if (getUrlParameter('s') && getUrlParameter("url")) {
var uri = "";
main_url = getUrlParameter('s') + "://" + getUrlParameter("url") + '/.well-known/interverse?t=' + timestamp;
} else {
if (getUrlParameter('url')) {
main_url = "https://" + getUrlParameter('url') + '/.well-known/interverse?t=' + timestamp;
}
}
document.addEventListener('alpine:init', function () {
initialize(main_url);
});
function initialize(url) {
Alpine.store("data", {});
fetchdata(url, function (e) {
data = JSON.parse(e.target.response);
raw_data = JSON.parse(e.target.response);
Alpine.store("data", data);
var connections = raw_data['connections'];
for (group in data['connection_groups']) {
for (link in data['connection_groups'][group]) {
connections.push(data['connection_groups'][group][link]);
}
}
var t = new Date();
var timestamp = t.getTime();
for (var i = 0; i < connections.length; i++) {
fetchdata(connections[i] + '/.well-known/interverse?t=' + timestamp, function (e) {
try {
dat = JSON.parse(e.target.response);
console.log(dat);
Alpine.store(dat['location'], dat);
} catch {
console.log("Failed to parse connection JSON");
}
});
}
});
}
</script>
</body>
{{partial "footer" .}}
</html>

2
layouts/partials/footer.html
View file

@ -1,3 +1,3 @@
<footer>
<p><a href="">Freedom</a> created by <a href="https://gabe.rocks">Gabriel</a></p>
<p><a href="https://codeberg.org/gabe/Freedom">Freedom</a> created by <a href="https://gabe.rocks">Gabriel</a></p>
</footer>

40
layouts/partials/head.html
View file

@ -1,3 +1,39 @@
<title>{{ .Title}}</title>
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/style.css">
<title>{{.Title}}</title>
<meta charset="utf-8" />
<meta name="title" content="{{ .Title }}">
<meta name="description" content="{{.Params.description}}">
<meta name="og:site_name" content="Libre Solutions Network">
<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{.Params.description}}">
<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: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}}">
{{else}}
{{if .Params.peertubeURL}}
<meta property="og:video" content="{{.Params.peertubeURL}}">
{{else}}
{{if .Params.audioURL}}
<meta property="og:audio" content="https://libresolutions.network/media/{{.Params.audioURL}}">
<meta property="og:type" content="audio">
{{else}}
<meta property="og:type" content="website">
<meta property="twitter:card" content="summary_large_image">
{{end}}
{{end}}
{{end}}
{{ if .Params.image }}
<meta property="og:image" content="https://libresolutions.network/media/{{.Params.image}}">
<meta property="twitter:image" content="https://libresolutions.network/media/{{.Params.image}}">
{{else}}
<meta property="og:image" content="https://libresolutions.network/logo.png">
<meta property="twitter:image" content="https://libresolutions.network/logo.png">
{{end}}

11
layouts/partials/header.html
View file

@ -1,9 +1,14 @@
<header>
<h1>{{.Site.Title }}</h1>
<img src="{{.Site.Data.details.logo}}">
<div>
<h1>{{.Site.Data.details.name }}</h1>
<i>{{.Site.Data.details.description}}</i>
</div>
<nav>
<a href="/"><h3>Home</h3></a>
<a href="/"><h2>Home</h2></a>
{{ range .Site.Sections}}
<a href="{{.Permalink}}"><h3>{{.Title}}</h3></a>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
{{end}}
</nav>
</header>

15
layouts/partials/metadata.html Normal file
View file

@ -0,0 +1,15 @@
<div class="metadata">
<div>
{{$author := index .Site.Data.details.staff (.Params.author | default "default")}}
<h2>{{$author.name}}</h2>
<p>Date: {{.Date | time.Format "Jan 02 2006"}}</p>
</div>
<h4>Tags:</h4>
<ul>
{{ range (.GetTerms "tags")}}
<a href="{{.Permalink}}"><li>{{.LinkTitle}}</li></a>
{{end}}
</ul>
</div>
</div>

31
layouts/partials/sidebar.html
View file

@ -1,5 +1,30 @@
<h3>Sidebar</h3>
<h4>Recent Content</h4>
{{if .Site.Data.details.featured}}
<h2>Featured</h2>
{{ range .Site.Data.details.featured}}
<section class="featured">
<a href="{{.href}}">
<img src="{{.img}}">
</a>
<div>
<a href="{{.href}}">
<h3>{{.title}}</h3>
</a>
<p>{{.description}}</p>
</div>
</section>
{{end}}
{{end}}
<h2>Recent Content</h2>
{{range first 5 .Site.RegularPages}}
<h4>Featured</h4>
<section class="recent">
<a href="{{.Permalink}}">
<img src="{{.Params.image}}">
</a>
<div>
<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
<p>{{.Params.description}}</p>
</div>
</section>
{{end}}

30
layouts/rss.xml Normal file
View file

@ -0,0 +1,30 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<description>{{.Params.description}}</description>
<image href="{{.Site.Params.image}}"/>
<generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
<language>{{.}}</language>{{end}}
{{ with .OutputFormats.Get "RSS" }}
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
{{ end }}
{{ range first 15 .Site.RegularPages }}
<item>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
{{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
<guid>{{ .Permalink }}</guid>
<image>{{.Params.image}}</image>
{{ if .Params.audio }}
<enclosure url="{{.Params.audio}}" />
{{end}}
{{ if .Params.video}}
<enclosure url="{{.Params.video}}" />
{{end}}
<description>{{- .Content | html -}}</description>
</item>
{{ end }}
</channel>
</rss>

2
layouts/shortcodes/audio.html
View file

@ -1,3 +1,3 @@
<audio>
<source src='{{.Get 0 }}'>
<source src='{{.Get "src" }}'>
</audio>

2
layouts/shortcodes/embed.html
View file

@ -1,2 +1,2 @@
<iframe src='{{.Get 0 }}'>
<iframe src='{{.Get "src" }}'>
</iframe>

14
layouts/shortcodes/image.html Normal file
View file

@ -0,0 +1,14 @@
{{ if .Get "href"}}
<a href='{{.Get "href"}}'>
{{end}}
<img
src='{{.Get "src"}}'
{{if .Get "alt"}}
alt='{{.Get "alt"}}'
{{end}}
{{if .Get "float"}}
style='float:{{.Get "float"}}'
{{end}}>
{{ if .Get "href"}}
</a>
{{end}}

2
layouts/shortcodes/video.html
View file

@ -1,3 +1,3 @@
<video controls>
<source src='{{.Get 0 }}'>
<source src='{{.Get "src" }}'>
</video>

367
static/css/theme.css
View file

@ -1,55 +1,352 @@
body{
--theme-primary-color:black;
--theme-secondary-color:white;
--theme-accent-color:gold;
background-color: var(--theme-primary-color);
color:var(--theme-secondary-color);
width:100vw;
margin:0;
display:flex;
body {
line-height: 1.25;
--theme-color-primary: black;
--theme-color-secondary: white;
--theme-color-accent: #1d7fd4;
--theme-color-accent-transparent: #1d7fd444;
--theme-color-accent2: #ebb716;
--theme-color-accent2-transparent: #ebb71644;
width: 100vw;
margin: 0px;
padding: 0px;
overflow-x: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
color: var(--theme-color-secondary);
background-color: var(--theme-color-primary);
}
.background-photo {
position: fixed;
top: 40vh;
max-width: 80vw;
max-height: 70vh;
z-index: -1;
}
header{
margin-top:1rem;
}
header,footer{
text-align: center;
width:100vw;
}
footer{
margin-bottom:0;
}
nav{
background-color:rgba(0,0,0,0.7);
border-radius:30%;
}
p {
}
a {
color: var(--theme-color-accent2);
}
a:visited {
color: var(--theme-color-accent2);
}
hr {
width: 100%;
margin-top: 2rem;
margin-bottom: 2rem;
color: var(--theme-color-accent2);
}
main,aside {
padding:2.5rem;
max-width:80rem;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
padding:1rem;
}
.listing {
width: 100%;
margin: 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.listing-preview {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
main,aside{
border:1px solid white;
display:flex;
img,
video {
max-width: 95%;
}
audio {
width: 100%;
}
.metadata {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.metadata>div {
margin: 1rem;
}
.metadata p {
max-width: 20rem;
}
.metadata-author {
padding: 0.5rem;
display: flex;
flex-direction: column;
margin:1.5rem;
padding:1rem;
align-items: center;
flex-wrap: nowrap;
}
main{
min-width: 40%;
max-width: 60rem;
.metadata-author>img {
max-width: 5rem;
border-radius: 3rem;
}
aside{
min-width: 30rem;
}
header,footer{
width:100vw;
display:flex;
header {
text-align: center;
background-color: transparent;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-evenly;
bottom: 0;
}
nav{
display:flex;
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left:10%;
align-items: center;
justify-content: space-evenly;
}
nav>a{
nav>* {
margin: 1rem;
}
section {
display:flex;
flex-direction: column;
align-items: center;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 1.25rem;
border-radius: 1rem;
min-width: 30vw;
}
article {
min-width: 30rem;
background-color: #000015b6;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 1rem;
box-shadow: 0 0 0.45rem var(--theme-color-accent);
display: flex;
flex-direction: column;
align-items: center;
padding-left:10%;
padding-right:10%;
}
blockquote {
margin-left: 10%;
padding-left: 5%;
border-left: 0.5rem solid var(--theme-color-accent2);
font-style: italic;
}
section ul,
section ol,
article ol,
article ul {
width: 90%;
}
article>a {
text-align: center;
}
article h3,
section h3,
article h4,
section h4,
article h5,
article p {
width: 100%;
}
article h3 {
text-decoration: underline;
}
article img,
article video,
article iframe {
align-self: center;
max-width: 40rem;
}
section iframe,
article iframe {
width: 80%;
height: 25rem;
}
table{
width:fit-content;
}
td,
th {
margin: 0;
border: 1px solid var(--theme-color-accent2);
padding: 0.5rem;
text-align: left !important;
}
video{
background-color:black;
}
.link-preview{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
padding:1.5%;
justify-content: center;
text-decoration: none;
text-align: left;
max-width: 80%;
}
.link-preview>*{
margin:0.5rem;
}
.link-preview>img{
max-width: 20%;
}
.link-preview>div>p{
text-decoration: none !important;
color: var(--theme-color-secondary);
}
.listing img,
.listing video {
max-width:25rem;
margin:1rem;
}
a,
hr{
color:var(--theme-accent-color);
aside .listing img{
max-height: 15vh;
}
hr{
width:100%;
margin-top:1.5rem;
margin-bottom:1.5rem;
#sidebar {
padding:1rem;
padding-top:0;
margin:2rem;
margin-top:3rem;
}
.recent,.featured{
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.recent *,
.featured *{
margin:0;
padding:0;
}
.recent img,
.featured img{
max-width:20rem;
max-height:10rem;
margin:1rem;
}
#social-links{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.social-link{
display:flex;
flex-direction: column;
align-items: center;
margin:1rem;
}
.social-link img{
width:5rem;
}
@media print {
body{
background-color: white;
}
header,footer{
display:none;
}
body>img{
display:none;
}
img{
max-height: 60vh;
}
*,main,section{
color:black;
background-color: white;
border:none;
box-shadow: none;
padding:0;
max-width:100vw;
}
main{
max-width:100vw;
}
}
@media screen and (orientation:portrait){
main{
flex-direction: column;
}
}