note.el

(require 'svg)

(let* ((checkbox (propertize
                  "☐"
                  'display (append
                            (svg-image `(svg
                                         ((width . "16pt")
                                          (height . "16pt"))
                                         (rect ((x . "1px")
                                                (y . "1px")
                                                (width . "18px")
                                                (height . "18px")
                                                (rx . "4px")
                                                (ry . "4px")
                                                (fill . "none")
                                                (stroke . "#ccc")
                                                (stroke-width . "2px")))))
                            (list :ascent 90))))
       (bar (propertize
             "|"
             'display (append
                       (svg-image `(svg
                                    ((width . "14pt")
                                     (height . "24pt"))
                                    (rect ((x . "0px")
                                           (y . "0px")
                                           (width . "4pt")
                                           (height . "24pt")
                                           (fill . "#ccc")))))
                       (list :ascent 70))))
       (normal-face (list :family "Noto Sans"
                          :height 140
                          :foreground "#333"))
       (title-face (append normal-face (list :height 240)))
       (heading-face (append normal-face (list :height 200)))
       (bold-face (append normal-face (list :weight 'bold)))
       (quote-face (append normal-face (list :foreground "#666"))))
  (insert (concat
           (concat
            (propertize
             "👋"
             'display (append (svg-image `(svg
                                           ((width . "28pt")
                                            (height . "24pt"))
                                           (text ((x . 0)
                                                  (y . "19pt")
                                                  (font-size . "24pt")) "👋")))
                              (list :ascent 100)))
            (propertize " Welcome to AppFlowy!\n" 'face title-face))
           (propertize "\n" 'face heading-face)
           (propertize "Here are the basics:\n" 'face heading-face)
           (propertize "Click anywhere and just start typing\n"
                       'face normal-face
                       'line-prefix (concat checkbox " ")
                       'wrap-prefix "   ")
           (propertize
            (concat
             (propertize "Highlight any text, and use the menu at the bottom to " 'face normal-face)
             (propertize "style" 'face (append normal-face (list :slant 'italic)))
             (propertize " " 'face normal-face)
             (propertize "your" 'face (append normal-face (list :underline t)))
             (propertize " " 'face normal-face)
             (propertize "writing" 'face (append normal-face (list :background "#e1d1ff")))
             (propertize " " 'face normal-face)
             (propertize "however" 'face (append normal-face (list :height 120 :foreground "#6a73b0")))
             (propertize " " 'face normal-face)
             (propertize "you" 'face (append normal-face (list :strike-through t)))
             (propertize " " 'face normal-face)
             (propertize "like" 'face (append normal-face (list :background "#fff0ab")))
             (propertize "\n" 'face normal-face))
            'line-prefix (concat checkbox " ")
            'wrap-prefix "   ")
           (propertize
            (concat
             (propertize "Click " 'face normal-face)
             (propertize "+ New Page" 'face bold-face)
             (propertize " button at the bottom of your sidebar to add a new page\n" 'face normal-face))
            'line-prefix (concat checkbox " ")
            'wrap-prefix "   ")
           (propertize
            (concat
             (propertize "Click the '" 'face normal-face)
             (propertize "+" 'face bold-face)
             (propertize "' next to any page title in the sidebar to quickly add a new subpage\n" 'face normal-face))
            'line-prefix (concat checkbox " ")
            'wrap-prefix "   ")
           (propertize "\n" 'face heading-face)
           (propertize "Have a question?\n" 'face heading-face)
           (concat
            (propertize "Click the '" 'face normal-face)
            (propertize "?" 'face bold-face)
            (propertize "' at the bottom right for help and support.\n" 'face normal-face))
           (propertize "\n" 'face heading-face)
           (propertize "Like AppFlowy? Folow us:\n" 'face heading-face)
           (propertize "Github: https://github.com/AppFlowy-IO/appflowy\n"
                       'face quote-face
                       'line-prefix (concat bar " ")
                       'wrap-prefix "   ")
           (propertize "Twitter: https://twitter.com/appflowy\n"
                       'face quote-face
                       'line-prefix (concat bar " ")
                       'wrap-prefix "   ")
           (propertize "Newsletter: https://appflowy.io/blog\n"
                       'face quote-face
                       'line-prefix (concat bar " ")
                       'wrap-prefix "   ")))
  (setq-local fringes-outside-margins t)
  (set-window-buffer nil (current-buffer))
  (set-window-margins nil 5 5))