Adding POC for tufte css

This commit is contained in:
James Patrick 2024-01-28 23:54:32 -05:00 committed by James Patrick
parent 363e7b3766
commit b2bc0197f5
8 changed files with 706 additions and 60 deletions

View File

@ -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! 'org-mode-hook #'solaire-mode)
;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset) ;(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") (setq +org-capture-frame-parameters '((name . "doom-capture")
(width . 100) (width . 100)
(height . 20) (height . 20)

View File

@ -1,4 +1,5 @@
#+title: Doom Emacs Configuration #+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. 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) ;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset)
#+end_src #+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 ** Capture
The default =+org-capture/open-frame= is a little small. Let's modify the parameters to make it a little larger The default =+org-capture/open-frame= is a little small. Let's modify the parameters to make it a little larger

142
emacs/dist/bundle.js vendored Normal file
View File

@ -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 `<code>` 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 = "<i></i>" + 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: "/" },
});

441
emacs/dist/code.css vendored Normal file
View File

@ -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";
}
}

37
emacs/dist/custom.css vendored Normal file
View File

@ -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;
}

21
emacs/dist/setup.org vendored Normal file
View File

@ -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: <link rel="stylesheet" type="text/css" href="dist/tufte.css"/>
#+HTML_HEAD: <script src="dist/bundle.js" type="text/javascript" ></script>

83
emacs/dist/tufte.css vendored
View File

@ -1,16 +1,9 @@
@charset "UTF-8"; @charset "UTF-8";
@import "custom.css";
[class^="section-number-"] { @import "code.css";
display: none;
}
#table-of-contents {
display: none;
}
/* Import ET Book styles /* Import ET Book styles
adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
@font-face { @font-face {
font-family: "NerdFontsSymbols Nerd Font"; font-family: "NerdFontsSymbols Nerd Font";
src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/NerdFontsSymbolsOnly/SymbolsNerdFont-Regular.ttf"); 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%; padding-left: 12.5%;
font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
"Book Antiqua", Georgia, serif, "NerdFontsSymbols Nerd Font"; "Book Antiqua", Georgia, serif, "NerdFontsSymbols Nerd Font";
background-color: #fffff8; background-color: var(--dark-bg);
color: #111; color: var(--dark-fg);
max-width: 1400px; max-width: 1400px;
counter-reset: sidenote-counter; counter-reset: sidenote-counter;
} }
/* Adds dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #151515;
color: #ddd;
}
}
h1 { h1 {
font-weight: 400; font-weight: 400;
margin-top: 4rem; margin-top: 4rem;
@ -292,11 +277,11 @@ a:link,
.hover-tufte-underline:hover { .hover-tufte-underline:hover {
text-decoration: none; text-decoration: none;
background: background:
-webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(var(--dark-bg), var(--dark-bg)),
-webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(var(--dark-bg), var(--dark-bg)),
-webkit-linear-gradient(currentColor, currentColor); -webkit-linear-gradient(currentColor, currentColor);
background: linear-gradient(#fffff8, #fffff8), background: linear-gradient(var(--dark-bg), var(--dark-bg)),
linear-gradient(#fffff8, #fffff8), linear-gradient(var(--dark-bg), var(--dark-bg)),
linear-gradient(currentColor, currentColor); linear-gradient(currentColor, currentColor);
-webkit-background-size: -webkit-background-size:
0.05em 1px, 0.05em 1px,
@ -312,18 +297,18 @@ a:link,
1px 1px; 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x; background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: text-shadow:
0.03em 0 #fffff8, 0.03em 0 var(--dark-bg),
-0.03em 0 #fffff8, -0.03em 0 var(--dark-bg),
0 0.03em #fffff8, 0 0.03em var(--dark-bg),
0 -0.03em #fffff8, 0 -0.03em var(--dark-bg),
0.06em 0 #fffff8, 0.06em 0 var(--dark-bg),
-0.06em 0 #fffff8, -0.06em 0 var(--dark-bg),
0.09em 0 #fffff8, 0.09em 0 var(--dark-bg),
-0.09em 0 #fffff8, -0.09em 0 var(--dark-bg),
0.12em 0 #fffff8, 0.12em 0 var(--dark-bg),
-0.12em 0 #fffff8, -0.12em 0 var(--dark-bg),
0.15em 0 #fffff8, 0.15em 0 var(--dark-bg),
-0.15em 0 #fffff8; -0.15em 0 var(--dark-bg);
background-position: background-position:
0% 93%, 0% 93%,
100% 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::selection,
a:link::-moz-selection { a:link::-moz-selection {
text-shadow: text-shadow:
@ -407,14 +371,13 @@ img {
vertical-align: baseline; vertical-align: baseline;
} }
.sidenote-number:after { .sidenote-number > .numeral {
content: counter(sidenote-counter);
font-size: 1rem; font-size: 1rem;
top: -0.5rem; top: -0.5rem;
left: 0.1rem; left: 0.1rem;
} }
.sidenote > numeral { .sidenote > .numeral {
font-size: 1.2rem; font-size: 1.2rem;
top: -0.5rem; top: -0.5rem;
} }
@ -589,6 +552,6 @@ label.margin-toggle:not(.sidenote-number) {
} }
img { img {
width: 100%; wxdth: 100%;
} }
} }

View File

@ -2,4 +2,6 @@
(package! ob-mermaid) (package! ob-mermaid)
(package! ox-tufte)
(package! gptel) (package! gptel)