feat: form for searching repo

* feat: form for searching repo

* feat: style search form

controller/index.go

@@ -1,6 +1,7 @@
 package controller
 
 import (
+	"fmt"
 	"html/template"
 	"io/fs"
 	"net/http"
@@ -13,5 +14,13 @@ func Index(fsys fs.FS) http.HandlerFunc {
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
+
+	}
+}
+
+func HandleForm(fsys fs.FS) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		url := fmt.Sprintf("/%s/%s", r.FormValue("username"), r.FormValue("repository"))
+		http.Redirect(w, r, url, http.StatusSeeOther)
 	}
 }

main.go

@@ -41,6 +41,9 @@ func main() {
 	r.Path("/").
 		Methods(http.MethodGet).
 		HandlerFunc(controller.Index(static))
+	r.Path("/").
+		Methods(http.MethodPost).
+		HandlerFunc(controller.HandleForm(static))
 	r.PathPrefix("/static/").
 		Methods(http.MethodGet).
 		Handler(http.FileServer(http.FS(static)))

static/styles.css

@@ -93,3 +93,30 @@ div.code {
 	padding-top: 30px;
 	border-top: 1px solid #eee;
 }
+
+div.main>form>input[type=text] { 
+	width: 100%;
+	padding: 12px 20px;
+	margin: 8px 0;
+	display: inline-block;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	box-sizing: border-box;
+	font-family: inherit;
+    font-size: 1rem;
+	color: #555;
+}
+
+div.main>form>input[type=submit] { 
+	width: 100%;
+	background-color: #3F3D56;
+	color: white;
+	padding: 14px 20px;
+	margin: 8px 0;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	font-family: inherit;
+    font-size: 1rem;
+    font-weight: 450;
+}

static/templates/index.html

@@ -65,10 +65,13 @@
 	{{ end }}
 	{{ else }}
 	<div class="main">
-		Check some repository chart by browsing to user/repo, for example,
-		<a href="/caarlos0/starcharts">
-			caarlos0/starcharts
-		</a>
+		<form method="POST">
+			<label for="username">Username</label><br>
+			<input type="text" id="username" name="username"><br><br>
+			<label for="repo">Repository</label><br>
+			<input type="text" id="repository" name="repository"><br><br>
+			<input type="submit" value="Submit">
+		</form>
 	</div>
 	{{ end }}
 	<script src="//cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.min.js"></script>