Building a development notes blog with denote and org-publish Notes

devnotes/build/
├── build.sh
└── build-site.el

#!/bin/sh
emacs -Q --script build-site.el

/home/nixos/GIT:
drwxr-xr-x 6 nixos users   4096 May 27 15:42 .
drwx------ 6 nixos users   4096 May 27 15:44 ..
drwxr-xr-x 5 nixos users  20480 May 28 15:28 arvydasg.github.io # html files lie here
drwxr-xr-x 6 nixos users  20480 May 28 15:30 devnotes # source .org (could be other type) files lie here

/home/nixos/GIT/devnotes:
drwxr-xr-x 6 nixos users 20480 May 28 15:35 .
drwxr-xr-x 6 nixos users  4096 May 27 15:42 ..
drwxr-xr-x 2 nixos users  4096 May 28 13:59 build # folder in which the build script lives
drwxr-xr-x 8 nixos users  4096 May 28 15:36 .git  # git folder
drwxr-xr-x 3 nixos users  4096 May 27 15:00 media # images folder
drwxr-xr-x 4 nixos users  4096 May 27 15:00 static # css/js/ico folder
-rw-r--r-- 1 nixos users  1404 May 27 16:30 20231125T235251--api-tools__api.org # denote file
-rw-r--r-- 1 nixos users   646 May 27 15:00 20231126T001334--raspberrypi-first-setup__raspberrypi.org # denote file
-rw-r--r-- 1 nixos users   790 May 27 15:00 20231126T001417--magic-mirror-setup__raspberrypi.org # denote file
-rw-r--r-- 1 nixos users   324 May 27 15:00 20231126T001642--raspberrypi-pins__raspberrypi.org # denote file
  -rw-r--r-- 1 nixos users   225 May 27 15:00 contact.org # simple page that
-rw-r--r-- 1 nixos users   164 May 27 15:00 .dir-locals.el # read "denote features" page for explanation to this, has no influence to blog
-rw-r--r-- 1 nixos users   800 May 27 15:00 freelancing.org # random page
-rw-r--r-- 1 nixos users   814 May 27 15:00 index.org # index(front) page of the website
-rw-r--r-- 1 nixos users  1505 May 27 15:00 projects.org # custom list of projects, created the links myself
-rw-r--r-- 1 nixos users    36 May 27 15:00 readme.md
-rw-r--r-- 1 nixos users 23584 May 28 15:28 sitemap.org # automatically generated sitemap
-rw-r--r-- 1 nixos users   817 May 28 15:06 statusupdates.org # random page
-rw-r--r-- 1 nixos users  2728 May 27 15:00 uses.org # random page

(require 'ox-publish)

;; run this with 'emacs -Q --script build-site.el' command

(setq org-publish-project-alist
      '(
        ("notes"
         :base-directory "../"
         :base-extension "org"
         :publishing-directory "../../arvydasg.github.io"
         :recursive t
         ;; use :noexport: tag if you want headings that have it not to be exported
         ;; :exclude
         ;; :include
         :publishing-function org-html-publish-to-html ;converts org files to HTML
         ;; :preparation-function
         ;; :completion-function
         ;; -----------------------------------------------------------------------------------
         ;; the DETAILS: options set within the individual .org file can
         ;; override all of the settings below:
         ;; you can specify majority the options that you see below in each
         ;; individual file. Find out syntax for it in =C-h v
         ;; org-publish-project-alist= and choose the configuration you want to
         ;; see the syntax for.
         :author "Arvydas Gasparavicius"
         ;; :creator
         :email "arvydas.gaspa@gmail.com"
         ;; :exclude-tags "noexport"
         :headline-levels 3
         :language "en"
         :preserve-breaks nil
         :section-numbers t
         ;; :select-tags
         :time-stamp-file t
         ;; :with-archived-trees
         :with-author t
         :with-creator t
         :with-date t                   ;date from the filename?
         ;; :with-drawers
         :with-email t
         :with-emphasize t
         :with-entities t
         :with-fixed-width t
         :with-footnotes t
         :with-inlinetasks t
         :with-latex t
         :with-planning t
         :with-priority t
         :with-properties t
         ;; :with-smart-quotes
         :with-special-strings t
         :with-statistics-cookies' t
         :with-sub-superscript nil
         :with-toc t
         :with-tables t
         :with-tags t
         :with-tasks t
         :with-timestamps t
         :with-title t
         :with-todo-keywords t
         ;; kita dalis
         :auto-sitemap t
         :sitemap-filename "sitemap.org"
         :sitemap-title "Notes"
         :sitemap-style tree
         :sitemap-format-entry ag/org-sitemap-date-entry-format
         ;; :sitemap-function
         ;; :sitemap-sort-folders
         :sitemap-sort-files anti-chronologically
         ;; :sitemap-ignore-case
         ;; :makeindex
         ;; :body-only t
         ;; -----------------------------------------------------------------------------------
         ;; ox-html.el.gz

         :html-doctype "html5"
         :html-container "div"
         :html-content-class "content"
         :description "welcome to my site"
         :keywords "emacs antanas geles"
         :html-html5-fancy t
         ;; :html-link-use-abs-url
         ;; :html-link-home "sitemap.html"
         :html-link-home "index.html"
         :html-link-up "sitemap.html"
         ;; :html-mathjax
         ;; :html-equation-reference-format
         ;; :html-postamble nil
         ;; :html-postamble auto                ;with-author/email/creator/date
         ;; :html-postamble t               ;from :html-postamble-format
         :html-postamble "<hr/>
         <footer>
         <div class=\"copyright-container generated\">
         <div class=\"copyright\">
         Copyright &copy; 2023-2024 Arvydas Gasparavicius
         </div>
         </div>
         <p class=\"date\">This org file is <u>exported</u> to HTML: %T</p>
         <p class=\"date\">This org file is last <u>modified</u>: %C</p>
         <p class=\"date\">This org file is <u>created</u>: %d</p>
         <div class=\"generated\">
        Created with %c on <a href=\"https://www.gnu.org\">GNU</a>/<a href=\"https://www.kernel.org/\">Linux</a>
        </div>
        </footer>
         <button onclick=\"topFunction()\" id=\"myBtn\" title=\"Go to top\">Top</button>
         <script src=\"./static/js/generic.js\"></script>
         <script src=\"./static/js/scroll-to-top.js\"></script>
         <script src=\"./static/js/lightbox.js\"></script>
         <script src=\"./static/js/test.js\"></script>"
         ;; :html-preamble t                 ;insert a default one, which in none
         :html-preamble  "<div id=\"updated\">Updated: %C</div>"
         ;; :html-head
         :html-head "
<link rel=\"stylesheet\" href=\"./static/css/org-html-style-default.css\" type=\"text/css\"/>
<link rel=\"stylesheet\" href=\"./static/css/generic.css\" type=\"text/css\"/>
<link rel=\"stylesheet\" href=\"./static/css/taingram.css\" type=\"text/css\"/>
<link rel=\"stylesheet\" href=\"./static/css/lightbox.css\" type=\"text/css\"/>
<link rel=\"stylesheet\" href=\"./static/css/scroll-to-top.css\" type=\"text/css\"/>
<link rel=\"icon\" href=\"./static/ag.ico\">
"
         ;; :html-head-extra "<link rel=\"stylesheet\" href=\"https://arvydas.dev/static/style.css\" type=\"text/css\"/>"
         ;; :html-head-extra "<link rel=\"stylesheet\" href=\"./static/style.css\" type=\"text/css\"/>"
         ;; :subtitle "this is a subtitle"
         :html-head-include-default-style nil         ;turning them off, but adding in a separate file called org-html-style-default.css
         :html-head-include-scripts nil
         :html-allow-name-attribute-in-anchors nil
         :html-divs ((preamble "div" "preamble")
                     (content "div" "content")
                     (postamble "div" "postamble"))
         ;; :html-checkbox-type
         :html-extension "html"
         :html-footnote-format "<sup>%s</sup>"
         :html-footnote-separator "<sup>, </sup>"
         :html-footnotes-section "<div id=\"footnotes\">\n<h2 class=\"footnotes\">%s: </h2>\n<div id=\"text-footnotes\">\n%s\n</div>\n</div>"
         ;; :html-format-drawer-function
         ;; :html-format-headline-function
         ;; :html-format-inlinetask-function
         :html-home/up-format "<div id=\"org-div-home-and-up\">\n <a accesskey=\"h\" href=\"%s\">NOTES </a>\n \n <a accesskey=\"H\" href=\"%s\"> HOME </a>\n</div>"
         :html-indent nil
         ;; :html-infojs-options
         ;; :html-infojs-template
         ;; :html-inline-image-rules
         :html-link-org-files-as-html t
         ;; :html-mathjax-options
         ;; :html-mathjax-template
         :html-metadata-timestamp-format "%Y-%m-%d %a %H:%M"
         ;; :html-postamble-format
         ;; :html-preamble-format
         ;; :html-prefer-user-labels nil
         :html-self-link-headlines nil
         :html-table-align-individual-fields t
         ;; :html-table-caption-above t
         :html-table-data-tags ("<td%s>" . "</td>")
         :html-table-header-tags ("<th scope=\"%s\"%s>" . "</th>")
         :html-table-use-header-tags-for-first-column nil
         :html-tag-class-prefix "gaid"
         :html-text-markup-alist ((bold . "<b>%s</b>")
                                  (code . "<code>%s</code>")
                                  (italic . "<i>%s</i>")
                                  (strike-through . "<del>%s</del>")
                                  (underline . "<span class=\"underline\">%s</span>")
                                  (verbatim .  "<code>%s</code>"))
         :html-todo-kwd-class-prefix ""
         :html-toplevel-hlevel 2
         ;; :html-use-infojs
         :html-validation-link nil
         ;; :html-validation-link "<a href=\"https://validator.w3.org/check?uri=referer\">Validate</a>"
         :html-viewport  ((width "device-width")
                          (initial-scale "1")
                          (minimum-scale "")
                          (maximum-scale "")
                          (user-scalable ""))
         :html-inline-images t
         :html-table-attributes (:border "2" :cellspacing "0" :cellpadding "6" :rules "groups" :frame "hsides")
         :html-table-row-open-tag "<tr>"
         :html-table-row-close-tag "</tr>"
         :html-xml-declaration (("html" . "<?xml version=\"1.0\" encoding=\"%s\"?>")
                                ("php" . "<?php echo \"<?xml version=\\\"1.0\\\" encoding=\\\"%s\\\" ?>\"; ?>"))
         :html-wrap-src-lines nil
         :html-klipsify-src nil         ;making it to t - jupyterhub like code blocks. Insane!
         ;; :html-klipse-css
         ;; :html-klipse-js
         ;; :html-klipse-selection-script
         ;; :infojs-opt
         ;; :creator
         :with-latex t
         ;; :latex-header
         )

        ("static"
         :base-directory "../static"
         :publishing-directory "../../arvydasg.github.io/static"
         :base-extension "css\\|js\\|ico\\|svg"
         :recursive t
         :publishing-function org-publish-attachment ;copies the files verbatim
         )

        ("media"
         :base-directory "../media"
         :publishing-directory "../../arvydasg.github.io/media"
         :base-extension "png\\|jpg\\|jpeg\\|pdf"
         :recursive t
         :publishing-function org-publish-attachment ;copies the files verbatim
         )

        ("build-site.el" :components ("notes" "static" "media"))))

