Add channels page
This commit is contained in:
parent
fc8b54d07b
commit
b9b1463cff
|
@ -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})
|
||||
}
|
||||
}
|
||||
]
|
|
@ -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)
|
|
@ -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
|
|
@ -12,3 +12,5 @@ $fg-dim: #bbb
|
|||
$edge-grey: #808080
|
||||
|
||||
$link: #72b4f6
|
||||
|
||||
$power-deep: #c62727
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue