Browse Source

porting blog to pastel theme, stasis

master
f0x 1 year ago
parent
commit
41ce66a18a
62 changed files with 9254 additions and 8424 deletions
  1. +1218
    -8176
      package-lock.json
  2. +2
    -1
      package.json
  3. +7320
    -0
      shrinkwrap.yaml
  4. BIN
      src/assets/Foks.png
  5. BIN
      src/assets/Foks_transparent.png
  6. BIN
      src/assets/ledspace/final.png
  7. BIN
      src/assets/ledspace/final2.png
  8. BIN
      src/assets/ledspace/psu.png
  9. BIN
      src/assets/ledspace/rj45.png
  10. BIN
      src/assets/ledspace/space.png
  11. BIN
      lder
  12. BIN
      lder.png
  13. BIN
      src/assets/ledspace/strip.png
  14. BIN
      src/assets/ledspace/teardown.png
  15. BIN
      src/assets/ledspace/wires.png
  16. +0
    -5
      src/assets/main.scss
  17. BIN
      src/assets/mario_box/box.mp4
  18. BIN
      src/assets/mario_box/box.webm
  19. BIN
      src/assets/mario_box/box1.jpg
  20. BIN
      src/assets/mario_box/box2.jpg
  21. BIN
      src/assets/mario_box/box2.webm
  22. BIN
      src/assets/mario_box/box3.jpg
  23. BIN
      src/assets/mario_box/box3.webm
  24. BIN
      src/assets/mario_box/box4.jpg
  25. BIN
      src/assets/mario_box/pcb.jpg
  26. BIN
      src/assets/mudle.png
  27. +57
    -0
      src/assets/rainbow.scss
  28. BIN
      src/assets/rainbow_buttons/rect_finished.png
  29. BIN
      src/assets/rainbow_buttons/rect_original.png
  30. BIN
      src/assets/rainbow_buttons/rect_pcb1.jpg
  31. BIN
      src/assets/rainbow_buttons/rect_pcb2.jpg
  32. BIN
      src/assets/rainbow_buttons/round_finished.png
  33. BIN
      src/assets/rainbow_buttons/round_original.png
  34. BIN
      src/assets/rainbow_buttons/round_pcb1.png
  35. BIN
      src/assets/rainbow_buttons/round_pcb2.png
  36. BIN
      src/assets/rainbow_buttons/round_pcb3.png
  37. BIN
      src/assets/rainbow_buttons/round_pcb4.png
  38. BIN
      src/assets/rainbow_buttons/round_pcb5.png
  39. BIN
      src/assets/rainbow_buttons/round_pcb6.png
  40. +1
    -0
      src/assets/rice
  41. +1
    -0
      src/assets/rice.png
  42. +201
    -0
      src/assets/style.scss
  43. +7
    -3
      src/graphql/index.js
  44. +6
    -0
      src/helpers/daysSince.js
  45. +2
    -32
      src/layouts/base.hbs
  46. +0
    -35
      src/layouts/blog-archive.hbs
  47. +0
    -27
      src/layouts/blog.hbs
  48. +5
    -0
      src/layouts/projects.hbs
  49. +5
    -5
      src/pages/404.md
  50. +0
    -70
      src/pages/blog/hello-universe.md
  51. +0
    -68
      src/pages/blog/hello-world.md
  52. +22
    -2
      src/pages/index.md
  53. +22
    -0
      src/pages/projects.md
  54. +47
    -0
      src/pages/projects/lain.haus.md
  55. +38
    -0
      src/pages/projects/ledspace.md
  56. +18
    -0
      src/pages/projects/mario_box.md
  57. +52
    -0
      src/pages/projects/rainbow_buttons.md
  58. +65
    -0
      src/pages/projects/ssl.md
  59. +31
    -0
      src/pages/rice.md
  60. +68
    -0
      src/partials/main.hbs
  61. +66
    -0
      src/static/powerlines.svg
  62. BIN
      src/static/tile2.png

+ 1218
- 8176
package-lock.json
File diff suppressed because it is too large
View File


+ 2
- 1
package.json View File

@@ -29,6 +29,7 @@
"sass": "^1.17.2"
},
"dependencies": {
"stasis-generator": "^0.1.0"
"stasis-generator": "^0.3.0",
"tslib": "^1.9.3"
}
}

+ 7320
- 0
shrinkwrap.yaml
File diff suppressed because it is too large
View File


BIN
src/assets/Foks.png View File

Before After
Width: 1800  |  Height: 1800  |  Size: 896 KiB

BIN
src/assets/Foks_transparent.png View File

Before After
Width: 251  |  Height: 241  |  Size: 42 KiB

BIN
src/assets/ledspace/final.png View File

Before After
Width: 1280  |  Height: 720  |  Size: 476 KiB

BIN
src/assets/ledspace/final2.png View File

Before After
Width: 1280  |  Height: 720  |  Size: 644 KiB