(defun ag/org-sitemap-date-entry-format (entry style project)
  "Format ENTRY in org-publish PROJECT Sitemap format ENTRY ENTRY
 STYLE format that includes date."
  (let ((filename (org-publish-find-title entry project)))
    (if (= (length filename) 0)
        (format "*%s*" entry)
      (format "{{{timestamp(%s)}}} [[file:%s][%s]]"
              (format-time-string "%Y-%m-%d"
                                  (org-publish-find-date entry project))
              entry
              filename))))

(setq org-export-global-macros
      '(("timestamp" . "@@html:<span class=\"timestamp\">[$1]</span>@@")))

;; publish all the projects described in this file :components part
(org-publish-all t)

;; publish only specific project
;; The t parameter tells it to regenerate all ;; files regardless of when they
;; were last generated)so no need to add the ;; force prefix with C-c C-e C-f
(org-publish "my-org-site" t)

(message "Build complete!")

#!/bin/sh
emacs -Q --script build-site.el

:html-head-include-default-style t/nil

:html-head "<link rel=\"stylesheet\" href=\"../static/style.css\" type=\"text/css\"/>"

:html-head-extra "<link rel=\"stylesheet\" href=\"https://arvydas.dev/static/style.css\" type=\"text/css\"/>"

#+SETUPFILE: https://fniessen.github.io/org-html-themes/org/theme-NAME.setup

