demo day video update page

components/demo-day/page.ftd

@@ -0,0 +1,183 @@
+-- import: ui.fifthtry.com/records/demo-day as dd
+
+-- component page:
+caption title:
+optional body body:
+dd.demo-day-video list latest-video-list:
+
+-- ds.section-column:
+margin: $ds.spaces.vertical-gap.zero
+align-content: top-left
+
+-- ds.heading-large: $page.title
+color: $ds.colors.shadow
+
+-- ds.copy-regular: $page.body
+if: { page.body != NULL }
+
+-- ds.row:
+align-content: left
+wrap: true
+spacing: $ds.spaces.horizontal-gap.large
+inset: $ds.spaces.inset-tall.zero-small
+
+-- latest-videos: $obj.title
+for: $obj in $page.latest-video-list
+desc: $obj.desc
+youtube: $obj.youtube
+author-name: $obj.author-name
+author-avatar: $obj.author-avatar
+
+-- end: ds.row
+
+-- end: ds.section-column
+
+-- end: page
+
+
+
+
+-- component latest-videos:
+caption title:
+body desc:
+string youtube:
+string author-name:
+ftd.image-src author-avatar:
+
+-- ds.column:
+width.fixed.px: 430
+align-content: left
+spacing: $ds.spaces.vertical-gap.zero
+background.solid: $ds.colors.background.step-2
+
+-- ftd.iframe:
+youtube: $latest-videos.youtube
+width: fill-container
+border-radius.px: 8
+height.fixed.px: 200
+
+-- ds.column:
+inset: $ds.spaces.inset-wide.medium
+align-content: left
+
+-- ds.heading-medium: $latest-videos.title
+
+-- ds.copy-regular: $latest-videos.desc
+
+-- ds.row: 
+align-content: left
+
+-- ftd.image:
+src: $latest-videos.author-avatar
+width.fixed.px: 50
+height.fixed.px: 50
+border-radius.percent: 100
+fit: cover
+
+-- ds.heading-tiny: $latest-videos.author-name
+color: $ds.colors.info.text
+
+-- end: ds.row
+
+-- end: ds.column
+
+-- end: ds.column
+
+-- end: latest-videos
+
+
+
+
+
+
+
+-- component month-update:
+caption title:
+optional body body:
+dd.months list months-list:
+
+-- ds.section-column:
+margin: $ds.spaces.vertical-gap.zero
+align-content: top-left
+
+-- ds.heading-large: $month-update.title
+color: $ds.colors.shadow
+
+-- ds.copy-regular: $month-update.body
+if: { month-update.body != NULL }
+
+-- ds.row:
+align-content: left
+wrap: true
+spacing: $ds.spaces.horizontal-gap.large
+
+-- months-info: $obj.title
+for: $obj in $month-update.months-list
+date: $obj.date
+
+-- end: ds.row
+
+-- end: ds.section-column
+
+-- end: month-update
+
+
+
+-- component months-info:
+caption title:
+boolean $open: false
+dd.all-date list date:
+
+-- ds.column:
+border: $ds.borders.uniform.small
+align-content: left
+inset: $ds.spaces.inset-wide.medium
+
+-- ds.row:
+$on-click$: $ftd.toggle($a = $months-info.open)
+align-content: left
+spacing: $ds.spaces.horizontal-gap.space-between
+
+-- ds.copy-large: $months-info.title
+
+-- ftd.image:
+src: $assets.files.assets.right-arrow.svg
+src if { months-info.open }: $assets.files.assets.down-arrow.svg
+width.fixed.px: 18
+
+-- end: ds.row
+
+-- ds.row:
+if: { months-info.open }
+align-content: left
+wrap: true
+
+-- date-content: $obj.title
+for: $obj in $months-info.date
+link: $obj.link
+
+-- end: ds.row
+
+-- end: ds.column
+
+-- end: months-info
+
+
+
+
+
+-- component date-content:
+caption title:
+string link:
+
+-- ds.column:
+width.fixed.px: 120
+background.solid: $ds.colors.background.step-1
+inset: $ds.spaces.inset-wide.small
+
+-- ds.copy-regular: $date-content.title
+link: $date-content.link
+
+-- end: ds.column
+
+-- end: date-content

