clog reading tutorials

clog/clog.lisp

@@ -0,0 +1,83 @@
+;; here's most up-to-date thing?
+;; https://github.com/rabbibotton/clog
+;;
+;; welp currently can't load clog, libraries are not found
+;; tried to add openssl to buildinputs, but not yet working
+(defun pkg-config-add-lib (libname)
+  (let ((process (sb-ext:run-program "/usr/bin/env"
+                                     (list "pkg-config" libname "--libs-only-L")
+                                     :input t :output :stream :wait t)))
+    (let ((stream (sb-ext:process-output process)))
+      (loop for line = (read-line stream nil nil)
+            while line do
+              (format t "~&another lib ~S" line)
+              ;; Drop "-L" part, and add '/' to the end '/' IS necessary!
+              ;; (pushnew (pathname (concatenate 'string (subseq line 2) "/"))
+              ;;          cffi:*foreign-library-directories*))
+              (sb-ext:process-close process)))))
+
+(pkg-config-add-lib "libcrypto")
+
+;; nope, I don't understand it, and it doesn't work
+
+(ql:quickload :clog)
+
+
+
+(set-on-new-window (lambda (body) (create-div body :content "hello world.")))
+(dotimes (n 10) (create-div *body* :content (format nil "Line ~A - Hello World" n)) (sleep .3))
+
+(clog:is-running-p)
+(clog:debug-mode)
+
+(in-package clog-user)
+
+(clog-install-dir)
+;; #P"/home/efim/quicklisp/local-projects/clog/"
+
+(ql:quickload :clog/tools)              ; clog-terminal not found =C
+(ql:quickload :clog-terminal/tools)     ; well, my guess is that I'm not using latest? since I've what, downloaded to local projects
+                                        ; instead of adding a repository?
+;; yup, some repos weren't cloned
+
+(clog-tools:clog-builder)
+
+(clog:open-manual)
+
+(ql:quickload :clog/terminal)           ; yup after cloning more repos
+
+(clog-tools:clog-db-admin)
+
+;; (initialize)
+;; well, now it's time to try to go through tutorials, i guess
+
+(clog:run-tutorial 1)
+;; #P"/home/efim/quicklisp/local-projects/clog/"
+;; ~/quicklisp/local-projects/clog/tutorial/README.md
+
+(defun my-setup (body)
+  (let ((header (create-child body "<h1>lalalla</h1>"))
+        (colors '(:black :blue :green)))
+    (setf (color header) :efim)
+    (set-on-click header
+                  (lambda (obj)
+                    (declare (ignore obj))
+                    ;; if set value in debugger, this is how to delete it
+                    ;; since it's just created in image
+                    ;; (boundp 'colors)
+                    ;; (makunbound 'colors)
+                    (nth (random (length colors)) colors)
+                    (setf (color header) (nth (random (length colors)) colors)))))
+  (create-child body "<p>lalalla</p>"))        ; now, that doesn't work.
+
+(initialize #'my-setup)
+(open-browser)
+
+;; and for each element, we can call #'set-on-click
+
+;; next things I'd like to do is random colors, I guess
+
+;; but how do I look which colors can be used?
+;; it would seem that it just takes value of the keyword and puts it into html property
+;; but
+;; well, it's not that.

clog/tutorials-simple-element.lisp

@@ -0,0 +1,87 @@
+
+(ql:quickload :clog)
+
+(clog-install-dir)
+;; #P"/home/efim/quicklisp/local-projects/clog/"
+
+(clog:run-tutorial 1)
+
+(in-package clog-user)
+
+(defun my-setup (body)
+  (let ((header (create-child body "<h1>lalalla</h1>"))
+        (colors '(:black :blue :green)))
+    (setf (color header) :pink)
+    (set-on-click header
+                  (lambda (obj)
+                    (declare (ignore obj))
+                    ;; if set value in debugger, this is how to delete it
+                    ;; since it's just created in image
+                    ;; (boundp 'colors)
+                    ;; (makunbound 'colors)
+                    (nth (random (length colors)) colors)
+                    (setf (color header) (nth (random (length colors)) colors)))))
+  (create-child body "<p>lalalla</p>"))        ; now, that doesn't work.
+
+(initialize #'my-setup)
+(open-browser)
+
+;; now again, what about color keywords
+;; well, maybe there's some kind of filtering for correct color values
+
+;; and ispecting source is easier with sly-inspect-definition
+
+;; let's look at second tutorial?
+
+;; more lispier creation of elements
+(clog:run-tutorial 2)
+
+
+          ;;   :address :article :aside :header :main :nav :hgroup
+          ;;   :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6
+(defun my-setup-with-more-elements (body)
+  (let ((my-h1 (create-section body :h1 :content "content of h1")))
+    (create-section body :address :content "what-s content of address?")
+    (create-section body :article :content "what-s content of article?")
+    (create-section body :aside :content "what-s content of aside?")
+    (format t "running setup on ~S with ~S" body my-h1)))
+
+;; article is "independent content" which should be reasonable to distribute on its own
+;; aside - to put content out of main column?
+;; main - The content inside the <main> element should be unique to the
+;; document. It should not contain any content that is repeated across documents
+;; such as sidebars, navigation links, copyright information, site logos, and
+;; search forms.
+
+;; what would be comfortable way to compose that?
+;; apart from using let?
+;; maybe that's in tutorial 3?
+
+(initialize #'my-setup-with-more-elements)
+(open-browser)
+
+(clog:run-tutorial 3)
+
+;; tutorial 3 is about wrapping code into (with-sync-event (obj) ... )
+;; that would guard start of function on some event until after previous completes. cool
+
+(clog:run-tutorial 4)
+;; reusing handler, and function generic, without much of type specification, looks unusual
+
+(clog:run-tutorial 5)
+
+;; so, connection-data-item on obj - target, or *body* seems to not care, having strigly named attributes
+;; shareable by components?
+
+;; how'd I use that?
+;; I guess to maybe pass component to act upon, without doing elaborate nested LET expressions
+;; just during creation of some component, save it as such variable,
+;; then in handler it could be targeted by being taken by name
+;;
+;; but, yeah, also passing values between handlers or something
+
+(clog:run-tutorial 6)
+;; every click / handler starts in new thread.
+;; so if I want reentrant code, use `connection-data-item`
+
+(clog:run-tutorial 7)