#+SETUPFILE: PATH/TO/GIT/REPO/org/theme-NAME-local.setup

(defun org-publish-sitemap-default (title list)
  "Default site map, as a string.
TITLE is the title of the site map.  LIST is an internal
representation for the files to include, as returned by
`org-list-to-lisp'.  PROJECT is the current project."
  (concat "#+TITLE: " title "\n\n"
          (org-list-to-org list)))

(defun ag-org-publish-sitemap-default (title list)
  "Default site map, as a string.
TITLE is the title of the site map.  LIST is an internal
representation for the files to include, as returned by
`org-list-to-lisp'."
  (concat "#+TITLE: " title "\n\n"
          "* Hello World\n\n"
          (org-list-to-org list)))

:sitemap-function ag-org-publish-sitemap-default

(defun ag-org-publish-sitemap-default (title list)
  "Default site map, as a string.
TITLE is the title of the site map.  LIST is an internal
representation for the files to include, as returned by
`org-list-to-lisp'."
  (concat "#+TITLE: " title "\n\n"
          "#+OPTIONS: toc:nil\n\n"   ;; Disable the table of contents for better formatting
          "#+BEGIN_EXPORT html\n"
          "<div class=\"search-wrapper\">\n"
          "<label for=\"search\">Search</label>\n"
          "<input type=\"search\" id=\"search\" data-search>\n"
          "</div>\n"
          "#+END_EXPORT\n\n"
          (org-list-to-org list)))

  // This code waits for the entire HTML document to load before running
document.addEventListener("DOMContentLoaded", function() {
    // Select all list items (notes) within the unordered list with class "org-ul"
    const allNotes = document.querySelectorAll(".org-ul li");

    // Select the search input field with the data attribute "data-search"
    const searchInput = document.querySelector("[data-search]");

    // Add an event listener to the search input field that listens for "input" events
    searchInput.addEventListener("input", function(e) {
        // Get the current value of the search input field and convert it to lowercase
        const value = e.target.value.toLowerCase();

        // Loop through each note in the list of notes
        allNotes.forEach(function(note) {
            // Get the text content of the note and convert it to lowercase
            const noteText = note.textContent.toLowerCase();

            // Check if the note's text includes the search input value
            if (noteText.includes(value)) {
                // If it does, display the note
                note.style.display = "";
            } else {
                // If it doesn't, hide the note
                note.style.display = "none";
            }
        });
    });
});

[nixos@nixos:~/GIT/devnotes/build]$ ln -s ../../dotfiles/.emacs.d/init.org init.org

(defun ag/org-sitemap-date-entry-format (entry style project)
  "Format ENTRY in org-publish PROJECT Sitemap format ENTRY ENTRY STYLE format that includes date."
  (let ((filename (org-publish-find-title entry project)))
    (if (= (length filename) 0)
        (format "*%s*" entry)
      (format "{{{timestamp(%s)}}} [[file:%s][%s]]"
              (format-time-string "%Y-%m-%d"
                                  (org-publish-find-date entry project))
              entry
              filename))))

(setq org-export-global-macros
      '(("timestamp" . "@@html:<span class=\"timestamp\">[$1]</span>@@")))

:sitemap-format-entry ag/org-sitemap-date-entry-format