updating frontend to be presentable

This commit is contained in:
yequari 2024-03-03 14:05:19 -07:00
parent 55fd870c81
commit 098d82075d
11 changed files with 102 additions and 41 deletions

View File

@ -13,8 +13,16 @@ func (app *application) home(w http.ResponseWriter, r *http.Request) {
http.NotFound(w, r)
return
}
data := newTemplateData(r)
data.Title = "Home"
app.renderPage(w, http.StatusOK, "home.tmpl.html", nil)
app.renderPage(w, http.StatusOK, "home.tmpl.html", data)
}
func (app *application) feedgenView(w http.ResponseWriter, r *http.Request) {
data := newTemplateData(r)
data.Title = "Feed Generator"
app.renderPage(w, http.StatusOK, "feedgenview.tmpl.html", data)
}
func (app *application) generateRss(w http.ResponseWriter, r *http.Request) {

View File

@ -10,7 +10,8 @@ func (app *application) routes() http.Handler {
r.Handle("/static/*", http.StripPrefix("/static", fileServer))
r.Get("/", app.home)
r.Get("/generate", app.generateRss)
r.Get("/feedgen", app.feedgenView)
r.Get("/feedgen/generate", app.generateRss)
return r
}

View File

@ -10,6 +10,7 @@ import (
type templateData struct {
CurrentYear int
Feeds []string
Title string
}
func newTemplateCache() (map[string]*template.Template, error) {

View File

@ -4,13 +4,23 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/main.css">
<title>RSS Generator</title>
<title>{{ .Title }} - webweav.ing</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/main.js"></script>
</head>
<body>
<div id="wrapper">
<header>
{{ template "header" .}}
</header>
<main>
{{template "main" .}}
</main>
<footer>
<script src="https://tinylytics.app/embed/Tpf2xrC3n_dkzqf1Au1E.js" defer></script>
{{template "footer" .}}
</footer>
</div>
</body>
</html>
{{end}}

View File

@ -1,7 +1,7 @@
{{ range .Feeds }}
<pre tabindex="0">
<code class="">
<h2>Output</h2>
<button id="copy" onclick="copyToClipboard()">Copy to Clipboard</button>
<textarea readonly="true" cols="80" rows="120" id="feed-output">
{{ . }}
</code>
</pre>
</textarea>
{{ end }}

View File

@ -0,0 +1,35 @@
{{define "main"}}
<h1>Feed Generator</h1>
<p>
Generate an RSS feed. The generator will search each of the listed pages for the first <code>&lt;article&gt;</code> element. Inside the <code>&lt;article&gt;</code> element, there must be a <code>&lt;time&gt;</code> element with a valid <code>datetime</code> attribute representing the publish time of the page. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time">MDN <code>&lt;time&gt;</code> element</a> for details. If a page does not include both of these requirements, it will be skipped.
</p>
<form id="generate-form">
<p>
<label>
Site Name:
<input name="site-name" />
</label>
</p>
<p>
<label>
Site URL:
<input name="site-url" />
</label>
</p>
<p>
<label>
Site Description:
<input name="site-description" />
</label>
</p>
<p>
<label>
Pages to Include:
<textarea name="page-urls" cols="40" rows="6">List of URLs, one per line</textarea>
</label>
</p>
<button id="generate-button" hx-get="/feedgen/generate" hx-include="#generate-form" hx-params="*" hx-target="#output">Generate</button>
</form>
<div id="output">
</div>
{{end}}

View File

@ -1,33 +1,2 @@
{{define "main"}}
<h1>yequari's RSS Feed Generator</h1>
<!--<form action="/generate" method="get" id="generate-form">-->
<form id="generate-form">
<p>
<label>
Site Name:
<input name="site-name" />
</label>
</p>
<p>
<label>
Site URL:
<input name="site-url" />
</label>
</p>
<p>
<label>
Site Description:
<input name="site-description" />
</label>
</p>
<p>
<label>
Pages to Include:
<textarea name="page-urls" cols="40" rows="6">List of URLs, one per line</textarea>
</label>
</p>
<button id="generate-button" hx-get="/generate" hx-include="#generate-form" hx-params="*" hx-target="#output">Generate</button>
</form>
<div id="output">
</div>
{{end}}

View File

@ -0,0 +1,5 @@
{{define "footer"}}
<p>
Created by <a href="https://yequari.com">yequari</a>.
</p>
{{end}}

View File

@ -0,0 +1,8 @@
{{ define "header" }}
<h1>Webweav.ing</h1>
<p>Tools for the smallweb</p>
<nav>
<a href="/">Home</a> -
<a href="/feedgen">Feed Generator</a>
</nav>
{{ end }}

View File

@ -1,3 +1,21 @@
#output {
white-space: pre;
}
body {
font-size: 16px;
}
p {
line-height: 1.8;
}
input, textarea {
display: block;
}
#wrapper {
width: 750px;
margin: 0 auto;
}

6
ui/static/js/main.js Normal file
View File

@ -0,0 +1,6 @@
function copyToClipboard() {
const elem = document.getElementById("feed-output")
elem.select()
document.execCommand("copy")
}