Add js warning plus fallback for blog markdown posts (#24)

* link to post * tiny tweak * add js fallback to one blogpost * update rest of blogs plus template * fix a paren
hannahilea · Sep 24, 2024 · 7f8b13f · 7f8b13f
1 parent cbda507
commit 7f8b13f
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 11 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -273,3 +273,21 @@ img.home-img {
   padding: 1em 1.5em;
 } 
 
+.js-fallback-container {
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+}
+
+.js-fallback-container .js-fallback-desc {
+  border: none;
+  border-left: 4mm ridge rgb(255, 230, 0);
+  flex: 0 1 auto;
+  margin-bottom: 2em;
+}
+
+.js-fallback {
+  flex: 1 1 auto;
+  display: flex;
+  border:1px dashed black;
+}
diff --git a/blog/__template/index.html b/blog/__template/index.html
@@ -17,7 +17,12 @@
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>
 

diff --git a/blog/clapping-music-for-flip-disc-displays/index.html b/blog/clapping-music-for-flip-disc-displays/index.html
@@ -18,7 +18,12 @@
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>
 

diff --git a/blog/driven-developments/index.html b/blog/driven-developments/index.html
@@ -17,7 +17,12 @@
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>
 

diff --git a/blog/driven-developments/src.md b/blog/driven-developments/src.md
@@ -73,6 +73,8 @@ You're feeling sluggish about working on a fairly mundane and repetitive task, b
 #### Service-driven development (SrvDD)
 Someone in your community needs or wants something, and you know how to make it happen for them! For me, this often shows up when making a present or acting as tech support. When used as the target of PDD, SrvDD can be a double-edged sword. (Alternative name: love-driven development (LDD).)
 
+<p style="text-align:center">***</p>
+
 ...and those are my big ones! I've found it useful to classify my motivations like this; it has been helping me provide a sanity-check about the goal of a given task, as well as help me recognize when I've unintentionally gone off-task. I've also found that DD terminology does a nice job of succinctly communicating my current state to others. It'll be interesting to see if I feel like using the terminology longer term, or if it's just a short-term meme. 
 
 I've started using DDD and SDD conversationally, and folks in my circles have run with it in delightful ways---both by sharing their own examples of spite-driven development (it's the one that seems to stand out!!) and by coining new "driven development" techniques. Keep 'em coming! 
@@ -102,7 +104,7 @@ I've started using DDD and SDD conversationally, and folks in my circles have ru
 
 [^litreview]: 👀 👀 👀
 
