Base index page fleshed out but now requires polish
This commit is contained in:
20
frontend/themes/clippable/LICENSE
Normal file
20
frontend/themes/clippable/LICENSE
Normal file
@@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2021 YOUR_NAME_HERE
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
2
frontend/themes/clippable/archetypes/default.md
Normal file
2
frontend/themes/clippable/archetypes/default.md
Normal file
@@ -0,0 +1,2 @@
|
||||
+++
|
||||
+++
|
||||
0
frontend/themes/clippable/layouts/404.html
Normal file
0
frontend/themes/clippable/layouts/404.html
Normal file
11
frontend/themes/clippable/layouts/_default/baseof.html
Normal file
11
frontend/themes/clippable/layouts/_default/baseof.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
14
frontend/themes/clippable/layouts/index.html
Normal file
14
frontend/themes/clippable/layouts/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{{- partial "head.html" . -}}
|
||||
<script src="/js/index.js"></script>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<div class="content">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="video-gallery" id="main-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
frontend/themes/clippable/layouts/partials/head.html
Normal file
32
frontend/themes/clippable/layouts/partials/head.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
|
||||
{{ $title := print .Title }}
|
||||
{{ if .IsHome }}{{ $title = .Site.Title}}{{end}}
|
||||
<title>{{ $title }}</title>
|
||||
<meta property="og:title" content="{{ $title }}">
|
||||
<meta property="og:site_name" content="Shockrah's not-a-blog">
|
||||
{{ $url := .RelPermalink | absURL }}
|
||||
<meta property="og:url" content="{{$url}}">
|
||||
{{ $desc := print .Description }}
|
||||
{{ if .IsHome }}{{ $desc = .Params.Description }}{{end}}
|
||||
<meta property="og:description" content="{{ $desc }}">
|
||||
<meta property="og:type" content="website">
|
||||
{{ $ogvideo := "" }}
|
||||
{{ if .Params.Video }}
|
||||
{{ $ogvideo = .Params.Video }}
|
||||
<meta property="og:video" content="{{ $ogvideo }}">
|
||||
<meta property="og:video:width" content="640">
|
||||
<meta property="og:video:height" content="480">
|
||||
{{ else }}
|
||||
{{ $ogimage := "/favicon.png" }}
|
||||
{{ if .Params.Image }}
|
||||
{{ $ogimage = .Params.Image }}
|
||||
{{ end }}
|
||||
<meta property="og:image" content="{{ $ogimage }}">
|
||||
{{ end }}
|
||||
</head>
|
||||
|
||||
42
frontend/themes/clippable/static/css/style.css
Normal file
42
frontend/themes/clippable/static/css/style.css
Normal file
@@ -0,0 +1,42 @@
|
||||
html, body, div, tag {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: #212121;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
padding: 0 2em;
|
||||
line-height: 1.6em;
|
||||
color: whitesmoke;
|
||||
}
|
||||
.video-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-block {
|
||||
padding: 1em;
|
||||
width: 400px;
|
||||
line-height: 1em;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
background: #191818;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.pure-form {
|
||||
text-align: center;
|
||||
}
|
||||
.pure-img {
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
42
frontend/themes/clippable/static/js/index.js
Normal file
42
frontend/themes/clippable/static/js/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
"use strict";
|
||||
class Category {
|
||||
constructor(raw) {
|
||||
this.name = raw['name'];
|
||||
this.thumbnail_b64 = raw['thumbnail'];
|
||||
}
|
||||
as_div_str() {
|
||||
let container = document.createElement('div');
|
||||
container.className = 'video-block';
|
||||
let title = document.createElement('h2');
|
||||
title.innerText = this.name;
|
||||
let nail = document.createElement('img');
|
||||
nail.className = 'pure-img';
|
||||
if (!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
|
||||
nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`);
|
||||
}
|
||||
container.appendChild(title);
|
||||
container.appendChild(nail);
|
||||
document.getElementById('main-container').appendChild(container);
|
||||
return container;
|
||||
}
|
||||
}
|
||||
function ready_handler(e) {
|
||||
// Only let this make a get request once we're ready on the page
|
||||
if (document.readyState != 'complete') {
|
||||
return e;
|
||||
}
|
||||
// All we do here is basically make a get request to /api/categories
|
||||
const endpoint = 'http://localhost/api/categories';
|
||||
let xml = new XMLHttpRequest();
|
||||
xml.open('GET', endpoint, false); // sync request
|
||||
xml.send(null); // nothing required for stuff
|
||||
if (xml.getResponseHeader('Content-Type') == 'application/json') {
|
||||
let raw = JSON.parse(xml.responseText);
|
||||
for (const cat_raw of raw['categories']) {
|
||||
let cat = new Category(cat_raw);
|
||||
cat.as_div_str();
|
||||
}
|
||||
}
|
||||
return e;
|
||||
}
|
||||
document.addEventListener('readystatechange', ready_handler);
|
||||
21
frontend/themes/clippable/theme.toml
Normal file
21
frontend/themes/clippable/theme.toml
Normal file
@@ -0,0 +1,21 @@
|
||||
# theme.toml template for a Hugo theme
|
||||
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
|
||||
|
||||
name = "Clippable"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
|
||||
description = ""
|
||||
homepage = "http://example.com/"
|
||||
tags = []
|
||||
features = []
|
||||
min_version = "0.41.0"
|
||||
|
||||
[author]
|
||||
name = ""
|
||||
homepage = ""
|
||||
|
||||
# If porting an existing theme
|
||||
[original]
|
||||
name = ""
|
||||
homepage = ""
|
||||
repo = ""
|
||||
Reference in New Issue
Block a user