diff --git a/assets/css/main.css b/assets/css/main.css index 887c0a0..5109d05 100644 --- a/assets/css/main.css +++ b/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); diff --git a/one.org b/one.org index c9fbf5a..01b034b 100644 --- a/one.org +++ b/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 diff --git a/onerc.el b/onerc.el index f3b4efc..1726293 100644 --- a/onerc.el +++ b/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 "
" + class href (or (org-string-nw-p desc) href)) ) + (format "%s" + 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)))