Update images

assets/css/main.css

@@ -99,6 +99,11 @@ a:hover,
     }
 }
 
+.center-block {
+    display: block;
+    margin-inline: auto;
+}
+
 .image {
     display: block;
     width: 100%;
@@ -106,6 +111,17 @@ a:hover,
     object-position: center;
 }
 
+.image--responsive {
+    max-width: 100%;
+    width: initial;
+}
+
+.image--home {
+    max-width: 40rem;
+    padding-block: var(--gap-l);
+}
+
+
 .block-center {
     margin-inline: auto;
 }
@@ -262,14 +278,6 @@ a:hover,
 
 /* Home */
 
-.home img {
-    display: block;
-    width: 100%;
-    max-width: 40rem;
-    padding-block: var(--gap-l);
-    margin-inline: auto;
-}
-
 .nav-home__list {
     justify-content: center;
     gap: var(--gap-l);

one.org

@@ -10,10 +10,12 @@
 
 HTML over ther Wire, or HTML over the WebSockets, is a strategy for creating real-time SPAs by creating a WebSockets connection between a client and a server. It allows JavaScript to request actions, its only responsibility is to handle events, and the backend handles the business logic as well as rendering HTML. This means you can create pages without reloading the page, without AJAX, APIs or requests. One technology provides a secure, stable and low-delay connection for real-time web applications.
 
+#+ATTR_HTML: :class center-block image image--home
 [[#/img/example-scheme.png][Architecture]]
 
 Let's illustrate with an example. I want to render article number 2.
 
+#+ATTR_HTML: :class center-block image image--home
 [[#/img/example-blog.png][Blog example]]
 
 1. A WebSockets connection, a channel, is established between the client and the server.
@@ -336,7 +338,7 @@ python manage.py runserver
 
 And open the browser at ~http://localhost:8000/~. You should see the home page with a button that generates a random number.
 
-#+ATTR_HTML: :class block-center
+#+ATTR_HTML: :class center-block image image--responsive
 [[#/img/quickstart/minimal-template.webp][Random number]]
 
 * Views

onerc.el

@@ -1,7 +1,52 @@
+;; Utils
 (defun make-title (title)
   "If title is empty, return the website name. Otherwise, return the title with the website name."
   (concat (when (not (string-empty-p title)) (concat title " | ")) "Django LiveView"))
 
+(defun one-ox-link (link desc info)
+      "Transcode a LINK object from Org to HTML.
+    DESC is the description part of the link, or the empty string.
+    INFO is a plist holding contextual information."
+      (let* ((type (org-element-property :type link))
+             (path (org-element-property :path link))
+             (raw-link (org-element-property :raw-link link))
+             (custom-type-link
+              (let ((export-func (org-link-get-parameter type :export)))
+                (and (functionp export-func)
+                     (funcall export-func path desc 'one-ox info))))
+             (href (cond
+                    ((string= type "custom-id") path)
+                    ((string= type "fuzzy")
+                     (let ((beg (org-element-property :begin link)))
+                       (signal 'one-link-broken
+                               `(,raw-link
+                                 "fuzzy links not supported"
+                                 ,(format "goto-char: %s" beg)))))
+                    ((string= type "file")
+                     (or
+                      ;; ./assets/images/image-1.png --> /images/image-1.png
+                      ;; ./public/blog/page-1.md     --> /blog/page-1.md
+                      (and (string-match "\\`\\./\\(assets\\|public\\)" path)
+                           (replace-match "" nil nil path))
+                      (let ((beg (org-element-property :begin link)))
+                        (signal 'one-link-broken
+                                `(,raw-link ,(format "goto-char: %s" beg))))))
+                    (t raw-link)))
+             (class (if-let ((parent (org-export-get-parent-element link))
+                             (class (plist-get (org-export-read-attribute :attr_html parent)
+                                               :class)))
+                        (concat " class=\"" class "\" ")
+                      " ")))
+        (or custom-type-link
+            (and
+             (string-match one-ox-link-image-extensions path)
+             (format "<p><img%ssrc=\"%s\" alt=\"%s\" /></p>"
+                     class href (or (org-string-nw-p desc) href)) )
+            (format "<a%shref=\"%s\">%s</a>"
+                    class href (or (org-string-nw-p desc) href)))))
+
+;; Layouts
+
 (defun render-layout-html (title description tree-content)
   "Render the HTML layout with the given title, description and content."
   (let ((full-title (make-title title)))