Last active
November 30, 2025 19:28
-
-
Save borkdude/cf94b492d948f7f418aa81ba54f428ff to your computer and use it in GitHub Desktop.
AOC ui boilerplate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (require '[clojure.string :as str]) | |
| #_(assoc-in! (js/document.querySelector "#compiledCode") [:style :display] :none) | |
| (set! (.-shareToAOC js/window) | |
| (fn [] | |
| (let [aoc-url (js/URL. "https://mateuszmazurczak.com/aoc") | |
| url (-> js/window | |
| .-location | |
| .-href | |
| (js/URL.)) | |
| code (-> js/editor | |
| .-state | |
| .-doc | |
| .toString | |
| .trim | |
| js/btoa)] | |
| (.set (.-searchParams url) "src" code) | |
| (.set (.-searchParams aoc-url) "playground-url" url) | |
| (js/window.open (.toString aoc-url) "_blank")))) | |
| (when-not (js/document.querySelector "#aoc_token") | |
| (let [create-element (fn create-element [tag attributes] | |
| (let [element (js/document.createElement tag)] | |
| (doseq [[key value] attributes] (aset element key value)) | |
| element)) | |
| prepend (fn prepend | |
| ([element] (prepend js/document.body element)) | |
| ([container element] (.prepend container element))) | |
| append (fn append | |
| ([element] (append js/document.body element)) | |
| ([container element] (.append container element)))] | |
| (prepend | |
| (create-element | |
| "style" | |
| {"innerText" | |
| ".flex { display: flex } | |
| .flex-row { flex-direction: row } | |
| .flex-col { flex-direction: column } | |
| .gap-0-5 { gap: 0.5rem } | |
| .gap-0-25 { gap: 0.25rem } | |
| .items-center { align-items: center } | |
| .self-center { align-self: center } | |
| .justify-items-center { justify-items: center } | |
| .mb-15 { margin-bottom: 15px } | |
| .mb-0 { margin-bottom: 0 } | |
| .ml-10 { margin-left: 10px } | |
| .p-10 { padding: 10px } | |
| .w-min { width: min-content } | |
| .font-size-0-75 { font-size: 0.75rem } | |
| .whitespace-nowrap { white-space: nowrap } | |
| .text-wrap-balance { text-wrap: balance } | |
| .border-grey-1 { border: 1px solid grey } | |
| .border-radius-10 { border-radius: 10px }"})) | |
| (let | |
| [aoc-container (create-element "div" | |
| {"id" "aoc_container" | |
| "classList" "flex flex-col gap-0-25 mb-15 ml-10"}) | |
| form-container (create-element "div" | |
| {"id" "aoc_form_container" | |
| "classList" | |
| "flex flex-row gap-0-5 items-center whitespace-nowrap"}) | |
| help-container | |
| (create-element | |
| "div" | |
| {"id" "aoc_help_container" | |
| "innerHTML" | |
| "<b>NOTE:</b> To get your token you must visit the Advent of Code website, log in, and get the value the cookie named "session"." | |
| "classList" "font-size-0-75 text-wrap-balance"}) | |
| share-button (create-element "button" | |
| {"innerText" "Share with community!" | |
| "title" "Share this code for everyone to see" | |
| "onclick" js/shareToAOC})] | |
| (prepend form-container share-button) | |
| (prepend form-container | |
| (create-element "button" | |
| {"innerText" "Save!" | |
| "onclick" js/compile})) | |
| (prepend form-container | |
| (create-element "input" | |
| {"type" "password" | |
| "id" "aoc_token"})) | |
| (prepend form-container | |
| (create-element "label" | |
| {"innerText" "AOC token: " | |
| "for" "aoc_token" | |
| "classList" "whitespace-nowrap"})) | |
| (prepend aoc-container help-container) | |
| (prepend aoc-container form-container) | |
| (prepend aoc-container)) | |
| (let [output-container (create-element | |
| "div" | |
| {"id" "aoc_output_container" | |
| "classList" | |
| "border-grey-1 border-radius-10 p-10 flex flex-col gap-0-25"}) | |
| output (create-element "div" | |
| {"id" "aoc_output" | |
| "classList" "flex flex-col gap-0-25"}) | |
| button-wrapper (create-element "div") | |
| clear-button (create-element | |
| "button" | |
| {"innerText" "Clear" | |
| "classList" "mb-0" | |
| "onclick" | |
| (fn [] (aset (js/document.getElementById "aoc_output") "innerHTML" ""))})] | |
| (append button-wrapper clear-button) | |
| (append output-container button-wrapper) | |
| (append output-container output) | |
| (append js/document.body output-container)))) | |
| (defn get-token [] (.-value (js/document.querySelector "#aoc_token"))) | |
| ;; sync token with local storage | |
| (defn sync-token | |
| [] | |
| (js/console.log "Saving token...") | |
| (let [token (get-token)] | |
| (if (pos? (count token)) | |
| (do (prn :token token) (js/localStorage.setItem "AOC_TOKEN" token)) | |
| (set! (js/document.querySelector "#aoc_token") | |
| -value | |
| (js/localStorage.getItem "AOC_TOKEN"))))) | |
| (sync-token) | |
| (defn append | |
| [str] | |
| (js/document.body.appendChild (doto (js/document.createElement "div") (set! -innerText str)))) | |
| (defn ^:async fetch-input | |
| [year day] | |
| (when-let [token (get-token)] | |
| (try (let [resp (js-await (js/fetch (str "https://aox-proxy.borkdude.workers.dev?year=" year | |
| "&day=" day | |
| "&aoc-token=" token))) | |
| txt (js-await (.text resp))] | |
| txt) | |
| (catch :default e | |
| (js/console.error e) | |
| (throw (new js/Error | |
| "Failed to fetch Advent of Code token! See console for details.")))))) | |
| (defn append | |
| [s] | |
| (let [output (doto (js/document.createElement "div") | |
| (set! -style "display: flex; flex-direction: row; gap: 0.5rem")) | |
| date (doto (js/document.createElement "b") | |
| (set! -innerText (str (.toLocaleString (js/Date.)) ":"))) | |
| text (doto (js/document.createElement "div") (set! -innerText s)) | |
| output-container (js/document.getElementById "aoc_output")] | |
| (.append output date) | |
| (.append output text) | |
| (.append output-container output))) | |
| (defn spy [x] (js/console.log x) x) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment