From ff1f32a698bb04ad60b7a9662322f6dfa86f7038 Mon Sep 17 00:00:00 2001 From: Nathan Wagner Date: Sat, 5 Aug 2023 19:09:31 +0000 Subject: [PATCH] more work starting 2.9 --- snippetbox/{main.go => cmd/web/handlers.go} | 28 +- snippetbox/cmd/web/main.go | 18 ++ snippetbox/ui/html/base.tmpl | 26 ++ snippetbox/ui/html/pages/home.tmpl | 6 + snippetbox/ui/html/partials/nav.tmpl | 5 + snippetbox/ui/static/css/main.css | 313 ++++++++++++++++++++ snippetbox/ui/static/img/favicon.ico | Bin 0 -> 1150 bytes snippetbox/ui/static/img/logo.png | Bin 0 -> 1075 bytes snippetbox/ui/static/js/main.js | 8 + 9 files changed, 393 insertions(+), 11 deletions(-) rename snippetbox/{main.go => cmd/web/handlers.go} (59%) create mode 100644 snippetbox/cmd/web/main.go create mode 100644 snippetbox/ui/html/base.tmpl create mode 100644 snippetbox/ui/html/pages/home.tmpl create mode 100644 snippetbox/ui/html/partials/nav.tmpl create mode 100755 snippetbox/ui/static/css/main.css create mode 100755 snippetbox/ui/static/img/favicon.ico create mode 100755 snippetbox/ui/static/img/logo.png create mode 100755 snippetbox/ui/static/js/main.js diff --git a/snippetbox/main.go b/snippetbox/cmd/web/handlers.go similarity index 59% rename from snippetbox/main.go rename to snippetbox/cmd/web/handlers.go index 73c2e8c..57727e5 100644 --- a/snippetbox/main.go +++ b/snippetbox/cmd/web/handlers.go @@ -2,6 +2,7 @@ package main import ( "fmt" + "html/template" "log" "net/http" "strconv" @@ -12,7 +13,22 @@ func home(w http.ResponseWriter, r *http.Request) { http.NotFound(w, r) return } - w.Write([]byte("hello from Snippetbox")) + files := []string{ + "./ui/html/base.tmpl", + "./ui/html/partials/nav.tmpl", + "./ui/html/pages/home.tmpl", + } + ts, err := template.ParseFiles(files...) + if err != nil { + log.Print(err.Error()) + http.Error(w, "Internal Server Error", http.StatusInternalServerError) + return + } + err = ts.ExecuteTemplate(w, "base", nil) + if err != nil { + log.Print(err.Error()) + http.Error(w, "Internal Server Error", http.StatusInternalServerError) + } } func snippetView(w http.ResponseWriter, r *http.Request) { @@ -31,13 +47,3 @@ func snippetCreate(w http.ResponseWriter, r *http.Request) { } w.Write([]byte("Create a new snippet")) } - -func main() { - mux := http.NewServeMux() - mux.HandleFunc("/", home) - mux.HandleFunc("/snippet/view", snippetView) - mux.HandleFunc("/snippet/create", snippetCreate) - log.Print("Starting server on :4000") - err := http.ListenAndServe(":4000", mux) - log.Fatal(err) -} diff --git a/snippetbox/cmd/web/main.go b/snippetbox/cmd/web/main.go new file mode 100644 index 0000000..d86d205 --- /dev/null +++ b/snippetbox/cmd/web/main.go @@ -0,0 +1,18 @@ +package main + +import ( + "log" + "net/http" +) + +func main() { + mux := http.NewServeMux() + fileServer := http.FileServer(http.Dir("./ui/static/")) + mux.Handle("/static/", http.StripPrefix("/static", fileServer)) + mux.HandleFunc("/", home) + mux.HandleFunc("/snippet/view", snippetView) + mux.HandleFunc("/snippet/create", snippetCreate) + log.Print("Starting server on :4000") + err := http.ListenAndServe(":4000", mux) + log.Fatal(err) +} diff --git a/snippetbox/ui/html/base.tmpl b/snippetbox/ui/html/base.tmpl new file mode 100644 index 0000000..8798a20 --- /dev/null +++ b/snippetbox/ui/html/base.tmpl @@ -0,0 +1,26 @@ +{{define "base"}} + + + + + {{template "title" .}} - Snippetbox + + + + + + + +
+

Snippetbox

+
+ {{template "nav" .}} +
+ {{template "main" .}} +
+ + + + + +{{end}} \ No newline at end of file diff --git a/snippetbox/ui/html/pages/home.tmpl b/snippetbox/ui/html/pages/home.tmpl new file mode 100644 index 0000000..968e57e --- /dev/null +++ b/snippetbox/ui/html/pages/home.tmpl @@ -0,0 +1,6 @@ +{{define "title"}}Home{{end}} + +{{define "main"}} +

Latest Snippets

+

There's nothing to see here yet!

