Merge pull request #18 from ernestmarcinko/dev

mkbhd panels
ernestmarcinko · Sep 26, 2024 · 8ec6f65 · 8ec6f65
2 parents fb42f9e + 453e695
commit 8ec6f65
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 78 deletions.
diff --git a/dist/github-worth.js b/dist/github-worth.js
diff --git a/dist/htmx-serverless.js b/dist/htmx-serverless.js
diff --git a/dist/style.css b/dist/style.css
diff --git a/server.js b/server.js
@@ -1,6 +1,6 @@
-import { createGzip } from 'zlib';
-import { SitemapStream, streamToPromise } from 'sitemap';
-import { config, getDirName } from './server.config.mjs';
+import {createGzip} from 'zlib';
+import {SitemapStream, streamToPromise} from 'sitemap';
+import {config, getDirName} from './server.config.mjs';
 import express from 'express';
 
 const __dirname = getDirName(import.meta.url);
@@ -15,90 +15,113 @@ app.use("/img", express.static(__dirname + "/img"));
 app.use("/aicookieclicker", express.static(__dirname + "/aicookieclicker"));
 
 // index page 
-app.get('/', function(req, res) {
-    var att = {
-        title: 'Ernest Marcinko Official',
-        description: 'I do code and sometimes I create educational style YouTube videos for fun.'
-    };
-    res.render('pages/index',{
-        att: att,
-    });
+app.get('/', function (req, res) {
+	const att = {
+		title: 'Ernest Marcinko Official',
+		description: 'I do code and sometimes I create educational style YouTube videos for fun.'
+	};
+	res.render('pages/index', {
+		att: att,
+	});
 });
-app.get('/typewriter', function(req, res) {
-    var att = {
-        title: 'TypeWriter Effect Script by Ernest Marcinko',
-        description: 'Typewriter effect written in javascript. Easy to use, very fast, very small.'
-    };
-    res.render('pages/typewriter',{
-        att: att,
-    });
+
+app.get('/typewriter', function (req, res) {
+	const att = {
+		title: 'TypeWriter Effect Script by Ernest Marcinko',
+		description: 'Typewriter effect written in javascript. Easy to use, very fast, very small.'
+	};
+	res.render('pages/typewriter', {
+		att: att,
+	});
+});
+
+app.get('/mkbhd-panels', function (req, res) {
+	fetch("https://storage.googleapis.com/panels-api/data/20240916/media-1a-i-p~s"
+	).then(r => r.json()).then((r) => {
+		const images = [];
+		Object.values(r.data).forEach((v)=>{
+			if (v.dhd) {
+				images.push(v.dhd);
+			}
+		});
+		const att = {
+			title: 'All MKBHD Panels images in HD',
+			description: 'These are all images from MKBHD\'s Panels app in HD resolution.',
+			images: images
+		};
+		res.render('pages/mkbhd-panels', {
+			att: att,
+		});
+	});
 });
 
-app.get('/htmx-serverless', function(req, res) {
-    var att = {
-        title: 'HTMX without a Server',
-        description: 'HTMX Serverless is a small addon to define static HTMX request and responses without a Server'
-    };
-    res.render('pages/htmx-serverless',{
-        att: att,
-    });
+app.get('/htmx-serverless', function (req, res) {
+	const att = {
+		title: 'HTMX without a Server',
+		description: 'HTMX Serverless is a small addon to define static HTMX request and responses without a Server'
+	};
+	res.render('pages/htmx-serverless', {
+		att: att,
+	});
 });
 
-app.get('/github-worth', function(req, res) {
-    var att = {
-        title: 'Get money for your github account',
-        description: 'See how much your fantastic github account is worth and get the money immediately'
-    };
-    res.render('pages/github-worth',{
-        att: att,
-    });
+app.get('/github-worth', function (req, res) {
+	const att = {
+		title: 'Get money for your github account',
+		description: 'See how much your fantastic github account is worth and get the money immediately'
+	};
+	res.render('pages/github-worth', {
+		att: att,
+	});
 });
 
-app.get('/flappybird', function(req, res) {
-    var att = {
-        title: 'Flappy Bird in TypeScript by Ernest Marcinko',
-        description: 'Play Flappy Bird online. Created in javascript, typescript using a canvas.'
-    };
-    res.render('pages/flappybird',{
-        att: att,
-    });
+app.get('/flappybird', function (req, res) {
+	const att = {
+		title: 'Flappy Bird in TypeScript by Ernest Marcinko',
+		description: 'Play Flappy Bird online. Created in javascript, typescript using a canvas.'
+	};
+	res.render('pages/flappybird', {
+		att: att,
+	});
 });
 
 let sitemap;
-app.get('/sitemap.xml', async function(req, res) {
-    res.header('content-type', 'application/xml');
-    res.header('content-encoding', 'gzip');
-    if (sitemap) {
-        res.send(sitemap)
-        return
-    }
-    try {
-        const smstream = new SitemapStream({ hostname: config.hostname })
-        const pipeline = smstream.pipe(createGzip())
-
-        smstream.write({ url: '/', changefreq: 'monthly', priority: 1});
-        smstream.write({ url: '/typewriter', changefreq: 'monthly', priority: 0.6});
-        smstream.write({ url: '/flappybird', changefreq: 'monthly', priority: 0.6});
-        smstream.write({ url: '/htmx-serverless', changefreq: 'monthly', priority: 0.6});
-        smstream.write({ url: '/aicookieclicker', changefreq: 'monthly', priority: 0.6});
-
-        // cache the response
-        streamToPromise(pipeline).then(sm => sitemap = sm)
-        smstream.end()
-
-        // show errors and response
-        pipeline.pipe(res).on('error', (e) => {throw e});
-    } catch (e) {
-        res.status(500).end()
-        console.log(e);
-    }
+app.get('/sitemap.xml', async function (req, res) {
+	res.header('content-type', 'application/xml');
+	res.header('content-encoding', 'gzip');
+	if (sitemap) {
+		res.send(sitemap)
+		return
+	}
+	try {
+		const smstream = new SitemapStream({hostname: config.hostname})
+		const pipeline = smstream.pipe(createGzip())
+
+		smstream.write({url: '/', changefreq: 'monthly', priority: 1});
+		smstream.write({url: '/typewriter', changefreq: 'monthly', priority: 0.6});
+		smstream.write({url: '/flappybird', changefreq: 'monthly', priority: 0.6});
+		smstream.write({url: '/htmx-serverless', changefreq: 'monthly', priority: 0.6});
+		smstream.write({url: '/aicookieclicker', changefreq: 'monthly', priority: 0.6});
+
+		// cache the response
+		streamToPromise(pipeline).then(sm => sitemap = sm)
+		smstream.end()
+
+		// show errors and response
+		pipeline.pipe(res).on('error', (e) => {
+			throw e
+		});
+	} catch (e) {
+		res.status(500).end()
+		console.log(e);
+	}
 });
 
-app.get('/robots.txt', function(req, res) {
-    res.header('content-type', 'text/plain');
-    res.render('pages/robots',{
-        att: {hostname: config.hostname},
-    });
+app.get('/robots.txt', function (req, res) {
+	res.header('content-type', 'text/plain');
+	res.render('pages/robots', {
+		att: {hostname: config.hostname},
+	});
 });
 
 app.listen(8081);
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -31,6 +31,16 @@
             </p>
         </section>
         <section class="projects flexy">
+            <div class="project">
+                <a class="title" href="/mkbhd-panels/">
+                    <h2>All images from MKBHD Panels app in HD</h2>
+                </a>
+                <p>These are all images from MKBHD's Panels app in HD resolution.</p>
+                <ul>
+                    <li><a href='/mkbhd-panels/'>Go for it!</a></li>
+                    <li><a href='https://github.com/ernestmarcinko/' target="_blank">Github Repository</a></li>
+                </ul>
+            </div>
             <div class="project">
                 <a class="title" href="/github-worth/">
                     <h2>Get the worth of your GitHub account</h2>

diff --git a/views/pages/mkbhd-panels.ejs b/views/pages/mkbhd-panels.ejs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <%- include('../parts/head'); %>
+    <style>
+	.images {
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+	.images img {
+		max-width: 300px;
+	}
+	</style>
+</head>
+<body>
+    <main class="wrapper" role="main">
+        <section class="intro">
+            <h1><%- att.title %></h1>
+            <p><%- att.description %></p>
+        </section>
+        <section class="images">
+			<% for(var i=0; i<att.images.length; i++) {%>
+				<a href="<%- att.images[i] %>">
+					<img src="<%- att.images[i] %>" loading="lazy">
+				</a>
+            <% } %>
+        </section>
+    </main>
+
+    <%- include('../parts/footer'); %>
+</body>
+</html>