started migration to web components

2024-09-07 00:21:21 -05:00 · 2024-09-07 00:21:21 -05:00 · 38eb74a536
parent 7d664c471a
commit 38eb74a536
14 changed files with 1097 additions and 18 deletions
--- a/css/highlight.css
+++ b/css/highlight.css
@ -0,0 +1,7 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+ * Theme: FelipeC
+ * Author: (c) 2021 Felipe Contreras <felipe.contreras@gmail.com>
+ * Website: https://github.com/felipec/vim-felipec
+ *
+ * Autogenerated with vim-felipec's generator.
+*/.hljs{color:#dddde1;background:#1e1e22}.hljs ::selection,.hljs::selection{color:#1e1e22;background:#bf8fef}.hljs-code,.hljs-comment,.hljs-quote{color:#888896}.hljs-deletion,.hljs-literal,.hljs-number{color:#ef8f8f}.hljs-doctag,.hljs-meta,.hljs-operator,.hljs-punctuation,.hljs-selector-attr,.hljs-subst,.hljs-template-variable{color:#efbf8f}.hljs-type{color:#efef8f}.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-title{color:#bfef8f}.hljs-addition,.hljs-regexp,.hljs-string{color:#8fef8f}.hljs-class,.hljs-property{color:#8fefbf}.hljs-name,.hljs-selector-tag{color:#8fefef}.hljs-built_in,.hljs-keyword{color:#8fbfef}.hljs-bullet,.hljs-section{color:#8f8fef}.hljs-selector-pseudo{color:#bf8fef}.hljs-attr,.hljs-attribute,.hljs-params,.hljs-variable{color:#ef8fef}.hljs-link,.hljs-symbol{color:#ef8fbf}.hljs-literal,.hljs-strong,.hljs-title{font-weight:700}.hljs-emphasis{font-style:italic}
--- a/css/style.css
+++ b/css/style.css
@ -48,7 +48,8 @@ table, th, td {

 a {
  color: #df3e23;
-  font-style: italic;
+  /* font-style: italic; */
+  font-weight: bold;
  text-decoration: none;
 }

--- a/games/index.md
+++ b/games/index.md
@ -0,0 +1,2 @@
+# games
+
--- a/4
+++ b/4
@ -2,5 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title> logan's site </title>
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/css/style.css">
+<link rel="stylesheet" href="/css/highlight.css">
 <link rel="icon" type="image/x-icon" href="/favicon.gif">
+<script src="/js/components.js"></script>
--- a/index.html
+++ b/index.html
@ -2,8 +2,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title> logan's site </title>
-<link rel="stylesheet" href="/style.css">
+<link rel="stylesheet" href="/css/style.css">
+<link rel="stylesheet" href="/css/highlight.css">
 <link rel="icon" type="image/x-icon" href="/favicon.gif">
+<script src="/js/components.js"></script>
 </head><body><main><h1>logan's site</h1>
 <h2>about</h2>
 <p>My name is Logan Gatlin, and upon this Intel NUC8i3 I shall build my kingdom. I
@ -12,10 +14,11 @@ bachellors in Computer Science from the <a href="https://utsa.edu">University of
 Antonio</a>.</p>
 <h2>site map</h2>
 <ul>
-<li><a href="https://git.lgatlin.dev/logan">my git server</a></li>
-<li><a href="/software">software</a></li>
-<li><a href="/books">bookshelf</a></li>
-<li><a href="/music">music</a></li>
-<li><a href="/games">games</a></li>
+<li><a href="https://git.lgatlin.dev/logan">my git server</a> - <em>personal code forge</em></li>
+<li><a href="/software">software</a> - <em>thoughts on programming</em></li>
+<li><a href="/books">books</a> - <em>reading corner</em></li>
+<li><a href="/music">music</a> - <em>sick tunes</em></li>
+<li><a href="/toys">toybox</a> - <em>awesome web apps</em></li>
+<li><a href="/hyperspace">hyperspace</a> - <em>everything world wide web</em></li>
 </ul>
 </main></body></html>
--- a/index.md
+++ b/index.md
@ -6,9 +6,11 @@ am from the United States, where I was born in 2003. In 2025 I will receive my
 bachellors in Computer Science from the [University of Texas at San
 Antonio](https://utsa.edu).

+
 ## site map
-* [my git server](https://git.lgatlin.dev/logan) 
-* [software](/software)
-* [bookshelf](/books)
-* [music](/music)
-* [games](/games)
+* [my git server](https://git.lgatlin.dev/logan) - _personal code forge_
+* [software](/software) - _thoughts on programming_
+* [books](/books) - _reading corner_
+* [music](/music) - _sick tunes_ 
+* [toybox](/toys) - _awesome web apps_
+* [hyperspace](/hyperspace) - _everything world wide web_
--- a/js/components.js
+++ b/js/components.js
@ -0,0 +1,55 @@
+function createH2(headerName) {
+  return `<h2>${headerName}</h2><section>`;
+}
+
+function createFigure(imageURL, heading, subheading) {
+  return `<figure> 
+    <img src="${imageURL}"> 
+    <figcaption> 
+    <b>${heading}</b><br>
+    <em>${subheading}</em>
+    </figcaption>
+    </figure>`;
+}
+
+function createSection(headerName, figureArray) {
+  let figuresHTML = "";
+  for (let i = 0; i < figureArray.length; i++) {
+    let figure = figureArray[i];
+    figuresHTML = figuresHTML.concat(
+      createFigure(figure.url, figure.main, figure.sub)
+    );
+  }
+  return `<section>${figuresHTML}</section>`
+}
+
+function figureGrid(jsonURL, targetID) {
+  fetch(source)
+    .then((response) => response.json())
+    .then((json) => {
+      let html = "";
+      for (const headerName in json) {
+        let figureArray = json[category];
+        html = html.concat(createSection(headerName, figureArray));
+      }
+      const thisScript = document.getElementById("albums");
+      return html;
+    });
+}
+
+class FigureGrid extends HTMLElement {
+  static observedAttributes = ["src"];
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name == "src") {
+      this.innerHTML =  
+    }
+  }
+}
+
+customElements.define("figure-grid", FigureGrid);
+
--- a/js/highlight.js
+++ b/js/highlight.js
--- a/music/albums.json
+++ b/music/albums.json
@ -72,6 +72,11 @@
      "artist": "Mort Garson",
      "link": "plantasia"
    },
+    {
+      "name": "The Wozard of Iz - An Electronic Odyssey",
+      "artist": "Mort Garson",
+      "link": "wozard_of_iz"
+    },
    {
      "name": "Los Desamores de Dewey Martino",
      "artist": "Dewey Martino",
@ -99,6 +104,11 @@
      "artist": "Golemm",
      "link": "one_year_madness"
    },
+    {
+      "name": "Cyberspace",
+      "artist": "Yameii Online",
+      "link": "cyberspace"
+    },
    {
      "name": "Wlfgrl",
      "artist": "Machine Girl",
@ -113,6 +123,16 @@
      "name": "Parousia",
      "artist": "XI",
      "link": "parousia"
+    },
+    {
+      "name": "www.",
+      "artist": "cosmic collective",
+      "link": "www"
+    },
+    {
+      "name": "TMP2",
+      "artist": "Graham Kartna",
+      "link": "tmp2"
    }
  ],
  "high energy": [
@ -131,6 +151,11 @@
      "artist": "Otoboke Beaver",
      "link": "itekoma_hits"
    },
+    {
+      "name": "World is Yours",
+      "artist": "MASS OF THE FERMENTING DREGS",
+      "link": "world_is_yours"
+    },
    {
      "name": "New Levels New Devils",
      "artist": "Polyphia",
--- a/music/index.md
+++ b/music/index.md
@ -1,10 +1,12 @@
-# Music
+# music
+Music is a huge passion of mine. I prefer listening to albums in full from
+start to finish in order. My favorite albums are usually experimental, unique,
+or have a particular theme they explore
 <script id="albums">
 const thisScript = document.getElementById("albums");
 fetch("/music/albums.json")
    .then((response) => response.json())
    .then((json) => {
-            console.log(json);
            let html = "";
            for (const category in json) {
                let albums = json[category];
@ -29,4 +31,4 @@ fetch("/music/albums.json")
            thisScript.replaceWith(section); // lol
        });
 </script>
-
+<figure-grid src="/music/albums.json"></figure-grid>
--- a/res/albums/cyberspace.webp
+++ b/res/albums/cyberspace.webp
--- a/res/albums/tmp2.webp
+++ b/res/albums/tmp2.webp
--- a/res/albums/world_is_yours.webp
+++ b/res/albums/world_is_yours.webp
--- a/software/fishbowl.md
+++ b/software/fishbowl.md
@ -1,6 +1,4 @@
 # fishbowl
-<hr/>
-
 Choose an image and click submit. The image will be sent and processed by my
 server, so be mindful of what you submit. No logs or copies of the input are
 preserved.