Move gatsby data to top level

2021-06-18 19:13:24 -07:00
parent f8fe81cb8f
commit 7135ec1976
133 changed files with 16750 additions and 16693 deletions
--- a/static/CharlesDriesResumeCurrent.pdf
+++ b/static/CharlesDriesResumeCurrent.pdf
--- a/static/chuckdries.asc
+++ b/static/chuckdries.asc
@@ -0,0 +1,89 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+d3oqQRrUiR/QJ8OO82gdXULJvHtyx7/X
+=SyNn
+-----END PGP PUBLIC KEY BLOCK-----
--- a/static/editme.html
+++ b/static/editme.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>contenteditable demo</title>
+  </head>
+  <body>
+    <h1>contenteditable can be applied to visible style tags</h1>
+    <p contenteditable="true">
+      This paragraph is editable, as is the style tag below. Edit it to see the layout change in real time.
+    </p>
+    <pre>
+    <style contenteditable="true">
+      body {
+        margin: 40px auto;
+        max-width: 650px;
+        line-height: 1.6;
+        font-size: 18px;
+        color: #444;
+        padding: 0 10px;
+      }
+
+      h1, h2, h3 {
+        line-height: 1.2;
+      }
+
+      style {
+        background: rgb(222, 237, 255);
+        display: block;
+        font-size: 12px;
+      }
+
+      *[contenteditable=true] {
+        padding: 1em;
+        border: 1px solid rgb(145, 145, 145);
+      }
+    </style>
+    </pre>
+  </body>
+</html>
--- a/static/game.html
+++ b/static/game.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Test Canvas Game</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="gc">
+    </canvas>
+    <script>
+        //setup
+        c = document.getElementById("gc");
+        cc = c.getContext('2d');
+        c.height = window.innerHeight;
+        c.width = window.innerWidth;
+        c.addEventListener('mousemove', function(e) {
+            p1y = e.clientY - ph / 2;
+        });
+
+        lastTime = Date.now();
+        deltaTime = 0;
+        fps = 0;
+
+        //gameplay variables
+        p1y = p2y = 40;
+        pt = 10;
+        ph = 100;
+        bx = by = xv = yv = 500;//just making sure bx and by exist, they'll be reset when the game first starts
+        bd = 12;
+        score1 = score2 = 0;
+        ais = 5;
+
+
+
+        function reset() {
+            bx = c.width / 2;
+            by = c.height / 2;
+            xv = -xv;
+            yv = 4;
+        }
+
+        function update() {
+            //measure timing
+            now = Date.now();
+            deltaTime = (now-lastTime)/1000;
+            lastTime = now;
+            fps = 1/deltaTime;
+            //move ball
+            bx += xv * deltaTime;
+            by += yv * deltaTime;
+            if (by < 0 && yv < 0) {
+                yv = -yv;
+            }
+            if (by > c.height && yv > 0) {
+                yv = -yv;
+            }
+            //check collision with sides for scoring
+            if (bx > c.width) {
+                if (by > p2y && by < p2y + ph) {
+                    xv = -xv;
+                    dy = by - (p2y + ph / 2);
+                    yv = dy * 10;
+                } else {
+                    score1++;
+                    reset();
+                }
+            }
+            if (bx < 0) {
+                if (by > p1y && by < p1y + ph) {
+                    xv = -xv;
+                    dy = by - (p1y + ph / 2);
+                    yv = dy * 10;//.3
+                } else {
+                    score2++
+                    reset();
+                }
+            }
+            //ai
+            if (p2y + ph / 2 < by) {
+                p2y += ais;
+            } else {
+                p2y -= ais;
+            }
+            //draw background
+            var gradient=cc.createLinearGradient(0,0,c.width,c.height);
+            gradient.addColorStop("0","#ff146e");
+            gradient.addColorStop("1","#145aff");
+            cc.fillStyle=gradient;
+//            cc.fillStyle="white";
+            cc.fillRect(0, 0, c.width, c.height);
+            //draw paddles
+            cc.fillStyle = 'cyan';
+            cc.fillRect(0, p1y, pt, ph);
+            cc.fillStyle = 'red';
+            cc.fillRect(c.width - pt, p2y, pt, ph);
+            //draw ball
+            cc.fillStyle = 'lightgreen';
+            cc.fillRect(bx - bd / 2, by - bd / 2, bd, bd);
+            //draw scores
+            cc.fillStyle = 'white';
+            cc.font = '20px Times'
+            cc.fillText(score1, 100, 100);
+            cc.fillText(score2, c.width - 100, 100);
+            //draw framerate
+            cc.fillText("framerate: " + fps, c.width/2 - 100, 100);
+
+            window.requestAnimationFrame(update); //Keep the game running
+        }
+        reset() //prepare the game
+        update() //start the game
+    </script>
+</body>
+
+</html>
--- a/static/keybase.txt
+++ b/static/keybase.txt
@@ -0,0 +1,55 @@
+==================================================================
+https://keybase.io/chuckdries
+--------------------------------------------------------------------
+
+I hereby claim:
+
+  * I am an admin of https://chuckdries.com
+  * I am chuckdries (https://keybase.io/chuckdries) on keybase.
+  * I have a public key ASATykAQ0FnZwjFxFE90Xo-1AlpyUcPz_hOV88NPC2HD0Ao
+
+To do so, I am signing this object:
+
+{
+  "body": {
+    "key": {
+      "eldest_kid": "0120ffb65b86947cfcd57106a6893b213d0a13a709fad003b5638481f3e7819810c20a",
+      "host": "keybase.io",
+      "kid": "012013ca4010d059d9c23171144f745e8fb5025a7251c3f3fe1395f3c34f0b61c3d00a",
+      "uid": "e73f863fe88449e3ab19338f90851219",
+      "username": "chuckdries"
+    },
+    "merkle_root": {
+      "ctime": 1508458009,
+      "hash": "63b3feb0d86d730809e65461db2429593270cd4f0ee07a8da90b6dc850b2c95fa82b780c4ba8358f7fba3b146002cf17567d3b6aa25dd5f1a367e5abad0f4353",
+      "hash_meta": "4b338149768a8ae9d4174695f6020a20cb64be2eba94e88ae368ac1259b82f14",
+      "seqno": 1605732
+    },
+    "service": {
+      "hostname": "chuckdries.com",
+      "protocol": "https:"
+    },
+    "type": "web_service_binding",
+    "version": 1
+  },
+  "client": {
+    "name": "keybase.io go client",
+    "version": "1.0.33"
+  },
+  "ctime": 1508458015,
+  "expire_in": 504576000,
+  "prev": "c6d0eb4ae90ea045ab4b147b238c08a0e0afc0af3b87b84e8359ce6ba268ba05",
+  "seqno": 15,
+  "tag": "signature"
+}
+
+which yields the signature:
+
+hKRib2R5hqhkZXRhY2hlZMOpaGFzaF90eXBlCqNrZXnEIwEgE8pAENBZ2cIxcRRPdF6PtQJaclHD8/4TlfPDTwthw9AKp3BheWxvYWTFA0l7ImJvZHkiOnsia2V5Ijp7ImVsZGVzdF9raWQiOiIwMTIwZmZiNjViODY5NDdjZmNkNTcxMDZhNjg5M2IyMTNkMGExM2E3MDlmYWQwMDNiNTYzODQ4MWYzZTc4MTk4MTBjMjBhIiwiaG9zdCI6ImtleWJhc2UuaW8iLCJraWQiOiIwMTIwMTNjYTQwMTBkMDU5ZDljMjMxNzExNDRmNzQ1ZThmYjUwMjVhNzI1MWMzZjNmZTEzOTVmM2MzNGYwYjYxYzNkMDBhIiwidWlkIjoiZTczZjg2M2ZlODg0NDllM2FiMTkzMzhmOTA4NTEyMTkiLCJ1c2VybmFtZSI6ImNodWNrZHJpZXMifSwibWVya2xlX3Jvb3QiOnsiY3RpbWUiOjE1MDg0NTgwMDksImhhc2giOiI2M2IzZmViMGQ4NmQ3MzA4MDllNjU0NjFkYjI0Mjk1OTMyNzBjZDRmMGVlMDdhOGRhOTBiNmRjODUwYjJjOTVmYTgyYjc4MGM0YmE4MzU4ZjdmYmEzYjE0NjAwMmNmMTc1NjdkM2I2YWEyNWRkNWYxYTM2N2U1YWJhZDBmNDM1MyIsImhhc2hfbWV0YSI6IjRiMzM4MTQ5NzY4YThhZTlkNDE3NDY5NWY2MDIwYTIwY2I2NGJlMmViYTk0ZTg4YWUzNjhhYzEyNTliODJmMTQiLCJzZXFubyI6MTYwNTczMn0sInNlcnZpY2UiOnsiaG9zdG5hbWUiOiJjaHVja2RyaWVzLmNvbSIsInByb3RvY29sIjoiaHR0cHM6In0sInR5cGUiOiJ3ZWJfc2VydmljZV9iaW5kaW5nIiwidmVyc2lvbiI6MX0sImNsaWVudCI6eyJuYW1lIjoia2V5YmFzZS5pbyBnbyBjbGllbnQiLCJ2ZXJzaW9uIjoiMS4wLjMzIn0sImN0aW1lIjoxNTA4NDU4MDE1LCJleHBpcmVfaW4iOjUwNDU3NjAwMCwicHJldiI6ImM2ZDBlYjRhZTkwZWEwNDVhYjRiMTQ3YjIzOGMwOGEwZTBhZmMwYWYzYjg3Yjg0ZTgzNTljZTZiYTI2OGJhMDUiLCJzZXFubyI6MTUsInRhZyI6InNpZ25hdHVyZSJ9o3NpZ8RAjUHv4ay/YnkMWWeZA5CMTsNp0ML5+pZLl9Gj0o+EMJSkv8yunqLTQb1LvhiAhnfkigRODOOEtLcFvZWbLyoCAKhzaWdfdHlwZSCkaGFzaIKkdHlwZQildmFsdWXEIN1914J2GDaMYtdH+ka7yCDhS3lVNraHA8YytwCa8rNAo3RhZ80CAqd2ZXJzaW9uAQ==
+
+And finally, I am proving ownership of this host by posting or
+appending to this document.
+
+View my publicly-auditable identity here: https://keybase.io/chuckdries
+
+==================================================================
--- a/static/learn.html
+++ b/static/learn.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="link/to/css">
+</head>
+
+<body>
+    <a href="">a tags are for links</a>
+    <p>p tags are for paragraphs</p>
+    <h1>h1 through h6 are for headers</h1>
+    <img src="path/to/image.jpg" alt="imgs are for images">
+    <div>divs are just boxes</div>
+
+</body>
+
+</html>
--- a/static/roboticchuck.html
+++ b/static/roboticchuck.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Robotic Chuck</title>
+    <style>
+        body {
+            margin: auto;
+            max-width: 800px;
+            line-height: 1.5;
+        }
+        
+        code,
+        #output {
+            padding: 5px;
+            background: #eee;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            display: inline-block;
+        }
+        
+        p {
+            max-width: 800px;
+        }
+        
+        input,
+        textarea {
+            width: 100%;
+            padding: 5px;
+            /*max-width: 800px;*/
+        }
+        
+        #genbutton {
+            color: white;
+            background: #01C106;
+            padding: 1em;
+            border: 1px solid #1E7931;
+            font-size: 1em;
+            border-radius: 3px;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        console.log("load");
+        function generate() {
+            console.log("go!");
+            var inBox = document.getElementById("in");
+            console.log(inBox.value);
+            var links = JSON.parse(inBox.value);
+            var outBox = document.getElementById("output");
+            var titleBox = document.getElementById("titleIn");
+            var descBox = document.getElementById("description");
+            var tstring = "<style>.here,.invmenu a{font-style:italic}.here{font-size:14px;font-weight:400;color:grey}.invmenu{padding:5px 20px;margin:10px 0}</style>\n";
+            tstring = tstring + "<" + "div class=\"invmenu\" style=\"max-width:100%;background: #f2f2f2;\">\n<h3 style=\"text-align:left;\">" + titleBox.value + "</h3>\n<p><em>";
+            tstring = tstring + descBox.value + "</em></p>\n<hr style=\"border: 1px solid #cfcfcf\">\n"
+            formatter = links.map((object) => "<h4><a href=\"" + object.url + "\">" + object.headline + "</a></h4>\n");
+            tstring = tstring + formatter.join("");
+            tstring = tstring + "</div>"
+            console.log(tstring);
+            outBox.innerText = tstring;
+            outBox.style.minHeight = (formatter.length + 9) + "em";
+            document.getElementById("preview").innerHTML = tstring;
+        }
+    </script>
+
+    <p></p>
+    <p>Title of box:</p> <input type="text" id="titleIn" placeholder="Investigating Hope: The Series">
+    <p>Description text:</p>
+    <input type="text" id="description" placeholder="This article is one in a series of investigative pieces about a complaint filed with ASU regarding accusations against on-campus ministry Hope Church.">
+    <p>Enter the links to generate according to this format:</p>
+    <pre><code class="json">[
+    {
+        "headline": "A Beautiful Headline!",
+        "url": "this-is-a-sample-url"
+    },
+    {
+        "headline": "A Second Beautiful Headline!",
+        "url": "second-sample-url"
+    },
+    {
+        "headline": "Yet Another Headline",
+        "url": "yet-another-url"
+    }
+]</code></pre>
+    <p>This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read.
+        Note how commas are used to separate multiple items but are never used after the last item in a set. This is important,
+        it will not work if you include a trailing comma where there should not be one.</p>
+    <textarea name="input" id="in" cols="100" rows="30" placeholder="Please be careful, this will not work if you format the JSON incorrectly"></textarea>
+    <p><a id="genbutton" href="#output" onclick="generate()">Generate Code</a></p>
+    <p>Paste the following code into a safeembed</p>
+    <textarea id="output" cols="100" readonly></textarea>
+    <p><em> Don't forget:</em> For each page you embed on, add the following bit of code just before the <code>&lt;/h4&gt;</code>        at the end of the line on the line that corresponds to the current page.</p>
+    <pre><code>&lt;span class="here"&gt;(You are here)&lt;/span&gt;</code></pre>
+   
+    <p>The code generated will look roughly like this:</P>
+    <div id="preview" style="max-width: 800px;"></div>
+    <p>Gryphon overrides certain styles by default, so make sure to test on your article.</p>
+
+</body>
+
+</html>