first commit since installation of Gitea

2024-02-04 22:53:14 +01:00 · 2024-02-04 22:53:14 +01:00 · 5da70d6cea
commit 5da70d6cea
21 changed files with 626 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+node_modules
+package.json
+package-lock.json
+.htaccess
+_site
+.eleventy.js
--- a/_src/404.md
+++ b/_src/404.md
@ -0,0 +1,7 @@
+---
+title: Oops! Not Found
+layout: base
+permalink: /404.html
+---
+
+The page you entered does not exist. [Return to Homepage](/)
--- a/_src/_data/site.json
+++ b/_src/_data/site.json
@ -0,0 +1,5 @@
+{
+  "author": "Arian Furrer",
+  "description": "Personal homepage",
+  "url": "https://arian.li"
+}
--- a/_src/_includes/base.njk
+++ b/_src/_includes/base.njk
@ -0,0 +1,71 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="
+    {% if description %}
+      {{ description }}
+    {% else %}
+      {{ site.description }}
+    {% endif %}"
+  />
+  <!-- STYLE SHEETS AND FAVICON -->
+  <link href="/style.css" rel="stylesheet" />
+  <link rel="icon" type="image/x-icon" href="/_media/favicon.png" />
+  <!-- GOOGLE FONTS -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Open+Sans&display=swap" rel="stylesheet">
+  <!-- SYNTAX HIGHLIGHTING FONT -->
+  <link rel="stylesheet" href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.css">
+  <title>{{ title }}</title>
+</head>
+<body class="page--{% if page.fileSlug %}{{ page.fileSlug }}{% endif %}">
+
+  <div class="header">
+    <h1 class="website-title"><i>{{ title }}</i></h1>
+  </div>
+  
+  <div class="row">
+    <div class="column left">
+      <strong>Navigation</strong>
+      {% include "partials/nav-list.njk" %}
+    </div>
+
+    <div class="column right content">
+      {{ content | safe}}
+    </div>
+  </div>
+  
+  <div class="footer">
+    <div class="f-table-td">
+      <strong>Dev</strong>
+      <ul>
+        <li><a href="htts://github.com/epic-nan">GitHub</a></li>
+        <li><a href="htts://gitlab.com/epic-nan">GitLab</a></li>
+        <li><a href="#">Gitea (coming soon)</a></li>
+      </ul>
+    </div>
+    <div class="f-table-td" style="border-left: 1px solid #bbb;">
+      <strong>Gaming/Socials</strong>
+      <ul>
+        <li><a href="https://www.swisssmash.ch/players/4994">SwissSmash Profile</a></li>
+        <li>Discord: <i>nan6362</i></li>
+        <li><a href="https://www.discogs.com/user/epic_nan/collection">Discogs</a></li>
+        <li><a href="https://www.setlist.fm/user/nan6362">Setlist.fm</a></li>
+      </ul>
+    </div>
+    <div class="f-table-td" style="border-left: 1px solid #bbb;">
+      <strong>Public Projects</strong>
+      <ul>
+        <li><a href="https://arian.li">Personal Homepage</a></li>
+        <li><a href="https://uml.arian.li">PlantUML Server</a></li>
+        <li><a href="https://paste.arian.li">Wastebin Instance</a></li>
+      </ul>
+    </div>
+    <div class="f-table-td" style="border-left: 1px solid #bbb;">
+      <p>&copy; {{ year }} {{ site.author }}</p>
+    </div>
+  </div>
+
+</body>
+</html>
--- a/_src/_includes/home.njk
+++ b/_src/_includes/home.njk
@ -0,0 +1,6 @@
+---
+layout: base
+---
+
+<!--TODO: Add better layout-->
+{{ content | safe }}
--- a/_src/_includes/music-review.njk
+++ b/_src/_includes/music-review.njk
@ -0,0 +1,35 @@
+---
+layout: base
+---
+
+<h1 class="main-title">Review: {{ album_artist }} &dash; {{ album_name }} </h1>
+
+<p>{{ content | emojiReadTime }}</p>
+
+<table>
+  <tr>
+    <td><strong>Artist</strong></td>
+    <td>{{ album_artist }}</td>
+  </tr>
+  <tr>
+    <td><strong>Album</strong></td>
+    <td>{{ album_name }}
+    </td>
+  </tr>
+  <tr>
+    <td><strong>Release Year</strong></td>
+    <td>{{ album_year }}</td>
+  </tr>
+  <tr>
+    <td><strong>Tracks</strong></td>
+    <td>{{ album_tracks }}</td>
+  </tr>
+  <tr>
+    <td><strong>Length</strong></td>
+    <td>{{ album_length }}</td>
+  </tr>
+</table>
+
+<article>
+  {{ content | safe }}
+</article>
--- a/_src/_includes/partials/nav-list.njk
+++ b/_src/_includes/partials/nav-list.njk
@ -0,0 +1,29 @@
+{% set navPages = collections.all | eleventyNavigation %}
+
+{% macro renderNavListItem(entry) %}
+  {% if entry.children.length %}
+    <li>
+      <details
+        {%- for child in entry.children %}
+          {% if child.url == page.url %}
+            class="is-active"
+            open
+          {% endif %}
+        {% endfor %}
+      >
+        <summary>{{ entry.title }}</summary>
+        <ul role="list">
+          {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
+        </ul>
+      </details>
+    </li>
+  {% else %}
+    <li>
+      <a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" {% endif %}>{{ entry.title }}</a>
+    </li>
+  {%- endif -%}
+{%- endmacro %}
+
+<ul class="nav-list" role="list">
+{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
+</ul>
--- a/_src/_includes/test.njk
+++ b/_src/_includes/test.njk
@ -0,0 +1,8 @@
+---
+layout: base
+---
+
+{{ content | safe }}
+
+{% set navPages = collections.all | eleventyNavigation %}
+{{ navPages | dump | safe }}
--- a/_src/_media/favicon.png
+++ b/_src/_media/favicon.png
--- a/_src/index.md
+++ b/_src/index.md
@ -0,0 +1,8 @@
+---
+eleventyNavigation:
+  key: Home
+title: Home
+layout: home
+---
+
+**This is a WIP and nothing is final!**
--- a/_src/music-reviews/index.md
+++ b/_src/music-reviews/index.md
@ -0,0 +1,12 @@
+---
+eleventyNavigation:
+  key: Music Reviews
+title: Music Reviews
+description: Sitemap for all Music Reviews
+---
+
+# All Reviews
+
+{% for review in collections.music_reviews %}
+- [{{ review.data.album_artist }} &mdash; {{ review.data.album_name }}]({{ review.url }})
+{% endfor %}
--- a/_src/music-reviews/iron-maiden/index.md
+++ b/_src/music-reviews/iron-maiden/index.md
@ -0,0 +1,6 @@
+---
+eleventyNavigation:
+  key: Iron Maiden
+  parent: Music Reviews
+permalink: false
+---
--- a/_src/music-reviews/iron-maiden/iron-maiden.json
+++ b/_src/music-reviews/iron-maiden/iron-maiden.json
@ -0,0 +1,3 @@
+{
+  "album_artist": "Iron Maiden"
+}
--- a/_src/music-reviews/iron-maiden/somewhere-in-time.md
+++ b/_src/music-reviews/iron-maiden/somewhere-in-time.md
@ -0,0 +1,12 @@
+---
+title: Somewhere in Time
+eleventyNavigation:
+  key: Somewhere in Time
+  parent: Iron Maiden
+album_name: Somewhere in Time
+album_tracks: 8
+album_length: 51 min 40 sec
+album_year: 1985
+---
+
+This is a test. The review for this album will be written soon
--- a/_src/music-reviews/music-reviews.json
+++ b/_src/music-reviews/music-reviews.json
@ -0,0 +1,4 @@
+{
+  "layout": "music-review",
+  "tags": "music_reviews"
+}
--- a/_src/music-reviews/sylvatica/ashes-and-snow.md
+++ b/_src/music-reviews/sylvatica/ashes-and-snow.md
@ -0,0 +1,12 @@
+---
+title: Ashes and Snow
+eleventyNavigation:
+  key: Ashes and Snow
+  parent: Sylvatica
+album_name: Ashes and Snow
+album_tracks: 7
+album_length: 42 min 58 sec
+album_year: 2021
+---
+
+This is a test. The review for this album will be written soon
--- a/_src/music-reviews/sylvatica/index.md
+++ b/_src/music-reviews/sylvatica/index.md
@ -0,0 +1,6 @@
+---
+eleventyNavigation:
+  key: Sylvatica
+  parent: Music Reviews
+permalink: false
+---
--- a/_src/music-reviews/sylvatica/sylvatica.json
+++ b/_src/music-reviews/sylvatica/sylvatica.json
@ -0,0 +1,3 @@
+{
+  "album_artist": "Sylvatica"
+}
--- a/_src/style.css
+++ b/_src/style.css
@ -0,0 +1,234 @@
+/* VARIABLES */
+
+:root {
+  --header-background: #282a36;
+  --nav-background: #282a36;
+  --footer-background: #282a36;
+  --content-background: #44475a;
+  --table-borders: #f8f8f2;
+  --link-not-visited: #50fa7b;
+  --link-hover: #f1fa8c;
+  --link-visited: #ffb86c;
+  --font-color: #f8f8f2;
+}
+
+/* STYLING */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Fira Sans', 'Open Sans', 'sans-serif';
+  font-size: 13pt;
+  color: var(--font-color);
+  background-color: var(--content-background);
+  padding: 0;
+}
+
+a:link {
+  color: var(--link-not-visited);
+}
+
+a:visited {
+  color: var(--link-visited);
+}
+
+a:hover {
+  color: var(--link-hover);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  font-family: 'Open Sans';
+}
+
+h1, h2 {
+  font-size: 20pt;
+}
+
+h1 {
+  color: #bd93f9;
+}
+
+h2, h3 {
+  font-style: italic;
+  color: #ff79c6;
+}
+
+h3, h4 {
+  font-size: 18pt;
+}
+
+h4 {
+  font-style: italic;
+}
+
+h5, h6 {
+  font-size: 16pt;
+}
+
+.header,
+.footer,
+.column {
+  margin: 0;
+}
+
+.header {
+  background-color: var(--header-background);
+  padding: 4px;
+  text-align: center;
+  position: sticky;
+  z-index: 999;
+  top: 0;
+}
+
+.website-title {
+  font-size: 40pt;
+  color: #6272a4;
+}
+
+/* Create three unequal columns that floats next to each other */
+.column {
+  float: left;
+  padding: 10px;
+  overflow: auto;
+}
+
+.column.right {
+  width: 75%;
+  background-color: var(--content-background);
+}
+
+.column.left {
+  width: 25%;
+  background-color: var(--nav-background);
+  left: 0;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+  font-size: 1px;
+  height: 1px;
+  background-color: var(--content-background);
+}
+
+/* Style the footer */
+.footer {
+  background-color: var(--footer-background);
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  bottom: 0;
+  position: static;
+  width: 100%;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+  .column.side, .column.middle {
+    width: 100%;
+  }
+}
+
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid white;
+  padding: 5px !important;
+}
+
+.f-table-td {
+  float: left;
+  padding: 20px;
+  display: table-cell;
+}
+
+.f-table {
+  border: none;
+  width: 100% !important;
+  max-height: max-content !important;
+}
+
+hr {
+  width: 100%;
+}
+
+/* navigation */
+
+:where([role="list"]) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.nav-list {
+  color: var(--link-not-visited);
+  user-select: none;
+}
+
+.nav-list a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+}
+
+.nav-list summary {
+  cursor: pointer;
+  display: block;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z' fill='%236A89FE'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 1.125em 1.125em;
+}
+
+.nav-list details[open] > summary {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z' fill='%236A89FE'/%3E%3C/svg%3E");
+}
+
+.nav-list summary::-webkit-details-marker {
+  display: none;
+}
+
+.nav-list a,
+.nav-list summary {
+  padding-block: .375rem;
+  transition: color .1s ease-in-out;
+}
+
+.nav-list a:hover,
+.nav-list a[aria-current="page"],
+.nav-list summary:hover,
+.nav-list .is-active summary {
+  color: var(--link-hover);
+}
+
+.nav-list details > [role="list"] {
+  padding-inline-start: .75rem;
+}
+
+.nav-list > li,
+.nav-list .is-active summary {
+  position: relative;
+}
+
+.nav-list > li > a[aria-current="page"]:before,
+.nav-list .is-active summary:before {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 100%;
+  background-color: #6A89FE;
+  position: absolute;
+  inset-inline-start: -2rem;
+  inset-block-start: 0;
+  inset-block-end: 0;
+}
--- a/_src/test.md
+++ b/_src/test.md
@ -0,0 +1,11 @@
+---
+eleventyNavigation:
+  key: Test
+title: Test Page
+description: Testpage
+layout: test
+---
+
+# TEST
+
+page url = {{ page.url }}
--- a/_src/theming.md
+++ b/_src/theming.md
@ -0,0 +1,148 @@
+---
+eleventyNavigation:
+  key: Theming
+  order: 99999999
+title: Theming
+layout: base
+---
+
+The backend for this site is [11ty (Eleventy)](https://11ty.dev)
+
+The layout of this site is a basic 2 column layout, adapted from [W3Schools](https://www.w3schools.com/howto/howto_css_three_columns.asp).
+
+The color scheme for both the site and code blocks is [Dracula](https://draculatheme.com/). Since there is only one Cyan and one Purple, I decided to make unvisited links Green, visited links Orange and Links that are being hovered on Yellow.
+
+For fonts, I use **Fira Sans** for everything except headings, which use **Open Sans**. Both are available on [Google Fonts](https://fonts.google.com/).
+
+The navigation I stole from [this blog](https://www.mikeaparicio.com/posts/2022-08-19-nested-navigation-in-eleventy/) and adapted it to my needs. I am working on making the current page expanded if there are subpages but it doesn't want to work.
+
+Also, the footer not being at the bottom for short pages is annoying but I don't know how to fix it.
+
+*****
+
+See all elements below:
+
+*****
+
+**Bold Text**, *Italics text (asterisks)*, _italics text (underscores)_, ~~strikethrough text~~
+
+*****
+
+Unordered list
+
+- unordered list item 1
+  - list item 1.1
+  - list item 1.2
+  - list item 1.3
+- unordered list item 2
+- unordered list item 3
+  - list item 3.1
+- unordered list item 4
+
+Ordered list
+
+1. first item
+2. second item
+
+*****
+
+Mixed list
+
+1. First
+   - Bullet 1
+   - Bullet 2
+2. Second
+3. Third
+   - Bullet 1
+   - Bullet 2
+      - Bullet 2.1
+      - Bullet 2.2
+4. Fourth
+
+*****
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+*****
+
+Quotes
+
+> quote level 1
+
+Nested quotes
+
+> quote level 1
+> next line
+>> quote level 2
+>> next line
+>>> quote level 3
+>>> next line
+>>> next next line
+
+*****
+
+PowerShell code
+
+```powershell
+Connect-VIServer
+$vms = Get-VM
+ForEach ($vm in $vms) {
+  Write-Output $vm.Name
+}
+```
+
+Bash code
+
+```bash
+function log() {
+
+  # logs strings to both the terminal and a file
+  # usage: log { 1 | 2 | 3 } 'String'
+  #   1 => INFORMATION
+  #   2 => ERROR
+  #   3 => DEBUG
+
+  if [ "$LOGFILE" = "" ]; then
+    LOGFILE=/dev/null
+  fi
+  if [ "$NORMAL" = "" ]; then
+    NORMAL='\e[0m'
+  fi
+  if [ "$PURPLE" = "" ]; then
+    PURPLE='\e[35m'
+  fi
+  if [ "$CYAN" = "" ]; then
+    CYAN='\e[36m'
+  fi
+
+  case $1 in
+    1)
+      msg_type="INFORMATION"
+      ;;
+    
+    2)
+      msg_type="ERROR"
+      ;;
+
+    3)
+      msg_type="DEBUG"
+      ;;
+    
+    *)
+      echo "Wrong input; exiting"
+      exit 1
+  esac
+
+  msg="[${PURPLE}$(date -Ins)${NORMAL}] [${CYAN}${msg_type}${NORMAL}]:  $2"
+  # tee command from <https://unix.stackexchange.com/questions/694671/leave-color-in-stdout-but-remove-from-tee>
+  # (omits coloring in logfile)
+  echo -e "${msg}" | tee >(sed $'s/\033[[][^A-Za-z]*[A-Za-z]//g' >> ${LOGFILE})
+}
+```
+
+`inline code`