write bloggers out to html, add initial styling
parent
0bddc9535e
commit
fffc7157b5
|
@ -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",
|
||||
|
|
|
@ -3,23 +3,25 @@
|
|||
<section>
|
||||
{% for blogger in bloggers %}
|
||||
<div class="blogger">
|
||||
<img src="{% asset blogger.url_avatar }}" class="blogger-avatar large-icon" alt="{{ blogger.author_name | htmlentities }}" aria-hidden="hidden" />
|
||||
<span class="blogger-name">{{ blogger.author_name | htmlentities }}</span>
|
||||
<img src="{% asset blogger.url_avatar %}" class="blogger-avatar kinda-tiny-image" alt="{{ blogger.author_name | htmlentities }}" aria-hidden="hidden" />
|
||||
<div class="blogger-info">
|
||||
<span class="blogger-name large-text">{{ blogger.author_name | htmlentities }}</span>
|
||||
<span class="blogger-icons">
|
||||
{% if blogger.url_blog %}<a href="{{ blogger.url_blog | htmlentities }}">
|
||||
<img src="{% asset 'images/post.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog" />
|
||||
<img class="large-icon invert-when-light" src="{% asset 'images/post.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog" />
|
||||
</a>{% endif %}
|
||||
<a href="{{ blogger.url_feed | htmlentities }}">
|
||||
<img src="{% asset 'images/rss.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog feed">
|
||||
<a href="{{ blogger.feed_uri | htmlentities }}">
|
||||
<img class="large-icon" src="{% asset 'images/rss.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog feed">
|
||||
</a>
|
||||
<a href="{{ blogger.url_github }}">
|
||||
<img src="{% asset 'images/github.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s GitHub account">
|
||||
<img class="large-icon invert-when-light" src="{% asset 'images/github.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s GitHub account">
|
||||
</a>
|
||||
{% if blogger.url_twitter %}<a href="{{ blogger.url_twitter }}">
|
||||
<img src="{% asset 'images/twitter.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s GitHub account">
|
||||
<img class="large-icon" src="{% asset 'images/twitter.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s GitHub account">
|
||||
</a>{% endif %}
|
||||
</span>
|
||||
<span class="blogger-bio">{{ blogger.bio | htmlentities }}</span>
|
||||
<span class="blogger-bio">{{ blogger.bio }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
|
@ -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; }
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue