Working on better web design

author: nathan <nathansmith@disroot.org> 2025-05-24 02:57:22 -0600
committer: nathan <nathansmith@disroot.org> 2025-05-24 02:57:22 -0600
commit: 909a76bcc45e896f8029ec4c8491652f3738d4e3 (patch)
tree: 2be1f29405a9b695c1966d6896ed51db5befee20
parent: e568b96a03be77b8fd68ed1874289a65a93b49aa (diff)
7 files changed, 208 insertions, 39 deletions
diff --git a/old/shittyweb-html.el b/old/shittyweb-html.el
new file mode 100644
index 0000000..c83ec50
--- /dev/null
+++ b/old/shittyweb-html.el
@@ -0,0 +1,151 @@
+(require 'ox-html)
+
+;; https://gileschamberlin.com/2020/02/25/writing-a-new-org-mode-exporter-back-end
+;; https://github.com/grc/jujutsu-website/blob/master/elisp/org-jujutsu-site.el
+;; https://orgmode.org/worg/dev/org-export-reference.html
+
+(defvar shittyweb-html-background-color "#dcd1ba")
+(defvar shittyweb-html-table-background-color "#bebebe")
+(defvar shittyweb-html-table-border 1)
+(defvar shittyweb-html-table-width "65%")
+(defvar shittyweb-html-code-background-color "white")
+(defvar shittyweb-html-code-border 1)
+
+(org-export-define-derived-backend 'shittyweb-html 'html
+  :translate-alist '((template . shittyweb-html-template)
+                     (src-block . shittyweb-html-src-block))
+  :options-alist '((:background-image "BACKGROUND_IMAGE" nil nil)
+                   (:shittyweb-header "SHITTYWEB_HEADER" nil nil)
+                   (:shittyweb-back "SHITTYWEB_BACK" nil "")))
+
+(defun shittyweb-html-template (contents info)
+  "Return complete document string after HTML conversion.
+CONTENTS is the transcoded contents string.  INFO is a plist
+holding export options."
+  (concat
+   (when (and (not (org-html-html5-p info)) (org-html-xhtml-p info))
+     (let* ((xml-declaration (plist-get info :html-xml-declaration))
+	    (decl (or (and (stringp xml-declaration) xml-declaration)
+		      (cdr (assoc (plist-get info :html-extension)
+				  xml-declaration))
+		      (cdr (assoc "html" xml-declaration))
+		      "")))
+       (when (not (or (not decl) (string= "" decl)))
+	 (format "%s\n"
+		 (format decl
+			 (or (and org-html-coding-system
+				  (coding-system-get org-html-coding-system :mime-charset))
+			     "iso-8859-1"))))))
+   (org-html-doctype info)
+   "\n"
+   (concat "<html"
+	   (cond ((org-html-xhtml-p info)
+		  (format
+		   " xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"%s\" xml:lang=\"%s\""
+		   (plist-get info :language) (plist-get info :language)))
+		 ((org-html-html5-p info)
+		  (format " lang=\"%s\"" (plist-get info :language))))
+	   ">\n")
+   "<head>\n"
+   (org-html--build-meta-info info)
+   (org-html--build-head info)
+   (org-html--build-mathjax-config info)
+   "</head>\n"
+   ;; Body with background
+   (let ((background (plist-get info :background-image)))
+     (if background
+         (format "<body bgcolor=\"%s\" background=\"%s\">\n"
+                 shittyweb-html-background-color
+                 background)
+       (format "<body bgcolor=\"%s\">"
+               shittyweb-html-background-color)))
+   ;; I dont use link-up so byebye it goes.
+   ;; Also I give it a directory instead of file.
+   (let ((link-home (org-trim (plist-get info :html-link-home))))
+     (unless (string= link-home "")
+       (format (plist-get info :html-home/up-format) link-home link-home)))
+   ;; The back button thingy
+   (let ((back-page (org-trim (plist-get info :shittyweb-back))))
+     (unless (string= back-page "")
+       back-page))
+   ;; Preamble.
+   (org-html--build-pre/postamble 'preamble info)
+   "\n<center>\n"
+   ;; Shittyweb header. Its outside the weird table thing.
+   (let ((shittyweb-header (plist-get info :shittyweb-header)))
+     (if shittyweb-header
+         shittyweb-header))
+   ;; Document contents.
+   (let ((div (assq 'content (plist-get info :html-divs))))
+     (format "<table border=\"%d\" width=\"%s\" bgcolor=\"%s\" id=\
+\"%s\" class=\"%s\"><tr><td>\n"
+             shittyweb-html-table-border
+             shittyweb-html-table-width
+             shittyweb-html-table-background-color
+             (nth 2 div)
+             (plist-get info :html-content-class)))
+   ;; Document title.
+   (when (plist-get info :with-title)
+     (let ((title (and (plist-get info :with-title)
+		       (plist-get info :title)))
+	   (subtitle (plist-get info :subtitle))
+	   (html5-fancy (org-html--html5-fancy-p info)))
+       (when title
+	 (format
+	  (if html5-fancy
+	      "<header>\n<h1 class=\"title\">%s</h1>\n%s</header>"
+	    "<h1 class=\"title\">%s%s</h1>\n")
+	  (org-export-data title info)
+	  (if subtitle
+	      (format
+	       (if html5-fancy
+		   "<p class=\"subtitle\" role=\"doc-subtitle\">%s</p>\n"
+		 (concat "\n" (org-html-close-tag "br" nil info) "\n"
+			 "<span class=\"subtitle\">%s</span>\n"))
+	       (org-export-data subtitle info))
+	    "")))))
+   contents
+   "</td></tr></table>\n"
+   ;; Postamble.
+   (org-html--build-pre/postamble 'postamble info)
+   ;; Possibly use the Klipse library live code blocks.
+   (when (plist-get info :html-klipsify-src)
+     (concat "<script>" (plist-get info :html-klipse-selection-script)
+	     "</script><script src=\""
+	     org-html-klipse-js
+	     "\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\""
+	     org-html-klipse-css "\"/>"))
+   ;; Closing document.
+   "</center>\n</body>\n</html>"))
+
+;; I don't like the way it handles src blocks. I just want <code>.
+(defun shittyweb-html-src-block (src-block _contents info)
+  (let* ((code (org-html-format-code src-block info))
+        (code-lines (string-split (string-trim code) "\n")))
+    (defun join-code-lines (lines) ;; Change \n to <br />
+      (concat (car lines)
+              (if (cdr lines)
+                  (concat "<br />\n" (join-code-lines (cdr lines)))
+                "")))
+    (format "<table bgcolor=\"%s\" border=\"%d\"><tr><td>\n\
+<code>\n%s\n</code>\n</td></tr></table>"
+            shittyweb-html-code-background-color
+            shittyweb-html-code-border
+            (join-code-lines code-lines))))
+
+(defun shittyweb-publish-to-html (plist filename pub-dir)
+  "Publish an org file to HTML.
+
+FILENAME is the filename of the Org file to be published.  PLIST
+is the property list for the given project.  PUB-DIR is the
+publishing directory.
+
+Return output file name."
+  (org-publish-org-to 'shittyweb-html filename
+		      (concat (when (> (length org-html-extension) 0) ".")
+			      (or (plist-get plist :html-extension)
+				  org-html-extension
+				  "html"))
+		      plist pub-dir))
+
+(provide 'shittyweb-html)
diff --git a/org-templates/error.org b/org-templates/error.org
index 9aa1200..2bd62cf 100644
--- a/org-templates/error.org
+++ b/org-templates/error.org
@@ -5,4 +5,5 @@
 #+html_content_class: content
 #+html_link_home: /
 #+html_head: <link rel="icon" type="image/x-icon" href="/images/icon.png" />
+#+html_head_extra: <link rel="stylesheet" type="text/css" href="/css/shitty-theme.css" />
 #+creator: <a href="https://shittyweb.org"><img src="/images/nsw_banner.png" alt="NSW" /></a>
diff --git a/org-templates/level-1.org b/org-templates/level-1.org
index 0015f8a..2bc4101 100644
--- a/org-templates/level-1.org
+++ b/org-templates/level-1.org
@@ -5,4 +5,6 @@
 #+html_content_class: content
 #+html_link_home: ./
 #+html_head: <link rel="icon" type="image/x-icon" href="images/icon.png" /><link rel="alternate" type="application/rss+xml" title="Nathan's shitty blog" href="/blog/feed.xml" />
+#+html_head_extra: <link rel="stylesheet" type="text/css" href="css/shitty-theme.css" />
 #+creator: <a href="https://shittyweb.org"><img src="images/nsw_banner.png" alt="NSW" /></a>
+
diff --git a/org-templates/level-2.org b/org-templates/level-2.org
index ce35b65..19986b0 100644
--- a/org-templates/level-2.org
+++ b/org-templates/level-2.org
@@ -5,4 +5,5 @@
 #+html_content_class: content
 #+html_link_home: ../
 #+html_head: <link rel="icon" type="image/x-icon" href="../images/icon.png" /><link rel="alternate" type="application/rss+xml" title="Nathan's shitty blog" href="/blog/feed.xml" />
+#+html_head_extra: <link rel="stylesheet" type="text/css" href="../css/shitty-theme.css" />
 #+creator: <a href="https://shittyweb.org"><img src="../images/nsw_banner.png" alt="NSW" /></a>
diff --git a/org/css/shitty-theme.css b/org/css/shitty-theme.css
new file mode 100644
index 0000000..8e3da1f
--- /dev/null
+++ b/org/css/shitty-theme.css
@@ -0,0 +1,23 @@
+body {
+    background-color: #dcd1ba;
+}
+
+#content {
+    width: 65%;
+    margin: auto;
+    background-color: #bebebe;
+    border: 1px solid black;
+}
+
+.shittyweb-header {
+    text-align: center;
+}
+
+.org-src-container {
+    background-color: white;
+}
+
+#postamble {
+   text-align: center;
+}
+
diff --git a/publish.el b/publish.el
index ef9e321..f480de9 100644
--- a/publish.el
+++ b/publish.el
@@ -31,9 +31,10 @@
          ))
       org-html-extension "xhtml"
       org-html-validation-link nil
-      org-html-head-include-scripts nil
       org-html-head-include-default-style nil
-      org-html-home/up-format "<a href=\"%sindex.xhtml\">\
-<img src=\"%simages/back_home.png\" alt=\"Back to home page\" /></a>")
+      org-html-home/up-format "<div id=\"org-div-home-and-up\">\n\
+<a href=\"%sindex.xhtml\">\
+<img src=\"%simages/back_home.png\" alt=\"Back to home page\" /></a>\n\
+%s\n</div>")
 (org-publish-all t)
 
diff --git a/shittyweb-html.el b/shittyweb-html.el
index c83ec50..dc1e654 100644
--- a/shittyweb-html.el
+++ b/shittyweb-html.el
@@ -4,13 +4,6 @@
 ;; https://github.com/grc/jujutsu-website/blob/master/elisp/org-jujutsu-site.el
 ;; https://orgmode.org/worg/dev/org-export-reference.html
 
-(defvar shittyweb-html-background-color "#dcd1ba")
-(defvar shittyweb-html-table-background-color "#bebebe")
-(defvar shittyweb-html-table-border 1)
-(defvar shittyweb-html-table-width "65%")
-(defvar shittyweb-html-code-background-color "white")
-(defvar shittyweb-html-code-border 1)
-
 (org-export-define-derived-backend 'shittyweb-html 'html
   :translate-alist '((template . shittyweb-html-template)
                      (src-block . shittyweb-html-src-block))
@@ -50,38 +43,37 @@ holding export options."
    (org-html--build-meta-info info)
    (org-html--build-head info)
    (org-html--build-mathjax-config info)
-   "</head>\n"
-   ;; Body with background
+   ;; Background
    (let ((background (plist-get info :background-image)))
      (if background
-         (format "<body bgcolor=\"%s\" background=\"%s\">\n"
-                 shittyweb-html-background-color
-                 background)
-       (format "<body bgcolor=\"%s\">"
-               shittyweb-html-background-color)))
+         (format "<style type=\"text/css\">\n\
+body { background-image: url(\"%s\"); }\n\
+</style>"
+                 background)))
+   "</head>\n"
+   "<body>\n"
    ;; I dont use link-up so byebye it goes.
    ;; Also I give it a directory instead of file.
-   (let ((link-home (org-trim (plist-get info :html-link-home))))
+   ;; Also has a back thingy added.
+   (let ((link-home (org-trim (plist-get info :html-link-home)))
+         (back-page (org-trim (plist-get info :shittyweb-back))))
      (unless (string= link-home "")
-       (format (plist-get info :html-home/up-format) link-home link-home)))
-   ;; The back button thingy
-   (let ((back-page (org-trim (plist-get info :shittyweb-back))))
-     (unless (string= back-page "")
-       back-page))
-   ;; Preamble.
-   (org-html--build-pre/postamble 'preamble info)
-   "\n<center>\n"
-   ;; Shittyweb header. Its outside the weird table thing.
+       (format (plist-get info :html-home/up-format)
+               link-home link-home
+               (if (string= back-page "")
+                   ""
+                 back-page))))
+   ;; Shittyweb header. Its outside the thingy.
    (let ((shittyweb-header (plist-get info :shittyweb-header)))
      (if shittyweb-header
-         shittyweb-header))
+         (format "<div class=\"shittyweb-header\">\n%s\n</div>"
+                 shittyweb-header)))
+   ;; Preamble.
+   (org-html--build-pre/postamble 'preamble info)
    ;; Document contents.
    (let ((div (assq 'content (plist-get info :html-divs))))
-     (format "<table border=\"%d\" width=\"%s\" bgcolor=\"%s\" id=\
-\"%s\" class=\"%s\"><tr><td>\n"
-             shittyweb-html-table-border
-             shittyweb-html-table-width
-             shittyweb-html-table-background-color
+     (format "<%s id=\"%s\" class=\"%s\">\n"
+             (nth 1 div)
              (nth 2 div)
              (plist-get info :html-content-class)))
    ;; Document title.
@@ -105,7 +97,7 @@ holding export options."
 	       (org-export-data subtitle info))
 	    "")))))
    contents
