diff --git a/assets/repo-card.js b/assets/repo-card.js new file mode 100644 index 0000000..cac41d6 --- /dev/null +++ b/assets/repo-card.js @@ -0,0 +1,78 @@ +// Script based on https://github.com/tarptaeya/repo-card + +window.addEventListener('DOMContentLoaded', async function() { + const CACHE_TIMEOUT = 60000; + async function get(url) { + const now = new Date().getTime(); + const prevResp = JSON.parse(localStorage.getItem(url)); + if (prevResp && Math.abs(now - prevResp.time) < CACHE_TIMEOUT) { + return prevResp.data; + } + const resp = await fetch(url); + const json = await resp.json(); + localStorage.setItem(url, JSON.stringify({time: now, data: json})); + return json; + } + + const emojis = await get('https://api.github.com/emojis'); + const colors = await get('https://raw.githubusercontent.com/ozh/github-colors/master/colors.json'); + + const themes = { + 'light-default': { + background: 'white', + borderColor: '#e1e4e8', + color: '#586069', + linkColor: '#0366d6', + }, + 'dark-theme': { + background: 'rgb(13, 17, 23)', + borderColor: 'rgb(48, 54, 61)', + color: 'rgb(139, 148, 158)', + linkColor: 'rgb(88, 166, 255)', + } + }; + + for (const el of document.querySelectorAll('.repo-card')) { + const name = el.getAttribute('data-repo'); + const theme = themes[el.getAttribute('data-theme') || 'light-default']; + const data = await get(`https://git.tebibyte.media/api/v1/repos/${name}`); + + data.description = (data.description || '').replace(/:\w+:/g, function(match) { + const name = match.substring(1, match.length - 1); + const emoji = emojis[name]; + + if (emoji) { + return `${name}`; + } + + return match; + }); + + el.innerHTML = ` +
+
+ + + ${data.name} + +
+
Forked from ${data.fork ? data.source.full_name : ''}
+
${data.description}
+
+
+ + ${data.language} +
+
+ +   ${data.stars_count} +
+
+ +   ${data.forks} +
+
+
+ `; + } +}); diff --git a/assets/stars2.gif b/assets/stars2.gif new file mode 100644 index 0000000..d9431a5 Binary files /dev/null and b/assets/stars2.gif differ diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..b1b6b13 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,37 @@ +@font-face { + font-family: 'Ubuntu'; + src: url('https://tebibyte.media/assets/fonts/ubuntu.ttf'); + url('https://tebibyte.media/assets/fonts/ubuntu.woff2'); + url('https://tebibyte.media/assets/fonts/ubuntu.woff'); +} + +* { + box-sizing: border-box; + font-family: "Ubuntu"; +} + +body { + background: url("stars2.gif"); + color: hsl(0.0, 5%, 90%); +} + +.back h5 { + text-align: left; +} + +.content { + display: flex; + flex-direction: column; + background-color: hsl(0.0, 20%, 10%); + max-width: 600px; + height: auto; + margin-left: auto; + margin-right: auto; + padding: 50px; + border: 1px solid red; +} + +h1, h2, h3, h4, h5, h6 { + text-align: center; + margin-top: 1em; +} diff --git a/index.html b/index.html index af5626b..e8d2485 100644 --- a/index.html +++ b/index.html @@ -1 +1,33 @@ -Hello, world! + + + + mars @ Tebibyte Media + + + + + + + + + + + + +
+
+
Return Home
+
+ +

Welcome to my Tebibyte Media homepage!

+ +

+ My name is Marceline Cramer, and I'm too good for this world. + You can call me Marci, Marcy, Marcie, or Mars. + I typically go by my usernames CrazyWazy and mars online. +

+ +
+
+ +