212 lines
5.9 KiB
Plaintext
212 lines
5.9 KiB
Plaintext
package views
|
|
|
|
import "fmt"
|
|
import "git.32bit.cafe/32bitcafe/guestbook/internal/models"
|
|
import "git.32bit.cafe/32bitcafe/guestbook/internal/forms"
|
|
|
|
func wUrl(w models.Website) string {
|
|
return fmt.Sprintf("/websites/%s", shortIdToSlug(w.ShortId))
|
|
}
|
|
|
|
templ wSidebar(website models.Website) {
|
|
{{ dashUrl := wUrl(website) + "/dashboard" }}
|
|
{{ gbUrl := wUrl(website) + "/guestbook" }}
|
|
<nav>
|
|
<div>
|
|
<h2>{ website.Name }</h2>
|
|
<ul>
|
|
<li><a href={ templ.URL(dashUrl) }>Dashboard</a></li>
|
|
<li><a href={ templ.URL(externalUrl(website.SiteUrl)) } target="_blank">View Website</a></li>
|
|
</ul>
|
|
<h3>Guestbook</h3>
|
|
<ul>
|
|
<li><a href={ templ.URL(gbUrl) } target="_blank">View Guestbook</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/comments") }>Manage messages</a></li>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/comments/queue") }>Review message queue</a></li>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/comments/trash") }>Trash</a></li>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/settings") }>Settings</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/themes") }>Themes</a></li>
|
|
<li><a href={ templ.URL(dashUrl + "/guestbook/customize") }>Custom CSS</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Feeds</h3>
|
|
<p>Coming Soon</p>
|
|
</div>
|
|
<div>
|
|
<h3>Account</h3>
|
|
<ul>
|
|
<li><a href="/users/settings">Settings</a></li>
|
|
<li><a href="/users/privacy">Privacy</a></li>
|
|
<li><a href="/help">Help</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
}
|
|
|
|
templ displayWebsites(websites []models.Website) {
|
|
if len(websites) == 0 {
|
|
<p>No Websites yet. <a href="">Register a website.</a></p>
|
|
} else {
|
|
<ul id="websites" hx-get="/websites" hx-trigger="newWebsite from:body" hx-swap="outerHTML">
|
|
for _, w := range websites {
|
|
<li>
|
|
<a href={ templ.URL(wUrl(w) + "/dashboard") }>{ w.Name }</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
}
|
|
|
|
templ websiteCreateForm(csrfToken string, form forms.WebsiteCreateForm) {
|
|
<input type="hidden" name="csrf_token" value={ csrfToken }/>
|
|
<div>
|
|
{{ err, exists := form.FieldErrors["sitename"] }}
|
|
<label for="sitename">Site Name: </label>
|
|
if exists {
|
|
<label class="error">{ err }</label>
|
|
}
|
|
<input type="text" name="sitename" id="sitename" required/>
|
|
</div>
|
|
<div>
|
|
{{ err, exists = form.FieldErrors["siteurl"] }}
|
|
<label for="siteurl">Site URL: </label>
|
|
if exists {
|
|
<label class="error">{ err }</label>
|
|
}
|
|
<input type="text" name="siteurl" id="siteurl" required/>
|
|
</div>
|
|
<div>
|
|
{{ err, exists = form.FieldErrors["authorname"] }}
|
|
<label for="authorname">Site Author: </label>
|
|
if exists {
|
|
<label class="error">{ err }</label>
|
|
}
|
|
<input type="text" name="authorname" id="authorname" required/>
|
|
</div>
|
|
<div>
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
}
|
|
|
|
templ WebsiteCreateButton() {
|
|
<button hx-get="/websites/create" hx-target="closest div">Add Website</button>
|
|
}
|
|
|
|
templ WebsiteList(title string, data CommonData, websites []models.Website) {
|
|
@base(title, data) {
|
|
<h1>My Websites</h1>
|
|
<div>
|
|
@WebsiteCreateButton()
|
|
</div>
|
|
<div>
|
|
@displayWebsites(websites)
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ WebsiteDashboard(title string, data CommonData, website models.Website) {
|
|
@base(title, data) {
|
|
<div id="dashboard">
|
|
@wSidebar(website)
|
|
<div>
|
|
<h1>{ website.Name }</h1>
|
|
<h2>Embed your Guestbook</h2>
|
|
<h3>Comment form</h3>
|
|
<p>
|
|
Use this form to allow readers of your website to comment on your guestbook!
|
|
</p>
|
|
<div>
|
|
//<button>Copy to Clipboard</button>
|
|
@embeddableForm(data.RootUrl, website)
|
|
</div>
|
|
<h3>Embed your comments</h3>
|
|
<p>
|
|
Upload <a href="/static/js/guestbook.js" download>this JavaScript WebComponent</a> to your site and include it in your <code>{ `<head>` }</code> tag.
|
|
</p>
|
|
<div>
|
|
//<button>Copy to Clipboard</button>
|
|
<pre>
|
|
<code id="guestbookSnippet">
|
|
{
|
|
`<head>
|
|
<script type="module" src="js/guestbook.js"></script>
|
|
</head>` }
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
Then add the custom element where you want the comments to show up
|
|
</p>
|
|
{{ getUrl := fmt.Sprintf("https://%s/websites/%s/guestbook/comments", data.RootUrl, shortIdToSlug(website.ShortId)) }}
|
|
//<button>Copy to Clipboard</button>
|
|
<pre>
|
|
<code>
|
|
{ fmt.Sprintf(`<comment-list src="%s"></comment-list>`, getUrl) }
|
|
</code>
|
|
</pre>
|
|
@embedJavaScriptSnippet(data.RootUrl, website)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ WebsiteDashboardComingSoon(title string, data CommonData, website models.Website) {
|
|
@base(title, data) {
|
|
<div id="dashboard">
|
|
@wSidebar(website)
|
|
<div>
|
|
<h1>{ website.Name }</h1>
|
|
<p>
|
|
Coming Soon
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ WebsiteCreate(title string, data CommonData, form forms.WebsiteCreateForm) {
|
|
<form hx-post="/websites/create" hx-target="closest div">
|
|
@websiteCreateForm(data.CSRFToken, form)
|
|
</form>
|
|
}
|
|
|
|
templ embeddableForm(root string, website models.Website) {
|
|
{{ postUrl := fmt.Sprintf("https://%s/websites/%s/guestbook/comments/create/remote", root, shortIdToSlug(website.ShortId)) }}
|
|
{{formStr :=
|
|
`<form action="%s" method="post">
|
|
<div>
|
|
<label for="authorname">Name</label>
|
|
<input type="text" name="authorname" id="authorname"/>
|
|
</div>
|
|
<div>
|
|
<label for="authoremail">Email (Optional) </label>
|
|
<input type="text" name="authoremail" id="authoremail"/>
|
|
</div>
|
|
<div>
|
|
<label for="authorsite">Site Url (Optional) </label>
|
|
<input type="text" name="authorsite" id="authorsite"/>
|
|
</div>
|
|
<div>
|
|
<label for="content">Comment</label>
|
|
<textarea name="content" id="content"></textarea>
|
|
</div>
|
|
<div>
|
|
<input type="submit" value="Submit"/>
|
|
</div>
|
|
</form>`
|
|
}}
|
|
<pre>
|
|
<code>
|
|
{ fmt.Sprintf(formStr, postUrl) }
|
|
</code>
|
|
</pre>
|
|
}
|
|
|
|
templ embedJavaScriptSnippet(root string, website models.Website) {
|
|
}
|