Erstes Commit

hugo/static/css/bookmarks.css

@@ -0,0 +1,114 @@
+:root {
+  --color-hl: #a19bff;
+  --color-fg: #333;
+  --color-fg2: #666;
+  --color-bg: #ccc;
+  --color-bg2: #999;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg: #ccc;
+    --color-fg2: #999;
+    --color-bg: #333;
+    --color-bg2: #666;
+  }
+}
+
+::selection {
+  background-color:var(--color-hl); color:#333;
+}
+
+html { overflow-y:scroll; background-color:var(--color-bg); }
+body { padding:4vw; margin:0; font-family:sans-serif;
+  color:var(--color-fg); accent-clor:var(--color-hl); position:relative; }
+a { color:inherit; text-decoration:none; -webkit-user-select:none;
+  -moz-user-select:none; -ms-user-select:none; user-select:none; }
+.edit { display:block; color:var(--color-hl); text-align:center; text-decoration:none;
+  width:30px; line-height:30px; display:block; transition:all 0.2s;
+  cursor:pointer; margin:0; padding:0; position:absolute; top:0; right:0;
+  border-radius:100px; }
+.edit:hover { color:var(--color-bg); background:var(--color-hl);
+  text-decoration:none; }
+.category { overflow:hidden; }
+.category h1 { font-size:15px; margin:0; line-height:30px; outline:none;
+  position:relative; padding:0 35px 0 0;
+  border-bottom:1px solid var(--color-fg); }
+.category h1 a:hover { text-decoration:none; }
+.category .title { cursor:pointer; transition:color 0.2s; }
+.category .title:hover { color:var(--color-hl); }
+.category .badge { display:inline-block; font-weight:normal;
+  font-size:8px; padding:0 5px; border:1px solid var(--color-bg2);
+  border-radius:100px; line-height:14px; text-align:center;
+  min-width:11px; margin-left:10px; vertical-align:middle;
+  color:var(--color-fg2); font-family:monospace; }
+.bookmarks { display:none; list-style:none; margin:0; padding:30px 0; }
+.category.open .bookmarks { display:block; }
+.bookmark { display:block; padding:0; position:relative;
+  border-bottom:1px dotted var(--color-bg2); }
+.bookmark .link { color:inherit; display:block; min-height:20px;
+  line-height:20px; padding:2px 0; }
+.bookmark .link:hover { background-color:#ffffff0f; }
+.bookmark .editicon { width:20px; height:20px; float:left;
+  margin-right:5px; border-radius:2px; position:relative;
+  cursor:pointer; margin-top:2px; transition:all 0.2s; }
+.bookmark .editicon img { width:16px; height:16px; position:absolute;
+  top:2px; left:2px; }
+.bookmark .editicon:hover { background-color:var(--color-hl); }
+button,
+.button { display:inline-block; padding:5px 20px; text-decoration:none;
+  color:var(--color-fg); background:transparent; font-size:inherit;
+  border:1px solid var(--color-fg); cursor:pointer; transition:all 0.2s;
+  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
+  user-selct:none; }
+button:hover,
+.button:hover { color:var(--color-hl); border-color:var(--color-hl); }
+.buttons { margin-top:20px; }
+
+#slidein { position:fixed; top:0; right:0; width:300px; height:100%;
+  transform:translateX(100%); transition:transform 0.3s;
+  background:rgba(0,0,0,0.2); backdrop-filter:blur(10px); }
+#slidein.open { transform:translateX(0); }
+#slidein .closer { position:absolute; top:10px; right:10px; width:30px;
+  height:30px; cursor:pointer; }
+#slidein .closer:before,
+#slidein .closer:after { display:block; content:""; width:30px;
+  height:1px; background:var(--color-fg); position:absolute; top:50%;
+  left:0; }
+#slidein .closer:before { transform:rotate(45deg); }
+#slidein .closer:after { transform:rotate(-45deg); }
+#slidein .inner { padding:50px 20px 20px 20px; color:var(--color-fg); }
+
+.field label { display:block; margin:10px 0 3px 0; }
+.field label:after { display:inline; content:":"; }
+.field input[type="text"],
+.field select { display:block; width:100%; box-sizing:border-box;
+  padding:3px 5px; border:1px solid var(--color-fg);
+  color:var(--color-fg); background:var(--color-bg); font-size:inherit; }
+
+#favlet { position:absolute; top:10px; right:10px; color:var(--color-bg2);
+  text-decoration:none; font-size:10px; cursor:pointer;
+  transition:color 0.2s; }
+#favlet:hover { color:var(--color-hl); }
+.favletcode { word-break:break-all; }
+
+#addcontent { padding:5vw; }
+
+/*
+@media screen and (min-width:500px) {
+  .categories { margin:-10px; }
+  .categories:after { display:table; content:""; clear:left; }
+  .category { float:left; width:50%; box-sizing:border-box; padding:0 10px; }
+  .category:nth-of-type(2n+1) { clear:left; }
+}
+@media screen and (min-width:750px) {
+  .category { width:33.33%; }
+  .category:nth-of-type(2n+1) { clear:none; }
+  .category:nth-of-type(3n+1) { clear:left; }
+}
+@media screen and (min-width:1000px) {
+  .category { width:25%; }
+  .category:nth-of-type(3n+1) { clear:none; }
+  .category:nth-of-type(4n+1) { clear:left; }
+}
+*/

