/* global React, ReactDOM */ const { useState, useEffect, useMemo, useRef, useCallback } = React; const STORIES = (window.__DC_STORIES__ || []).slice().sort((a, b) => a.n - b.n); /* -------------------- helpers -------------------- */ const pad2 = (n) => String(n).padStart(2, "0"); const fmtN = (n) => "№ " + pad2(n); const ROMAN = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX"]; const roman = (n) => { // simple to ~50 if (n <= 20) return ROMAN[n - 1]; const tens = Math.floor(n / 10); const ones = n % 10; const tensStr = ["", "X", "XX", "XXX", "XL", "L"][tens]; return tensStr + (ones ? ROMAN[ones - 1] : ""); }; const lsKey = "darkcorner.v1"; const loadLS = () => { try { return JSON.parse(localStorage.getItem(lsKey)) || {}; } catch (e) { return {}; } }; const saveLS = (obj) => { try { localStorage.setItem(lsKey, JSON.stringify(obj)); } catch (e) { } }; /* -------------------- markdown-ish renderer -------------------- */ // Stories are essentially plaintext with **bold** at title; body has paragraphs separated by single \n // We treat each non-empty line as a paragraph. Inline: **bold**, *italic*, _italic_, simple links. function renderInline(text, key) { // tokenize on **bold** and *italic* const out = []; let i = 0; let buf = ""; const push = (node) => { if (buf) { out.push(buf); buf = ""; } out.push(node); }; while (i < text.length) { if (text[i] === "*" && text[i + 1] === "*") { const end = text.indexOf("**", i + 2); if (end > -1) { push({text.slice(i + 2, end)}); i = end + 2; continue; } } if (text[i] === "*" || text[i] === "_") { const ch = text[i]; const end = text.indexOf(ch, i + 1); if (end > -1 && end - i > 1 && /\S/.test(text.slice(i + 1, end))) { push({text.slice(i + 1, end)}); i = end + 1; continue; } } buf += text[i++]; } if (buf) out.push(buf); return out; } function StoryImage({ img, order }) { return (
{img.caption
Plate {roman(order + 1)} {img.caption || ""}
); } function StoryBody({ body, n, images }) { const paras = useMemo(() => body.split(/\n+/).map(s => s.trim()).filter(Boolean), [body]); const imageMap = useMemo(() => { const map = new Map(); if (!images || images.length === 0) return map; let globalOrder = 0; const sorted = [...images].sort((a, b) => (a.after ?? 0) - (b.after ?? 0)); for (const img of sorted) { const after = img.after ?? 0; if (!map.has(after)) map.set(after, []); map.get(after).push({ ...img, order: globalOrder++ }); } return map; }, [images]); const usePlates = !images || images.length === 0; const plates = useMemo(() => { if (!usePlates) return new Set(); if (paras.length < 6) return new Set([0]); const set = new Set([0]); if (paras.length >= 8) set.add(Math.floor(paras.length / 2)); return set; }, [paras, usePlates]); return (
{paras.map((p, idx) => { const isFirst = idx === 0; const afterImages = imageMap.get(idx) || []; return ( {plates.has(idx) && ( )}

{isFirst ? ( <> {p[0]} {renderInline(p.slice(1), "p" + idx)} ) : renderInline(p, "p" + idx)}

{afterImages.map((img, i) => ( ))} ); })}
); } /* -------------------- image plate placeholder -------------------- */ const PLATE_TINTS = [ "tobacco", "ink", "sage", "barn", "dust" ]; function Plate({ n, order }) { const tint = PLATE_TINTS[(n + order) % PLATE_TINTS.length]; const captions = [ "photograph — drop a real one in here", "family portrait, c. 1940s", "place — a road, a house, a creek bend", "clipping — newspaper, ledger, letter", "object — leather, paper, handbill", ]; const cap = captions[(n + order) % captions.length]; return (
Pl. {roman(order + 1)}
[ {cap} ]
Plate {roman(order + 1)} placeholder
); } /* -------------------- hash routing -------------------- */ function useHashRoute() { const get = () => { const h = (location.hash || "").replace(/^#\/?/, ""); if (!h) return { name: "home" }; if (h === "bookmarks") return { name: "bookmarks" }; if (h === "about") return { name: "about" }; if (h === "contact") return { name: "contact" }; return { name: "story", slug: h }; }; const [route, setRoute] = useState(get); useEffect(() => { const on = () => setRoute(get()); window.addEventListener("hashchange", on); return () => window.removeEventListener("hashchange", on); }, []); return route; } const goto = (h) => { location.hash = h ? "#/" + h : ""; }; /* -------------------- nav (top bar) -------------------- */ function TopBar({ route, onMenu, progress }) { return (
{ e.preventDefault(); goto(""); }}> Dark Corner · USA
{route.name === "story" ? ( ) : ( )}
{progress != null && (
)}
); } /* -------------------- side menu -------------------- */ function SideMenu({ open, onClose }) { return (
); } /* -------------------- home / library -------------------- */ function Hero({ resume }) { return (
Dark Corner mark

Stories from
Dark Corner

A collection of articles by Willis Moody McWilliams.

{resume ? ( ) : ( )}
); } function StoryCard({ s, bookmarked, lastRead }) { const excerpt = (s.body.split(/\n/)[0] || "").slice(0, 130); return ( { e.preventDefault(); goto(s.slug); }}>
{pad2(s.n)}
{s.minutes} min read · {s.words.toLocaleString()} words {bookmarked && ★ Saved} {lastRead && Last read}

{s.title}

{excerpt}…

→
 ); } function Library({ saved, lastSlug }) { const [q, setQ] = useState(""); const [showFilter, setShowFilter] = useState("all"); // all | saved const list = useMemo(() => { let l = STORIES; if (showFilter === "saved") l = l.filter(s => saved[s.slug]); if (q.trim()) { const needle = q.trim().toLowerCase(); l = l.filter(s => s.title.toLowerCase().includes(needle) || s.body.toLowerCase().includes(needle)); } return l; }, [q, showFilter, saved]); const resumeStory = useMemo(() => STORIES.find(s => s.slug === lastSlug), [lastSlug]); return (

The Library

setQ(e.target.value)} /> {q && }
{list.length === 0 ? (
— nothing found in this corner —
) : (
{list.map(s => ( ))}
)}
); } /* -------------------- story view -------------------- */ function Story({ slug, saved, toggleSave, setLastSlug, onProgress }) { const idx = STORIES.findIndex(s => s.slug === slug); const s = STORIES[idx]; const prev = idx > 0 ? STORIES[idx - 1] : null; const next = idx < STORIES.length - 1 ? STORIES[idx + 1] : null; // scroll to top on slug change useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); setLastSlug(slug); }, [slug]); // progress useEffect(() => { let raf = 0; const handler = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const h = document.documentElement; const max = h.scrollHeight - h.clientHeight; const p = max > 0 ? Math.min(1, Math.max(0, h.scrollTop / max)) : 0; onProgress(p); }); }; handler(); window.addEventListener("scroll", handler, { passive: true }); window.addEventListener("resize", handler); return () => { window.removeEventListener("scroll", handler); window.removeEventListener("resize", handler); cancelAnimationFrame(raf); }; }, [slug, onProgress]); if (!s) { return
Story not found. { e.preventDefault(); goto(""); }}>Back to the library.
; } const isBookmarked = !!saved[s.slug]; return (
Story № {pad2(s.n)} of {STORIES.length} {s.minutes} min
— Vol. I, Stories from Dark Corner —

{s.title}

By Willis McWilliams · Kingston, OK
✦
— end of story № {pad2(s.n)} —
{ e.preventDefault(); goto(""); }}>↺   Back to the library
); } /* -------------------- bookmarks page -------------------- */ function Bookmarks({ saved }) { const list = STORIES.filter(s => saved[s.slug]); return (
§ Bookmarks

Saved for later.

{list.length === 0 ? (
— No bookmarks yet. Tap ☆ on any story to save it. —
) : (
{list.map(s => )}
)}
); } /* -------------------- about page -------------------- */ function About() { return (

Our Story

By Jerreck Moody McWilliams

Willis Moody McWilliams was born in 1938 in a small white house in Dark Corner, a region in Marshall County, Oklahoma best describe by this excerpt from "Moonshine Cave":

Dark Corner had no real boundaries before 1907, when the school districts were drawn; it was just there, in the eastern part of Marshall County near the Washita River. It was somewhat secluded and pretty much stayed so until the 1940's when the railroad was rerouted through it.
Someone once said that to get to the remotest residence in Dark Corner you had to swing in on a grapevine. Even then, you were likely to find a note on the door saying: "Gone to the country." Those who lived in it knew where they lived and had a special feeling about this remote area.

Willis began writing stories about Dark Corner after attending the Woodville High School reunion in 2002. He realized listening to the "old timers" that if he didn't write down what he knew, his memories and the history of the region would like go with him. So he set about recording his knowledge in Word Pad.

His son (my father) John Moody McWilliams helped him compile the book. Dad handled most of the investigative journalism for the book, as well as drew most of the illustrations. His biggest endeavor, however, was camposing the printed version of the book. He was not a technicallly savvy person. Even though software existed at the time that would've allowed him to design the layout of the book digitally, he instead arranged the illustrations and photos around printed text, tapped the pages together, then scanned them to create a "page."

I remember when dad and Daddy Willis (as he's called by his grandkids) went to "mass-produce" the first version of the book. An entire weekend was spent printing copies from a tiny office printer and then punching an endless number of holes through the pages. They consumed probbaly a dozen boxes of copier paper and a hundred of those plastic book binding thingies (Google says they're combs?). But by the time they were done, the first edition of Dark Corner USA had been printed.

The original digital copies of the book were lost to a house fire in 2015. My wife, Sadie Mcwilliams, re-typed the book over the next several months to ensure we weren't reliant on the physical copies for preservation. We now have two boys, so I've transcribed her re-typing of Willis's book into a website to better ensure its longevity.

Stories by Willis Moody McWilliams.
Photos & Art by John Moody McWilliams.
Website by Jerreck Moody McWilliams.
Edited by Sadie McWilliams.

); } function Colophon() { return ( ); } /* -------------------- contact page -------------------- */ function Contact() { return (

Contact

Dark Corner USA

Name
Jerreck McWilliams
Phone
(469) 744-1362
Address
5961 McDuffee Rd
Kingston, OK 73439
Email
jerreck@darkcornerusa.com
); } /* -------------------- app shell -------------------- */ function App() { const route = useHashRoute(); const [menuOpen, setMenuOpen] = useState(false); const [state, setState] = useState(loadLS); const [progress, setProgress] = useState(null); const saved = state.saved || {}; const lastSlug = state.lastSlug || null; const update = useCallback((next) => { setState((cur) => { const merged = { ...cur, ...(typeof next === 'function' ? next(cur) : next) }; saveLS(merged); return merged; }); }, []); const toggleSave = useCallback((slug) => { update((cur) => { const s = { ...(cur.saved || {}) }; if (s[slug]) delete s[slug]; else s[slug] = Date.now(); return { saved: s }; }); }, [update]); const setLastSlug = useCallback((slug) => { update((cur) => cur.lastSlug === slug ? {} : { lastSlug: slug }); }, [update]); // close menu on route change useEffect(() => { setMenuOpen(false); }, [route.name, route.slug]); // reset progress when leaving a story useEffect(() => { if (route.name !== "story") setProgress(null); }, [route.name]); return ( <> setMenuOpen(true)} progress={route.name === "story" ? (progress || 0) : null} /> setMenuOpen(false)} /> {route.name === "home" && } {route.name === "story" && ( )} {route.name === "bookmarks" && } {route.name === "about" && } {route.name === "contact" && } ); } ReactDOM.createRoot(document.getElementById("root")).render();