From 2cc6a2912aa5549d9aa0808418e8c87b9aec9eec Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Mon, 24 Aug 2020 22:43:55 +1200 Subject: [PATCH] Add home page and search page --- api/search.js | 14 ++++++++ pug/home.pug | 11 +++++++ pug/includes/layout.pug | 3 +- pug/includes/video-list-item.pug | 16 +++++++++ pug/search.pug | 9 ++++++ pug/video.pug | 13 ++------ sass/includes/base.sass | 3 ++ sass/includes/home-page.sass | 36 +++++++++++++++++++++ sass/includes/search-page.sass | 44 +++++++++++++++++++++++++ sass/includes/video-list-item.sass | 50 ++++++++++++++++++++++++++++ sass/includes/video-page.sass | 52 +++--------------------------- sass/main.sass | 23 +++++++++---- server.js | 5 +-- 13 files changed, 210 insertions(+), 69 deletions(-) create mode 100644 api/search.js create mode 100644 pug/home.pug create mode 100644 pug/includes/video-list-item.pug create mode 100644 pug/search.pug create mode 100644 sass/includes/home-page.sass create mode 100644 sass/includes/search-page.sass create mode 100644 sass/includes/video-list-item.sass diff --git a/api/search.js b/api/search.js new file mode 100644 index 0000000..26b79e6 --- /dev/null +++ b/api/search.js @@ -0,0 +1,14 @@ +const fetch = require("node-fetch") +const {render} = require("pinski/plugins") + +module.exports = [ + { + route: "/(?:search|results)", methods: ["GET"], code: async ({url}) => { + const query = url.searchParams.get("q") || url.searchParams.get("search_query") + const fetchURL = new URL("http://localhost:3000/api/v1/search") + fetchURL.searchParams.set("q", query) + const results = await fetch(fetchURL.toString()).then(res => res.json()) + return render(200, "pug/search.pug", {results}) + } + } +] diff --git a/pug/home.pug b/pug/home.pug new file mode 100644 index 0000000..575d011 --- /dev/null +++ b/pug/home.pug @@ -0,0 +1,11 @@ +extends includes/layout.pug + +block content + main.home-page + h1.top-header CloudTube + h2.tagline An alternative front-end for YouTube. + .encouraging-message + p You're in control. Watch things your way. + p Go on. What do you want to watch? + form(method="get" action="/search").encouraging-search-form + input(type="text" name="q" placeholder="I'd like to watch..." autocomplete="off").search.base-border-look diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug index 438574a..23c56e8 100644 --- a/pug/includes/layout.pug +++ b/pug/includes/layout.pug @@ -10,6 +10,7 @@ html body.show-focus nav.main-nav a(href="/").link.home CloudTube - input(type="text" placeholder="Search" name="q" autocomplete="off").search + form(method="get" action="/search").search-form + input(type="text" placeholder="Search" name="q" autocomplete="off").search block content diff --git a/pug/includes/video-list-item.pug b/pug/includes/video-list-item.pug new file mode 100644 index 0000000..5b7d065 --- /dev/null +++ b/pug/includes/video-list-item.pug @@ -0,0 +1,16 @@ +mixin video_list_item(video) + - let link = `/watch?v=${video.videoId}` + a(href=link).thumbnail + img(src=`https://i.ytimg.com/vi/${video.videoId}/mqdefault.jpg` width=320 height=180 alt="").image + span.duration= video.second__lengthText + .info + div.title: a(href=link).title-link= video.title + div.author-line + a(href=`/channel/${video.authorId}`).author= video.author + if video.publishedText + = ` • ` + span.published= video.publishedText + = ` • ` + span.views= video.viewCountText || video.second__viewCountText + if video.descriptionHtml + div.description!= video.descriptionHtml \ No newline at end of file diff --git a/pug/search.pug b/pug/search.pug new file mode 100644 index 0000000..2c58d31 --- /dev/null +++ b/pug/search.pug @@ -0,0 +1,9 @@ +extends includes/layout.pug + +include includes/video-list-item.pug + +block content + main.search-page + each result in results + .search-result + +video_list_item(result) \ No newline at end of file diff --git a/pug/video.pug b/pug/video.pug index b16718f..57cad7b 100644 --- a/pug/video.pug +++ b/pug/video.pug @@ -1,5 +1,7 @@ extends includes/layout.pug +include includes/video-list-item.pug + block head title= video.title script(type="module" src=getStaticURL("html", "/static/js/player.js")) @@ -56,13 +58,4 @@ block content h2.related-header Related videos each r in video.recommendedVideos .related-video - - let link = `/watch?v=${r.videoId}` - a(href=link).thumbnail - img(src=`https://i.ytimg.com/vi/${r.videoId}/mqdefault.jpg` width=320 height=180 alt="").image - span.duration= r.second__lengthText - .info - div.title: a(href=link).title-link= r.title - div.author-line - a(href=`/channel/${authorId}`).author= r.author - = ` • ` - span.views= r.viewCountText + +video_list_item(r) diff --git a/sass/includes/base.sass b/sass/includes/base.sass index 33eeef1..50d33a9 100644 --- a/sass/includes/base.sass +++ b/sass/includes/base.sass @@ -18,6 +18,9 @@ input, select, button button cursor: pointer +:focus + outline: none + :-moz-focusring outline: none diff --git a/sass/includes/home-page.sass b/sass/includes/home-page.sass new file mode 100644 index 0000000..bee8046 --- /dev/null +++ b/sass/includes/home-page.sass @@ -0,0 +1,36 @@ +@use "colors.sass" as c + +.home-page + padding: 40px + +.top-header + font-size: 48px + text-align: center + +.tagline + font-size: 30px + text-align: center + +.encouraging-message + max-width: max-content + margin: 0 auto + text-align: center + padding: 16px + border-radius: 4px + font-size: 20px + background-color: c.$bg-darker + color: c.$fg-main + + p + margin: 0 32px + + &:not(:last-child) + margin-bottom: 0.6em + +.encouraging-search-form + display: flex + + .search + margin-top: 16px + flex: 1 + font-size: 18px diff --git a/sass/includes/search-page.sass b/sass/includes/search-page.sass new file mode 100644 index 0000000..070b291 --- /dev/null +++ b/sass/includes/search-page.sass @@ -0,0 +1,44 @@ +@use "video-list-item.sass" as * +@use "colors.sass" as c + +.search-page + padding: 40px 20px 20px + max-width: 900px + margin: 0 auto + +.search-result + @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 + + b + font-weight: normal + color: c.$fg-main diff --git a/sass/includes/video-list-item.sass b/sass/includes/video-list-item.sass new file mode 100644 index 0000000..680b7d6 --- /dev/null +++ b/sass/includes/video-list-item.sass @@ -0,0 +1,50 @@ +@use "colors.sass" as c + +@mixin video-list-item + display: grid + grid-template-columns: 160px 1fr + grid-gap: 8px + align-items: start + align-content: start + margin-bottom: 12px + + .thumbnail + position: relative + display: flex + background: c.$bg-darkest + + .image + width: 160px + height: 90px + + .duration + position: absolute + bottom: 3px + right: 3px + color: c.$fg-bright + font-size: 14px + background: rgba(20, 20, 20, 0.85) + line-height: 1 + padding: 3px 5px 4px + border-radius: 4px + + .title + font-size: 15px + line-height: 1.2 + + .title-link + color: c.$fg-main + text-decoration: none + + .author-line + margin-top: 4px + font-size: 15px + color: c.$fg-dim + + .author + color: c.$fg-dim + text-decoration: none + + &:hover, &:active + color: c.$fg-bright + text-decoration: underline diff --git a/sass/includes/video-page.sass b/sass/includes/video-page.sass index 51afc9b..b8447cb 100644 --- a/sass/includes/video-page.sass +++ b/sass/includes/video-page.sass @@ -1,4 +1,5 @@ @use "colors.sass" as c +@use "video-list-item.sass" as * .video-page display: grid @@ -44,7 +45,8 @@ .info-secondary display: flex flex-direction: column - align-items: end + align-items: flex-end + text-align: right margin-top: 6px margin-left: 6px @@ -68,50 +70,4 @@ font-size: 26px .related-video - display: grid - grid-template-columns: 160px 1fr - grid-gap: 8px - align-items: start - align-content: start - margin-bottom: 16px - - .thumbnail - position: relative - display: flex - background: c.$bg-darkest - - .image - width: 160px - height: 90px - - .duration - position: absolute - bottom: 3px - right: 3px - color: c.$fg-bright - font-size: 14px - background: rgba(20, 20, 20, 0.85) - line-height: 1 - padding: 3px 5px 4px - border-radius: 4px - - .title - font-size: 15px - line-height: 1.2 - - .title-link - color: c.$fg-main - text-decoration: none - - .author-line - margin-top: 4px - font-size: 15px - color: c.$fg-dim - - .author - color: c.$fg-dim - text-decoration: none - - &:hover, &:active - color: c.$fg-bright - text-decoration: underline + @include video-list-item diff --git a/sass/main.sass b/sass/main.sass index 787d6b7..2c816d8 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -2,6 +2,8 @@ @use "includes/colors.sass" as c @use "sass:selector" @use "includes/video-page.sass" +@use "includes/search-page.sass" +@use "includes/home-page.sass" @font-face font-family: "Bariol" @@ -52,6 +54,9 @@ &:active background-color: c.$bg-dark +.base-border-look + @include border-button + .border-look @include border-button @include button-size @@ -78,11 +83,17 @@ &:focus, &:hover background-color: c.$bg-accent-x - .search - @include button-bg + .search-form + display: flex flex: 1 - margin: 1px + align-items: center - &:hover, &:focus - border: 1px solid c.$edge-grey - margin: 0px + .search + @include button-bg + padding: 10px + flex: 1 + margin: 1px + + &:hover, &:focus + border: 1px solid c.$edge-grey + margin: 0px diff --git a/server.js b/server.js index 01551a4..39e468e 100644 --- a/server.js +++ b/server.js @@ -13,6 +13,7 @@ server.addSassDir("sass", ["sass/includes"]) server.addRoute("/static/css/main.css", "sass/main.sass", "sass") server.addPugDir("pug", ["pug/includes"]) +server.addRoute("/", "pug/home.pug", "pug") server.addStaticHashTableDir("html/static/js") server.addStaticHashTableDir("html/static/js/elemjs") @@ -20,7 +21,3 @@ server.addStaticHashTableDir("html/static/js/elemjs") server.addAPIDir("api") server.startServer() - -setTimeout(() => { - console.log(server.staticFileTable, server.pageHandlers) -}, 2000)