change to jekyll page engine

This commit is contained in:
Hiajen Hiajen 2022-01-15 22:29:17 +01:00
parent ba8b789f12
commit 74cfbc1488
19 changed files with 353 additions and 258 deletions

7
.gitignore vendored Normal file
View file

@ -0,0 +1,7 @@
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
# Ignore folders generated by Bundler
.bundle/
vendor/

17
Gemfile Normal file
View file

@ -0,0 +1,17 @@
# frozen_string_literal: true
source "https://rubygems.org"
gem "jekyll"
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", "~> 1.2"
gem "tzinfo-data"
end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
gem "webrick", "~> 1.7"

78
Gemfile.lock Normal file
View file

@ -0,0 +1,78 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.9)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7-x64-mingw32)
ffi (1.15.5-x64-mingw32)
forwardable-extended (2.6.0)
http_parser.rb (0.8.0)
i18n (1.8.11)
concurrent-ruby (~> 1.0)
jekyll (4.2.1)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.3)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 2.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.3.1)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.7.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
rb-fsevent (0.11.0)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.5)
rouge (3.27.0)
safe_yaml (1.0.5)
sassc (2.4.0-x64-mingw32)
ffi (~> 1.9)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
thread_safe (0.3.6)
tzinfo (1.2.9)
thread_safe (~> 0.1)
tzinfo-data (1.2021.5)
tzinfo (>= 1.0.0)
unicode-display_width (1.8.0)
wdm (0.1.1)
webrick (1.7.0)
PLATFORMS
x64-mingw32
DEPENDENCIES
jekyll
tzinfo (~> 1.2)
tzinfo-data
wdm (~> 0.1.1)
webrick (~> 1.7)
BUNDLED WITH
2.3.5

10
_data/navigation.yml Normal file
View file

@ -0,0 +1,10 @@
- name: Home
link: /
- name: Services
link: /services.html
- name: Kontakt
link: /kontakt.html
- name: Social
link: /social.html
- name: DO NOT CLICK!
link: https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1

View file

