ctome
/
hullblogs.com
mirror of https://github.com/CrimsonTome/hullblogs.com.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

write bloggers out to html, add initial styling

pull/1/head
Starbeamrainbowlabs 2022-08-14 19:34:56 +01:00
parent 0bddc9535e
commit fffc7157b5
No known key found for this signature in database
GPG Key ID: 1BE5172E637709C2
4 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/bloggers.11tydata.js
View File

@ -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",

36
src/bloggers.html
View File

@ -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>
<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" />
</a>{% endif %}
<a href="{{ blogger.url_feed | htmlentities }}">
<img 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">
</a>
{% if blogger.url_twitter %}<a href="{{ blogger.url_twitter }}">
<img src="{% asset 'images/twitter.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s GitHub account">
</a>{% endif %}
</span>
<span class="blogger-bio">{{ blogger.bio | 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 class="large-icon invert-when-light" src="{% asset 'images/post.svg' %}" alt="{{ blogger.author_name | htmlentities }}'s blog" />
</a>{% endif %}
<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 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 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 }}</span>
</div>
</div>
{% endfor %}
</section>

23
src/css/theme.css
View File

@ -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; }

22
src/lib/shuffle.js Normal file
View File

@ -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;