nindwen.blue

my home page
git clone https://git.nindwen.blue/nindwen.blue.git
Log | Files | Refs | README

commit baba1074caf6c12cbeb2a346e87d8a33f6455280
parent 23d4374a92a091c5cf8384a963211774ba926718
Author: Laura Ketola <me@nindwen.blue>
Date:   Fri, 13 Apr 2018 23:00:14 +0300

Add notes

Diffstat:
Makefile | 23+++++++++++++++++++----
README.md | 4+++-
build_index.rb | 21+++++++++++++++++++++
head.html | 4++--
head3.html | 7+++++++
index.md | 27+++++++++++++--------------
notes-template.html | 41+++++++++++++++++++++++++++++++++++++++++
notes.scss | 116+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
8 files changed, 222 insertions(+), 21 deletions(-)

diff --git a/Makefile b/Makefile @@ -1,16 +1,31 @@ -default: output/index.html push +SRC_NOTES := $(wildcard notes/*.md) +OUT_NOTES := $(patsubst notes/%.md,output/notes/%.html,$(SRC_NOTES)) + +default: push output/index.html: index.md output/main.css head.html head2.html foot.html pandoc $< | cat head.html output/main.css head2.html - foot.html > $@ -output/main.css: main.scss - sass --style compressed main.scss output/main.css +output/%.css: %.scss + sass --sourcemap=none --style compressed $< $@ + +output/notes/%.html: notes/%.md output/notes.css + pandoc --highlight-style=breezedark --template=notes-template.html $< > $@ + +.PHONY: notes +notes: $(OUT_NOTES) output/notes.css head.html head3.html foot.html + ruby build_index.rb | cat head.html output/notes.css head3.html - foot.html > output/notes/index.html + echo $(OUT_NOTES) .PHONY: push -push: +push: output/index.html notes rsync -a output/ usvs:www/nindwen.blue .PHONY: clean clean: rm output/* + rm output/notes/* +.PHONY: ipfs-publish +ipfs-publish: push + ssh usvs 'ipfs name publish /ipfs/$$(ipfs add -Qw www/nindwen.blue/{index.html,persikka.png,66006f.png})' diff --git a/README.md b/README.md @@ -2,10 +2,12 @@ This is my personal contanct page - [nindwen.blue](https://nindwen.blue). ### Structure -When `make` is executed, it builds the page as follows: +When `make` is executed, it builds the index page as follows: * head.html * `sass` main.scss * head2.html * `pandoc` index.md * foot.html + +Makefile also builds a "notes" directory, with markdown files built based on <notes-template.html> and then a index file is built with <build_index.rb>. diff --git a/build_index.rb b/build_index.rb @@ -0,0 +1,21 @@ +require 'yaml' + +files = Dir.open('notes') + .select { |file| file =~ /.+\.md/ } + .map do |filename| + contents = File.read("notes/" + filename) + contents = YAML.load(contents) + contents["filename"] = filename.split(".")[0] + contents + end + .select {|file| file["public"] } + +puts "<h1>Notes and thoughts</h1>" +puts "<ul>" +files.sort {|x,y| y["date"] <=> x["date"] } + .each do |file| + print "<li><a href='#{file["filename"]}.html'>" + print "<span class='date'>#{file["date"]}</span>" + puts "<span class='title'>#{file["title"]}</span></a></li>" + end +puts "</ul>" diff --git a/head.html b/head.html @@ -9,11 +9,11 @@ <html lang="en"> <head> - <title>Laura Ketola</title> + <title>nindwen</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Laura Ketola"> - <meta name="description" content="Laura Ketola's contact page. At the moment, Iโ€™m studying computer science at the University of Tampere, Finland and working part-time as software developer."> + <meta name="description" content="Laura Ketola's contact page and blog."> <link rel="shortcut icon" type="image/png" href="66006f.png"/> <meta name="theme-color" content="#66006f"> <meta name="google-site-verification" content="h95iC1UVYOooJsjQ06MmTiYJLmhsc96FSkuen8NDL0k" /> diff --git a/head3.html b/head3.html @@ -0,0 +1,7 @@ + </style> + </head> + <body> + <header> + <a href="/">nindwen.blue</a> ยป <a href="/notes">notes</a> + </header> + <div id="content"> diff --git a/index.md b/index.md @@ -6,32 +6,21 @@ ### Hi! ๐Ÿ‘‹ -I'm *Laura Ketola*. Often Nindwen or Persikka on the internet. At the moment, I'm studying computer science at the University of Tampere, Finland and working part-time as software developer. +I'm *Laura Ketola*. Often Nindwen or Persikka on the internet. At the moment, I'm studying computer science at a university in Finland and working part-time as software developer. This is my front page / contact info. *** -------- ----------------------------------------- - email me (at) nindwen.blue - github [github.com/nindwen](http://github.com/nindwen) + email laura.m.ketola (at) gmail.com + github [github.com/nindwen](https://github.com/nindwen) keybase [keybase.io/nindwen](https://keybase.io/nindwen) twitter [twitter.com/nindwen](https://twitter.com/nindwen) -linkedIn [linkedin.com/in/laura-ketola](https://www.linkedin.com/in/laura-ketola/) -------- ----------------------------------------- *** -### Tech ๐Ÿ’ป - -> Ed is the standard text editor. - -I enjoy messing around with *NIX-systems and terminals. If something can be simple, it probably should be. Knowing when that's true is often the hard part. - -My actual work is generally in web dev. And while my experience is mostly in frontend/backend development, UX design is also something very important for me. - -I'm most confident in my skills in Java and the Javascript ecosystem (Html5 & Node). I also have experience in for example Python, C/C++ and Rust, though I haven't had the opportunity to build anything larger with them yet. - ### Life ๐ŸŒˆ > All we have to decide is what to do with the time that is given us. @@ -42,6 +31,16 @@ I enjoy running, reading and writing, at least when I remember not to live in my If you know me, or want to connect for some other reason, feel free to shoot an email at the address above, it's likely the easiest way to reach me. +### Tech ๐Ÿ’ป + +> Ed is the standard text editor. + +I enjoy messing around with *NIX-systems and terminals. If something can be simple, it probably should be. Knowing when that's true is sadly the hard part. + +My actual work is generally in web dev. And while my experience is mostly in frontend/backend development, UX design is also something very important for me. + +I'm most confident in my skills in Java and the Javascript ecosystem (Html5 & Node). I also have experience in for example Python, C/C++ and Rust, though I haven't had the opportunity to build anything larger with them yet. + ### This page โš™ > <!doctype html> diff --git a/notes-template.html b/notes-template.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8" /> +<meta name="generator" content="pandoc" /> +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> +<title>$title$</title> +$if(highlighting-css)$ +<style type="text/css"> +$highlighting-css$ +</style> +$endif$ +<link rel="stylesheet" href="/notes.css"> +<link rel="shortcut icon" type="image/png" href="/66006f.png"/> +<meta name="theme-color" content="#66006f"> +</head> +<body> +$for(include-before)$ +$include-before$ +$endfor$ +<header> +<a href="/">nindwen.blue</a> ยป <a href="/notes">notes</a> ยป $title$ +$if(date)$ +<span class="date">$date$</span> +$endif$ +</header> +$if(toc)$ +<nav id="$idprefix$TOC"> +$table-of-contents$ +</nav> +$endif$ +<div id="content"> +$body$ +</div> +$for(include-after)$ +$include-after$ +$endfor$ +<footer> +</footer> +</body> +</html> diff --git a/notes.scss b/notes.scss @@ -0,0 +1,116 @@ +$faint: #bbb; +$front: #333333; +$back: #fefefe; + +body { + background: $back; +} + +#content, header, footer { + max-width: 700px; + margin: auto; + font-size: 16pt; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.6em; + color: $front; + + img { + text-align: center; + border-radius: 10px; + box-shadow: 1px 1px 20px $front; + max-width: 90%; + } + + figcaption { + text-align: center; + font-style: italic; + color: grey; + font-size: 80%; + } +} + +header, footer, +header a, +header a:visited { + color: $faint; + text-decoration: none; +} + +header { + margin-bottom: 60px; + margin-top: 20px; + + .date { + float: right; + } +} + +footer { + border-top: 1px solid $faint; + +} + +h1 { + border-bottom: 1px solid $faint; + font-size: 150%; +} + +h2, h3, h4, h5 { + font-size: 120%; +} + +h1:before { + content: '# '; + color: $faint; +} + +h2:before { + content: '## '; + color: $faint; +} + +h3:before { + content: '### '; + color: $faint; +} + +div.sourceCode { + background: $front; + color: $back; + border-radius: 5px; + padding: 10px; + margin: 10px; + font-size: 80%; + box-shadow: 1px 1px 10px $front; +} + +blockquote { + font-style: italic; + border-left: solid $faint 4px; + padding-left: 20px; + color: grey; +} + +ul { + padding: 50px; + border: 1px solid $faint; + border-radius: 10px; + + a { + text-decoration: none; + } + + li { + list-style-type: none; + } + + .date { + color: $faint; + } + .title { + padding-left: 30px; + color: $front; + text-decoration: underline; + } +} +