remove external deps
authorMichael Wallner <mike@php.net>
Fri, 11 Feb 2022 13:38:59 +0000 (14:38 +0100)
committerMichael Wallner <mike@php.net>
Fri, 11 Feb 2022 20:20:27 +0000 (21:20 +0100)
public/index.css
public/index.js
views/layout.phtml

index 063b6a1b2bdcf6f37db25cbd553145f0f04bb457..5ce2db62795e95f9d57406919bfa948747b317dc 100644 (file)
@@ -1,12 +1,19 @@
 html {
-       font-size: 18px;
+       font-size: 16px;
 }
 html, body{
        height: 100%;
        min-height: 100%;
 }
 body, code {
-       font-family: Inconsolata, 'Inconsolata Awesome', 'Andale Mono', Monaco, 'Courier New', Courier, monospace;
+       font-family:
+                       'DejaVu Sans Mono', 'Liberation Mono',
+                       'Andale Mono', Monaco, Menlo,
+                       monospace;
+       /*
+               Mitra Mono has broken kerning?
+               Ubuntu Mono is too small!
+        */
 }
 body {
        line-height: 1.5;
@@ -175,6 +182,21 @@ a.permalink {
        color: #999999;
        opacity: 0.25;
 }
+.blink {
+       color: red !important;
+}
+.fade-out {
+       opacity: 0;
+}
+.fade-in {
+       opacity: 1;
+}
+.trans-slow {
+       transition: all 600ms;
+}
+.trans-fast {
+       transition: all 200ms;
+}
 
 .var {
        color: #800000;
@@ -261,13 +283,12 @@ li h3 a:hover {
        text-decoration: underline;
 }
 
-#disqus_thread {
-       margin-top: 8em;
-       margin-right: 2em;
+.comments {
+       width: 80%;
 }
-#disqus_activator {
+.comments .activator {
+       width: 100%;
        margin: auto;
-       width: 80%;
        padding: 1em;
        background-color: slategrey;
        color: white;
index 5c4d8f114ba3f1d42ecc20215dffc317e3d442c8..e9b65c1180058942b54995bc7e3606c017143a2f 100644 (file)
@@ -1,61 +1,49 @@
 "use strict";
 
-$(function() {
-       var mdref = {
-               log: function log() {
-                       console.log.apply(console, arguments);
-               },
-               blink: function blink(c) {
-                       var $c = $(c);
-
-                       $c.fadeOut("fast").queue(function(next) {
-                               this.style.color = "red";
-                               next();
-                       }).fadeIn("fast").fadeOut("slow").queue(function(next) {
-                               this.style.color = "";
-                               next();
-                       }).fadeIn("slow");
-               },
-               hashchange: function hashchange() {
-                       if (location.hash.length > 1) {
-                               var hash = decodeURIComponent(location.hash.substring(1));
-                               var e;
-                               if ((e = document.getElementById(location.hash.substring(1)))) {
-                                       mdref.blink(e);
-                               } else {
-                                       var scrolled = false;
-
-                                       if (hash.substring(hash.length-1) === "*") {
-                                               hash = hash.substring(0, hash.length-1);
-                                       }
-                                       $((hash.substring(0,1) === "$") ? ".var" : ".constant").each(function(i, c) {
-                                               if (c.textContent.substring(0, hash.length) === hash) {
-                                                       if (!scrolled) {
-                                                               $(window).scrollTop($(c).offset().top - 100);
-                                                               scrolled = true;
-                                                       }
-                                                       mdref.blink(c);
-                                               }
-                                       });
+document.addEventListener("DOMContentLoaded", function() {
+       const doTransition = function(e, trans, state, speed) {
+               e.classList.remove(trans + "-in", trans + "-out", "trans-slow", "trans-fast");
+               e.classList.add(trans + "-" + state, "trans-" + speed);
+               return (cb) => setTimeout(cb, speed === "slow" ? 600 : 200);
+       };
+       const letElementBlink = function(e, last) {
+               setTimeout(() => doTransition(e, "fade", "out", "fast")(function() {
+                       e.classList.add("blink");
+                       doTransition(e, "fade", "in", "fast")(function() {
+                               e.classList.remove("blink");
+                               doTransition(e, "fade", "out", "slow")(function () {
+                                       doTransition(e, "fade", "in", "slow");
+                               });
+                       });
+               }), 200);
+       };
+       const onHashChange = function() {
+               if (location.hash.length > 1) {
+                       let hash = decodeURIComponent(location.hash.substring(1));
+                       let e = document.getElementById(hash) || document.getElementById(location.hash.substring(1));
+                       if (e) {
+                               letElementBlink(e);
+                       } else {
+                               if (hash.substring(hash.length-1) === "*") {
+                                       hash = hash.substring(0, hash.length-1);
                                }
+                               let klass = (hash.substring(0,1) === "$") ? "var" : "constant";
+                               let scrolled = false;
+                               Array.prototype.forEach.call(document.getElementsByClassName(klass), function(e) {
+                                       if (e.textContent.substring(0, hash.length) !== hash) {
+                                               return;
+                                       }
+                                       if (!scrolled) {
+                                               scrolled = true;
+                                               window.scrollTo(0, e.offsetTop > 64 ? e.offsetTop - 64 : 0);
+                                       }
+                                       letElementBlink(e);
+                               });
                        }
                }
        };
 
-       $(window).on("hashchange", mdref.hashchange);
-       mdref.hashchange();
-
-       $("#disqus_activator").on("click", function() {
-               var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-               dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-               (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-       });
-       $.ajax("https://disqus.com/api/3.0/threads/details.json?thread:ident="+(disqus_identifier||"index")+"&forum=mdref&api_key=VmhVG4z5jjtY8SCaMstOjfUuwniMv43Xy9FCU9YfEzhsrl95dNz1epykXSJn8jt9"). then(function(json) {
-               if (json && json.response) {
-                       $("#disqus_activator span").text(json.response.posts);
-               }
-       });
-       setTimeout(function() {
-               $("footer").addClass("hidden");
-       }, 1000);
-});
+       onHashChange();
+       window.addEventListener("hashchange", onHashChange);
+       setTimeout(()=>document.getElementsByTagName("footer")[0].classList.add("hidden"), 1000);
+})
index e49d520fe8a9c66509d00ab6f77c69bc9e85ac31..b0e96a8667a00e1210e100af0fd4760ddeb5766d 100644 (file)
@@ -17,8 +17,6 @@
                        <link rel="stylesheet" href="index.css">
                <?php endif; ?>
 
-               <link href="https://fonts.googleapis.com/css?family=Inconsolata&amp;subset=latin-ext" rel="stylesheet">
-               <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                <link rel="shortcut icon" href="<?= $baseUrl . "favicon.ico" ?>">
        </head>
        <body>
                        <?php include __DIR__."/index.phtml" ?>
                <?php endif; ?>
 
-                       <div id="disqus_thread"><button id="disqus_activator">Show <span> </span> Comment(s)</button></div>
-                       <script>
-                               var disqus_shortname = 'mdref';
-                               var disqus_identifier = '<?=$ref?>';
-                       </script>
 
                        <footer>
                                <?php include __DIR__."/footer.phtml" ?>