diff --git a/api/channels.js b/api/channels.js new file mode 100644 index 0000000..cc352f3 --- /dev/null +++ b/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}) + } + } +] diff --git a/pug/channel.pug b/pug/channel.pug new file mode 100644 index 0000000..fddaf7f --- /dev/null +++ b/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) diff --git a/sass/includes/channel-page.sass b/sass/includes/channel-page.sass new file mode 100644 index 0000000..dcb8fbd --- /dev/null +++ b/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 diff --git a/sass/includes/colors.sass b/sass/includes/colors.sass index b0eec04..63a9903 100644 --- a/sass/includes/colors.sass +++ b/sass/includes/colors.sass @@ -12,3 +12,5 @@ $fg-dim: #bbb $edge-grey: #808080 $link: #72b4f6 + +$power-deep: #c62727 diff --git a/sass/includes/video-list-item.sass b/sass/includes/video-list-item.sass index 680b7d6..810237d 100644 --- a/sass/includes/video-list-item.sass +++ b/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 diff --git a/sass/main.sass b/sass/main.sass index 2c816d8..4f22f46 100644 --- a/sass/main.sass +++ b/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"