hugo/static/img/comicnav.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 200 30" height="30" width="200">
+  <defs id="defs2"/>
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g transform="translate(0,-303.77081)" id="layer1">
+    <path id="path817" d="m 50,303.77081 -40,14.70001 40,15.29999 z" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.69282031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <rect y="303.77081" x="0" height="29.999996" width="10" id="rect819" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.62703514;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"/>
+    <path id="path817-3" d="M 100.00001,303.77081 60,318.47082 l 40.00001,15.29999 z" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.69282031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <path id="path817-3-6" d="M 100,303.77081 140.00001,318.47082 100,333.77081 Z" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.69282031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <path id="path817-3-6-7" d="M 150,303.77081 190.00001,318.47082 150,333.77081 Z" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.69282031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <rect y="303.77081" x="190" height="29.999996" width="10" id="rect819-5" style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.62703514;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"/>
+  </g>
+</svg>

hugo/static/js/alpine-alphabreed.js

@@ -0,0 +1,134 @@
+document.addEventListener('alpine:init', () => {
+	Alpine.store('alphabreed', {
+		backUrl: '/',
+		pending: false,
+
+		async apiCall(method, url, data) {
+			this.pending = true;
+			const options = {
+				method: method,
+				headers: { 'Authorization': localStorage.getItem('alphabreedtoken') }
+			};
+			if (data) {
+				options.body = new FormData();
+				for (let key in data)
+					if (data.hasOwnProperty(key))
+						options.body.append(key, data[key]);
+			}
+			const response = await fetch(url, options);
+			this.pending = false;
+			if (!response.ok)
+				return false;
+			if (response.status == 204)
+				return true;
+			return await response.json();
+		},
+
+		async checkToken() {
+			const token = localStorage.getItem('alphabreedtoken');
+			if (!token) {
+				window.location = '/login/?back='+encodeURIComponent(this.backUrl);
+				return false;
+			}
+			const result = await this.apiCall('POST', '/api/collections/users/auth-refresh');
+			if (!result.token) {
+				window.location = '/login/?back='+encodeURIComponent(this.backUrl);
+				return false;
+			}
+			localStorage.setItem('alphabreedtoken', result.token);
+			localStorage.setItem('alphabreedid', result.record.id);
+			return true;
+		},
+
+		async createBookmarkCategory(name) {
+			const result = await this.apiCall('POST',
+				'/api/collections/bookmarkcategories/records',
+				{ owner: localStorage.getItem('alphabreedid'), name: name }
+			);
+			return result.id;
+		},
+
+		async updateBookmarkCategory(id, name) {
+			await this.apiCall('PATCH',
+				'/api/collections/bookmarkcategories/records/'+encodeURIComponent(id),
+				{ owner: localStorage.getItem('alphabreedid'), name: name }
+			);
+		},
+
+		async deleteBookmarkCategory(id) {
+			await this.apiCall('DELETE',
+				'/api/collections/bookmarkcategories/records/'+encodeURIComponent(id)
+			);
+		},
+
+		async createBookmark(categoryId, name, url) {
+			const result = await this.apiCall('POST',
+				'/api/collections/bookmarks/records',
+				{
+					owner: localStorage.getItem('alphabreedid'),
+					category: categoryId,
+					name: name,
+					url: url
+				}
+			);
+			return result.id;
+		},
+
+		async updateBookmark(id, categoryId, name, url) {
+			await this.apiCall('PATCH',
+				'/api/collections/bookmarks/records/'+encodeURIComponent(id),
+				{
+					owner: localStorage.getItem('alphabreedid'),
+					category: categoryId,
+					name: name,
+					url: url
+				}
+			);
+		},
+
+		async deleteBookmark(id) {
+			await this.apiCall('DELETE',
+				'/api/collections/bookmarks/records/'+encodeURIComponent(id)
+			);
+		},
+
+		async getBookmarkCategories() {
+			const result = await this.apiCall('GET',
+				'/api/collections/bookmarkcategories/records?perPage=9999&fields=id,name&sort=name'
+			);
+			return result.items;
+		},
+
+		async getBookmarks() {
+			const result = await this.apiCall('GET',
+				'/api/collections/bookmarks/records?perPage=1000&expand=category&fields=id,name,url,expand.category.id,expand.category.name&sort=name'
+			);
+			return result.items;
+		},
+
+		async getNotes() {
+			const owner = localStorage.getItem('alphabreedid');
+			const result = await this.apiCall('GET',
+				'/api/collections/notes/records/'+encodeURIComponent(owner)+'?fields=notes'
+			);
+			if (result === false)
+				return false;
+			return result.notes;
+		},
+
+		async createNotes(notes) {
+			return await this.apiCall('POST',
+				'/api/collections/notes/records',
+				{ id: localStorage.getItem('alphabreedid'), notes: notes }
+			);
+		},
+
+		async updateNotes(notes) {
+			const owner = localStorage.getItem('alphabreedid');
+			return await this.apiCall('PATCH',
+				'/api/collections/notes/records/'+encodeURIComponent(owner),
+				{ notes: notes }
+			);
+		},
+	});
+});

hugo/static/js/menu.js

@@ -0,0 +1,15 @@
+(function() {
+  var onHamburger = function(e) {
+    e.preventDefault();
+    var open = hamburger.className == 'open';
+    hamburger.className = open ? '' : 'open';
+    nav.className = open ? '' : 'open';
+  };
+
+  var nav = document.querySelector('header nav');
+  var hamburger = document.createElement('div');
+  hamburger.id = 'hamburger';
+  hamburger.innerHTML = '<div class="top"></div><div class="middle"></div><div class="bottom"></div>';
+  hamburger.onclick = onHamburger;
+  document.querySelector('header').appendChild(hamburger);
+})();