-   "</td></tr></table>\n"
+   (format "</%s>\n" (nth 1 (assq 'content (plist-get info :html-divs))))
    ;; Postamble.
    (org-html--build-pre/postamble 'postamble info)
    ;; Possibly use the Klipse library live code blocks.
@@ -116,7 +108,7 @@ holding export options."
 	     "\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\""
 	     org-html-klipse-css "\"/>"))
    ;; Closing document.
-   "</center>\n</body>\n</html>"))
+   "</body>\n</html>"))
 
 ;; I don't like the way it handles src blocks. I just want <code>.
 (defun shittyweb-html-src-block (src-block _contents info)
@@ -127,10 +119,8 @@ holding export options."
               (if (cdr lines)
                   (concat "<br />\n" (join-code-lines (cdr lines)))
                 "")))
-    (format "<table bgcolor=\"%s\" border=\"%d\"><tr><td>\n\
-<code>\n%s\n</code>\n</td></tr></table>"
-            shittyweb-html-code-background-color
-            shittyweb-html-code-border
+    (format "\n\
+<div class=\"org-src-container\"><code>\n%s\n</code></div>\n"
             (join-code-lines code-lines))))
 
 (defun shittyweb-publish-to-html (plist filename pub-dir)
author	nathan <nathansmith@disroot.org>	2025-05-24 02:57:22 -0600
committer	nathan <nathansmith@disroot.org>	2025-05-24 02:57:22 -0600
commit	909a76bcc45e896f8029ec4c8491652f3738d4e3 (patch)
tree	2be1f29405a9b695c1966d6896ed51db5befee20
parent	e568b96a03be77b8fd68ed1874289a65a93b49aa (diff)