Add channels page

api/channels.js

@@ -0,0 +1,12 @@
+const fetch = require("node-fetch")
+const {render} = require("pinski/plugins")
+
+module.exports = [
+	{
+		route: "/channel/([A-Za-z0-9-_]+)", methods: ["GET"], code: async ({fill}) => {
+			const id = fill[0]
+			const data = await fetch(`http://localhost:3000/api/v1/channels/${id}`).then(res => res.json())
+			return render(200, "pug/channel.pug", {data})
+		}
+	}
+]

pug/channel.pug

@@ -0,0 +1,28 @@
+extends includes/layout.pug
+
+include includes/video-list-item.pug
+
+block content
+  main.channel-page
+    - const banner = data.authorBanners.slice(-1)[0]
+    if banner
+      .banner
+        img(src=banner.url width=banner.width height=banner.height alt="").banner-image
+
+    .channel-data
+      .info
+        - const thumbnail = data.authorThumbnails.slice(-1)[0]
+        if thumbnail
+          .logo
+            img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image
+        .about
+          .name= data.author
+          .subscribers= data.second__subCountText || `${data.subCount} subscribers`
+        form(method="post" action=`/formapi/subscribe/${data.authorId}`).subscribe
+          button.subscribe-button.base-border-look Subscribe
+      .description!= data.descriptionHtml
+
+    .videos
+      each video in data.latestVideos
+        .channel-video
+          +video_list_item(video)

sass/includes/channel-page.sass

@@ -0,0 +1,63 @@
+@use "colors.sass" as c
+@use "video-list-item.sass" as *
+
+.channel-page
+  padding: 40px 20px 20px
+  max-width: 900px
+  margin: 0 auto
+
+.banner
+  display: flex
+
+.banner-image
+  width: 100%
+  height: auto
+  border-radius: 8px
+
+.channel-data
+  background-color: c.$bg-darker
+  padding: 24px
+  margin: 12px 0px 24px
+  border-radius: 8px
+
+  .info
+    display: flex
+
+    .thumbnail-image
+      $size: 120px
+
+      width: $size
+      height: $size
+      border-radius: 50%
+      margin-right: 24px
+
+    .about
+      flex: 1
+      margin-top: 10px
+
+      .name
+        font-size: 30px
+        color: c.$fg-bright
+
+      .subscribers
+        color: c.$fg-main
+        font-size: 18px
+
+    .subscribe
+      margin-top: 24px
+
+      .subscribe-button
+        $padding: 14px
+
+        padding: $padding - 2px $padding $padding
+        line-height: 1
+        border-radius: 8px
+        font-size: 22px
+        background-color: c.$power-deep
+        border: none
+
+  .description
+    margin-top: 16px
+
+.channel-video
+  @include channel-video

sass/includes/colors.sass

@@ -12,3 +12,5 @@ $fg-dim: #bbb
 $edge-grey: #808080
 
 $link: #72b4f6
+
+$power-deep: #c62727

sass/includes/video-list-item.sass

@@ -48,3 +48,49 @@
     &:hover, &:active
       color: c.$fg-bright
       text-decoration: underline
+
+@mixin recommendation-item
+  @include video-list-item
+
+@mixin large-item
+  @include video-list-item
+
+  grid-gap: 16px
+  grid-template-columns: 240px 1fr
+  margin-bottom: 20px
+  overflow: hidden
+
+  .image
+    width: 240px
+    height: 135px
+
+  .duration
+    font-size: 17px
+    padding: 4px 5px
+    right: 5px
+    bottom: 5px
+
+  .title
+    font-size: 24px
+
+  .author-line
+    font-size: 15px
+    color: c.$fg-main
+
+  .author
+    color: c.$fg-main
+
+  .description
+    margin-top: 16px
+    font-size: 15px
+    color: c.$fg-dim
+
+@mixin search-result
+  @include large-item
+
+  .description b
+    font-weight: normal
+    color: c.$fg-main
+
+@mixin channel-video
+  @include large-item

sass/main.sass

@@ -4,6 +4,7 @@
 @use "includes/video-page.sass"
 @use "includes/search-page.sass"
 @use "includes/home-page.sass"
+@use "includes/channel-page.sass"
 
 @font-face
   font-family: "Bariol"