index.ftd

@@ -27,6 +27,7 @@ $processor$: pr.toc
   - Privacy page: /scenarios/about/privacy-page/
   - Blog Homepage: /scenarios/blogs/
   - Blog Post: /scenarios/blogs/blog-post/
+  - Demo Day: /scenarios/demo-day/
 
 - Auth Pages:
   - Login page: /scenarios/signin-page/

pages/demo-day/index.ftd

@@ -0,0 +1,49 @@
+-- import: ui.fifthtry.com/components/demo-day/page as p
+-- import: ui.fifthtry.com/site-data
+-- import: ui.fifthtry.com/records/user-data as ud
+-- import: ui.fifthtry.com/records/demo-day as dd
+
+
+
+
+
+
+
+
+
+
+
+
+-- component page:
+module site-data: site-data
+ud.user-data user-data:
+dd.demo-day-video list latest-video-list:
+dd.months list months-list:
+
+-- ds.section-column:
+inset: $ds.spaces.inset-square.medium
+spacing: $ds.spaces.vertical-gap.large
+margin: $ds.spaces.vertical-gap.large
+align-content: top-left
+
+-- p.page: Latest Demo Day Video Update
+latest-video-list: $page.latest-video-list
+
+FifthTry has a tradition of weekly Demo Days on Fridays. We 
+follow a `demo-day-driven development` approach, where everyone 
+at FifthTry showcases their weekly progress. As an 
+`open-source` company, we build open-source products and aim to 
+make our decision-making process public as well. This event 
+is open to everyone, and you can find the meeting links 
+in our [`Discord community`](https://discord.gg/fastn-stack-793929082483769345). 
+Under the Latest Demo Days, you can 
+find a summary of each team member's contributions from 
+every Friday.
+
+-- p.month-update: Checkout More videos
+months-list: $page.months-list
+
+-- end: ds.section-column
+
+-- end: page
+

records/demo-day.ftd

@@ -0,0 +1,18 @@
+-- record demo-day-video:
+caption title:
+body desc:
+string youtube:
+string author-name:
+ftd.image-src author-avatar:
+
+
+
+-- record months:
+caption title:
+all-date list date:
+
+
+
+-- record all-date:
+caption title:
+string link:

scenarios/demo-day/index.ftd

@@ -0,0 +1,68 @@
+-- import: ui.fifthtry.com/pages/demo-day
+-- import: ui.fifthtry.com/scenarios/john-doe
+-- import: ui.fifthtry.com/records/demo-day as dd
+
+
+
+
+-- demo-day.page:
+user-data: $john-doe.jd
+latest-video-list: $video-data
+months-list: $months-list
+
+
+
+-- dd.demo-day-video list video-data:
+
+-- dd.demo-day-video: Demo day video update #12
+youtube: S465goV853U
+author-name: Meenu Kumari
+author-avatar: $assets.files.assets.team.meenu.jpeg
+
+This video contain the work i did this week.
+This video contain the work i did this week.
+This video contain the work i did this week.
+
+-- dd.demo-day-video: Demo day video update #12
+youtube: S465goV853U
+author-name: Meenu Kumari
+author-avatar: $assets.files.assets.team.meenu.jpeg
+
+This video contain the work i did this week.
+This video contain the work i did this week.
+This video contain the work i did this week.
+
+-- dd.demo-day-video: Demo day video update #12
+youtube: S465goV853U
+author-name: Meenu Kumari
+author-avatar: $assets.files.assets.team.meenu.jpeg
+
+This video contain the work i did this week.
+This video contain the work i did this week.
+This video contain the work i did this week.
+
+-- end: video-data
+
+
+
+
+-- dd.months list months-list:
+
+-- dd.months: Nov
+date: $nov-dates
+
+-- end: months-list
+
+
+-- dd.all-date list nov-dates:
+
+-- dd.all-date: 1st Nov
+link: /
+
+-- dd.all-date: 8th Nov 
+link: /
+
+-- dd.all-date: 15th Nov 
+link: /
+
+-- end: nov-dates