Merge branch 'main' into host-on-fifthtry

.packages/gargajit.github.io/expander/FASTN.ftd

@@ -0,0 +1,10 @@
+-- import: fastn
+
+-- fastn.package: gargajit.github.io/expander
+
+-- fastn.dependency: fifthtry.github.io/doc-site
+-- fastn.dependency: fifthtry.github.io/forest-cs
+-- fastn.dependency: fifthtry.github.io/admonitions
+-- fastn.dependency: fastn-community.github.io/business-card
+
+-- fastn.auto-import: ds

.packages/gargajit.github.io/expander/index.ftd

@@ -0,0 +1,186 @@
+-- import: fifthtry.github.io/doc-site as ds
+-- import: gargajit.github.io/expander/assets
+-- import: fifthtry.github.io/forest-cs
+-- import: fifthtry.github.io/admonitions as cbox
+
+-- ds.page: Polished Page
+site-logo: $assets.files.images.logo.svg
+colors: $forest-cs.main
+
+In this video we are going to polish our `expander project` and 
+We are going to do the following:
+
+- Use featured components
+- replace `ftd.text` icons on header with images of arrows
+- add `on-mouse` event handlers
+- add buttons by creating a component
+
+
+-- ds.h1: About Expander
+
+`Expander` is a package which has a component called `box`.
+This box has a `header area` and a `body area`.
+
+One can expand or collapse the body area when clicked on the
+header area. It takes user defined content or it also has a default text.
+
+
+-- ds.markdown:
+
+Box can have user-defined values or it can have default values as well.
+Following are the two boxes:
+
+
+-- box: What is FTD?
+
+
+FTD is the innovative programming language for writing prose. 
+Say goodbye to the complexities of traditional programming languages 
+and hello to a simplified and intuitive experience.
+
+FTD language is designed for human beings, not just 
+programmers, we have taken precautions like not 
+requiring quoting for strings, not relying on 
+indentation nor on braces that most programming 
+languages require.
+
+-- ds.markdown:
+
+This box gives `default values`.
+
+-- box:
+
+
+-- ds.markdown:
+
+This looks much better. We can do a lot more.
+
+-- cbox.tip: Tip!
+
+`Doc-site` has a dark-mode switcher on the bottom-right 
+side of the web-page.
+
+-- end: cbox.tip
+
+-- end: ds.page
+
+
+
+
+
+-- component box:
+caption title: Default Header
+body body: Default Body
+boolean $open: false 
+boolean $over: false
+ftd.color headercolor: $header-text-color
+ftd.color bordercolor: $border-color
+ftd.color bodycolor: $body-text-color
+ftd.color hovercolor: $hover-color
+optional ftd.color bg-header: $bg-header
+optional ftd.color bg-body: $bg-body 
+
+
+;; column for box
+-- ftd.column:
+border-width.px: 4
+spacing.fixed.px: 10
+width: fill-container
+border-color: $box.bordercolor
+color: $box.bodycolor
+background.solid: $box.bg-body
+
+
+
+;; header Row
+-- ftd.row:
+width: fill-container
+spacing: space-between
+border-bottom-width.px: 1
+padding.px: 10
+color: $box.headercolor
+background.solid: $box.bg-header
+border-color: $box.bordercolor
+background.solid if { box.over }: $box.hovercolor
+$on-click$: $toggle($value = $box.open)
+$on-mouse-enter$: $ftd.set-bool($a = $box.over, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $box.over, v = false)
+
+
+
+
+-- ftd.text: $box.title
+
+-- ftd.image: 
+src: $assets.files.images.downarrow.png
+width.fixed.px: 20
+if: { !box.open }
+
+
+-- ftd.image: 
+src: $assets.files.images.uparrow.png
+width.fixed.px: 20
+if: { box.open }
+
+-- end: ftd.row
+;; header row ends
+
+
+-- ftd.text: $box.body
+padding.px: 10
+height: hug-content
+if: { box.open }
+
+
+
+-- end: ftd.column
+;; box column ends
+
+-- end: box
+
+
+-- void toggle(value):
+boolean $value:
+
+
+value = !value;
+
+
+
+
+
+
+
+-- ftd.color bg-header:
+light: #f1f8ff
+dark: #235294
+
+
+
+-- ftd.color bg-body:
+light: #f1f8ff
+dark: #235294
+
+
+
+-- ftd.color header-text-color:
+light: #858692
+dark: #e2e8ec
+
+
+
+-- ftd.color body-text-color:
+light: #3f3e43
+dark: #e2e8ec
+
+
+
+-- ftd.color border-color:
+light: #79ad9e
+dark: #a0b2c1
+
+
+-- ftd.color hover-color:
+light: #b7e7d9
+dark: #5276a9
+

FASTN.ftd

@@ -919,14 +919,16 @@ skip: true
 
 # Blog: /blog/
 
+- Design System Package Tutorial (Part 2): /blog/design-system-part-2/
+  document: blog/design-system-part-2.ftd
+- Design System Package Tutorial (Part 1): /blog/design-system/
+  document: blog/design-system.ftd
 - Building Your Personal Website with fastn: /blog/personal-website-1/
   document: blog/personal-website-1.ftd
 - Content Library: /blog/content-library/
   document: blog/content-library.ftd
 - Memory, Mutability and Reactivity: /blog/strongly-typed/
   document: blog/strongly-typed.ftd
-- Design System Package Tutorial (Part 1): /blog/design-system/
-  document: blog/design-system.ftd
 - Domain Components: /blog/domain-components/
   document: blog/domain-components.ftd
 - Search Feature in fastn.com: /blog/search/