BIN
src/assets/ledspace/psu.png View File

Before After
Width: 1280  |  Height: 720  |  Size: 868 KiB

BIN
src/assets/ledspace/rj45.png View File

Before After
Width: 720  |  Height: 1280  |  Size: 703 KiB

BIN
src/assets/ledspace/space.png View File

Before After
Width: 1400  |  Height: 960  |  Size: 1.4 MiB

BIN
src/assets/ledspace/strip → lder View File


BIN
src/assets/ledspace/strip → lder.png View File


BIN
src/assets/ledspace/strip.png View File

Before After
Width: 1280  |  Height: 142  |  Size: 93 KiB

BIN
src/assets/ledspace/teardown.png View File

Before After
Width: 1176  |  Height: 207  |  Size: 132 KiB

BIN
src/assets/ledspace/wires.png View File

Before After
Width: 1280  |  Height: 720  |  Size: 513 KiB

+ 0
- 5
src/assets/main.scss View File

@@ -1,5 +0,0 @@
$font-color: #151515;

body {
color: $font-color
}

BIN
src/assets/mario_box/box.mp4 View File


BIN
src/assets/mario_box/box.webm View File


BIN
src/assets/mario_box/box1.jpg View File

Before After
Width: 720  |  Height: 1280  |  Size: 80 KiB

BIN
src/assets/mario_box/box2.jpg View File

Before After
Width: 720  |  Height: 1280  |  Size: 94 KiB

BIN
src/assets/mario_box/box2.webm View File


BIN
src/assets/mario_box/box3.jpg View File

Before After
Width: 720  |  Height: 1280  |  Size: 89 KiB

BIN
src/assets/mario_box/box3.webm View File


BIN
src/assets/mario_box/box4.jpg View File

Before After
Width: 1280  |  Height: 720  |  Size: 58 KiB

BIN
src/assets/mario_box/pcb.jpg View File

Before After
Width: 720  |  Height: 1280  |  Size: 86 KiB

BIN
src/assets/mudle.png View File

Before After
Width: 1600  |  Height: 300  |  Size: 3.9 KiB

+ 57
- 0
src/assets/rainbow.scss View File

@@ -0,0 +1,57 @@
$red: #e81d1d;
$orange: #e8b71d;
$yellow: #e3e81d;
$green: #1de840;
$cyan: #1ddde8;
$blue: #2b1de8;
$purple: #dd00f3;


$grey: #3b4252;
$red: #bf616a;
$green: #a3be8c;
$yellow: #ebcb8b;
$orange: darken($yellow, 15);
$blue: #81a1c1;
$purple: #b48ead;
$cyan: #88c0d0;
$white: #e5e9f0;

@mixin rainbow($property) {
0% { /* red */
#{$property}: $red;
}
14% { /* orange */
#{$property}: $orange;
}
28% { /* yellow */
#{$property}: $yellow;
}
42% { /* green */
#{$property}: $green;
}
57% { /* cyan */
#{$property}: $cyan;
}
71% { /* blue */
#{$property}: $blue;
}
85% { /* purple */
#{$property}: $purple;
}
100% { /* red */
#{$property}: $red;
}
}

@keyframes rainbow-bg {
@include rainbow('background');
}

@keyframes rainbow-border {
@include rainbow('border-color');
}

@keyframes rainbow-fg {
@include rainbow('color');
}

BIN
src/assets/rainbow_buttons/rect_finished.png View File

Before After
Width: 705  |  Height: 498  |  Size: 318 KiB

BIN
src/assets/rainbow_buttons/rect_original.png View File

Before After
Width: 702  |  Height: 494  |  Size: 282 KiB

BIN
src/assets/rainbow_buttons/rect_pcb1.jpg View File

Before After
Width: 1280  |  Height: 720  |  Size: 91 KiB

BIN
src/assets/rainbow_buttons/rect_pcb2.jpg View File

Before After
Width: 1280  |  Height: 720  |  Size: 102 KiB

BIN
src/assets/rainbow_buttons/round_finished.png View File

Before After
Width: 705  |  Height: 498  |  Size: 359 KiB

BIN
src/assets/rainbow_buttons/round_original.png View File

Before After
Width: 436  |  Height: 401  |  Size: 195 KiB

BIN
src/assets/rainbow_buttons/round_pcb1.png View File

Before After
Width: 820  |  Height: 472  |  Size: 345 KiB

BIN
src/assets/rainbow_buttons/round_pcb2.png View File

Before After
Width: 801  |  Height: 384  |  Size: 359 KiB

BIN
src/assets/rainbow_buttons/round_pcb3.png View File

Before After
Width: 938  |  Height: 514  |  Size: 414 KiB

BIN
src/assets/rainbow_buttons/round_pcb4.png View File

Before After
Width: 588  |  Height: 550  |  Size: 244 KiB

BIN
src/assets/rainbow_buttons/round_pcb5.png View File

Before After
Width: 691  |  Height: 616  |  Size: 427 KiB