@ -0,0 +1,9 @@
<div class="col-3 col-s-3 menu">
<ul>
{% for item in site.data.navigation %}
<a href="{{ item.link }}">
<li {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</li>
</a>
{% endfor %}
</ul>
</div>

31
_layouts/defaults.html Normal file
View file

@ -0,0 +1,31 @@
---
---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/styles.css">
<title>Hiajen - {{ page.title }}</title>
</head>
<body>
<div class="main-container">
<div class="header">
<h1>>> Hiajen</h1>
</div>
<div class="row">
{% include navigation.html %}
<div class="col-9 col-s-9">
<h1>{{ page.title }}</h1>
<p>{{ content | markdownify }}</p>
</div>
</div>
<div class="footer">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
<p>made with <a href="https://jekyllrb.com/">Jekyll</a></p>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,7 @@
:root {
--gray0: #282a36; /*background, font-colour*/
--gray1: #282a36; /*current menu*/
--gray2: #44475a; /*header, footer, menu*/
--gray3: #6272a4; /*hover, links*/
--background: #f8f8f2 /*container background, font-colour on dark*/
}

View file

@ -0,0 +1,7 @@
:root {
--gray0: #002b36; /*background, font-colour*/
--gray1: #073642; /*current menu*/
--gray2: #586e75; /*header, footer, menu*/
--gray3: #93a1a1; /*hover*/
--background: #eee8d5 /*container background, font-colour on dark*/
}

126
_sass/main.scss Normal file
View file

@ -0,0 +1,126 @@
* {
box-sizing: border-box;
color: var(--gray0);
}
a {
color: var(--gray3);
}
div {
background-color: var(--background);
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
background-color: var(--gray0);
}
.header {
background-color: var(--gray2);
padding: 15px;
}
.header * {
color: var(--background);
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul a {
text-decoration: none;
}
.menu a li {
padding: 8px;
margin-bottom: 7px;
background-color: var(--gray2);
color: var(--background);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu a li:hover {
background-color: var(--gray3);
}
.menu a li.current {
background-color: var(--gray1);
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: var(--background);
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: var(--gray2);
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
.footer * {
color: var(--background);
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.main-container {
width: 768px;
margin-left: auto;
margin-right: auto;
clear: both;
}
}

5
assets/css/styles.scss Normal file
View file

@ -0,0 +1,5 @@
---
---
@import "colours_drakula";
@import "main";

View file

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 166 KiB

4
home.md Normal file
View file

@ -0,0 +1,4 @@
---
layout: defaults
title: Home
---

View file

@ -1,35 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
---
layout: defaults
title: Home
---
<div id="main-container">
<div id="head-container">
<h1>Hiajens Infrastructure</h1>
<h2>>> Start <<</h2>
</div>
<div class="clearfix" id="wrapper-container">
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul.<br>Also hier mein Avatar.</p>
<img src="img/avatar.png" height="480" width="480" alt="avatar Image from Hiajen"/>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>
Halloa, Ansgar oder im Neuland auch Hiajen hier. Wer sich beides nicht merken kann, einfach Meep.
Hier sollte eigentlich irgend ein Text stehen, ich bin aber zu faul mir was sinnvolles auszudenken.
Also hier mein Avatar.
![Avatar of Hiajen](assets/images/avatar.png "Avatar of Hiajen")

View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
<div id="main-container">
<div id="head-container">
<h1>Hiajens Infrastructure</h1>
<h2>>> Kontakt <<</h2>
</div>
<div class="clearfix" id="wrapper-container">
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>Du findest mich fast überall unter dem Nutzername <i>Hiajen</i> hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:</p>
<ul>
<li>Matrix: <a href="https://matrix.to/#/@hiajen:matrix.hiajen.de" target="_blank"> @hiajen:matrix.hiajen.de </a></li>
<li>E-Mail: <a href="https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index" target="_blank"> info (at) hiajen (dot) de </a>
<br>Fingerprint: F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01</li>
</ul>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>

9
kontakt.md Normal file
View file

@ -0,0 +1,9 @@
---
layout: defaults
title: Kontakt
---
Du findest mich fast überall unter dem Nutzername `Hiajen` hier sind trotzdem noch einmal ein paar Kontaktmöglichkeiten:
* Matrix: [@hiajen:matrix.hiajen.de](https://matrix.to/#/@hiajen:matrix.hiajen.de){:target="_blank"}
* E-Mail: [info (at) hiajen (dot) de](https://keyserver.ubuntu.com/pks/lookup?search=info%40hiajen.de&fingerprint=on&op=index){:target="_blank"}
* Fingerprint: `F81D 5DA5 B1D3 6D7D 863B 6EE0 D2F7 7DED D818 7A01`

View file

@ -1,74 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/main.css">
<title>Hiajens Infrastructure</title>
</head>
<body style="background-color: #002b36">
<div id="main-container">
<div id="head-container">
<h1>Hiajens Infrastructure</h1>
<h2>>> Services <<</h2>
</div>
<div class="clearfix" id="wrapper-container">
<div id="left-container">
<ul class="menu">
<li><a href="index.html">Start</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="https://www.hiajen.de" target="_blank">Hiajen</a></li>
<li><a href="https://peertube.be/w/v8w9Px3AvSMp7gF827JuPg?loop=1&autoplay=1" target="_blank"> do not click</a></li>
</ul>
</div>
<div id="right-container" >
<p>
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
</p>
<hr style="margin-top: 35px; color: #002b36">
<p>
<b><del>Accountverwaltung (LDAP):</del></b>
Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
</p>
<p>
<b><del>Jenkins:</del></b>
Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
</p>
<p>
<b><a href="https://bbb.hiajen.de" target="_blank">BigBlueButton:</a></b>
OpenSource Videokonferenz-Tool
</p>
<p>
<b><a href="https://git.hiajen.de" target="_blank">GIT (Gitea):</a></b>
OpenSource Versionsverwaltungstool für deinen Quellcode
</p>
<p>
<b>Matrix:</b>
OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client <a href="https://element.io/" target="_blank">Element</a>. Die Home-Server URL lautet: <i>matrix.hiajen.de</i>
</p>
<p>Matrix-Bots via: <a href="https://matrix.hiajen.de/_maubot/maubot" target="_blank">MauBot</a></p>
<p>
<b><a href="https://cryptpad.hiajen.de/" target="_blank">CryptPad:</a></b>
OpenSource online Tool zur kollaborativen Zusammenarbeit
</p>
<p>
<b><a href="https://cloud.hiajen.de" target="_blank">Cloud (NextCloud):</a></b>
OpenSource Cloud-Speicher
</p>
<p>
<b><a href="https://push.hiajen.de" target="_blank">UnifiedPush / Gothify:</a></b>
OpenSource PUSH service
</p>
<p>
<b><a href="https://wiki.hiajen.de" target="_blank">Knowledgebase / Wiki:</a></b>
OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen
</p>
</div>
</div>
<div id="footer-container">
<marquee DIRECTION=left>CYBER CYBER CYBER</marquee>
</div>
</div>
</body>
</html>

25
services.md Normal file
View file

@ -0,0 +1,25 @@
---
layout: defaults
title: Services
---
Hier eine Liste der Anwendungen die ich hoste. Wenn du Zugriff auf eine dieser haben möchtest, komm bitte auf mich zu!
* ~~Accountverwaltung (LDAP):~~ Ich habe mein LDAP kaputt gemacht und entschieden es nicht mehr zu nutzen
* ~~Jenkins:~~ Ich habe aktuell keinen nutzen hierfür und mir fehlt die Server Power
* **[BigBlueButton](https://bbb.hiajen.de){:target="_blank"}:** OpenSource Videokonferenz-Tool
* **[GIT (Gitea)](https://git.hiajen.de){:target="_blank"}:** OpenSource Versionsverwaltungstool für deinen Quellcode
* **Matrix:** OpenSource Messenging-Protokoll, zur Nutzung empfehle ich den Client Element. Die Home-Server URL lautet: `matrix.hiajen.de`
* Matrix-Bots via: [MauBot](https://github.com/maubot/maubot){:target="_blank"}
* **[CryptPad](https://cryptpad.hiajen.de){:target="_blank"}:** OpenSource online Tool zur kollaborativen Zusammenarbeit
* **[Cloud (NextCloud)](https://cloud.hiajen.de){:target="_blank"}:** OpenSource Cloud-Speicher
* ~~UnifiedPush / Gothify:~~ OpenSource PUSH service
* **[Knowledgebase / Wiki](https://wiki.hiajen.de){:target="_blank"}:** OpenSource Knowledgebase oder wiki für alles mögliche an Informationen und wissen

8
social.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: defaults
title: Social
---
Ich betreibe folgende Social-Media Kanäle:
* Mastodon: [@Hiajen@chaos.social](https://chaos.social/@Hiajen){:target="_blank"}
* Pixelfed: [@hiajen](https://pixelfed.de/Hiajen){:target="_blank"}

View file

@ -1,111 +0,0 @@
* {
font-family: Arial, serif;
color: #002b36;
}
div {
background-color: #eee8d5;
}
p {
padding: 20px 20px;
}
#main-container h1, h2{
text-align: center;
margin: auto;
padding-top: 12px;
}
.clearfix::after {
content: "";
clear: both;
display: block;
}
.content {
padding: 0 25px;
}
ul.menu {
padding-inline: 20px;
#display: block;
}
.menu li {
list-style-type: none;
text-align: center;
#display: inline-block;
padding: 8px;
margin-bottom: 8px;
background-color: #586e75;
color: #eee8d5;
}
.menu li:hover {
background-color: #93a1a1;
}
.menu li a {
display: block;
color: inherit;
text-decoration: none;
height: 100%;
width: 100%;
}
#main-container {
width: 800px;
#height: 90%;
margin-left: auto;
margin-right: auto;
#background-color: aqua;
clear: both;
#box-shadow: 1px 1px 10px 5px #eee8d5;
}
#head-container{
background-color: #586e75;
width: 100%;
height: 100px;
clear: both;
}
#wrapper-container {
height: 600px;
}
#left-container{
#background-color: blueviolet;
height: 100%;
width: 25%;
float: left;
}
#right-container{
#background-color: brown;
height: 100%;
width: 75%;
float: right;
}
#right-container p {
margin: 0;
padding: 25px 0 0 0;
}
#right-container a {
text-decoration: #859900;
color: #859900;
}
#footer-container{
background-color: #586e75;
padding-top: 20px;
height: 50px;
width: 100%;
}