#+begin_src emacs-lisp :tangle no :results replace value :wrap example js :exports results (f-read-text "~/blog/posts.json") #+end_src #+RESULTS: #+begin_example js [ { "file": "java-cheat-sheet", "title": "Java CheatSheet", "date": "2023-12-25 Mon", "image": "modern-java.png 88% 88%", "description": "Quick reference for an old-school-cool high-level language ^_^", "tags": "java cheat-sheet", "url": "https://alhassy.com/java-cheat-sheet", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/java-cheat-sheet.org", "abstract": "\n#+begin_center\n#+html: This is a quick reference of concepts in modern Java.\n\nbadge:PDF|colorful_cheat_sheet|success|https://alhassy.com/java-cheat-sheet.pdf|read-the-docs\n\n# badge:license|GNU_3|informational|https://www.gnu.org/licenses/gpl-3.0.en.html|read-the-docs\ntweet:https://alhassy.com/java-cheat-sheet\nbadge:|buy_me_a_coffee|gray|https://www.buymeacoffee.com/alhassy|buy-me-a-coffee\nbadge:contributions|welcome|green|https://github.com/alhassy/alhassy.github.io/issues\n# badge:author|musa_al-hassy|purple|https://alhassy.github.io/|nintendo-3ds\n# badge:Warning|Incomplete_DRAFT|red||codeigniter\n#+end_center\n\n# @@html:
@@\n\nModern Java is a strongly-typed, eagery evaluated, case sensative, yet\nwhitespace insensative language. It uses hierarchies of classes/types\nto structure data, but also has first-class support for\nfunctional-style algebraic datatypes.\n\nJava programs are made up of ‘classes’, classes contain methods, and methods contain commands. To just try out a\nsnippet of code, we can\n+ Open a terminal and enter ~jshell~; then enter:\n #+begin_src java\n1 + 2 // The jshell lets you try things out!\n\n// Say hello in a fancy way\nimport javax.swing.*;\nJOptionPane.showMessageDialog(new JFrame(), \"Hello, World!\");\n\n#+end_src\n\n+ Alternatively, in IntelliJ, click /Tools/ then /Groovy Console/ to try things out!\n+ Finally, [[http://alhassy.com/making-vscode-itself-a-java-repl.html][VSCode]] allows arbitrary Java code to be sent to a ~jshell~\n in the background(!) and it echoes the result in a friendly way.\n\n# A program cannot consist of only commands. Java commands must be inside functions, and functions must be inside classes.\n#\n# Imagine a sofa. A sofa cannot exist on its own. It exist in a room somewhere. And a room also cannot exist on its own. A room is located in some house. Or, you could say that the house is divided into rooms, and those rooms contain things.\n#\n# Java programs are made up of classes, classes contain methods, and methods contain commands.\n\n# A minimal program must consist of at least one class, which must have at least\n# one method (function) that marks the program's starting point. This method must\n# be named main.\n\n:MWE:\nIn order to run a java program, it must have a main method as an entry point.\n\n#+begin_src java\n public class LearnJava {\n // In order to run a java program, it must have a main method as an entry\n // point.\n public static void main(String[] args) {\n System.out.println(\"Hello World!\");\n\n // Use System.out.printf() for easy formatted printing.\n System.out.printf(\"pi = %.5f\", Math.PI); // => pi = 3.14159\n }\n }\n#+end_src\n:End:\n\n** Web reference :ignore:\n\n#+macro: begin-ignore-html #+html: \n\n#+latex: \\vspace{-1em}\n{{{begin-ignore-html()}}}\nTo be terse, lots of content is not shown in this [[http://alhassy.com/java-cheat-sheet.pdf][PDF]], but is shown in the *[[https://alhassy.com/java-cheat-sheet][HTML]]*\nversion.\n{{{end-ignore-html()}}}\n" }, { "file": "repl-driven-development", "title": "💐 Repl Driven Development: /Editor Integrated REPLs for all languages/ 🔁", "date": "2023-09-08 Fri", "image": "rdd-benefits.png", "description": "Press “C-x C-e” to send any piece of code (in any language) to a REPL in the background, within Emacs!", "tags": "repl-driven-development vscode emacs javascript java python lisp clojure haskell arend purescript idris racket", "url": "https://alhassy.com/repl-driven-development", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/repl-driven-development.org", "abstract": "\n#+begin_center\nbadge:Warning|Incomplete_DRAFT|red||codeigniter\n#+end_center\n\nThe melpa:repl-driven-development package makes the philosophy of REPL Driven\nDevelopment (RDD) accessible to any language that has a primitive CLI repl: /The\nresult is an Emacs interface for the language, where code of your choosing is/\n/evaluated, and results are echoed at your cursor in overlays./\n\nThat is, with Repl *green:aided* development, you make software by starting with\nan already working program (i.e., the repl) then *green:incrementlly* “teach it”\nto be the program you want, by defining & redefining things. Until satisfied,\nloop: Type/modify code *[[green:in your editor]]*, press some keys to evaluate what you\nwrote/modified /in the currently running system/, and explore/test the resulting\nruntime.\n# Eventually, save your code as a clean text file.\n\n/RDD is programming emphasising fast & rich feedback from a running system./ RDD\nis fantastic for quickly /teaching/exploring/ an idea; as such, the running\nexample of this article will be on servers ---no prior experience with servers\nis assumed.\nThe main examples will be in JavaScript, Python, and Java. (Since /JavaScript is\njust Lisp in C clothing/, we will not discuss Lisp.) Since Java is verbose, the\npower of REPLs really pays off when exploring a new idea. We see how many\nimports and setup-code simply disappear in the RDD approach, letting you focus\non the core idea you're exploring/teaching. For comparison, a traditional\nself-contained Java server program is ~30 lines long whereas the focused RDD\napproach is ~4 lines long.\n#\n# + We begin with JavaScript: Write some code, and see it interact with your browser.\n# + Then Python: Write some code, and see it interact with the terminal.\n\n# badge:repl-driven-development|1.4|informational|https://github.com/alhassy/repl-driven-development|Gnu-Emacs\n\n#+begin_center\nbadge:license|GNU_3|informational|https://www.gnu.org/licenses/gpl-3.0.en.html|read-the-docs\ntweet:https://alhassy.com/repl-driven-development\nbadge:|buy_me_a_coffee|gray|https://www.buymeacoffee.com/alhassy|buy-me-a-coffee\n@@TODO: FIX contributions URL@@\nbadge:contributions|welcome|green|https://github.com/alhassy/alhassy.github.io/issues\n#+end_center\n\n# @@html:
@@\n\n/tdlr:/ This library provides the Emacs built-in kbd:C-x_C-e behaviour for\narbitrary languages, provided they have a primitive cli REPL.\n" }, { "file": "arabic-cheat-sheet", "title": "Arabic CheatSheet", "date": "2023-06-14 Wed", "image": "arabic-irab.png 100% 100%", "description": "Quick reference for the Arabic language; Modern Standard Arabic", "tags": "arabic cheat-sheet", "url": "https://alhassy.com/arabic-cheat-sheet", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/arabic-cheat-sheet.org", "abstract": "\n#+latex: \\iffalse\n\n#+begin_center\n#+html: This is a quick reference of concepts in the Arabic language.\n\nbadge:PDF|colorful_cheat_sheet|success|https://alhassy.com/arabic-cheat-sheet.pdf|read-the-docs\n\n# badge:license|GNU_3|informational|https://www.gnu.org/licenses/gpl-3.0.en.html|read-the-docs\ntweet:https://alhassy.com/arabic-cheat-sheet\nbadge:|buy_me_a_coffee|gray|https://www.buymeacoffee.com/alhassy|buy-me-a-coffee\n#+end_center\n\n# @@html:
@@\n\n#+latex: \\fi\n" }, { "file": "family-tree", "title": "My Family Tree", "date": "2023-02-02 Thu", "image": "../images/family-tree.png 88% 88%", "description": "من هو في شجرة العائلة القديمة", "tags": "family", "url": "https://alhassy.com/family-tree", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/family-tree.org", "abstract": "\n#+begin_center\nbadge:Warning|Incomplete_DRAFT|red||codeigniter\n#+end_center\n\nWho's who in the old family tree\n" }, { "file": "karate", "title": "A Brisk Introduction to Karate", "date": "2023-02-02 Thu", "image": "https://www.usadojo.com/wp-content/uploads/2013/08/Goju-Ryu-Karate-600x300.png 88% 88%", "description": "Discovering what be ka-ra-te", "tags": "karate", "url": "https://alhassy.com/karate", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/karate.org", "abstract": "\n#+begin_center\nbadge:Warning|Incomplete_DRAFT|red||codeigniter\n#+end_center\n\nWhat are the basic forms of Karate? What is Karate?\n\n/“The ultimate aim of karate lies not in victory or defeat but in the perfection\nof the character of its participants … to subdue the enemy without fighting is/\n/the highest skill, know your enemy and know yourself, in a hundred battles you\nwill not be defeated”/ says Gichin Funakoshi ---known as The Father of Modern Karate.\n\n/Karate/ means “empty hand” and was developed on the island of Okinawa ---part of\nmodern-day Japan. The major styles (“Ryu”) are Shotokan, Wado-ryu,\nShito-ryu, and Goju-ryu ---many other styles of Karate are derived from these\nfour. I'm focusing on Goju-Ryu in this article: Goju-Ryu was founded by Chojun\nMiyagi; whose colleague, Gichin Funakosi, founded Shotokan-Ryu.\n\n#+begin_center\nimage:http://www.traditionalshotokankarate.co.uk/kara-te-do.gif\n#+end_center\n\nOccasionally one sees /Karate-Do/, which means “the way of the empty hand”.\nThis usage is a reminder that Karate is not just about fighting, but is also\na spiritual discipline.\n\nThe basic form of Goju-Ryu karate is Sanchin, “3 battles”: The battles of the\nmind, the body, and the spirit. However, this was considered a bit difficult\nfor beginners, and so new forms were needed as a way of introducing fundamental\nkarate forms to a wider audience. There are the “peaceful and safe” forms known\nas Pinan/Heian, the “first course” or Taikyoku forms, the “popularising forms”\nknown as Fukyugata ---the second of which was rebranded as “attack & smash”,\nGekaisai--- and, finally, there is the so-called Dachi-waza form. This last one\nis relatively new, and aims to be a smooth introduction to the world of\nforms/Kata.\n\nIn this article, I'd like to discuss the basic forms and their relationships.\n#+begin_center\nimage:https://www.sullivanskarateschool.com/wp-content/uploads/2019/07/saifa.gif\n#+end_center\n" }, { "file": "arabic-word-order", "title": "A Brisk Introduction to the Fundamentals of Arabic Grammar, نحو", "date": "2022-11-03 Thu", "image": "arabic-irab.png 100% 100%", "description": "Discovering how to say “a/an/the” in Arabic leads onto a zany adventure into case markings, gender, annexation, non-verbal sentences, plurals, and concludes with whether “Muslims” is مسلمون or مسلمین ---it's both!", "tags": "arabic", "url": "https://alhassy.com/arabic-word-order", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/arabic-word-order.org", "abstract": "\n# I'd like to discuss the importance of Arabic's short vowels and their use to give Arabic flexible word order.\n\nIn short: In English sometimes we mess-up between “I/me/my”, likewise in Arabic we might mess up with “ابو / ابا / ابي”:\nThese are just اب followed by one of ا/ي/و (which are the pronounced case endings!)\n\n#+begin_center\n~ ~ ~ ~ ~ ~ ~\n#+end_center\n\n How do Arabs say the English “a/an/the”, as in “an apple” or “the chair”? Easy! By default, all words are /indefinite/\n (“a/an”); and made /definite/ (“the”) by adding الـ to the front of the word.\n\n But... there's some subtleties, which first require us to discuss vowel markings... which also change if the /feminine\n marker/ ة is used, so we also need to briefly discuss gender.\n\nEnglish relies on /word order/ for meaning; for example, /Jim hit Bob/ is a sentence where the person doing the action is\n/Jim/ and we know it has to be /Jim/, and not /Bob/, since /Jim/ is the word /before/ the action /hit/. However, in Arabic words can\nbe ordered in almost any way you like! Then how do we identifiy who does an action? We use *[[green:case markings]]*: We add small\nsymbols to the end of words to indiciate the role they play in a sentence.\n\nWith vowel markings, we can finally flesh-out the nature of\n“a/an/the” in Arabic... but then something wild happens if we stick\nan (in)definite /followed by/ a definite! We get the concepts of ownership and complete sentences that don't need a verb!\n\nFinally, we conclude with an explanation of why in the world English Qurans use the single word /muslim/ where's Arabic\nQurans use both مسلمون and مسلمين.\n" }, { "file": "arabic-roots", "title": "Arabic Roots: The Power of Patterns", "date": "2022-11-02 Wed", "image": "https://unsplash.com/photos/Ejdemp9O7Po", "description": "Let's learn about how the Arabic language makes use of “roots” to obtain various words", "tags": "arabic javascript emacs", "url": "https://alhassy.com/arabic-roots", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/arabic-roots.org", "abstract": "\nI want to quickly introduce the Arabic language, through its “root system” ---i.e., most words have 3-letters at their\ncore--- and how these roots can be placed in “patterns” to obtain new words.\n\nI'd like to take a glance at Arabic's Verb Forms: These give you 10 words for each root!\n\nSome *green:interesting* concepts will also be mentioned, for those curious, but should be ignored on a first\nreading. These will be hidden away in /clickable/foldable/ regions.\n\nThese are notes of things that I'm learning; there's likely errors.\n" }, { "file": "arabic-glossary", "title": "Glossary of Arabic Linguistic Terms", "date": "2022-11-01 Tue", "image": "arabic-irab.png 100% 100%", "description": "Definitions, and discussions, of jargon relating to learning the Arabic language.", "tags": "arabic", "url": "https://alhassy.com/arabic-glossary", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/arabic-glossary.org", "abstract": "Definitions, and discussions, of jargon relating to learning the Arabic language." }, { "file": "cartoon", "title": "Arabic Cartoons", "date": "2022-10-21 Fri 11:20", "image": "https://upload.wikimedia.org/wikipedia/en/6/64/Dora_and_Boots.jpg 350 300", "description": "A simple interface to watch the engaging Arabic cartoons", "tags": "family arabic javascript", "url": "https://alhassy.com/cartoon", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/cartoon.org", "abstract": "\nA simple interface to watch the engaging Arabic cartoons.\n" }, { "file": "making-vscode-itself-a-java-repl", "title": "💐 Making VSCode itself a Java REPL 🔁", "date": "2022-09-05 Mon", "image": "https://github.com/alhassy/easy-extensibility/blob/main/graphics/repl-java.gif?raw=true 90% 90%", "description": "VSCode evaluates Java code wherever it sees it, by sending it to a JShell in the background, and echos the results in a friendly way!", "tags": "repl-driven-development vscode emacs javascript java python ruby clojure typescript haskell lisp", "url": "https://alhassy.com/making-vscode-itself-a-java-repl", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/making-vscode-itself-a-java-repl.org", "abstract": "\nVSCode evaluates Java code wherever it sees it, by sending it to a JShell in the background, and echos the results in a\nfriendly way!\n\nThis is achieved with a [[https://github.com/alhassy/easy-extensibility][meta-extension for VSCode]] that makes VSCode into a living, breathing, JS interpreter: It can\nexecute arbitrary JS that alters VSCode on-the-fly. /(Inspired by using Emacs and Lisp!)/\n\nThe relevant docs show how to make a similar REPL for [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1417-L1420][Python]], [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1459-L1462][Ruby]], [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1475-L1479][Clojure]], [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1490-L1494][Common Lisp]], [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1509-L1515][JavaScript]], [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1527-L1536][Typescript]],\n[[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1553-L1557][Haskell]], and of-course [[https://github.com/alhassy/easy-extensibility/blob/65572a283e4864d9bef157b438c33f4e47276e3a/vscodejs/index.js#L1575-L1585][Java]].\n" }, { "file": "vscode-is-itself-a-javascript-repl", "title": "💐 VSCode is itself a JavaScript REPL 🔁", "date": "2022-08-17 Wed", "image": "https://raw.githubusercontent.com/alhassy/easy-extensibility/main/graphics/repl.gif 90% 90%", "description": "A meta-extension for VSCode that makes VSCode into a living, breathing, JS interpreter: It can execute arbitrary JS that alters VSCode on-the-fly. A gateway into the world of Editor Crafting!", "tags": "repl-driven-development vscode emacs javascript", "url": "https://alhassy.com/vscode-is-itself-a-javascript-repl", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/vscode-is-itself-a-javascript-repl.org", "abstract": "\nA meta-extension for VSCode that makes VSCode into a living, breathing, JS interpreter: It can execute arbitrary JS that\nalters VSCode on-the-fly. A gateway into the world of Editor Crafting!\n\n| /(Inspired by using Emacs and Lisp!)/ |\n" }, { "file": "TypedLisp", "title": "Typed Lisp, A Primer", "date": "2019-08-21 19:29", "image": "emacs-birthday-present.png", "description": "Exploring Lisp's fine-grained type hierarchy.", "tags": "types lisp program-proving emacs", "url": "https://alhassy.com/TypedLisp", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/TypedLisp.org", "abstract": "\n#+TOC: headlines 2\n\nLet's explore Lisp's fine-grained type hierarchy!\n\nWe begin with a shallow comparison to Haskell, a rapid tour of type theory,\ntry in vain to defend dynamic approaches, give a somewhat humorous account of history,\nnote that you've been bamboozled ---type's have always been there---,\nthen go into technical details of some Lisp types, and finally conclude by showing\nhow /macros permit typing/.\n\n# Lisp types are fine-grained; e.g., rather than ~int~ we may use a spefied range of numbers,\n# or a set of specfiied elements, intersections, unions, and complements of types, and\n# even arbitrary predicates!\n\nGoals for this article:\n\n1. Multiple examples of type constructions in Lisp.\n2. Comparing Lisp type systems with modern languages, such as Haskell.\n3. Show how algebraic polymorphic types like ~Pair~ and ~Maybe~ can be defined in Lisp.\n Including heterogeneously typed lists!\n4. Convey a passion for an elegant language.\n5. Augment Lisp with functional Haskell-like type declarations ;-)\n\nUnless suggested otherwise, the phrase “Lisp” refers to\n[[https://www.gnu.org/software/emacs/manual/html_mono/cl.html#index-cl_002ddeftype-14][Common Lisp as supported by Emacs Lisp]]. As such, the resulting discussion\nis applicable to a number of Lisp dialects\n---I'm ignoring editing types such as buffers and keymaps, for now.\n" }, { "file": "three-minute-thesis", "title": "Have you ever packaged anything?", "date": "2019-03-12 19:29", "image": "packages.png 250 250", "description": "I learned something neat, and wanted to share!", "tags": "packages dependent-types", "url": "https://alhassy.com/three-minute-thesis", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/three-minute-thesis.org", "abstract": "\n#+TOC: headlines 2\n\n# copied from the repo\n\nHerein I try to make my current doctoral research accessible to the average person:\nExtending dependently-typed languages to implement module system features in the core\nlanguage. It's something I can direct my family to, if they're inclined to know what it is\nI've been doing lately.\n\nThe technical matter can be seen at the associated website\n─[[https://alhassy.github.io/next-700-module-systems-proposal/][The Next 700 Module Systems]]─ which includes a poster, slides, and a demo.\n\nExcluding the abstract, this is my thesis proposal in /three minutes/ (•̀ᴗ•́)و\n" }, { "file": "InteractiveWayToC", "title": "An Interactive Way To C", "date": "2019-01-12 19:29", "image": "interactive_way_to_c.png 450 450", "description": "Learning C program proving using Emacs --reminiscent of Coq proving with Proof General.", "tags": "program-proving c emacs frama-c", "url": "https://alhassy.com/InteractiveWayToC", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/InteractiveWayToC.org", "abstract": "\n#+TOC: headlines 2\n\n# copied from the repo\n\nDo you know what the above program accomplishes?\nIf you do, did you also spot a special edge case?\n\nWe aim to present an approach to program proving in C using a minimal Emacs setup\nso that one may produce literate C programs and be able to prove them correct\n--or execute them-- using a single button press; moreover the output is again in Emacs.\n\nThe goal is to learn program proving using the Frama-C tool\n--without necessarily invoking its gui-- by loading the source of this file into\nEmacs then editing, executing, & proving as you read along.\nOne provides for the formal specification of properties of C programs --e.g., using ACSL--\n which can then be verified for the implementations using tools that interpret such annotation\n--e.g., Frama-C invoked from within our Emacs setup.\n\nRead on, and perhaps you'll figure out how to solve the missing ~FixMe~ pieces 😉\n\nThe intent is for rapid editing and checking.\nIndeed, the Frama-c gui does not permit editing in the gui, so one must switch between\ntheir text editor and the gui.\n[[https://orgmode.org/worg/org-tutorials/org4beginners.html][Org mode beginning at the basics]] is a brief tutorial that covers a lot of Org and,\nfrom the get-go, covers “the absolute minimum you need to know about Emacs!”\n\nIf anything, this effort can be construed as a gateway into interactive theorem proving\nsuch as with Isabelle, Coq, or Agda.\n\nThe article /aims/ to be self-contained ---not even assuming familiarity with any C!\n\n\n#+BEGIN_QUOTE\n The presentation and examples are largely inspired by\n\n + Gilles Dowek's exquisite text [[https://www.springer.com/gp/book/9781848820319][Principles of Programming Languages]].\n - It is tremendously accessible!\n\n + Allan Blanchard's excellent tutorial\n [[https://allan-blanchard.fr/publis/frama-c-wp-tutorial-en.pdf][Introduction to C Program Proof using Frama-C and its WP Plugin]].\n\n Another excellent and succinct tutorial is Virgile Prevosto's [[https://frama-c.com/download/acsl-tutorial.pdf][ACSL Mini-Tutorial]].\n In contrast, the tutorial [[https://www.cs.umd.edu/class/spring2016/cmsc838G/frama-c/ACSL-by-Example-12.1.0.pdf][ACSL By Example]] aims to provide a variety of algorithms\n rendered in ACSL.\n#+END_QUOTE\n\nThere are no solutions since it's too easy to give up and look at the solutions that're\nnearby. Moreover, I intend to use some of the exercises for a class I'm teaching ;-)\n" }, { "file": "PathCat", "title": "Graphs are to categories as lists are to monoids", "date": "2018-12-24 19:29", "image": "PathCat.png 300 300", "description": "A fast-paced introduction to Category Theory based on the notion of graphs.", "tags": "category-theory agda types", "url": "https://alhassy.com/PathCat", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/PathCat.org", "abstract": "\n#+TOC: headlines 2\n\nNumbers are the lengths of lists which are the flattenings of trees which are\nthe spannings of graphs.\nUnlike the first three, graphs have /two/ underlying types of interest\n--the vertices and the edges-- and it is getting to grips with this complexity\nthat we attempt to tackle by considering their ‘algebraic’ counterpart: Categories.\n\n# trees are just those graphs for which arbitrary points are connected by a unique undirected path.\n\nIn our exploration of what graphs could possibly be and their relationships to lists are,\nwe shall /mechanise,/ or /implement,/ our claims since there will be many details and it is easy\nto make mistakes --moreover as a self-learning project, I'd feel more confident to make" }, { "file": "HeytingAlgebra", "title": "Discovering Heyting Algebra", "date": "2018-11-14 19:29", "image": "HeytingAlgebra.png 350 350", "description": "How do friends communicate secretly using non-invertible operations such as minimum? An introduction to Heyting Algebra --an instance of Cartesian Closed Categories!", "tags": "order-theory category-theory", "url": "https://alhassy.com/HeytingAlgebra", "history": "https://github.com/alhassy/alhassy.github.io/commits/master/posts/HeytingAlgebra.org", "abstract": "\n#+toc: headlines 2\n\nWe attempt to motivate the structure of a Heyting Algebra\nby considering ‘inverse problems’.\n\nFor example,\n+ You have a secret number $x$ and your friend has a secret number $y$, which you've\n communicated to each other in person.\n+ You communicate a ‘message’ to each other\n by adding onto your secret number.\n+ Hence, if I receive a number $z$, then I can /undo/ the addition operation to find the ‘message’ $m = z - y$.\n\nWhat if we decided, for security, to change our protocol from using addition to using\nminimum. That is, we encode our message $m$ as $z = x ↓ m$. Since minimum is not\ninvertible, we decide to send our encoded messages with a ‘context’ $c$ as a pair $(z, c)$.\nFrom this pair, a unique number $m′$ can be extracted, which is not necessarily the original $m$.\nRead on, and perhaps you'll figure out which messages can be communicated 😉\n\n# For example, we wrote our message on a piece of paper and placed it on a cafe bulletin board --a context!\n\nThis exploration demonstrates that relative pseudo-complements\n+ Are admitted by the usual naturals precisely when infinity is considered a number;\n+ Are /exactly/ implication for the Booleans;\n+ /Internalises/ implication for sets;\n+ Yield /the largest complementary subgraph/ when considering subgraphs.\n# + Generalise the /deduction theorem/.\n\nIn some sense, the pseudo-complement is the “best approximate inverse” to forming meets, minima, intersections.\n\nAlong the way we develop a number of the theorems describing the relationships\nbetween different structural components of Heyting Algebras;\nmost notably the internalisation of much of its own structure.\n\nThe article aims to be self-contained, however it may be helpful to\nlook at [[https://alhassy.github.io/CatsCheatSheet/LatticesCheatSheet.pdf][this lattice cheat sheet]] (•̀ᴗ•́)و\n" } ] #+end_example #+html:

%s\n

@@" " badge:Read|more|green|%s|read-the-docs @@html:

Thanks for reading everything! 😁 Bye! 👋

%s

" (@tags post) "

seamlessly

then

> #+begin_src emacs-lisp -n (defun blog/footer (post-file-name) "Returns the HTML rendering the htmlised source, version history, and comment box at the end of a post. This function is called for every post and the returned string is appended to the post body, as a postamble." (let ((post (blog/info (buffer-file-name)))) (concat "

" "" (blog/htmlize-file post-file-name) " " (@history post) ;; ;; Consider only add this to posts tagged “arabic”? (blog/css/arabic-font-setup) ;; "
" "" "" ;; "
Generated by Emacs and Org-mode (•̀ᴗ•́)و " (blog/license) ;; (blog/comments) ;; TODO. Not working as intended; low priority. "" ;; The next line is required to make the org-static-blog-assemble-rss method work. "" (blog/read-remaining-js)))) #+end_src ** blog/htmlize-file: Generate an htmlized version of a given source file; return an HTML badge linking to the colourised file :details: #+begin_src emacs-lisp (defun blog/htmlize-file (file-name) "Generate an htmlized version of a given source file; return an HTML badge linking to the colourised file. We do not take the extra time to produce a colourised file when we are previewing an article." (unless org-preview-html-mode (let ((org-hide-block-startup nil)) (with-temp-buffer (find-file file-name) ;; (insert "\n#+HTML_HEAD: \n") (org-mode) (outline-show-all) (switch-to-buffer (htmlize-buffer)) (write-file (concat "~/blog/" (f-base file-name) ".org.html")) (kill-buffer)))) (concat "

")) #+end_src ** blog/license: HTML for Creative Commons Attribution-ShareAlike 3.0 Unported License :details: <> #+begin_src emacs-lisp (defun blog/license () "Get HTML for Creative Commons Attribution-ShareAlike 3.0 Unported License." (s-collapse-whitespace (s-replace "\n" "" " $\"Creative$
Life & Computing Science by Musa Al-hassy is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License "))) #+end_src ** blog/comments: Embed Disqus Comments for my blog :details: #+begin_src emacs-lisp -n (defun blog/comments () "Embed Disqus Comments for my blog" (s-collapse-whitespace (s-replace "\n" "" "

comments powered by Disqus"))) #+end_src ** blog/read-remaining-js: HTML to use ReadRemaining.js :details: #+begin_src emacs-lisp (defun blog/read-remaining-js () "Get the HTML required to make use of ReadRemaining.js" ;; [Maybe Not True] ReadReamining.js does not work well with xWidget browser within Emacs (if (equal org-preview-html-viewer 'xwidget) "" ;; ReadRemaining.js ∷ How much time is left to finish reading this article? ;; ;; jQuery already loaded by org-special-block-extras. ;; "" " ")) #+end_src [[https://aerolab.github.io/readremaining.js/][ReadRemaining.js]] gives us a little floating clock on the bottom left of the screen which says, e.g., /4m 9s left/ when reading an article. + It tells us how much time is left before the article is done. + The time adjusts /dynamically/ as the user scrolls down ---but not up. + Apparently it has to be at the end of the HTML ==, otherwise it wont work for me. - It may be best to avoid loading jQuery multiple times; see [[https://alhassy.github.io/org-special-block-extras/#tooltipster][here]] for the necessary conditional. * /Style/! ✨ What do we want to be inserted into the head of every page? :PROPERTIES: :CUSTOM_ID: HTML-Header :END: <> For each article, I'll have a set of styles loaded /as well as/ a set of ~" #+end_src #+end_details ** Miscellaneous Styles ** Curvy Source Blocks & Pink Inline :details: <> The =border-radius= property defines the radius of an element's corners, we use it to make curvy looking source blocks. Its behaviour [[https://www.w3schools.com/cssref/css3_pr_border-radius.asp][changes]] depending on how many arguments it is given. - We also style the code block's label to be curvy. - Both =.src= and =pre.src:before= are used by Org. #+begin_src css -r -n :tangle ~/blog/blog-banner.css :noeval -n .src { border: 0px !important; /* 50px for top-left and bottom-right corners; 20px for top-right and bottom-left cornerns. */ border-radius: 50px 20px !important; } pre.src:before { /* border: 0px !important; */ /* background-color: inherit !important; */ padding: 3px !important; border-radius: 20px 50px !important; font-weight:700 } /* wrap lengthy lines for code blocks */ pre{white-space:pre-wrap} /* Also curvy inline code with ~ ⋯ ~ and = ⋯ = */ code { /* background: Cyan !important; */ background: pink !important; border-radius: 7px; /* border: 1px solid lightgrey; background: #FFFFE9; padding: 2px */ } #+end_src Code such as ~(= 2 (+ 1 1))~ now sticks out with a pink background ♥‿♥ ** Pink Tables :details: #+begin_src css :tangle ~/blog/blog-banner.css :noeval -n table { background: pink; border-radius: 10px; /* width:90% */ border-bottom: hidden; border-top: hidden; display: table !important; /* Put table in the center of the page, horizontally. */ margin-left:auto !important;margin-right:auto !important; font-family:"Courier New"; font-size:90%; } /* Styling for ‘t’able ‘d’ata and ‘h’eader elements */ th, td { border: 0px solid red; } #+end_src #+caption: Example table | Prime | 2^{Prime} | |-------+-----------| | | | | 1 | 2 | | 2 | 4 | | 3 | 8 | | 5 | 32 | | 7 | 128 | | 11 | 2048 | #+TBLFM: $2='(expt 2 $1);N # For the line wrapping, it may be useful to have # =#+PROPERTY: header-args -n= at the top of the file # to have all blocks displayed with line numbers. #+begin_src emacs-lisp ;; Table captions should be below the tables (setq org-html-table-caption-above nil org-export-latex-table-caption-above nil) #+end_src ** Let's show folded, details, regions with a nice greenish colour :details: This is part of =org-special-block-extras=, and it's something like this: #+begin_src css :tangle ~/blog/blog-banner.css :noeval -n details { padding: 1em; background-color: #e5f5e5; /* background-color: pink; */ border-radius: 15px; color: hsl(157 75% 20%); font-size: 0.9em; box-shadow: 0.05em 0.1em 5px 0.01em #00000057; } #+end_src * Ξ: Floating /Table of Contents/ :PROPERTIES: :CUSTOM_ID: Floating-TOC :END: <> I would like to have a table of contents that floats so that it is accessible to the reader in case they want to jump elsewhere in the document quickly ---possibly going to the top of the document. #+html:
★ ★ ★
When we write =#+toc: headlines 2= in our Org, HTML export produces the following. #+begin_src html -n :exports code :tangle no :noeval

section 1
section 𝓃

#+end_src Hence, we can style the table of contents by writing rules that target those =id='s. We use the following rules, adapted from [[https://orgmode.org/worg/][the Worg community]]. #+begin_details "CSS for a floating TOC" #+begin_src css -n :tangle ~/blog/floating-toc.css :noeval /*TOC inspired by https://orgmode.org/worg/ */ #table-of-contents { /* Place the toc in the top right corner */ position: fixed; right: 0em; top: 0em; margin-top: 120px; /* offset from the top of the screen */ /* It shrinks and grows as necessary */ padding: 0em !important; width: auto !important; min-width: auto !important; font-size: 10pt; background: white; line-height: 12pt; text-align: right; box-shadow: 0 0 1em #777777; -webkit-box-shadow: 0 0 1em #777777; -moz-box-shadow: 0 0 1em #777777; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; /* Ensure doesn't flow off the screen when expanded */ max-height: 80%; overflow: auto;} /* How big is the text “Table of Contents” and space around it */ #table-of-contents h2 { font-size: 13pt; max-width: 9em; border: 0; font-weight: normal; padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.05em; padding-bottom: 0.05em; } /* Intially have the TOC folded up; show it if the mouse hovers it */ #table-of-contents #text-table-of-contents { display: none; text-align: left; } #table-of-contents:hover #text-table-of-contents { display: block; padding: 0.5em; margin-top: -1.5em; } #+end_src #+end_details # /* TOC entries, unnumbered lists, should not be indented too much */ # #text-table-of-contents ul { padding-left: 20px } Since the table of contents floats, the phrase /Table of Contents/ is rather ‘in your face’, so let's use the more subtle Greek [[https://en.wikipedia.org/wiki/Xi_(letter)][letter]] =Ξ=. #+begin_src emacs-lisp -n (advice-add 'org-html--translate :before-until 'blog/display-toc-as-Ξ) ;; (advice-remove 'org-html--translate 'display-toc-as-Ξ) (defun blog/display-toc-as-Ξ (phrase info) (when (equal phrase "Table of Contents") (s-collapse-whitespace " Ξ "))) #+end_src How did I get here? 1. How does Org's HTML export TOCs? ⇒ doc:org-html-toc 2. Looking at its source, we see doc:org-html--translate being the only place mentioning the string /Table of Contents/ 3. Let's advise it, with doc:advice-add, to return “Ξ” /only/ on that particular input string. 4. Joy ♥‿♥ # ( The Unicode whitespace ‘ ’ before and after =Ξ= is to appease the [[clickable-headlines][clickable headlines utility]], below. ) Finally, #+begin_src emacs-lisp :exports code ;; I'd like to have tocs and numbered headings (setq org-export-with-toc t) (setq org-export-with-section-numbers t) #+end_src * Clickable Sections with Sensible Anchors ** Ensuring Useful HTML Anchors :PROPERTIES: :CUSTOM_ID: Ensuring-Useful-HTML-Anchors :END: Upon HTML export, each tree heading is assigned an ID to be used for hyperlinks. Default IDs are something like ~org1957a9d~, which does not endure the test of time: Re-export will produce a different id. Here's a rough snippet to generate IDs from headings, by replacing spaces with hyphens, for headings without IDs. #+begin_details "blog/ensure-useful-section-anchors: Advised to Org Export" #+BEGIN_SRC emacs-lisp (defun blog/ensure-useful-section-anchors (&rest _) "Org sections without an ID are given one based on its title. All non-alphanumeric characters are cleverly replaced with ‘-’. If multiple trees end-up with the same id property, issue a message and undo any property insertion thus far. E.g., ↯ We'll go on a ∀∃⇅ adventure ↦ We'll-go-on-a-adventure " (interactive) (let ((ids)) (org-map-entries (lambda () (org-with-point-at (point) (let ((id (org-entry-get nil "CUSTOM_ID"))) (unless id (thread-last (nth 4 (org-heading-components)) (s-replace-regexp "[^[:alnum:]']" "-") (s-replace-regexp "-+" "-") (s-chop-prefix "-") (s-chop-suffix "-") (setq id)) (if (not (member id ids)) (push id ids) (message-box "Oh no, a repeated id!\n\n\t%s" id) (undo) (setq quit-flag t)) (org-entry-put nil "CUSTOM_ID" id)))))))) ;; Whenever html & md export happens, ensure we have headline ids. (advice-add 'org-html-export-to-html :before 'blog/ensure-useful-section-anchors) (advice-add 'org-md-export-to-markdown :before 'blog/ensure-useful-section-anchors) #+END_SRC #+end_details One may then use ~[[#my-custom-id]]~ to link to the entry with ~CUSTOM_ID~ property ~my-custom-id~. Interestingly, ~org-set-property~, ~C-c C-x p~, lets us insert a property from a selection of available ones, then we'll be prompted for a value for it from a list of values you've used elsewhere. This is useful for remaining consistent for when trees share similar properties. ** Clickable Headlines :PROPERTIES: :CUSTOM_ID: Clickable-Headlines :END: By default, HTML export generates ID's to headlines so they may be referenced to, but there is no convenient way to get at them to refer to a particular heading. The following spell fixes this issue: Headlines are now clickable, resulting in a link to the headline itself. #+begin_details org-html-format-headline-function #+begin_src emacs-lisp ;; Src: https://writepermission.com/org-blogging-clickable-headlines.html (setq org-html-format-headline-function (lambda (todo todo-type priority text tags info) "Format a headline with a link to itself." (let* ((headline (get-text-property 0 :parent text)) (id (or (org-element-property :CUSTOM_ID headline) (ignore-errors (org-export-get-reference headline info)) (org-element-property :ID headline))) (link (if id (format "%s" id text) text))) (org-html-format-headline-default-function todo todo-type priority link tags info)))) #+end_src #+end_details #+begin_box "Known Issues" :background-color cyan 1. Need to have a custom id declared. #+BEGIN_SRC org :tangle no :PROPERTIES: :CUSTOM_ID: my-header :END: #+END_SRC 2. Failing headers: =* [[link]]= nor =* ~code~= nor =* $math$=. - Any non-link text /before/ it will work: =ok [[link]]=. * Using Unicode non-breaking space ‘ ’ is ok. - Text /only after/ the link is insufficient. #+begin_details Details on failing headers *Warning:* The header cannot already be a link! Otherwise you get the cryptic and unhelpful error =(wrong-type-argument plistp :section-number)=; which then pollutes the current Emacs session resulting in strange =nil= errors after =C-x C-s=, thereby forcing a full Emacs restart. Instead, you need at least one portion of each heading to be not a link. #+end_details #+end_box * MathJax Support --- $e^{i \cdot \pi} + 1 = 0$ :PROPERTIES: :CUSTOM_ID: MathJax-Support :END: <> Org loads the [[https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference][MathJax]] display engine for mathematics whenever users write LaTeX-style math delimited by ~$...$~ or by =\[...\]=. Here is an example. #+begin_org-demo \[ p ⊓ q = p \quad ≡ \quad p ⊔ q = q \label{Golden-Rule}\tag{Golden-Rule}\] Look at \ref{Golden-Rule}, it says, when specialised to numbers, /the minimum of two items is the first precisely when the maximum of the two is the second/ ---d'uh! #+end_org-demo #+html:
#+begin_details "The script that Org loads by default" #+begin_src emacs-lisp -n :noweb-ref my-html-header :tangle no " " #+end_src #+end_details ** Unicode Warning! :PROPERTIES: :CUSTOM_ID: Unicode-Warning :END: *We can make an equation ℰ named 𝒩 and refer to it by ℒ by declaring =\[ℰ \tag{𝒩} \label{ℒ} \]= then refer to it with =\ref{ℒ}=. /However/,* if 𝒩 contains Unicode, then the reference will not generally be ‘clickable’ ---it wont take you to the equation's declaration site. For example, \ref{⊑-Definition} (=⊑-Definition=) below has Unicode in both its tag and label, and so clicking that link wont go anywhere, whereas \ref{Order-Definition} has Unicode only in its tag, with the label being =\label{Order-Definition}=, and clicking it takes you to the formula. #+begin_org-demo \[ p ⊑ q \quad ≡ \quad p ⊓ q = p \tag{⊑-Definition}\label{⊑-Definition} \] \[ p ⊑ q \quad ≡ \quad p ⊔ q = q \tag{⊑-Definition}\label{Order-Definition} \] #+end_org-demo ** Rule Resurrection :PROPERTIES: :CUSTOM_ID: Rule-Resurrection :END: The following rule for anchors =a {⋯}= resurrects =\ref{}= calls via MathJax ---which =org-notes-style= kills. #+begin_src css :tangle ~/blog/blog-banner.css :noeval a { white-space: pre !important; } #+end_src ** /Making Math Stick-out with Spacing!/ :PROPERTIES: :CUSTOM_ID: COMMENT-nice-math-spacing :END: Notice how the /math expressions/ stick out in these following sentences: 1. We use $x$ as the name of the unknown. 2. The phrase $∀ x • ∃ y • x 〔R〕 y$ indicates that relation $R$ is “total”. Nice, the following adds extra whitespace around MathJax, so that math elements have extra whitespace about them so as to make them stand-out. #+HTML_MATHJAX: padding: 25px 25px #+begin_details "The script that Org loads by default" #+begin_src emacs-lisp -n :noweb-ref my-html-header :tangle no " " #+end_src #+end_details ** COMMENT Example calculation from that MathJax Setup? :PROPERTIES: :CUSTOM_ID: COMMENT-Example-calculation-from-that-MathJax-Setup :END: Maybe move the MathJax setup into AlBasmala directly, then include it? Or, maybe incorporate the MathJax setup via Emacs directly ♥‿♥ Such as org-html-head-extra \begin{calc} x \;⊓\; ¬ x \quad=\quad ⊥ \step{ \ref{⊑-antisymmetric} } (x \;⊓\; ¬ x) \sqleqs ⊥ \landS ⊥ \sqleqs (x \;⊓\; ¬ x) \step{ \ref{Bottom Element} } x \;⊓\; ¬ x \sqleqS ⊥ \step{ \ref{Modus Ponens} } \mathsf{true} \end{calc} Then, \[\eqn{Constructive De Morgan}{¬(x \;⊔\; y) \quad=\quad ¬ x \;⊓\; ¬ y}\] * Arabic Font Setup :PROPERTIES: :CUSTOM_ID: Arabic-Font-Setup :END: I'd like /inline/ Arabic to be displayed using [[https://www.amirifont.org/][الخط الأمیری]] since that's [[http://alhassy.com/arabic-roots#Arabic-Input-Setup][how it looks /within/ Emacs for me.]] But, Arabic within tables should be displayed in a more formal font, Scheherazade, that makes it really clear where letters start and end, and where the vowels above/below letters are positioned. #+begin_details #+begin_src emacs-lisp (defun blog/css/arabic-font-setup () "Setup the CSS/HTML required to make my Arabic writing look nice. For a one-off use in an article, just place an “#+html:” in front of the result of this function." " ") #+end_src To understand /why/ these styling rules work, see this website: [[https://rtlstyling.com/posts/rtl-styling#handling-fonts][Right-to-left Styling]]. #+end_details #+html:
#+begin_org-demo :source-color white :result-color white For example, + Inline: اهلاً وسهلاً + Within a table: | اهلاً وسهلاً | #+end_org-demo # Yuck! + Inline code: =اهلاً وسهلاً= As the above left source demonstrates, unless some explicit action is taken, Arabic fonts are by default rendered hideously small. * Actually publishing an article :PROPERTIES: :CUSTOM_ID: Actually-publishing-an-article :END: # My preview setup does a great job at "publishing" my articles, as such, it seems I don't really need use org-static-blog-publish-file. # (I would need org-static-blog-publish-file if I were to republish the entire blog, say via org-static-blog-publish) #+begin_src emacs-lisp (cl-defun blog/git (cmd &rest args) "Execute git command CMD, which may have %s placeholders whose values are positional in ARGS." (shell-command (apply #'format (concat "cd ~/blog; git " cmd) args))) (cl-defun blog/publish-current-article () "Place HTML files in the right place, update index, rss, tags; git push!" (interactive) (blog/git "add %s" (buffer-file-name)) ;; Placed article html into the published blog directory (blog/preview) (save-buffer) (-let [article (concat (f-base (buffer-file-name)) ".html")] (shell-command (concat "mv " article " ~/blog/")) (blog/git "add %s %s" (buffer-file-name) article) ;; Make AlBasmala live with the other posts to avoid this conditional. (when (equal (f-base (buffer-file-name)) "AlBasmala") (blog/git "add AlBasmala.el"))) ;; Need to disable my export-preprocessing hooks. (blog/preview/disable) (view-echo-area-messages) (message "⇒ HTMLizing article...") (blog/htmlize-file (buffer-file-name)) (message "⇒ Assembling tags...") (blog/make-all-tag-pages) ;; TODO: I only need to update the tags pages relevant to the current article! ;; TODO: (message "⇒ Assembling RSS feed...") (org-static-blog-assemble-rss) (message "⇒ Assembling landing page...") (blog/make-index-page) (blog/git "add %s.org.html tag* rss.xml index.html" (f-base (buffer-file-name))) ;; TODO: If we're updating an existing article, prompt for a message. (blog/git "commit -m \"%s\"; git push" (if current-prefix-arg (read-string "Commit message: ") (format "Publish: Article %s.org" (f-base (buffer-file-name))))) (message "⇒ It may take up 20secs to 1minute for changes to be live at alhassy.com; congratulations!")) #+end_src * COMMENT Publishing with =[C-u C-u] C-c C-b= :PROPERTIES: :CUSTOM_ID: Publishing-with-C-u-C-u-C-c-C-b :END: :Hide_fornow: #+begin_src emacs-lisp -n :tangle no ;; No lock files, for now ;; The “.#file” files ;; https://www.gnu.org/software/emacs/manual/html_node/emacs/Interlocking.html#Interlocking (setq create-lockfiles nil) #+end_src :End: #+begin_src emacs-lisp -r -n ;; Override all minor modes that use this binding. (bind-key* (kbd "C-c C-b") (lambda (&optional prefix) "C-c C-b ⇒ Publish current buffer C-u C-c C-b ⇒ Publish entire blog C-u C-u C-c C-b ⇒ Publish entire blog; re-rendering all blog posts (This will take time!) " (interactive "P") (pcase (or (car prefix) 0) (0 (org-static-blog-publish-file (f-full (buffer-file-name))) (browse-url-of-file (format "file://%s%s.html" (file-truename blog/publish-directory) (f-base (buffer-file-name))))) ;; Apparently I have to publish the current buffer before trying ;; to publish the blog; otherwise I got some errors. (4 (org-static-blog-publish-file (f-full (buffer-name))) (org-static-blog-publish)) (16 ;; (org-static-blog-publish t) ⇒ Crashes. ;; Delete all .html files, except “about” (thread-last (f-entries "~/blog/") (--filter (and (equal (f-ext it) "html") (not (member (f-base it) '("about"))))) (--map (f-delete it))) (ref:delAll) ;; Publish as usual (org-static-blog-publish-file (f-full (buffer-name))) (org-static-blog-publish))))) #+end_src Line [[(delAll)]]: To re-render an article, just remove its corresponding .html file ;-) * COMMENT [Part of publishing a file] org-static-blog-post-preamble: Making this work with =org-notes-style= and =org-static-blog= :PROPERTIES: :CUSTOM_ID: Making-this-work-with-org-notes-style-and-org-static-blog :END: To make use of =org-notes-style=, I need the title to use the =title= class but =org-static-blog= uses the =post-title= blog, so I'll override the =org-static-blog= preamble method to simply use an auxiliary div. - Along the way, I'll position the article image under the article's title. - Line [[(fixTitle)]]: =org-notes-style= has too much vertical space after the title, let's reduce it so that the article's data can follow it smoothly. # - Line [[(BR)]]: =org-static-blog= does not support Org-markup in the title, since it # just dumps the title in-place; here I provide a support for just =
=. #+begin_src emacs-lisp -r -n -n (defun org-static-blog-post-preamble (post-filename) "Returns the formatted date and headline of the post. This function is called for every post and prepended to the post body. Modify this function if you want to change a posts headline." (let ((post (blog/info (buffer-file-name)))) (concat ;; The title "

" "
" (ref:fixTitle) "" (@title post) "" "

" ;; The date "

" (@date post) "

" ;; The article's image (@image post) "
Abstract"))) #+end_src # Before we move on, Org-notes adds extra whitespace after the title, let's avoid # that. # #+begin_src css :tangle ~/blog/blog-banner.css :noeval # .title { margin: 0 0 0 0 !important; } # #+end_src * The name: [[https://en.wikipedia.org/wiki/Basmala][al-bas-mala]] :PROPERTIES: :CUSTOM_ID: the-name :END: The prefix /al/ is the Arabic definite particle which may correspond to English's /the/; whereas /basmala/ refers to a beginning. That is, this is a variation on the traditional [[https://en.wikipedia.org/wiki/%22Hello,_World!%22_program]["hello world"]] ;-) * Appendix: Using a Custom Domain: ~alhassy.com~ :PROPERTIES: :CUSTOM_ID: COMMENT-Using-a-Custom-Domain-alhassy-com :UNNUMBERED: t :END: #+begin_details 1. Go to your repo: https://github.com/alhassy/alhassy.github.io/settings/pages 2. Add a =Custom Domain= such as an “apex domain” like =alhassy.com= (or a www domain like =www.alhassy.com=) - Apex domains require =A= records to be setup on your DNS provider. - www domains require =CNAME= records. - On my DNS provider, I setup both: That way, with or without =www.=, people will arrive at my blog. 3. Go to your DNS provider, and add two records | Type | Name | Priority | Content | TTL | |-------+------+----------+-------------------+-------| | CNAME | www | 0 | alhassy.github.io | 14400 | | CNAME | @ | 0 | alhassy.github.io | 14400 | 4. In a terminal, run: =dig www.alhassy.com +nostats +nocomments +nocmd= - The =www.= is intentional. 5. You should see something like: #+begin_example bash www.alhassy.com. 14400 IN CNAME alhassy.github.io. alhassy.github.io. 3600 IN A 185.199.111.153 alhassy.github.io. 3600 IN A 185.199.108.153 alhassy.github.io. 3600 IN A 185.199.109.153 alhassy.github.io. 3600 IN A 185.199.110.153 #+end_example This says that it may take 3600 seconds, or 1hour, for the redirect of ~alhassy.com~ to ~alhassy.github.io~ to be completed. It may take longer; keep reading. 6. In your DNS provider, add 4 records, one for each IP Address you got from the =dig= command. (These addresses are also on the official Github [[https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site][docs]]). | Type | Name | Priority | Content | TTL | |------+------+----------+-----------------+-------| | A | @ | 0 | 185.199.108.153 | 14400 | | A | @ | 0 | 185.199.109.153 | 14400 | | A | @ | 0 | 185.199.110.153 | 14400 | | A | @ | 0 | 185.199.111.153 | 14400 | 7. Run =dig alhassy.com +noall +answer -t A= and ensure it points to these IP addresses. - Notice the lack of a =www.= 8. Open an incognito browser, private browsing session, and navigate to =alhassy.com=. a. If this redirects to your =alhassy.github.io= blog, then joy! - If the redirect does not happen in your non-incognito browser, just clear your browsing history and try again. b. Otherwise, it may take some time (something like 1/2hour to 3 days) for the DNS propagation to be completed. - You can check the progress by using a [[https://www.whatsmydns.net/#A/alhassy.com][service like this]]. - It took me about 1/2hour for the URL to redirect to my github.io blog. Further resources: - [[https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site][Managing a custom domain for your GitHub Pages site - GitHub Docs]] - [[https://richpauloo.github.io/2019-11-17-Linking-a-Custom-Domain-to-Github-Pages/][Linking A Custom Domain To Github Pages]] #+end_details * COMMENT Archives ** Org Marco: “This section has been #+include'd from my init.org” :ignore: :PROPERTIES: :CUSTOM_ID: Org-Marco-This-section-has-been-include'd-from-my-init-org :END: # Some sections in this article come from my init.org. # # As such, the {{{from-my-init}}} macro is used to provide a nice, small, linkable, message. # Implementation below. ############################################################ # This CSS rule targets all images within anchors within a that has a class named “tiny”. In particular, it's used # to target badges so that they are about the same size as text. #+html: #+macro: init badge:A_Life_Configuring|Emacs|green|https://alhassy.github.io/emacs.d|gnu-emacs #+macro: from-my-init-text /This section has been =#+include='d from my init.org/, {{{init}}} #+macro: from-my-init @@html: @@ {{{from-my-init-text}}} @@html: @@ *** COMMENT Example usage {{{from-my-init}}} <> #+include: "~/.emacs.d/init.org::*Ensuring Useful HTML Anchors" :only-contents t ** COMMENT unsplash link setup :Leave_as_cute_remark: :PROPERTIES: :CUSTOM_ID: COMMENT-unsplash-link-setup :END: #+begin_src emacs-lisp :exports code ;; If you download images, from unspash, you'll have to host them somewhere! ;; An alternative is just to provide direct links to the unsplash images themselves! ;; ;; Example usage: ;; unsplash:gySMaocSdqs ;; ;; This shows an image along with a useful tooltip; image size is 200x200 by default. ;; The image is also a link, redirecting to the source, including whomever took the original photo. #+end_src (-let [unsplash (cl-second (s-match ".*unsplash.com/photos/\$.*\$" "https://unsplash.com/photos/Vc2dD4l57og"))] (if unsplash (format "

" unsplash unsplash))) unsplash:XXX0GQfgMy8

%s

%s

Table of Contents

" "" (ref:fixTitle) "" (@title post) "" "

" "
" (ref:fixTitle) "" (@title post) "" "