+{{end}} \ No newline at end of file diff --git a/snippetbox/ui/html/partials/nav.tmpl b/snippetbox/ui/html/partials/nav.tmpl new file mode 100644 index 0000000..e5222bf --- /dev/null +++ b/snippetbox/ui/html/partials/nav.tmpl @@ -0,0 +1,5 @@ +{{define "nav"}} + +{{end}} \ No newline at end of file diff --git a/snippetbox/ui/static/css/main.css b/snippetbox/ui/static/css/main.css new file mode 100755 index 0000000..52e00f4 --- /dev/null +++ b/snippetbox/ui/static/css/main.css @@ -0,0 +1,313 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 18px; + font-family: "Ubuntu Mono", monospace; +} + +html, body { + height: 100%; +} + +body { + line-height: 1.5; + background-color: #F1F3F6; + color: #34495E; + overflow-y: scroll; +} + +header, nav, main, footer { + padding: 2px calc((100% - 800px) / 2) 0; +} + +main { + margin-top: 54px; + margin-bottom: 54px; + min-height: calc(100vh - 345px); + overflow: auto; +} + +h1 a { + font-size: 36px; + font-weight: bold; + background-image: url("/static/img/logo.png"); + background-repeat: no-repeat; + background-position: 0px 0px; + height: 36px; + padding-left: 50px; + position: relative; +} + +h1 a:hover { + text-decoration: none; + color: #34495E; +} + +h2 { + font-size: 22px; + margin-bottom: 36px; + position: relative; + top: -9px; +} + +a { + color: #62CB31; + text-decoration: none; +} + +a:hover { + color: #4EB722; + text-decoration: underline; +} + +textarea, input:not([type="submit"]) { + font-size: 18px; + font-family: "Ubuntu Mono", monospace; +} + +header { + background-image: -webkit-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: -moz-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: -ms-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: linear-gradient(to right, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-size: 100% 6px; + background-repeat: no-repeat; + border-bottom: 1px solid #E4E5E7; + overflow: auto; + padding-top: 33px; + padding-bottom: 27px; + text-align: center; +} + +header a { + color: #34495E; + text-decoration: none; +} + +nav { + border-bottom: 1px solid #E4E5E7; + padding-top: 17px; + padding-bottom: 15px; + background: #F7F9FA; + height: 60px; + color: #6A6C6F; +} + +nav a { + margin-right: 1.5em; + display: inline-block; +} + +nav form { + display: inline-block; + margin-left: 1.5em; +} + +nav div { + width: 50%; + float: left; +} + +nav div:last-child { + text-align: right; +} + +nav div:last-child a { + margin-left: 1.5em; + margin-right: 0; +} + +nav a.live { + color: #34495E; + cursor: default; +} + +nav a.live:hover { + text-decoration: none; +} + +nav a.live:after { + content: ''; + display: block; + position: relative; + left: calc(50% - 7px); + top: 9px; + width: 14px; + height: 14px; + background: #F7F9FA; + border-left: 1px solid #E4E5E7; + border-bottom: 1px solid #E4E5E7; + -moz-transform: rotate(45deg); + -webkit-transform: rotate(-45deg); +} + +a.button, input[type="submit"] { + background-color: #62CB31; + border-radius: 3px; + color: #FFFFFF; + padding: 18px 27px; + border: none; + display: inline-block; + margin-top: 18px; + font-weight: 700; +} + +a.button:hover, input[type="submit"]:hover { + background-color: #4EB722; + color: #FFFFFF; + cursor: pointer; + text-decoration: none; +} + +form div { + margin-bottom: 18px; +} + +form div:last-child { + border-top: 1px dashed #E4E5E7; +} + +form input[type="radio"] { + margin-left: 18px; +} + +form input[type="text"], form input[type="password"], form input[type="email"] { + padding: 0.75em 18px; + width: 100%; +} + +form input[type=text], form input[type="password"], form input[type="email"], textarea { + color: #6A6C6F; + background: #FFFFFF; + border: 1px solid #E4E5E7; + border-radius: 3px; +} + +form label { + display: inline-block; + margin-bottom: 9px; +} + +.error { + color: #C0392B; + font-weight: bold; + display: block; +} + +.error + textarea, .error + input { + border-color: #C0392B !important; + border-width: 2px !important; +} + +textarea { + padding: 18px; + width: 100%; + height: 266px; +} + +button { + background: none; + padding: 0; + border: none; + color: #62CB31; + text-decoration: none; +} + +button:hover { + color: #4EB722; + text-decoration: underline; + cursor: pointer; +} + +.snippet { + background-color: #FFFFFF; + border: 1px solid #E4E5E7; + border-radius: 3px; +} + +.snippet pre { + padding: 18px; + border-top: 1px solid #E4E5E7; + border-bottom: 1px solid #E4E5E7; +} + +.snippet .metadata { + background-color: #F7F9FA; + color: #6A6C6F; + padding: 0.75em 18px; + overflow: auto; +} + +.snippet .metadata span { + float: right; +} + +.snippet .metadata strong { + color: #34495E; +} + +.snippet .metadata time { + display: inline-block; +} + +.snippet .metadata time:first-child { + float: left; +} + +.snippet .metadata time:last-child { + float: right; +} + +div.flash { + color: #FFFFFF; + font-weight: bold; + background-color: #34495E; + padding: 18px; + margin-bottom: 36px; + text-align: center; +} + +div.error { + color: #FFFFFF; + background-color: #C0392B; + padding: 18px; + margin-bottom: 36px; + font-weight: bold; + text-align: center; +} + +table { + background: white; + border: 1px solid #E4E5E7; + border-collapse: collapse; + width: 100%; +} + +td, th { + text-align: left; + padding: 9px 18px; +} + +th:last-child, td:last-child { + text-align: right; + color: #6A6C6F; +} + +tr { + border-bottom: 1px solid #E4E5E7; +} + +tr:nth-child(2n) { + background-color: #F7F9FA; +} + +footer { + border-top: 1px solid #E4E5E7; + padding-top: 17px; + padding-bottom: 15px; + background: #F7F9FA; + height: 60px; + color: #6A6C6F; + text-align: center; +} diff --git a/snippetbox/ui/static/img/favicon.ico b/snippetbox/ui/static/img/favicon.ico new file mode 100755 index 0000000000000000000000000000000000000000..739e573d2877f4ef267f20783bf8b86b046f568a GIT binary patch literal 1150 zcmcIiJxc>Y5S^$f8b4wX8w*85Bw!%fJ2jOjin%>wc||bUixGm>{(z`hh*;QI+FAzu z0}|~8MFdN2(pYFE34YF8a&dF!#Kt?`&Fsv3vpcr~;KMf%0Q`=?dK_`9F($#qndOe&>umR*ABi<388G}vc7FZwoRj@)T z9v!O-YL01!+S8nEBIoIw+e~lQDO+6GHMLN;QwKFSvd-~;?(dw#wk1hlJ6}V-$@v@e z|E(8#G`zy6d!2sV_Lu!D!cg{e3D!j%i?a>XKK@aE>fDiO#yaW#sK#1678C|M!Wyqm z9g5RKYuw{DW2kyH0zOMuk{EwLln~i`9$F}e{e*;WiZ$3^6kea5MHn+5m+Ojs{r literal 0 HcmV?d00001 diff --git a/snippetbox/ui/static/img/logo.png b/snippetbox/ui/static/img/logo.png new file mode 100755 index 0000000000000000000000000000000000000000..4681437626a70fac0f4ccbe8a8625d568ca0c1a9 GIT binary patch literal 1075 zcmV-31kC%1P)P*ITtQ>;|2+IXQ*O+y7S_>k--pe`uby1NOXt@xlO*##3KULyD)S_Dbd zCYx@vb9_j*Y?5!UCVA@bX?Nz#`Tyse`Q|$#6i9VL%TCn3W8sz}<u9$&p zPgA4936MK-Ogd%Z*j!nxb0QFk7i^%)$jo)?=u=mS?8m`wf|dqF_%R2eH(Wji41lBz05#$L(5LZeu{GY3JWjg zJZkojhI`Hdm}INk#LXz1S6LjO#FAK_{Bvb}f1e!tdDETSKQhML1XQeo@I2^;T0H+? zG}u3$Y;@d&)%DGLRJ0S=z7om;XRMgENU&$zq0gC`nwsJn*R78$`X;ckK9!UUUlBRqx%M5UH0c zkJqyBBtEy+wnqp0CY=VjYg@L8NpvDopFvnr`ox$QMuI)(9VhgFcXK?U#{_vqU|Om? zUQOwDd{mvY8*0N1cE>#3y%lKdq?$88&8?*#&ZM22KX75)|E z@Mx&l4>;voFfG!x^o+@5AQ=+1HqjOx==;hsaYM_d+1Z&36XyaKocb&GHf<}i(y37A zm_56J1r$z~sCn+2aL=#VVqww7&G;?J*}!FH1y0V!VsE6IvDFe``r%9R=161shl?t{S*%z>wzrUJDe|2=Xql?1Qrg#1&4Mkx=hJO_;k; z4X>HBFeFwgBOzZ$F+gOn=Lf)(?-i^7ezHP)H0V2>Y*@4jM?(Hnv9h^sBD4Yjtf26; z!i&?C??@E~hZ^tlWwOg%_vj~LStm&;=2uF+7hFBfru{{V*OjVckBO>O`H002ovPDHLkV1gQd^sE2? literal 0 HcmV?d00001 diff --git a/snippetbox/ui/static/js/main.js b/snippetbox/ui/static/js/main.js new file mode 100755 index 0000000..886bacb --- /dev/null +++ b/snippetbox/ui/static/js/main.js @@ -0,0 +1,8 @@ +var navLinks = document.querySelectorAll("nav a"); +for (var i = 0; i < navLinks.length; i++) { + var link = navLinks[i] + if (link.getAttribute('href') == window.location.pathname) { + link.classList.add("live"); + break; + } +} \ No newline at end of file