Links Repo

2023-10-14 23:36:11 -04:00 · 2023-10-14 23:36:11 -04:00 · 709d584247
commit 709d584247
8 changed files with 403 additions and 0 deletions
--- a/config.yaml
+++ b/config.yaml
@ -0,0 +1,5 @@
+output_dir: public/
+links:
+  source: data/links/links.yaml
+  template: templates/links/links.html
+  static_dir: static/
--- a/data/links/links.yaml
+++ b/data/links/links.yaml
@ -0,0 +1,114 @@
+config:
+  title: Where to find Tyrel Souza
+  name: Tyrel Souza
+  description: Software Engineer, gamer, tech-enthusiast, ham, pilot, father
+  avatar: loupe.jpg
+  background: moroccan-flower-dark.png
+  background_opacity: 0.7
+
+links:
+  - title: Personal
+    links:
+      - text: Pronouns and Pronounciation
+        icon: fa fa-person
+        href: https://name.pn/tyrel-souza
+    
+  - title: Sites
+    links:
+      - text: Blog
+        icon: fa-solid fa-blog
+        href: https://tyrel.dev/blog
+
+  - title: Code
+    links:
+      - text: Gitea
+        icon: fa fa-gitea
+        href: https://gitea.tyrel.dev/tyrel
+
+  - title: Chat
+    links:
+      - text: Matrix
+        icon: fa fa-matrix-org
+        href: https://matrix.to/#/@tyrelsouza:matrix.org
+      - text: Discord
+        icon: fa fa-discord
+        href: https://discordapp.com/users/73990019756339200
+        copy: "@tyrel"
+
+
+  - title: Music
+    links:
+      - text: LastFM
+        icon: fa fa-lastfm
+        href: https://last.fm/user/tacidsky
+      - text: Bandcamp
+        icon: fa fa-bandcamp
+        href: https://bandcamp.com/tyrelsouza
+
+  - title: Photography
+    links:
+      - text: Pixelfed
+        icon: fa fa-pixelfed
+        href: https://pixelfed.social/tyrel
+      - text: Flickr
+        icon: fa-brands fa-flickr
+        href: https://www.flickr.com/photos/tyrelsouza
+      - text: Instagram
+        icon: fa-brands fa-instagram
+        href: https://www.instagram.com/tyrelsouza/
+
+  - title: Gaming
+    links:
+      - text: Board Game Geek
+        icon: fa-solid fa-dice
+        href: https://boardgamegeek.com/user/tyrelsouza
+      - text: Steam
+        icon: fa fa-steam-square
+        href: https://steamcommunity.com/id/tyrels
+      - text: Xbox Gamertag
+        icon: fa-brands fa-xbox
+        copy: tacidsky
+      - text: Switch Friendcode
+        icon: fa-solid fa-gamepad
+        copy: "SW-1711-7753-4091"
+
+
+  - title: Socials
+    links:
+      - text: Bluesky
+        icon: fa-solid fa-cloud
+        href: https://bsky.app/profile/tyrel.dev
+      - text: Mastodon
+        rels: me
+        icon: fa fa-mastodon
+        href: https://mastodon.social/@tyrel
+      - text: Facebook
+        icon: fa-brands fa-facebook
+        href: https://www.facebook.com/tyrel.souza
+      - text: YouTube
+        icon: fa-brands fa-youtube
+        href: https://youtube.com/tacidsky
+      - text: Goodreads
+        icon: fa-brands fa-goodreads
+        href: https://www.goodreads.com/user/show/24381583-tyrel-souza
+      - text: LinkedIn
+        icon: fa-brands fa-linkedin
+        href: http://www.linkedin.com/in/tyrel-souza
+      - text: Pinterest
+        icon: fa fa-pinterest
+        href: https://www.pinterest.com/tyrelsouza/
+      - text: QRZ
+        icon: fa-solid fa-radio
+        href: https://www.qrz.com/db/k3tas
+      - text: Hackernews
+        icon: fa fa-hacker-news
+        href: https://news.ycombinator.com/user?id=tyrel
+      - text: Lobsters
+        icon: fa-solid fa-loster
+        href: https://lobste.rs/u/tyrel
+
+  - title: Misc
+    links:
+      - text: Fork this project!
+        icon: fa-solid fa-code-fork
+        href: https://gitea.tyrel.dev/tyrel/rust-ssg
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/icon192.png
+++ b/static/icon192.png
--- a/static/links.css
+++ b/static/links.css
@ -0,0 +1,192 @@
+/*
+Borrowed and modified from https://github.com/alisa-yar/linktree-template/tree/main
+Thanks, Alisa!
+
+
+MIT License
+
+Copyright (c) 2022 alisayar
+
+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.
+*/
+
+@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
+
+:root {
+    --textColor: #FFFFFF;
+    --font: 'Karla', sans-serif;
+}
+
+html {
+    margin: 0;
+    height: 100%;
+    
+    /* migrated to template
+    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('garbage.png');
+    */
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    font-family: var(--font);
+    color: var(--textColor);
+    text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 3px black ;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: fit-content;
+    min-height: 100%;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 140px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -75px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  .tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+  }
+  
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
+.description {
+    font-size: 18px;
+    color: var(--textColor);
+    text-align: center;
+    margin: 27px auto;
+    margin-top: 10px;
+    width: 90%;
+    max-width: 500px;
+}
+
+.footer {
+    font-size: 16px;
+    color: var(--textColor);
+    font-style: italic;
+    text-align: center;
+    margin: 27px auto;
+    margin-top: 10px;
+    width: 90%;
+    max-width: 500px;
+    padding-bottom: 20px;
+    padding-top: 50px;
+}
+
+.profilePicture img {
+    position: relative;
+    display: block;
+    margin: 35px auto 20px;
+    border-radius: 50%;
+    object-fit: cover;
+    width: 130px;
+    height: 130px;
+}
+
+.userName {
+    color: var(--textColor);
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 1.25;
+    display: block;
+    font-family: var(--font);
+    width: 100%;
+    text-align: center;
+}
+
+.sectionTitle {
+    color: var(--textColor);
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 1.25;
+    display: block;
+    font-family: var(--font);
+    width: 100%;
+    text-align: center;
+    margin-bottom: -10px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed;
+}
+
+.links {
+    max-width: 675px;
+    width: auto;
+    display: block;
+    margin: 27px auto;
+}
+
+.block {
+    display: block;
+}
+
+.link {
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: var(--textColor);
+    border: solid var(--textColor) 2px;
+    border-radius: 10px;
+    font-size: 18px;
+    text-align: center;
+    display: block;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 10px; 
+    text-decoration: none;
+}
+
+.link a {
+    position: relative;
+    color: var(--textColor);
+    font-size: 18px;
+    text-align: center;
+    text-decoration: none;
+}
--- a/static/loupe.jpg
+++ b/static/loupe.jpg
--- a/static/moroccan-flower-dark.png
+++ b/static/moroccan-flower-dark.png
--- a/templates/links/links.html
+++ b/templates/links/links.html
@ -0,0 +1,92 @@
+<!DOCTYPE htmstylel>
+<html lang="en-US">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{config.title}}</title>
+  <link rel="stylesheet" href="links.css">
+  <style>
+    html {
+        background:
+          linear-gradient(
+            rgba(0, 0, 0, {{config.background_opacity}}),
+            rgba(0, 0, 0, {{config.background_opacity}})
+          ),
+          url('{{config.background}}'),
+          rgba(0,0,0);
+    }
+  </style>
+  <script src="https://kit.fontawesome.com/6bee25835f.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+  <link rel="icon" href="{{config.avatar}}" type="image/x-icon" />
+</head>
+
+<body>
+  <a class="profilePicture">
+    <img src="{{config.avatar}}" alt="Profile Picture">
+  </a>
+ 
+  <div class="userName">
+    {{config.name}}
+  </div>
+
+  <div class="description">
+    {{config.description}}
+  </div>
+    {% for section in links %}
+    <div class="sectionTitle">
+      {{section.title}}
+    </div>
+    <div class="links">
+      {% for link in section.links %}
+      {% if link.href and link.copy %}
+          <a class="link"  {% if link.rels %}rel="{{link.rels}}"{% endif %} href="{{link.href}}" target="_blank">
+            <i class="{{link.icon}}"></i> {{link.text}}
+            <div class="tooltip">
+              <span class="" href="#" onclick="copytext('{{link.copy}}','{{loop.index}}')" onmouseout="outFunc('{{loop.index}}')">
+                <span class="tooltiptext" id="{{loop.index}}">Copy to clipboard</span>
+                <i class="fa-solid fa-copy"></i>
+              </span>
+            </div>
+          </a>
+      {% elif link.href %}
+      <a class="link" {% if link.rels %}rel="{{link.rels}}"{% endif %} href="{{link.href}}" target="_blank">
+          <i class="{{link.icon}}"></i> {{link.text}}
+        </a>
+      {% elif link.copy %}
+        <div class="tooltip block">
+        <a class="link" href="#" onclick="copytext('{{link.copy}}','{{loop.index}}')" onmouseout="outFunc('{{loop.index}}')">
+          <span class="tooltiptext" id="{{loop.index}}">Copy to clipboard</span>
+          <i class="{{link.icon}}"></i> {{link.text}}
+        </a>
+        </div>
+      {% endif %}
+      {% endfor %}
+    </div>
+    {% endfor %}
+
+  <footer>
+    <div class="footer">
+      Last updated: {{metadata.last_updated}}
+    </div>
+  </footer>
+
+</body>
+<script>
+  
+  function copytext(val, linkid) {
+    event.preventDefault();
+    console.log(val);
+    navigator.clipboard.writeText(val);
+    var tooltip = document.getElementById(linkid);
+    tooltip.innerHTML = "Copied: " + val;
+  }
+
+  function outFunc(linkid) {
+    var tooltip = document.getElementById(linkid);
+    tooltip.innerHTML = "Copy to clipboard";
+  }
+  
+</script>
+</html>