Documentation

Setup.org → css/docs.css

@@ -1,156 +1,3 @@
-:properties:
-:header-args: :mkdirp yes :results silent
-:end:
-#+author:  Henrik Kjerringvåg
-#+options: d:nil toc:nil
-#+language: en
-#+tags: noexport(n)
-#+exclude_tags: noexport
-#+html_doctype: html5
-#+html_head_extra: <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
-#+html_head_extra: <link rel="stylesheet" href="css/docs.css">
-#+html_head_extra: <script defer src="js/examples.js"></script>
-#+html_head_extra: <script defer src="js/docs.js"></script>
-
-
-* Setup
-
-This file only serves auxiliary purposes, like how the documentation
-should be published, what license to use, etc.
-
-* Helpers
-
-#+name: helpers
-#+begin_src emacs-lisp
-(defun react->reagent (name)
- (s-dashed-words
-  (if (not (equal name "ReactFlow"))
-      (s-replace "React" "Reagent" name)
-    name)))
-#+end_src
-
-#+name: init
-#+begin_src clojurescript
-(defonce root (atom nil))
-
-(defn error-boundary [& children]
-  (let [error (r/atom nil)]
-    (r/create-class
-     {:display-name                 "ErrorBoundary" 
-      :get-derived-state-from-error (fn [e] #js {})
-      :component-did-catch          (fn [err info] (reset! error [err info])) 
-      :reagent-render
-      (fn [& children]
-        (if (nil? @error)
-          (into [:<>] children)
-          (let [[_ info] @error]
-            [:pre.error
-             [:code (pr-str info)]
-             [:br]
-             [:button {:on-click #(.error js/console info)} "Output stacktrace"]])))})))
-
-(defn ^:export init [element]
-  (when (nil? @root)
-    (reset! root (rdom/create-root element))
-    (rdom/render @root [error-boundary [main]])))
-
-(defn ^:export unload [element]
-  (when (not (nil? @root))
-    (rdom/unmount @root)
-    (reset! root nil)))
-#+end_src
-
-* License
-
-#+name: preamble
-#+begin_src clojurescript :noweb yes
-;;
-;; This program is written in a literate style. That means; this
-;; source-file is generated and you should not make direct edits. You
-;; should instead make your contributions in `index.org` and tangle it.
-;; Please have a look at https://orgmode.org/ for more information.
-;;
-;; --------------------------------------------------------------------
-;;
-;;   <<license>>
-;;
-#+end_src
-
-#+name: year
-#+begin_src emacs-lisp
-(format-time-string "%Y")
-#+end_src
-
-#+name: license
-#+begin_src text :tangle LICENSE :noweb yes
-MIT License
-
-Copyright (C) <<year()>> DNV GL
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-#+end_src
-
-* Publishing
-
-Documentation can be published with ~M-x org-publish-project~.
-This will also tangle this setup-file which contain all the styles etc
-for the documentation-page.
-#+name: publishing
-#+begin_src emacs-lisp
-(unless (boundp 'org-publish-project-alist)
-  (setq org-publish-project-alist nil))
-
-(add-to-list 'org-publish-project-alist
-	     `("reagent-flow-static"
-	       :base-directory ,default-directory
-	       :base-extension "png\\|jpg\\|gif\\|svg"
-	       :publishing-directory ,(expand-file-name "docs" default-directory)
-	       :publishing-function org-publish-attachment))
-
-(add-to-list 'org-publish-project-alist
-	     `("reagent-flow-html-docs"
-	       :base-directory ,default-directory
-	       :publishing-directory ,(expand-file-name "docs" default-directory)
-	       :publishing-function org-html-publish-to-html
-	       :section-numbers nil
-	       :html-head-include-default-style nil
-	       :html-head-include-scripts nil
-	       :html-postamble nil
-	       :htmlize-output-type "css"
-	       :htmlized-source t
-	       :exclude "README\\.org\\|Setup\\.org"
-	       :with-toc t))
-
-(add-to-list 'org-publish-project-alist
-	     `("reagent-flow"
-	       :components ("reagent-flow-static" "reagent-flow-html-docs")))
-
-(add-hook 'org-publish-after-publishing-hook
-          (lambda (orig out) (org-babel-tangle-file orig)))
-#+end_src
-
-
-** Styles
-
-*** Theme
-
-#+begin_src css :tangle docs/css/docs.css
 :root {
     --identity-hs: 218, 100%;
     --identity-hsl: var(--identity-hs), 28%;
@@ -203,12 +50,8 @@ for the documentation-page.
         --dots-hex: #333;
     }
 }
-#+end_src
 
-*** Base
-
-#+begin_src css :tangle docs/css/docs.css
-,*,
+*,
 ::before,
 ::after {
     box-sizing: border-box;
@@ -221,7 +64,7 @@ body {
     margin: 0;
 }
 
-,*:not(input) {
+*:not(input) {
   user-select: none;
 }
 
@@ -253,11 +96,7 @@ body {
 .error button:active {
     background: hsl(var(--warning-hs), 10%);
 }
-#+end_src
-
-*** Typography
 
-#+begin_src css :tangle docs/css/docs.css
 :root {
     --sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI,
       Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
@@ -309,13 +148,7 @@ pre,
 code {
     font-family: var(--monospace);
 }
-#+end_src
-
-
 
-*** xyflow
-
-#+begin_src css :tangle docs/css/docs.css
 .react-flow {
   direction: ltr;
 
@@ -1014,11 +847,7 @@ svg.react-flow__connectionline {
     border-bottom-width: 1px;
     top: 100%;
 }
-#+end_src
-
-*** ReactFlow
 
-#+begin_src css :tangle docs/css/docs.css
 .react-flow__container {
     position: absolute;
     width: 100%;
@@ -1292,11 +1121,7 @@ svg.react-flow__connectionline {
 .react-flow__selection:focus-visible {
     outline: none;
 }
-#+end_src
-
-*** Overrides
 
-#+begin_src css  :tangle docs/css/docs.css
 .react-flow__background {
     background-color: hsl(var(--background-hs), 98%);
 }
@@ -1317,11 +1142,7 @@ svg.react-flow__connectionline {
     border: none !important;
     box-shadow: 0 0.1em 0.2em hsla(0, 30%, 10%, 0.2);
 }
-#+end_src
 
-*** Syntax highlighting
-
-#+begin_src css :tangle docs/css/docs.css
 .org-function-name {
     color: hsl(var(--function-name-hsl));
 }
@@ -1347,9 +1168,7 @@ svg.react-flow__connectionline {
 .org-clojure-keyword {
     color: hsl(var(--keyword-hsl));
 }
-#+end_src
 
-#+begin_src css :tangle docs/css/docs.css
 a {
     color: hsl(var(--primary-hsl));
 }
@@ -1412,11 +1231,7 @@ a {
     font-size: 1.35rem;
     font-weight: 100;
 }
-#+end_src
-
-*** Example specific
 
-#+begin_src css  :tangle docs/css/docs.css
 [data-id="explanation"] {
     background: transparent;
     border: none;
@@ -1490,28 +1305,3 @@ a {
     min-width: 15em;
     padding: 1em;
 }
-
-#+end_src
-
-** Actions
-
-We observe the code-blocks to see when it's in the viewport. When a
-code-block is visible, the code associated will be initialized.
-#+begin_src javascript :tangle docs/js/docs.js
-const main = (w, d) => {
-    const examples = [].slice.call(d.querySelectorAll('[data-src]'));
-    examples.map(example => {
-        const observer = new IntersectionObserver(observed => {
-            const exampleName = example.getAttribute('data-src');
-            if (observed[0].isIntersecting) {
-                w[`${exampleName}`].core.init(example);
-            } else {
-                w[`${exampleName}`].core.unload(example);
-            }
-        });
-        observer.observe(example);
-    }); 
-}
-
-main(window, document);
-#+end_src