From fffc7157b510d9f39de42c7f33811c7651d4af52 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Sun, 14 Aug 2022 19:34:56 +0100 Subject: [PATCH] write bloggers out to html, add initial styling --- src/bloggers.11tydata.js | 13 ++++++++----- src/bloggers.html | 36 +++++++++++++++++++----------------- src/css/theme.css | 23 +++++++++++++++++++++++ src/lib/shuffle.js | 22 ++++++++++++++++++++++ 4 files changed, 72 insertions(+), 22 deletions(-) create mode 100644 src/lib/shuffle.js diff --git a/src/bloggers.11tydata.js b/src/bloggers.11tydata.js index ce871aa..55b1605 100644 --- a/src/bloggers.11tydata.js +++ b/src/bloggers.11tydata.js @@ -4,6 +4,7 @@ const path = require("path"); const fs = require("fs"); const fetch_json = require("./lib/fetch_json.js"); +const shuffle = require("./lib/shuffle.js"); async function fetch_info(blogger) { if(typeof blogger.github_username !== "string") return; @@ -14,14 +15,17 @@ async function fetch_info(blogger) { console.error(github_userdata.message); } - console.log(`GITHUB_USERDATA`, github_userdata) - blogger.bio = github_userdata.bio; blogger.url_blog = github_userdata.blog; blogger.url_github = github_userdata.html_url; blogger.url_twitter = github_userdata.twitter_username === null ? null : `https://twitter.com/@${github_userdata.twitter_username.replace(/^@/, "")}`; blogger.url_avatar = github_userdata.avatar_url; + // If the link to the blog doesn't include a protocol, default to https. + // If this breaks your blog, then you should enable https to fix the issue. + // ALL Internet traffic should be encrypted. Your blog is not an exception. + if(blogger.url_blog.search(/^[a-zA-Z]+:\/\//) === -1) + blogger.url_blog = `https://${blogger.url_blog}`; if(typeof blogger.url_blog !== "string" || blogger.url_blog.length == 0) blogger.url_blog = null; @@ -29,11 +33,10 @@ async function fetch_info(blogger) { module.exports = async function() { const feeds_data = JSON.parse(await fs.promises.readFile(path.resolve(__dirname, "../feeds.json"), "utf-8")); - - - await Promise.all(feeds_data.map(fetch_info)); + shuffle(feeds_data); // Don't give any 1 person the advantage + return { layout: "main.njk", title: "Bloggers", diff --git a/src/bloggers.html b/src/bloggers.html index a413b0c..a810b8e 100644 --- a/src/bloggers.html +++ b/src/bloggers.html @@ -3,23 +3,25 @@
{% for blogger in bloggers %}
- {{ blogger.author_name | htmlentities }} - {{ blogger.author_name | htmlentities }} - - {% if blogger.url_blog %} - {{ blogger.author_name | htmlentities }}'s blog - {% endif %} - - {{ blogger.author_name | htmlentities }}'s blog feed - - - {{ blogger.author_name | htmlentities }}'s GitHub account - - {% if blogger.url_twitter %} - {{ blogger.author_name | htmlentities }}'s GitHub account - {% endif %} - - {{ blogger.bio | htmlentities }} + {{ blogger.author_name | htmlentities }} +
+ {{ blogger.author_name | htmlentities }} + + {% if blogger.url_blog %} + {{ blogger.author_name | htmlentities }}'s blog + {% endif %} + + {{ blogger.author_name | htmlentities }}'s blog feed + + + {{ blogger.author_name | htmlentities }}'s GitHub account + + {% if blogger.url_twitter %} + {{ blogger.author_name | htmlentities }}'s GitHub account + {% endif %} + + {{ blogger.bio }} +
{% endfor %}
\ No newline at end of file diff --git a/src/css/theme.css b/src/css/theme.css index 040d662..3db8aec 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -208,6 +208,28 @@ nav > span[aria-current] > a { text-decoration: none; } +.blogger { + display: flex; + flex-direction: row; + margin: 1.5em; +} +.blogger:nth-child(even) { + background: var(--shadow); +} +.blogger-info { + flex: 1; + display: flex; + flex-direction: column; + margin: 0 0.5em; + gap: 0.5em; +} +.blogger-icons { + display: flex; + flex-direction: row; + gap: 0.5em; +} +.blogger-bio { flex: 1; } + footer { padding-bottom: 3em; grid-area: footer; @@ -290,6 +312,7 @@ input[type=text], input[type=number], textarea .medium-icon-abs { width: 1.25em; height: 1.25em; vertical-align: middle; } .large-icon { max-width: 1.5em; max-height: 1.5em; vertical-align: middle; } .tiny-image { max-width: 5em; max-height: 5em; } +.kinda-tiny-image{ max-width: 7em; max-height: 7em; } .small-image { max-width: 10em; max-height: 10em; } .medium-image { max-width: 20em; max-height: 20em; } .large-image { max-width: 30em; max-height: 30em; } diff --git a/src/lib/shuffle.js b/src/lib/shuffle.js new file mode 100644 index 0000000..1395c65 --- /dev/null +++ b/src/lib/shuffle.js @@ -0,0 +1,22 @@ +"use strict"; + + +function shuffle(array) { + let currentIndex = array.length, randomIndex; + + // While there remain elements to shuffle. + while (currentIndex != 0) { + + // Pick a remaining element. + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + + // And swap it with the current element. + [array[currentIndex], array[randomIndex]] = [ + array[randomIndex], array[currentIndex]]; + } + + return array; +} + +module.exports = shuffle; \ No newline at end of file