From b2bc0197f55a9c85bcc4e8a37faf343416b66777 Mon Sep 17 00:00:00 2001 From: James Patrick Date: Sun, 28 Jan 2024 23:54:32 -0500 Subject: [PATCH] Adding POC for tufte css --- emacs/+orgmode.el | 7 + emacs/config.org | 33 ++++ emacs/dist/bundle.js | 142 ++++++++++++++ emacs/dist/code.css | 441 ++++++++++++++++++++++++++++++++++++++++++ emacs/dist/custom.css | 37 ++++ emacs/dist/setup.org | 21 ++ emacs/dist/tufte.css | 83 +++----- emacs/packages.el | 2 + 8 files changed, 706 insertions(+), 60 deletions(-) create mode 100644 emacs/dist/bundle.js create mode 100644 emacs/dist/code.css create mode 100644 emacs/dist/custom.css create mode 100644 emacs/dist/setup.org diff --git a/emacs/+orgmode.el b/emacs/+orgmode.el index f59ba0d..c81e78e 100644 --- a/emacs/+orgmode.el +++ b/emacs/+orgmode.el @@ -160,6 +160,13 @@ See https://emacs.stackexchange.com/questions/63517/org-mode-evaluate-diff-code- ;(add-hook! 'org-mode-hook #'solaire-mode) ;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset) +(require 'ox-tufte) + +(setq org-html-head "" + org-html-head-extra "") + +(setq org-html-htmlize-output-type "css") + (setq +org-capture-frame-parameters '((name . "doom-capture") (width . 100) (height . 20) diff --git a/emacs/config.org b/emacs/config.org index 3083a42..add85b4 100644 --- a/emacs/config.org +++ b/emacs/config.org @@ -1,4 +1,5 @@ #+title: Doom Emacs Configuration +#+SETUPFILE: ./dist/setup.org I'll fill out the how and why of this all as I figure out what the hell I'm doing. My current Emacs Configuration is a mess of copy and pasted snippet loosely grouped together. There's a fair number of work around, to transient configuration issues that now no longer exist, and more of stuff cribbed off StackOverflow & held together with string & bubble gum. While not yet calling Configuration Bankrupt's, I am going to try to see if I can restructure this technical debt. @@ -858,6 +859,38 @@ cat a.org ;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset) #+end_src +*** Export to Tufte +Rather than using =org-export-dispatch='s html export, we'll want to use [[https://github.com/ox-tufte/ox-tufte][ox-tufte]]. The HTML output is a more reasonable than the HTML format. + +#+BEGIN_SRC emacs-lisp :tangle "packages.el" +(package! ox-tufte) +#+END_SRC + +Just load the require to setup the dependency. +#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no +(require 'ox-tufte) +#+end_src + +By default the =org-export-dispatch=, includes some basic styling. This causes issues with our HTML. We'll need to turn off these. + +#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no +(setq org-html-head "" + org-html-head-extra "") +#+end_src + +The syntax highlighting for html is done inline in the by default. We don't want to do that; we're using CSS. See the file in [[file:dist/code.css][code.css]] file for more. + +#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no +(setq org-html-htmlize-output-type "css") +#+end_src + +To use this you will need to include the setup file. This will load the required css & js files. See [[https://orgmode.org/manual/In_002dbuffer-Settings.html][here]] for more. + +#+begin_src org :tangle no +#+SETUPFILE: ~/.dotfiles/emacs/dist/setup.org +#+end_src + +This will load the CSS and JS files located in the =dotfiles/emacs/dist/= directory. ** Capture The default =+org-capture/open-frame= is a little small. Let's modify the parameters to make it a little larger diff --git a/emacs/dist/bundle.js b/emacs/dist/bundle.js new file mode 100644 index 0000000..2280f77 --- /dev/null +++ b/emacs/dist/bundle.js @@ -0,0 +1,142 @@ +/** + * This file is largely lifted from + * */ +/* eslint-disable no-script-url,padded-blocks,spaced-comment */ +(function (exports, options) { + "use strict"; + + var win = exports; + var doc = exports.document; + + // Just so we can test without having to build theme options + if (!options) { + options = {}; + } + + // Query selector helper + function $(selector) { + var lookup = doc.querySelectorAll(selector); + return [].slice.call(lookup); + } + + // Setup checklists + function setupChecklists() { + // Remove `` from `li.on` and `li.off` + $("li[class^=o] code").forEach(function (node) { + var ul = node.parentNode.parentNode; + var li = node.parentNode; + var code = node; + var isChecked = li.classList.contains("on"); + var checkbox = createCheckbox(isChecked); + + // Add `checklist` class to the list + ul.classList.add("checklist"); + + // Insert a checkbox element to the list item + li.insertBefore(checkbox, code); + + // Remove code node + code.remove(); + }); + } + + // Setup task lists + function setupTasklists() { + $(".done, .todo").forEach(function (node) { + var container = node.parentNode; + var status = node; + var isChecked = node.classList.contains("done"); + var checkbox = createCheckbox(isChecked); + + // Add `checklist` class to the task container + container.insertBefore(checkbox, status); + + // Remove task node + status.remove(); + }); + } + + // Creates a simple checkbox element + // isChecked: Whether or not it should display checked + function createCheckbox(isChecked) { + var checkbox = doc.createElement("input"); + checkbox.setAttribute("type", "checkbox"); + checkbox.setAttribute("disabled", "disabled"); + + if (isChecked) { + checkbox.setAttribute("checked", "checked"); + } + + return checkbox; + } + + // Add "back to top" button + function addBackToTop() { + var link = doc.createElement("a"); + var container = doc.querySelector("body"); + + link.classList.add("back-to-top"); + link.setAttribute("href", "javascript:scroll(0, 0);"); + link.innerHTML = "" + options["back-to-top-text"]; + + container.appendChild(link); + } + + // Display the collection name and user avatar at the header + function addCollection(collection) { + var content = doc.querySelector("#content"); + var wrapper = doc.createElement("div"); + var link = doc.createElement("a"); + var avatar = doc.createElement("img"); + var title = doc.createTextNode(collection.title); + var hasAvatar = collection.avatar && collection.avatar.length; + + wrapper.classList.add("collection"); + + link.classList.add("collection-url"); + link.href = collection.url || "/"; + + avatar.classList.add("collection-avatar"); + avatar.src = collection.avatar; + avatar.alt = collection.title; + + if (hasAvatar) { + link.appendChild(avatar); + } + + link.appendChild(title); + wrapper.appendChild(link); + content.insertBefore(wrapper, content.firstChild); + } + + function bootstrap() { + // Bootstrap lists + if (options["fancy-lists"]) { + setupChecklists(); + setupTasklists(); + } + + // Bootstrap "back to top" + if (options["back-to-top"]) { + addBackToTop(); + } + + if (options.collection.enabled) { + addCollection(options.collection); + } + + // console.log($("#content")[0].classList.add("show")); + } + + // Hold bootstrap until document body is parsed + exports.onload = bootstrap; +})(window, { + "table-of-contents": false, + "section-numbers": false, + postamble: true, + "fancy-lists": true, + "fancy-icons": true, + "back-to-top": true, + "back-to-top-text": "Back to top", + collection: { enabled: false, avatar: "", title: "", url: "/" }, +}); diff --git a/emacs/dist/code.css b/emacs/dist/code.css new file mode 100644 index 0000000..281545e --- /dev/null +++ b/emacs/dist/code.css @@ -0,0 +1,441 @@ +pre { + border-radius: 3px; + padding: 8pt; + font-family: monospace; + overflow: auto; + margin: 1.2em; + + &.src { + position: relative; + overflow: auto; + + &:before { + display: none; + position: absolute; + top: -8px; + right: 12px; + padding: 3px; + color: #555; + background-color: #f2f2f299; + } + + &:hover:before { + display: inline; + margin-top: 14px; + } + } +} + +/* + ============================================================================== + Code Highlighting + ============================================================================== +*/ +pre { + background-color: var(--code-bg); + & span { + &.org-highlight-quoted-symbol { + color: var(--code-08); + } + &.org-warning { + color: var(--code-08); + font-weight: bold; + } + &.org-error { + color: var(--code-09); + font-weight: bold; + } + &.org-bold { + font-weight: bold; + } + &.org-success { + color: var(--code-03); + font-weight: bold; + } + &.org-highlight-quoted-quote { + color: var(--code-01); + } + &.org-builtin { + color: var(--code-02); + } + &.org-string { + color: var(--code-03); + } + &.org-doc { + color: var(--code-10); + } + &.org-keyword { + color: var(--code-01); + } + &.org-variable-name { + color: var(--code-05); + } + &.org-function-name { + color: var(--code-02); + } + &.org-type { + color: var(--code-08); + } + &.org-preprocessor { + color: var(--code-01); + font-weight: bold; + } + &.org-constant { + color: var(--code-04); + } + &.org-comment-delimiter { + color: var(--code-07); + } + &.org-comment { + color: var(--code-07); + } + &.org-outshine-level-1 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-2 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-3 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-4 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-5 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-6 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-7 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-8 { + color: #8d8d84; + font-style: italic; + } + &.org-outshine-level-9 { + color: #8d8d84; + font-style: italic; + } + &.org-rainbow-delimiters-depth-1 { + color: var(--code-01); + } + &.org-rainbow-delimiters-depth-2 { + color: var(--code-02); + } + &.org-rainbow-delimiters-depth-3 { + color: var(--code-03); + } + &.org-rainbow-delimiters-depth-4 { + color: var(--code-04); + } + &.org-rainbow-delimiters-depth-5 { + color: var(--code-01); + } + &.org-rainbow-delimiters-depth-6 { + color: var(--code-02); + } + &.org-rainbow-delimiters-depth-7 { + color: var(--code-03); + } + &.org-rainbow-delimiters-depth-8 { + color: var(--code-04); + } + &.org-rainbow-delimiters-depth-9 { + color: var(--code-09); + } + &.org-sh-quoted-exec { + color: var(--code-01); + } + &.org-diff-added { + color: var(--code-03); + } + &.org-diff-changed { + color: var(--code-08); + } + &.org-diff-header { + color: var(--code-12); + } + &.org-diff-hunk-header { + color: var(--code-04); + } + &.org-diff-none { + color: var(--code-11); + } + &.org-diff-removed { + color: var(--code-09); + } + } +} +/* + ============================================================================== + Stay what the code mode is. + ============================================================================== +*/ +pre { + /* Languages per Org manual */ + &.src-asymptote:before { + content: "Asymptote"; + } + &.src-awk:before { + content: "Awk"; + } + &.src-authinfo::before { + content: "Authinfo"; + } + &.src-C:before { + content: "C"; + } + /* pre.src-C++ doesn't work in CSS */ + &.src-clojure:before { + content: "Clojure"; + } + &.src-css:before { + content: "CSS"; + } + &.src-D:before { + content: "D"; + } + &.src-ditaa:before { + content: "ditaa"; + } + &.src-dot:before { + content: "Graphviz"; + } + &.src-calc:before { + content: "Emacs Calc"; + } + &.src-emacs-lisp:before { + content: "Emacs Lisp"; + } + &.src-fortran:before { + content: "Fortran"; + } + &.src-gnuplot:before { + content: "gnuplot"; + } + &.src-haskell:before { + content: "Haskell"; + } + &.src-hledger:before { + content: "hledger"; + } + &.src-java:before { + content: "Java"; + } + &.src-js:before { + content: "Javascript"; + } + &.src-latex:before { + content: "LaTeX"; + } + &.src-ledger:before { + content: "Ledger"; + } + &.src-lisp:before { + content: "Lisp"; + } + &.src-lilypond:before { + content: "Lilypond"; + } + &.src-lua:before { + content: "Lua"; + } + &.src-matlab:before { + content: "MATLAB"; + } + &.src-mscgen:before { + content: "Mscgen"; + } + &.src-ocaml:before { + content: "Objective Caml"; + } + &.src-octave:before { + content: "Octave"; + } + &.src-org:before { + content: "Org mode"; + } + &.src-oz:before { + content: "OZ"; + } + &.src-plantuml:before { + content: "Plantuml"; + } + &.src-processing:before { + content: "Processing.js"; + } + &.src-python:before { + content: "Python"; + } + &.src-R:before { + content: "R"; + } + &.src-ruby:before { + content: "Ruby"; + } + &.src-sass:before { + content: "Sass"; + } + &.src-scheme:before { + content: "Scheme"; + } + &.src-screen:before { + content: "Gnu Screen"; + } + &.src-sed:before { + content: "Sed"; + } + &.src-sh:before { + content: "shell"; + } + &.src-sql:before { + content: "SQL"; + } + &.src-sqlite:before { + content: "SQLite"; + } + /* additional languages in org.el's org-babel-load-languages alist */ + &.src-forth:before { + content: "Forth"; + } + &.src-io:before { + content: "IO"; + } + &.src-J:before { + content: "J"; + } + &.src-makefile:before { + content: "Makefile"; + } + &.src-maxima:before { + content: "Maxima"; + } + &.src-perl:before { + content: "Perl"; + } + &.src-picolisp:before { + content: "Pico Lisp"; + } + &.src-scala:before { + content: "Scala"; + } + &.src-shell:before { + content: "Shell Script"; + } + &.src-ebnf2ps:before { + content: "ebfn2ps"; + } + /* additional language identifiers per "defun org-babel-execute" + in ob-*.el */ + &.src-cpp:before { + content: "C++"; + } + &.src-abc:before { + content: "ABC"; + } + &.src-coq:before { + content: "Coq"; + } + &.src-groovy:before { + content: "Groovy"; + } + /* additional language identifiers from org-babel-shell-names in + ob-shell.el: ob-shell is the only babel language using a lambda to put + the execution function name together. */ + &.src-bash:before { + content: "bash"; + } + &.src-csh:before { + content: "csh"; + } + &.src-ash:before { + content: "ash"; + } + &.src-dash:before { + content: "dash"; + } + &.src-ksh:before { + content: "ksh"; + } + &.src-mksh:before { + content: "mksh"; + } + &.src-posh:before { + content: "posh"; + } + /* Additional Emacs modes also supported by the LaTeX listings package */ + &.src-ada:before { + content: "Ada"; + } + &.src-asm:before { + content: "Assembler"; + } + &.src-caml:before { + content: "Caml"; + } + &.src-delphi:before { + content: "Delphi"; + } + &.src-html:before { + content: "HTML"; + } + &.src-idl:before { + content: "IDL"; + } + &.src-mercury:before { + content: "Mercury"; + } + &.src-metapost:before { + content: "MetaPost"; + } + &.src-modula-2:before { + content: "Modula-2"; + } + &.src-pascal:before { + content: "Pascal"; + } + &.src-ps:before { + content: "PostScript"; + } + &.src-prolog:before { + content: "Prolog"; + } + &.src-simula:before { + content: "Simula"; + } + &.src-tcl:before { + content: "tcl"; + } + &.src-tex:before { + content: "TeX"; + } + &.src-plain-tex:before { + content: "Plain TeX"; + } + &.src-verilog:before { + content: "Verilog"; + } + &.src-vhdl:before { + content: "VHDL"; + } + &.src-xml:before { + content: "XML"; + } + &.src-nxml:before { + content: "XML"; + } + /* add a generic configuration mode; LaTeX export needs an additional + (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */ + &.src-conf:before { + content: "Configuration File"; + } +} diff --git a/emacs/dist/custom.css b/emacs/dist/custom.css new file mode 100644 index 0000000..bb7988d --- /dev/null +++ b/emacs/dist/custom.css @@ -0,0 +1,37 @@ +/* + ============================================================================== + Colors + ============================================================================== +*/ +:root { + /* --dark-bg: #292c33; */ + --dark-bg: #24272d; + --dark-fg: #bcc2ce; + --code-bg: #24272d; + --code-01: #68aee9; + --code-02: #bb7ed7; + --code-03: #a0bc70; + --code-04: #a7a3dc; + --code-05: #d5b1e6; + --code-06: #cf8854; + --code-07: #5c6267; + --code-08: #e5bf84; + --code-09: #ee7570; + --code-10: #84898d; + --code-11: #a5aab5; + --code-12: #72d7fb; +} + +/* + ============================================================================== + Disable Orgmode Config + ============================================================================== +*/ + +[class^="section-number-"] { + display: none; +} + +#table-of-contents { + display: none; +} diff --git a/emacs/dist/setup.org b/emacs/dist/setup.org new file mode 100644 index 0000000..2bf757b --- /dev/null +++ b/emacs/dist/setup.org @@ -0,0 +1,21 @@ +# -*- mode: org; -*- +# +# This setup stack represents the following configuration: +# +#{ +# "table-of-contents": false, +# "section-numbers": false, +# "postamble": false, +# "fancy-lists": false, +# "fancy-icons": false, +# "back-to-top": true, +# "collection": { +# "enabled": false, +# } +#} +# I recommend you to generate your own css/js files by forking, cloning and customizing the file +# theme.json before building it. +# +# +#+HTML_HEAD: +#+HTML_HEAD: diff --git a/emacs/dist/tufte.css b/emacs/dist/tufte.css index d542fe9..9044922 100644 --- a/emacs/dist/tufte.css +++ b/emacs/dist/tufte.css @@ -1,16 +1,9 @@ @charset "UTF-8"; - -[class^="section-number-"] { - display: none; -} - -#table-of-contents { - display: none; -} +@import "custom.css"; +@import "code.css"; /* Import ET Book styles adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ - @font-face { font-family: "NerdFontsSymbols Nerd Font"; src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/NerdFontsSymbolsOnly/SymbolsNerdFont-Regular.ttf"); @@ -99,20 +92,12 @@ body { padding-left: 12.5%; font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif, "NerdFontsSymbols Nerd Font"; - background-color: #fffff8; - color: #111; + background-color: var(--dark-bg); + color: var(--dark-fg); max-width: 1400px; counter-reset: sidenote-counter; } -/* Adds dark mode */ -@media (prefers-color-scheme: dark) { - body { - background-color: #151515; - color: #ddd; - } -} - h1 { font-weight: 400; margin-top: 4rem; @@ -292,11 +277,11 @@ a:link, .hover-tufte-underline:hover { text-decoration: none; background: - -webkit-linear-gradient(#fffff8, #fffff8), - -webkit-linear-gradient(#fffff8, #fffff8), + -webkit-linear-gradient(var(--dark-bg), var(--dark-bg)), + -webkit-linear-gradient(var(--dark-bg), var(--dark-bg)), -webkit-linear-gradient(currentColor, currentColor); - background: linear-gradient(#fffff8, #fffff8), - linear-gradient(#fffff8, #fffff8), + background: linear-gradient(var(--dark-bg), var(--dark-bg)), + linear-gradient(var(--dark-bg), var(--dark-bg)), linear-gradient(currentColor, currentColor); -webkit-background-size: 0.05em 1px, @@ -312,18 +297,18 @@ a:link, 1px 1px; background-repeat: no-repeat, no-repeat, repeat-x; text-shadow: - 0.03em 0 #fffff8, - -0.03em 0 #fffff8, - 0 0.03em #fffff8, - 0 -0.03em #fffff8, - 0.06em 0 #fffff8, - -0.06em 0 #fffff8, - 0.09em 0 #fffff8, - -0.09em 0 #fffff8, - 0.12em 0 #fffff8, - -0.12em 0 #fffff8, - 0.15em 0 #fffff8, - -0.15em 0 #fffff8; + 0.03em 0 var(--dark-bg), + -0.03em 0 var(--dark-bg), + 0 0.03em var(--dark-bg), + 0 -0.03em var(--dark-bg), + 0.06em 0 var(--dark-bg), + -0.06em 0 var(--dark-bg), + 0.09em 0 var(--dark-bg), + -0.09em 0 var(--dark-bg), + 0.12em 0 var(--dark-bg), + -0.12em 0 var(--dark-bg), + 0.15em 0 var(--dark-bg), + -0.15em 0 var(--dark-bg); background-position: 0% 93%, 100% 93%, @@ -338,27 +323,6 @@ a:link, } } -/* Adds dark mode */ -@media (prefers-color-scheme: dark) { - a:link, - .tufte-underline, - .hover-tufte-underline:hover { - text-shadow: - 0.03em 0 #151515, - -0.03em 0 #151515, - 0 0.03em #151515, - 0 -0.03em #151515, - 0.06em 0 #151515, - -0.06em 0 #151515, - 0.09em 0 #151515, - -0.09em 0 #151515, - 0.12em 0 #151515, - -0.12em 0 #151515, - 0.15em 0 #151515, - -0.15em 0 #151515; - } -} - a:link::selection, a:link::-moz-selection { text-shadow: @@ -407,14 +371,13 @@ img { vertical-align: baseline; } -.sidenote-number:after { - content: counter(sidenote-counter); +.sidenote-number > .numeral { font-size: 1rem; top: -0.5rem; left: 0.1rem; } -.sidenote > numeral { +.sidenote > .numeral { font-size: 1.2rem; top: -0.5rem; } @@ -589,6 +552,6 @@ label.margin-toggle:not(.sidenote-number) { } img { - width: 100%; + wxdth: 100%; } } diff --git a/emacs/packages.el b/emacs/packages.el index c2da4c9..5586b80 100644 --- a/emacs/packages.el +++ b/emacs/packages.el @@ -2,4 +2,6 @@ (package! ob-mermaid) +(package! ox-tufte) + (package! gptel)