-[^TDDdomains]: Okay okay, I would not necessarily take TDD *literally* in many domains---but it is certainly possible to think through the "what-ifs" to understand what a failing case would look like, and then what a successful case looks like. And it seems like (from the [TDD wikipedia page](https://en.wikipedia.org/wiki/Test-driven_development) this cross-domain adoption is something that folks already do. Good!
+[^TDDdomains]: Okay okay, I would not necessarily take TDD *literally* in many domains---but it is certainly possible to think through the "what-ifs" to understand what a failing case would look like, and then what a successful case looks like. And it seems like (from the [TDD wikipedia page](https://en.wikipedia.org/wiki/Test-driven_development)) this cross-domain adoption is something that folks already do. Good!
 
 ---
 ### Footnotes

diff --git a/blog/future-blog-posts/index.html b/blog/future-blog-posts/index.html
@@ -23,7 +23,12 @@
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>
 

diff --git a/blog/future-blog-posts/src.md b/blog/future-blog-posts/src.md
@@ -23,7 +23,7 @@ Without further ado, some things I could write *right now*<sup><a name="footnote
 - *The rest of the owl: My first experience with <a class="impersonal" href="https://codecrafters.io">codecrafters</a>*
 
 ### Feelings™ (tech and otherwise)
-- *Dopamine-Driven Development (DDD), Spite-Driven Development (SDD), and other DDs*
+- ~*Dopamine-Driven Development (DDD), Spite-Driven Development (SDD), and other DDs*~ [EDIT 9/23/24: [Written](../driven-developments/)!]
 - *A batch at the Recurse Center: My antidote to burnout*
 - *The Mike Ratio: A Bechdel test for the modern tech team*
 - *Towards a Bechdel test for assessing a candidate employer*<sup><a name="footnote-4-site">[4](#footnote-4)</a></sup>
@@ -46,5 +46,5 @@ Right. Now that I've gotten this current list out of my head, maybe I'll be able
 
 --- 
 - created: 2024-09-18
-- last updated: 2024-09-18
+- last updated: 2024-09-23
 - tags: brainstorm, metawriting
diff --git a/blog/js-fallback-description.html b/blog/js-fallback-description.html
@@ -0,0 +1,5 @@
+<strong>⚠️ Hark!</strong>
+<p>This page normally uses javascript to render its content from the underlying markdown.
+    If you're seeing this alert, it's probably because you've disabled javascript.</p>
+<p> You'll still be able to see all text content, but the styling might look a little funny, and not all links/images
+    will be visible. If you want to view it as originally intended, you'll need to enable javascript. </p>
diff --git a/blog/make-a-list/index.html b/blog/make-a-list/index.html
@@ -11,13 +11,18 @@
 <body>
   <div class="main-container">
     <nav class="blog-navbar" role="navigation">
-      @hannahilea: 
+      @hannahilea:
       <a href="../.." class="nav-link">home</a> |
       <a href="../../projects" class="nav-link">projects</a> |
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>
 

diff --git a/blog/make-a-list/src.md b/blog/make-a-list/src.md
@@ -15,7 +15,7 @@ I am a big fan of Making A List, whether on paper or digitally.[^skill]
 As taught to me by <a class="impersonal" href="https://futurestatesband.ca/)">Chuck</a>[^chuck], **the most important thing about a to-do list is that the first item on it is "Make a list"**. Then, when you've finished adding tasks to your list, you can check it off immediately. Bam, [dopamine](../driven-developments/). Happy day, you're already partly done with your list! Look at you, so much progress already!
 My notebook is filled with (partially-completed 😅) daily to-do lists, each of which starts with "make a list".
 
-The one type of list I don't regularly start this way is the <a class="impersonal" href="https://en.wikipedia.org/wiki/Punch_list">punch lists</a> that I often add to pull requests (PRs). (Pull requests are proposals to merge a set of changes into a set of existing documents, e.g., source code.) PR punch lists both keep me on task and let my reviewers know what subtasks I intentionally considered---and, implicitly, what I did not. (Are you requesting a non-trivial review from me? Bonus points if you include a punch list!)
+The one type of list I don't regularly start this way is the <a class="impersonal" href="https://en.wikipedia.org/wiki/Punch_list">punch lists</a> that I often add to pull requests. (Pull requests (PRs) are proposals to merge a set of changes into a set of existing documents, e.g., source code.) PR punch lists both keep me on task and let my reviewers know what subtasks I intentionally considered---and, implicitly, what I did not. (Are you requesting a non-trivial review from me? Bonus points if you include a punch list!)
 
 I've also found that adding a punch list to a <a class="impersonal" href="https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository">Github PR template</a> helps improve review turnaround time and reduces review friction, and sets newer contributors up to succeed more quickly.
 

diff --git a/blog/site-structure/index.html b/blog/site-structure/index.html
@@ -26,7 +26,12 @@
       <a href=".." class="nav-link">blog</a> |
       <a href="mailto:[email protected]" class="nav-link">contact</a>
     </nav>
-    <md-block src="./src.md"></md-block>
+    <md-block src="./src.md">
+      <div class="js-fallback-container">
+        <iframe class="js-fallback-desc" src="../js-fallback-description.html"></iframe>
+          <iframe class="js-fallback" src="./src.md"></iframe>
+      </div>
+    </md-block>
   </div>
 </body>