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`