?

js thoughts widget

I wanted to have a way to post thoughts that were too short to merit their own posts (see here for examples).

I'm including two things here: the main script that goes on my site and the Python I use to update the script.

The HTML is simple: <div id="recentThoughts"></div> on the page where I want the most recent thoughts and <div id="thoughtsIndex"></div> on the page where I want the full thoughts index. Any HTML file including either will need a <script> tag that calls the script.

Since I'm the only one who can modify it, I don't have to worry about anything complicated, like sanitizing inputs. Definitely don't use this code (or, at least, not only this code) for something to which other people, especially people you don't know, can contribute. Look, my guestbook is run off Google Sheets; I am not exactly killing it with the whole HTML user inputs thing.

javascript

const indexUrl = `/pages/thoughts.html` // the location of your full index
const recentCt = 3; // how many thoughts to show in "recent thoughts"


const thoughts = [
	{
		time: "2000-01-01 00:00:00.000000",
		thought: "sample thought"
	},
];

// sort by time
thoughts.sort((a, b) => {
	if (a.time < b.time) return 1;
	if (a.time > b.time) return -1;

	return 0;
});

const months = {
	"01": "January",
	"02": "February",
	"03": "March",
	"04": "April",
	"05": "May",
	"06": "June",
	"07": "July",
	"08": "August",
	"09": "September",
	"10": "October",
	"11": "November",
	"12": "December"
}

const tElements = {
	index: {id: "thoughtsIndex", html: ""},
	recent: {id: "recentThoughts", html: ""}
};

function formatThought(thought) {
	let year = thought.time.slice(0,4);
	let month = months[thought.time.slice(5,7)];
	let day = thought.time.slice(8,10).replace(/^0/, "");
	let min = thought.time.slice(14,16);
	let hour = Number(thought.time.slice(11,13));
	let time = ``;

	if (hour > 12) {
		hour = hour - 12;

		time = `${String(hour)}:${min} PM`
	} else if (hour == 0) {
		hour = 12;

		time = `${String(hour)}:${min} AM`
	} else {
		time = `${String(hour)}:${min} AM`
	}

	let date = `${time} • ${month} ${day}, ${year}`

	let html = `<div class="thought">
		<div class="body">${thought.thought}</div>
		<div class="date">${date}</div>
	</div>`;

	return html;
}

for (let i in thoughts) {
	tElements.index.html += formatThought(thoughts[i]);
}

if (thoughts.length < recentCt) {
	for (let i in thoughts) {
		tElements.recent.html += formatThought(thoughts[i]);
	}
} else {
	for (let i = 0; i < recentCt; i++) {
		tElements.recent.html += formatThought(thoughts[i]);
	}

	tElements.recent.html += `<p><a href="${indexUrl}">more thoughts →</a></p>`
}


for (let i in tElements) {
	let selection = document.getElementById(tElements[i].id);
	if (selection) selection.innerHTML = tElements[i].html;
}
JavaScript

python

This handles the date thing, so that adding a thought is as easy as running the Python script and answering the prompt with whatever text I want. It does the date/time for me and updates the Javascript file.

I have a longer update automation script of which this is only one part, but I think I've included all the bits it requires to run independently.

import datetime

path = './site/assets/scripts/thoughts.js' # the location of your js file

def thought(text):
	dt = str(datetime.datetime.now());

	item = '\n\t{\n\t\ttime: "' + dt + '",\n\t\tthought: "' + text + '"\n\t},'

	with open(path, 'r') as f:
		file = f.read()
		file = file.replace('const thoughts = [', 'const thoughts = [' + item)

	with open(path, "w") as f:
		f.write(file)

text = input("thought: ")

thought(text)
Python
tags
projects