Update images

This commit is contained in:
Andros Fenollosa 2024-03-06 09:24:25 +01:00
parent 01b51bb1f5
commit 512f33e8e7
3 changed files with 64 additions and 9 deletions

View File

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

View File

@ -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. 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]] [[#/img/example-scheme.png][Architecture]]
Let's illustrate with an example. I want to render article number 2. 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]] [[#/img/example-blog.png][Blog example]]
1. A WebSockets connection, a channel, is established between the client and the server. 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. 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]] [[#/img/quickstart/minimal-template.webp][Random number]]
* Views * Views

View File

@ -1,7 +1,52 @@
;; Utils
(defun make-title (title) (defun make-title (title)
"If title is empty, return the website name. Otherwise, return the title with the website name." "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")) (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) (defun render-layout-html (title description tree-content)
"Render the HTML layout with the given title, description and content." "Render the HTML layout with the given title, description and content."
(let ((full-title (make-title title))) (let ((full-title (make-title title)))