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 fs = require("fs");
|
||||||
|
|
||||||
const fetch_json = require("./lib/fetch_json.js");
|
const fetch_json = require("./lib/fetch_json.js");
|
||||||
|
const shuffle = require("./lib/shuffle.js");
|
||||||
|
|
||||||
async function fetch_info(blogger) {
|
async function fetch_info(blogger) {
|
||||||
if(typeof blogger.github_username !== "string") return;
|
if(typeof blogger.github_username !== "string") return;
|
||||||
|
@ -14,14 +15,17 @@ async function fetch_info(blogger) {
|
||||||
console.error(github_userdata.message);
|
console.error(github_userdata.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`GITHUB_USERDATA`, github_userdata)
|
|
||||||
|
|
||||||
blogger.bio = github_userdata.bio;
|
blogger.bio = github_userdata.bio;
|
||||||
blogger.url_blog = github_userdata.blog;
|
blogger.url_blog = github_userdata.blog;
|
||||||
blogger.url_github = github_userdata.html_url;
|
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_twitter = github_userdata.twitter_username === null ? null : `https://twitter.com/@${github_userdata.twitter_username.replace(/^@/, "")}`;
|
||||||
blogger.url_avatar = github_userdata.avatar_url;
|
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)
|
if(typeof blogger.url_blog !== "string" || blogger.url_blog.length == 0)
|
||||||
blogger.url_blog = null;
|
blogger.url_blog = null;
|
||||||
|
@ -29,11 +33,10 @@ async function fetch_info(blogger) {
|
||||||
|
|
||||||
module.exports = async function() {
|
module.exports = async function() {
|
||||||
const feeds_data = JSON.parse(await fs.promises.readFile(path.resolve(__dirname, "../feeds.json"), "utf-8"));
|
const feeds_data = JSON.parse(await fs.promises.readFile(path.resolve(__dirname, "../feeds.json"), "utf-8"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
await Promise.all(feeds_data.map(fetch_info));
|
await Promise.all(feeds_data.map(fetch_info));
|
||||||
|
|
||||||
|
shuffle(feeds_data); // Don't give any 1 person the advantage
|
||||||
|
|
||||||
return {
|
return {
|
||||||
layout: "main.njk",
|
layout: "main.njk",
|
||||||
title: "Bloggers",
|
title: "Bloggers",
|
||||||
|
|
|
@ -3,23 +3,25 @@
|
||||||
<section>
|
<section>
|
||||||
{% for blogger in bloggers %}
|
{% for blogger in bloggers %}
|
||||||
<div class="blogger">
|
<div class="blogger">
|
||||||
<img src="{% asset blogger.url_avatar }}" class="blogger-avatar large-icon" alt="{{ blogger.author_name | htmlentities }}" aria-hidden="hidden" />
|
<img src="{% asset blogger.url_avatar %}" class="blogger-avatar kinda-tiny-image" alt="{{ blogger.author_name | htmlentities }}" aria-hidden="hidden" />
|
||||||
<span class="blogger-name">{{ blogger.author_name | htmlentities }}</span>
|
<div class="blogger-info">
|
||||||
|
<span class="blogger-name large-text">{{ blogger.author_name | htmlentities }}</span>
|
||||||
<span class="blogger-icons">
|
<span class="blogger-icons">
|
||||||
{% if blogger.url_blog %}<a href="{{ blogger.url_blog | htmlentities }}">
|
{% 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>{% endif %}
|
||||||
<a href="{{ blogger.url_feed | htmlentities }}">
|
<a href="{{ blogger.feed_uri | htmlentities }}">
|
||||||
<img src="{% asset 'images/rss.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog feed">
|
<img class="large-icon" src="{% asset 'images/rss.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog feed">
|
||||||
</a>
|
</a>
|
||||||
<a href="{{ blogger.url_github }}">
|
<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>
|
</a>
|
||||||
{% if blogger.url_twitter %}<a href="{{ blogger.url_twitter }}">
|
{% 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 %}
|
</a>{% endif %}
|
||||||
</span>
|
</span>
|
||||||
<span class="blogger-bio">{{ blogger.bio | htmlentities }}</span>
|
<span class="blogger-bio">{{ blogger.bio }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</section>
|
</section>
|
|
@ -208,6 +208,28 @@ nav > span[aria-current] > a {
|
||||||
text-decoration: none;
|
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 {
|
footer {
|
||||||
padding-bottom: 3em;
|
padding-bottom: 3em;
|
||||||
grid-area: footer;
|
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; }
|
.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; }
|
.large-icon { max-width: 1.5em; max-height: 1.5em; vertical-align: middle; }
|
||||||
.tiny-image { max-width: 5em; max-height: 5em; }
|
.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; }
|
.small-image { max-width: 10em; max-height: 10em; }
|
||||||
.medium-image { max-width: 20em; max-height: 20em; }
|
.medium-image { max-width: 20em; max-height: 20em; }
|
||||||
.large-image { max-width: 30em; max-height: 30em; }
|
.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