BIN
src/assets/rainbow_buttons/round_pcb6.png View File

Before After
Width: 691  |  Height: 616  |  Size: 312 KiB

+ 1
- 0
src/assets/rice View File

@@ -0,0 +1 @@
/home/f0x/documents/rice

+ 1
- 0
src/assets/rice.png View File

@@ -0,0 +1 @@
rice/2019-03-08.png

+ 201
- 0
src/assets/style.scss View File

@@ -0,0 +1,201 @@
@import "rainbow";

$bg: #24262e;
$fg: mix($bg, white, 5%);

/* Nord Palette */
$grey: #3b4252;
$red: #bf616a;
$green: #a3be8c;
$yellow: #ebcb8b;
$blue: #81a1c1;
$purple: #b48ead;
$cyan: #88c0d0;
$white: #e5e9f0;

html, body {
background: $bg;
color: $fg;
margin: 0;
padding: 0;
}

.header {
margin-top: 3rem;
text-align: center;
.name {
display: inline-flex;
height: 4rem;
font-size: 4rem;

img {
margin-right: 1rem;
height: 100%;
}
margin-bottom: 1rem;
}

a {
font-size: 1.75rem;
padding: 0.5rem;
}
}

a {
color: $fg;
animation: rainbow-fg 8s ease infinite;
}

.content, .footer {
margin-top: 3rem;
box-sizing: border-box;
width: 80%;
margin-left: auto;
margin-right: auto;

border-left: 0.4rem solid transparent;
animation: rainbow-border 8s ease infinite;
background: lighten($bg, 10);
padding: 2.1rem;
}

.content {
h1 {
margin-top: 0;
}

.table {
background: lighten($bg, 5);
display: inline-grid;
grid-template-columns: 1fr 1fr;
border: 1px solid $fg;
border-right: none;
margin: 2rem 0;
position: relative;

.rotate {
display: inline-block;
position: absolute;
top: -2rem;
animation: circle 18s linear infinite;

img {
height: 2rem;
width: 2rem;
animation: wiggle 0.4s linear infinite;
margin: 0;
}
}

span, a {
border-bottom: 1px solid $fg;
border-right: 1px solid $fg;
padding: 1rem;
animation: none;

&:nth-child(odd) {
background: $bg;
}

&:last-of-type {
border-bottom: none;
}
}
}

pre {
overflow-x: auto;
}

img {
width: 100%;
margin: 1rem 0;
}

p {
margin-bottom: 0;
}

ul {
margin: 0;
}
}

.footer {
padding: 1rem;
margin-bottom: 3rem;
line-height: 1.6rem;

#daysSince b {
background: $fg;
color: black;
padding: 0.3rem;
}
}

@keyframes wiggle {
0%, 100% {
transform: rotate(10deg);
}
25% {
transform: rotate(0deg);
}

50% {
transform: rotate(-10deg);
}

75% {
transform: rotate(0deg);
}
}

@keyframes circle {
$size: 2rem;

0%, 100% {
top: -$size;
left: -$size;
}
22% {
transform: rotate(0deg);
}

25% {
top: -$size;
left: 100%;
}

28%, 47% {
transform: rotate(90deg);
}

50% {
top: 100%;
left: 100%;
}

53%, 72% {
transform: rotate(180deg);
}

75% {
top: 100%;
left: -$size;
}

78%, 97% {
transform: rotate(270deg);
}

100% {
transform: rotate(270deg);
}
}

@media screen and (orientation: portrait) { // mobile
.content, .footer {
width: 95%;
margin-top: 2rem;
}
}

+ 7
- 3
src/graphql/index.js View File

@@ -5,14 +5,17 @@ module.exports = {
pageByIndex(index: Int!): Page
pageByTitle(title: String!): Page
pages: [Page]
linkedPages: [Page]
projectPages: [Page]
posts: [Page]
}
type Page {
html: String
frontmatter: Frontmatter
frontmatter: Frontmatter
excerpt: String
relativePath: String
active: Boolean
nolink: Boolean
}
type Frontmatter {
title: String
@@ -23,10 +26,11 @@ module.exports = {
} ,
createRoot: (pages, config) => {
return {
pages: () => pages,
pages: () => pages.filter(p => p.frontmatter.nolink != true),
pageByIndex: args => pages[args.index],
pageByTitle: args => pages.filter(p => p.frontmatter.tile === args.title),
projectPages: () => pages.filter(p => p.relativePath.startsWith("/projects/") && !p.relativePath.startsWith("/projects/index.html")),
posts: args => pages.filter(p => p.frontmatter.type === 'blog')
}
}
}
}

+ 6
- 0
src/helpers/daysSince.js View File

@@ -0,0 +1,6 @@
module.exports = (args) => {
let since = new Date(args.fn(this).trim())
let now = new Date()
let timediff = now.getTime() - since.getTime()
return Math.ceil(timediff / (1000 * 60 * 60 * 24))
}

+ 2
- 32
src/layouts/base.hbs View File

@@ -1,32 +1,2 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.6/dist/terminal.min.css" />
<title>{{meta.title}}</title>
</head>
<body class="terminal">
<div class="container">
<div class="terminal-nav">
<div class="terminal-logo">
<div class="logo terminal-prompt"><a href="/" class="no-style">Stasis Example Project</a></div>
</div>
<nav class="terminal-menu">
<ul>
<li><a class="menu-item" href="/blog">Blog</a></li>
</ul>
</nav>
</div>
<main>
<h1>Loop over all your pages using GraphQL</h1>
<ul>
{{#each this.query.data.pages}}
<li><a href="{{this.relativePath}}">{{this.frontmatter.title}}</a></li>
{{/each}}
</ul>
</main>
</div>
</body>
</html>
{{#> main }}
{{/main}}

+ 0
- 35
src/layouts/blog-archive.hbs View File

@@ -1,35 +0,0 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.6/dist/terminal.min.css" />
<title>{{meta.title}}</title>
</head>
<body class="terminal">
<div class="container">
<div class="terminal-nav">
<div class="terminal-logo">
<div class="logo terminal-prompt"><a href="/" class="no-style">Stasis Example Project</a></div>
</div>
<nav class="terminal-menu">
<ul>
<li><a class="menu-item" href="/blog">Blog</a></li>
</ul>
</nav>
</div>
<main>
<div>
{{{body}}}
</div>
<ol class="terminal-toc">
{{#each this.query.data.posts}}
<li><a href="{{this.relativePath}}">{{this.frontmatter.title}}</a></li>
{{/each}}
</ol>
</main>
</div>
</body>
</html>

+ 0
- 27
src/layouts/blog.hbs View File

@@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.6/dist/terminal.min.css" />
<title>{{meta.title}}</title>
</head>
<body class="terminal">
<div class="container">
<div class="terminal-nav">
<div class="terminal-logo">
<div class="logo terminal-prompt"><a href="/" class="no-style">Stasis Example Project</a></div>
</div>
<nav class="terminal-menu">
<ul>
<li><a class="menu-item active" href="/blog">Blog</a></li>
</ul>
</nav>
</div>
<main>
{{{body}}}
</main>
</div>
</body>
</html>

+ 5
- 0
src/layouts/projects.hbs View File

@@ -0,0 +1,5 @@
{{#> main }}
{{#each this.query.data.projectPages}}
<a href={{this.relativePath}}>{{this.frontmatter.title}}</a><br>
{{/each}}
{{/main}}

src/pages/blog/index.md → src/pages/404.md View File

@@ -1,14 +1,14 @@
---
layout: blog-archive
title: All Blog Posts
layout: base
title: 404
query: '{
posts {
pages {
frontmatter {
title
}
relativePath
}
}'
nolink: true
---

## All blog post
whoopsies, that doesn't exist!

+ 0
- 70
src/pages/blog/hello-universe.md View File

@@ -1,70 +0,0 @@
---
layout: blog
title: Hello Universe
type: blog
---

## Hello Universe.

Lorem markdownum Ulixem non animam relicta, mite pectus: **a** quam cupidine
clausa undae, nec quid sonuere sedes. Inhaerebat nudaque flammaque exclamant
nostrum servata optandi caput illo attollens comes sollertia unxit descendat,
Helenamque crebros obruta male. Saeviat et flammis accipe sedibus nervis
spolioque in molem *reparabile sulco* et brevi, et et, pro caedis. Ex te, rerum
ab cecinisse totas timeto reccidat tantumque *quoque dominoque* venti.

- Quassasque in servat cernitis cernentem extremas
- Fieri laetitiae undis
- Aqua aurea laetis invidiosus inculpata
- Armo traherent Hectore deos rursus

In in *rogum colebat*, est noxque vetustas pariter reticere, et tempora et
frustra extemplo. Dixere movit meta terrae [sopistis
est](http://mansura-nostraque.net/gurgitefelixque.php); lustrat regni, destituit
lacrimas propiore noctes animus poenas concurrere.

## Et solebat missa dubitet mea tam

Indice siccis vestrum dum manifesta arsit stimuletur utinam guttura recentes.
Meum praecingitur nurus?

Unus flammis pater. Est possit Achille ponitque adspicias temeraria terrent
sororis capiti.

## Premebat plura nostris nova cum infirmos mihi

Fuso pubis tollere ripae ponti res protinus, frustra [amat](http://www.una.io/),
potiturque. Metus quam flammas manu Triptolemus ante: mitis casusque sacrilega
deprendit contra stipe; hasta agmen quamquam? Deflent luminibus Numici ab
remissis iacentem sonantia.

Quae tulit dea, *pecudis nos* medias fastigia, veste. Fecit medio virgam pecoris
tamen: si [nurusque iuvabat](http://gavisus.com/) tu effugit calido Calydonius
Subaris inexpugnabile his.

if (zeroDbmsIntellectual == e_netbios) {
tutorialScareware -= nanometer_processor_finder / yahooHocWpa(
personal_virus, mirrored);
default_ide_intranet += lanDaemon + 2;
big_bar_banner.data_dial(mail(pipeline_domain_smm, 1,
virus_yottabyte_backup), disk_visual_wep.ruby_parallel(
lossless_io_internic));
} else {
megabyte_storage_matrix.module = nntp - logic_lpi_drive;
telecommunications.cpm.isp(-3);
}
if (bank(bit_code - 5, error_computer_stack)) {
wordConstant(diskMacStorage(google_aiff_circuit), word.standby(dpi,
copy_document_definition, 1), e_wireless - bittorrent);
} else {
cd(start, -5);
gps_disk_orientation += spider;
blob.software += 2;
}
var friend = characterScraping + partition_analyst;

Rettulit repetunt natus. Sic feris me vultus, e veribus ignaro, Hecaten in hanc,
cum cognoscenda. Quotiens sonum, o respicit est Aeneae venerat io solvit vesica.
Premunt respice violenta *animoque locum* inguinibus habebat summa suos aurum
opacas dives pharetratae Ixione essent. *Non nostri damnans* pondus cum possent
est.

+ 0
- 68
src/pages/blog/hello-world.md View File

@@ -1,68 +0,0 @@
---
layout: blog
title: Hello World
type: blog
---

## Hello world.

Lorem markdownum spumisque sponte Aurora, si luminis dilexit sub pello harena,
nec, colebatur hausi obvertere illa. Dum Pelion, ictu impetus, fores coniunctior
rogat, laude. Leto fortuna, si lactentem illa natura tam; adhuc *villo
cruentior* eratis. Gradive iuvenum. Huc exaudi testis vindexque mundum.

var fat = mashup_lpi_boot(io, rippingGpuAddress);
resources.troubleshooting(page_publishing_motherboard.data(soundFile, plugXp
- idePhpInterface, internic));
if (multicasting) {
p_system(gigo + textCybersquatterDeprecated, cable.compiler(tween_dbms,
bar_system_capacity));
} else {
servletFile = 2;
}
var key = vle_halftone_android;
if (rdf_pharming(ip_pci_card, compression + avatarJfs, remote_biometrics)) {
formatUpload += cd_wysiwyg_module;
samba_unit_smartphone = native;
hashtag_ipx.newbie_printer_spider(post_view(memory_repeater));
} else {
desktop += -4;
barAd += 4 - banner + rjNetiquetteHard.android(nasRom, irq);
number_art_pseudocode(aiff_web, tagSliLogic);
}

## Umeris sine

Contemptor subitae ortus precor illa, deorum accipe? In epulis ab pietas putat,
ab **addunt** a dicta undam atque mentem decursa Paeonis.

Pedesque gemma ab Cassiope caedit admota. Montes bracchia securae Atlantiades
adde pectusque. Sed maris quoque, est magis hominesque tenebat ignes ornant:
casus lapsa promunturiumque pervenit se cumque pudorem!

## Tum donavi tetigit Phineu procul

Rursus hinc, ut latoque segetes deme invideatis potest igne tactis Actaea dabat
erat orbus hi numinis resistunt falsa obscenas. Vitreis suspiria, monitis
nomina, veniat. Lapsasque gratus tremit ima viget diximus paulatim undis colorem
subnixa **subposuisse cruciata** tantum se serae habenas. Negare in alis, ire
huc!

## Ferebat generosos lustrat concipias genuisse humus iaculum

Elimat dominasque avenis virgo meos rogabat nullam novissima hostes, et
harundine tamen; crudelis subita quam, **acu credere**. Saepe in iaculis quoque
ait est inter suam fontana lancea foret? Tenentem ab laeta; est postquam tura
hactenus pascua certis, litora.

## Est putat instabat et copia liquitur occubuisse

Retinet laudibus modo tristia adveniens angue mersitque resolvit perque tardae.
Arma imoque, matris sive modo **pedibus**!

Lumina egredere et virgo obliquis, *vita* chlamydem augebat secus id mediusve:
ferunt mortuaque urbe tuae scopulis officiis. A num matrem glaebam Cyllaron
lanificae ova prius adfixa uda specus seque cunas aut navale causa Tyrrhenaque
ambo; oblitis. Secum favorque sustinui manus. Sociati filia exstat temptat
refugit vero, et a coniunx intres. Virgineo additus mutatis ausorum; ipsa, ora
dixisse mutavit, sceleri!

+ 22
- 2
src/pages/index.md View File

@@ -1,6 +1,6 @@
---
layout: base
title: Stasis Basic Example
title: home
query: '{
pages {
frontmatter {
@@ -11,4 +11,24 @@ query: '{
}'
---

# Hello World
# Hello there!
## Welcome to my corner of the wired
I write free software, solder rgb leds and fly quads.
I also run [lain.haus](https://lain.haus), where I provide services such as chat and git hosting.
If you like what I do, you can donate to my <a href="https://liberapay.com/f0x/donate">Liberapay</a>

## Links
<div class="table">
<div class="rotate">
<img src="/assets/Foks_transparent.png" alt="fox running around the table">
</div>
<span>Matrix: </span> <a href="https://matrix.to/#/@f0x:lain.haus">@f0x:lain.haus</a>
<span>Mastodon: </span><a href="https://cyberia.social/@foks" rel="me">@foks@cyberia.social</a>
<span>Twitter: </span><a href="https://twitter.com/f0x52">@f0x52</a>
<span>WriteFreely</span><a href="https://write.lain.haus/f0x/">write.lain.haus</a>
<span>Git: </span><a href="https://git.lain.haus/f0x">git.lain.haus/f0x</a>
<span>Github: </span><a href="https://github.com/f0x52">f0x52</a>
<span>Keybase: </span><a href="https://keybase.io/f0x52">f0x52</a>
<span>Freenode: </span><span>f0x, f0x2</span>
<span>Email: </span><a href="mailto:f@0x52.eu">f@0x52.eu</a>
</div>

+ 22
- 0
src/pages/projects.md View File

@@ -0,0 +1,22 @@
---
layout: projects
title: projects
query: '{
pages {
frontmatter {
title
}
relativePath
}
projectPages {
frontmatter {
title
}
relativePath
}
}'
---
# My Projects:
I'm bad at writing actual pages for my project, and if you're interested in my new stuff you're probably better off following me [on Mastodon](https://cyberia.social/@foks).
I also participate in [tilde.industries](https://tilde.industries) so make sure to check that out as well.
Here's a list of projects I *have* written a page about: <br>

+ 47
- 0
src/pages/projects/lain.haus.md View File

@@ -0,0 +1,47 @@
---
layout: base
title: lain.haus
query: '{
pages {
frontmatter {
title
}
relativePath
}
}'
nolink: true
---

# What is lain.haus

I used to be quite active in the lainchan imageboard community, themed around the Serial Experiments Lain anime, and focussed on Cyberpunk, tech, politics and (glitch)art. The communities have since went to shit (tl;dr: drama), and I wouldn't recommend either of the lain-connected imageboards that are available now.

This started somewhere in 2017, running a few services for myself: Matrix and Pleroma. After a while I invited some of my friends (most of whom I met through the lainchan community (site(s) are now bad :/), hence the name (oof that's a lot of parenthesis)).
Inspired by service providers such as [Disroot](https://disroot.org), [Wehost](https://weho.st) and [Riseup](https://riseup.net). I decided to open up my services to the public a while later.

I volunteer to run everything, but I do get some donations (not enough to cover)

## Finances

My services don't cost any money, but I do ask everyone to consider donating to my [Liberapay](http://liberapay.com/f0x/donate)

## How it's run

The domain is courtesy of [Thufie](https://cyberia.social/@lunaterra/). The services are spread out over three servers:

Akropolis: main Hetzner VPS
Leviathan: beefy gamer laptop that's now a server, doing all the heavy lifting
Aecor: new DigitalOcean droplet because I got education credit for 10months

All Leviathan traffic is routed through Akropolis using wireguard to protect my home ip.

I run:
[Matrix](https://matrix.org) for federated chat
[Mastodon](https://joinmastodon.org) for federated microblogging
[WriteFreely](https://writefreely.org/) for blogging
[Gitea](https://gitea.io) for git hosting
[Mumble](https://mumble.info) for voice chat


For Matrix I also run an irc and Telegram bridge.
More info can be found on [lain.haus](https://lain.haus)

+ 38
- 0
src/pages/projects/ledspace.md View File

@@ -0,0 +1,38 @@
---
layout: base
title: ledspace
query: '{
pages {
frontmatter {
title
}
relativePath
}
}'
nolink: true

---

# Ledspace

To color up my local hackerspace, I proposed to make 13 RGB tube lights. After getting a budget and waiting for Aliexpress, the fun could begin.

As a base I'm using Hornbach's <a href="https://www.hornbach.nl/shop/LED-Armatuur-20-Watt-1200-mm-koel-wit-Energieklasse-A/5825358/artikel.html"> White LED Tube Light</a>, which offer a beautiful diffuser with aluminium heatsink. Sadly Hornbach discontinued these. Their new design is more expensive and all plastic :(
We start by tearing it down, which is surprisingly easy:
<img id="img" src="/assets/ledspace/teardown.png">
After removing the white led pcb, it's time to glue 1.2 meters of APA102 strip in it's place.
<img id="img" src="/assets/ledspace/strip.png">
For connecting the tubes, I'm using RJ45 connectors. the TX pair (orange) for data, and the Power pair (brown) for clock. They are both twisted with a ground.
<img id="img" src="/assets/ledspace/strip solder update.png">
The RJ45 connector fits snuggly inside the casing
<img id="img" src="/assets/ledspace/wires.png">
The PSU consists of 2 USB plugs, and an IKEA KOPLA power supply
<img id="img" src="/assets/ledspace/psu.png">
On the other side of the tube is another RJ45, which transfers ground, clock and data to the next tube
With two connected togeather, it already looks great!
<img id="img" src="/assets/ledspace/final.png">
Here I installed the first two, driven by an Arduino Nano. Later on, a Raspberry Pi Zero W will take it's place.
<img id="img" src="/assets/ledspace/final2.png">

Here's half of them hanging. The Arduino was upgraded to a Raspberry 3B+, running an SPI driver in C, controlled over STDIN by a bunch of Perl, which can all be found [here](https://github.com/revspace/ledspace)
<img src="/assets/ledspace/space.png">

+ 18
- 0
src/pages/projects/mario_box.md View File

@@ -0,0 +1,18 @@
---
layout: base
title: mario box
permalink: /projects/mario_box/
nolink: true
---

# Mario Box

For a friends birthday I made a NodeMCU box. The NodeMCU runs micropython, it has a speaker, a sha badge lipo with charging circuit, and a rainbow button with 4 SK6812 RGBW led's. It comes preloaded with a boot.py that plays a mario tune when you start it/press the button.<br><br>
<div class="gallery">
<video src='/assets/mario_box/box2.webm' controls></video>
<img class="double" class="double" src='/assets/mario_box/box1.jpg' alt='top view, led on'>
<img class="double" src='/assets/mario_box/box2.jpg' alt='top view, led off'>
<img class="double" src='/assets/mario_box/pcb.jpg' alt='modded button pcb'><br>
<img src='/assets/mario_box/box3.jpg' alt='barrel jack for charging'>
<img src='/assets/mario_box/box4.jpg' alt='power button'>
</div>

+ 52
- 0
src/pages/projects/rainbow_buttons.md View File

@@ -0,0 +1,52 @@
---
layout: base
title: rainbow buttons
permalink: /projects/rainbow_buttons/
nolink: true
---

# Rainbow Buttons

I've recently started upgrading old elevator buttons, with LED's, which makes them look great. I started
with a rectangular one, for a button in our hackerspace. After that the challenge continued with a
round version.
<div class="gallery">
<img src="/assets/rainbow_buttons/rect_finished.png" alt="Rectangular RGBW Button">
<img src="/assets/rainbow_buttons/round_finished.png" alt="Round RGBW Button">
</div>

These are the original internal pcb's of both:
<div class="gallery">
<img src="/assets/rainbow_buttons/rect_original.png" alt="Original Rectangular PCB">
<img src="/assets/rainbow_buttons/round_original.png" alt="Original Round PCB">
</div>
I've done quite a few iterations of the rectangular pcb, breaking some of the LED's or having other trouble.
<div class="gallery">
<img src="/assets/rainbow_buttons/rect_pcb1.jpg" alt="Rectangular PCB">
<img src="/assets/rainbow_buttons/rect_pcb2.jpg" alt="Rectangular PCB">
</div>
It has 4 addressable SK6812 RGBW LED's, in comparison to the default 4 orange ones in series. A 2x2 header on the back exposes 5v, ground, data pin and the button lead, which connects to ground when pressed.
This is the finished frontpanel, a huge improvement in my opinion:
<img id="img" src="/assets/rainbow_buttons/rect_finished.png" alt="Finished Rectangular frontpanel">

After this, it was time for the round one.
This proved a bit more of a challenge, because of the limited pcb space, and getting the round shape.
My first finished round button went into the <a href="/projects/mario_box">mario box</a>, and I only made pictures of the back and front, when it was already assembled. For our hackerspace's light switches, I decided to document the process a lot better.
First got 2 square protoboards, by cutting with a boxcutter, and then breaking
<img id="img" src="/assets/rainbow_buttons/round_pcb1.png">
Then I made them round by cutting, filing and sanding, and drilled 2 holes to fit the button's plastic extruders.
<img id="img" src="/assets/rainbow_buttons/round_pcb2.png">
After that I fit the 4 LED's, and soldered them in place
<img id="img" src="/assets/rainbow_buttons/round_pcb3.png">
The button goes in the middle, and to fit the stem, I had to cut it a bit, and then add some hotglue
<img id="img" src="/assets/rainbow_buttons/round_pcb4.png">
Then I laid out the wires to connect everything. Because it fits better, the LED's are connected a bit unintuitively, like this:
2 1
3 4
Which has to be corrected in software.
<div class="gallery">
<img src="/assets/rainbow_buttons/round_pcb5.png">
<img src="/assets/rainbow_buttons/round_pcb6.png">
</div>
Which gives the finished buttons:
<img id="img" src="/assets/rainbow_buttons/round_finished.png">

+ 65
- 0
src/pages/projects/ssl.md View File

@@ -0,0 +1,65 @@
---
layout: base
title: ssl
permalink: /projects/ssl/
nolink: true
---

# SSL

Good SSL is important for **any** site. Over time I've combined bits of other configs, giving me this setup (which also gives a perfect [ssltest](https://www.ssllabs.com/ssltest/analyze.html?d=f.0x52.eu) score):

First generate /etc/ssl/certs/dhparam.pem:
<code>
sudo openssl dhparam -dsaparam -out /etc/ssl/certs/dhparam.pem 8192
</code>
<br>
Nginx config:
<pre><code>server {
listen 443 ssl;
listen [::]:443 ssl;
server_name f.0x52.eu, 0x52.eu, www.0x52.eu;
ssl_certificate /etc/letsencrypt/live/f.0x52.eu/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/f.0x52.eu/privkey.pem; # managed by Certbot

ssl_dhparam /etc/ssl/certs/dhparam.pem;
ssl_protocols TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers AES256+EECDH:AES256+EDH:!aNULL;
ssl_ecdh_curve secp384r1; # Requires nginx >= 1.1.0
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

ssl_session_tickets off; # Requires nginx >= 1.5.9
ssl_stapling on; # Requires nginx >= 1.3.7
ssl_stapling_verify on; # Requires nginx => 1.3.7
resolver 87.98.175.85 5.9.49.12 193.183.98.154 5.135.183.146 valid=300s;
resolver_timeout 5s;
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
gzip off;

root /var/www/f.0x52.eu;
}

server {
listen 80;
server_name f.0x52.eu, 0x52.eu, www.0x52.eu;

location / {
if ($scheme != "https"){
return 301 https://$host$request_uri;
}
return 404;
}
}
</code></pre>
<br>
You'll need to comment out the 443 block before generating the first cert, otherwise nginx complains about the nonexistent cert files.<br><br>
Get letsencrypt certs:
<code>
sudo certbot --authenticator webroot --installer nginx -d f.0x52.eu -d 0x52.eu -d www.0x52.eu --rsa-key-size 4096
</code>
<br>
Remove the 443 block comments, restart nginx and all should be great!

+ 31
- 0
src/pages/rice.md View File

@@ -0,0 +1,31 @@
---
layout: base
title: rice
query: '{
pages {
frontmatter {
title
}
relativePath
}
}'
---

# My rice
I Really like ricing, and I change stuff around quite often.<br>
Basically all my systems run [Debian Sid](https://www.debian.org/releases/sid/), and I use:<br>
**wm:** bspwm<br>
**terminal:** st<br>
**browser:** firefox nightly<br>
**editor:** Atom<br>
**chat:**<br>
* telegram<br>
* <a href="https://riot.im">riot</a><br>



You can find all my dotfiles [here](https://git.lain.haus/f0x/dots)
### Current rice:
<div class="gallery">
<a href="/assets/rice.png"><img src="/assets/rice.png" alt="My current rice"></a>
</div>

+ 68
- 0
src/partials/main.hbs View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{{this.frontmatter.title}}</title>
<link href="/assets/style.css" rel="stylesheet" type="text/css">
<script>
/*
@licstart The following is the entire license notice for the
JavaScript code in this page.

Copyright (C) 2019 Foks

The JavaScript code in this page is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.

As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.

@licend The above is the entire license notice
for the JavaScript code in this page.
*/
</script>
</head>
<body>
<div class="header">
<div class="name">
<img src="/assets/Foks_transparent.png" align="center">
Foks
</div><br>
{{#each this.query.data.pages}}
<a href="{{this.relativePath}}">{{this.frontmatter.title}}</a>
{{/each}}
</div>
<div class="content">
{{{body}}}
{{> @partial-block}}
</div>
<div class="footer">
it has been <span id="daysSince">approximately <b>{{#daysSince}}2019-03-08T21:25:11+00:00{{/daysSince}}</b> days</span> since last using frontend JavaScript on this site<br>
This site is built with <a href="https://github.com/Gioni06/stasis-generator">Stasis</a>, a static site generator written in TypeScript.<br>
The source can be found <a href="">here</a>.
</div>
<script>
// this is obviously a joke. My static site generator will update the html on compile,
// but to get it updated you do need JS :P
// Furthermore, not all JS is bad

let daysSince = document.getElementById("daysSince")

let since = new Date("2019-03-08T21:25:11+00:00")
let now = new Date()
let timediff = now.getTime() - since.getTime()
let days = Math.ceil(timediff / (1000 * 60 * 60 * 24))
let plural = days != 1 ? 'days' : 'day'
daysSince.innerHTML = `<b>${days}</b> ${plural}`
</script>
</body>
</html>

+ 66
- 0
src/static/powerlines.svg
File diff suppressed because it is too large
View File


BIN
src/static/tile2.png View File

Before After
Width: 256  |  Height: 256  |  Size: 160 KiB

Loading…
Cancel
Save