Adding widgets
This commit is contained in:
m15o
parent
0b08befaa8
commit
95dacca678
13 changed files with 313 additions and 20 deletions
|
|
@ -58,6 +58,11 @@ h1, h2 {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tools {
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 650px) {
|
||||
.cols {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ var TplCommonMap = map[string]string{
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">status.cafe</a>
|
||||
<a href="/">status.cafe</a> <a href="/intro">intro</a>
|
||||
{{ if .logged }}
|
||||
<a href="/settings">settings</a> <a href="/users/{{ .logged }}">{{ .logged }}</a> (<a href="/logout">logout</a>)
|
||||
{{ else }}
|
||||
|
|
|
|||
|
|
@ -77,8 +77,11 @@ func New(cfg *config.Config, sess *session.Session, data *storage.Storage) (http
|
|||
router.HandleFunc("/remove", h.handleRemoveStatus)
|
||||
router.HandleFunc("/edit", h.showEditStatusView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/edit", h.updateStatus).Methods(http.MethodPost)
|
||||
|
||||
router.HandleFunc("/current-status.js", h.showCurrentStatusJSView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/current-status", h.showCurrentStatusView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/manage", h.showManageView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/intro", h.showIntroView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/about/status-updater", h.showStatusUpdaterView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/users/{user}.atom", h.showAtomView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/users/{user}", h.showUserView).Methods(http.MethodGet)
|
||||
router.HandleFunc("/users/{user}/status.json", h.showUserStatusView).Methods(http.MethodGet)
|
||||
|
|
|
|||
|
|
@ -62,6 +62,48 @@ var TplMap = map[string]string{
|
|||
</script>
|
||||
</body>
|
||||
</html>`,
|
||||
"current_status": `{{ define "content" }}
|
||||
<div class="cols">
|
||||
<section>
|
||||
<h1>Current Status Widget</h1>
|
||||
<form method="get" action="/current-status">
|
||||
<table>
|
||||
<tr>
|
||||
<td>name:</td>
|
||||
<td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="submit" value="create HTML"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p>Past this code into your HTML file:</p>
|
||||
<textarea id="code-html" style="width: 100%; height: 75px;"></textarea>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Preview</h2>
|
||||
{{ if .name }}
|
||||
<script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
|
||||
{{ else }}
|
||||
<p>Add your name and click "generate HTML" to see a preview.</p>
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
function getHTML(name) {
|
||||
return '<s'+'cript src="https://status.cafe/current-status.js?name=' + name + '"></s'+'cript>'
|
||||
}
|
||||
function preview() {
|
||||
const name = document.getElementById("name").value
|
||||
if (name) {
|
||||
const code = getHTML(document.getElementById("name").value)
|
||||
document.getElementById("code-html").value = code
|
||||
}
|
||||
}
|
||||
preview()
|
||||
</script>
|
||||
{{ end }}`,
|
||||
"edit_status": `{{ define "content" }}
|
||||
<section>
|
||||
<h1>Edit status</h1>
|
||||
|
|
@ -92,10 +134,10 @@ var TplMap = map[string]string{
|
|||
<textarea name="content" maxlength="140" placeholder="What's new?" required style="width: 100%; box-sizing: border-box; height: 100px;" autofocus></textarea>
|
||||
</div>
|
||||
<input type="submit" value="Submit">
|
||||
<h3>Update status with bookmarklet</h3>
|
||||
<p>Drag to your bookmarks to update from anywhere: <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status.cafe</a></p>
|
||||
<h3>Display status on your homepage</h3>
|
||||
<p>todo</p>
|
||||
<ul class="tools">
|
||||
<li>Install the <a href="/about/status-updater">status updater</a> bookmarklet</li>
|
||||
<li>Add the <a href="/current-status">current status widget</a> to your homepage</li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
|
|
@ -107,6 +149,38 @@ var TplMap = map[string]string{
|
|||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}`,
|
||||
"intro": `{{ define "content" }}
|
||||
<section>
|
||||
<h1>Introduction</h1>
|
||||
<p>
|
||||
Welcome! You've just found a little internet tool that lets you set your current status
|
||||
and see the status of others.
|
||||
</p>
|
||||
|
||||
<h2>Your status</h2>
|
||||
<p>
|
||||
Once you've registered, you will be able to set your current status. A status is anything you are currently doing,
|
||||
on your mind, or that you think about. It can be your mood, the song you are listening to, the book you are reading, or the new
|
||||
cool link you've just found. A status has a maximum length of 140 characters and can be updated as often as you'd like.
|
||||
</p>
|
||||
<h2>Status updater</h2>
|
||||
<p>
|
||||
Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
|
||||
profile page.
|
||||
</p>
|
||||
<h2>Homepage widgets</h2>
|
||||
<h3>Current Status Widget</h3>
|
||||
<h3>Status Feed Widget</h3>
|
||||
<!-- wip -->
|
||||
<p>Use the current status widget to display your latest status directly on
|
||||
homepage, or the status feed widget to display the last few ones.
|
||||
</p>
|
||||
<p>
|
||||
Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
|
||||
profile page, which aggregates all your statuses. You can fully customize it with CSS and HTML. Make it yours!
|
||||
</p>
|
||||
</section>
|
||||
{{ end }}`,
|
||||
"login": `{{ define "content" }}
|
||||
<section>
|
||||
|
|
@ -215,6 +289,28 @@ var TplMap = map[string]string{
|
|||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
{{ end }}`,
|
||||
"status-updater": `{{ define "content" }}
|
||||
<section>
|
||||
<h1>Status Updater</h1>
|
||||
<p>
|
||||
Instead of having to come back each time you want to set a new status, you can install the
|
||||
status updater bookmarklet directly to your web browser. That way, you will be able to update your status
|
||||
from anywhere.
|
||||
</p>
|
||||
<p>
|
||||
Curious about what a bookmarklet is? It's simply a little javascript link that's placed on your browser's bookmark toolbar.
|
||||
You can think about them as tiny programs.
|
||||
</p>
|
||||
<h2>Instructions</h2>
|
||||
<p>
|
||||
Drag the following link to your bookmarks toolbar:
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status updater</a>
|
||||
</p>
|
||||
<p>That's it! From now on, whenever you want to update your status, click the status updater button from your bookmarks and a pop-up window will launch to let you update it.</p>
|
||||
</section>
|
||||
{{ end }}`,
|
||||
"user": `{{ define "head" }}
|
||||
<style>{{ .style }}</style>
|
||||
|
|
@ -224,14 +320,32 @@ var TplMap = map[string]string{
|
|||
<div class="cols">
|
||||
<section>
|
||||
<h2>{{ .user }}</h2>
|
||||
{{ if .picture }}
|
||||
<img src="{{ .picture }}" width="100" class="profile-picture"/>
|
||||
{{ end }}
|
||||
<dl>
|
||||
<dt>Homepage</dt>
|
||||
<dd><a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
|
||||
<dd>
|
||||
{{ if .homepage }}
|
||||
<a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
<dt>Email</dt>
|
||||
<dd><a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
|
||||
<dd>
|
||||
{{ if .email }}
|
||||
<a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
<dt>About</dt>
|
||||
<dd>{{ .about }}</dd>
|
||||
<dd>
|
||||
{{ if .about }}
|
||||
{{ .about }}
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">status.cafe</a>
|
||||
<a href="/">status.cafe</a> <a href="/intro">intro</a>
|
||||
{{ if .logged }}
|
||||
<a href="/settings">settings</a> <a href="/users/{{ .logged }}">{{ .logged }}</a> (<a href="/logout">logout</a>)
|
||||
{{ else }}
|
||||
|
|
|
|||
42
web/handler/html/current_status.html
Normal file
42
web/handler/html/current_status.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{{ define "content" }}
|
||||
<div class="cols">
|
||||
<section>
|
||||
<h1>Current Status Widget</h1>
|
||||
<form method="get" action="/current-status">
|
||||
<table>
|
||||
<tr>
|
||||
<td>name:</td>
|
||||
<td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="submit" value="create HTML"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p>Past this code into your HTML file:</p>
|
||||
<textarea id="code-html" style="width: 100%; height: 75px;"></textarea>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Preview</h2>
|
||||
{{ if .name }}
|
||||
<script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
|
||||
{{ else }}
|
||||
<p>Add your name and click "generate HTML" to see a preview.</p>
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
function getHTML(name) {
|
||||
return '<s'+'cript src="https://status.cafe/current-status.js?name=' + name + '"></s'+'cript>'
|
||||
}
|
||||
function preview() {
|
||||
const name = document.getElementById("name").value
|
||||
if (name) {
|
||||
const code = getHTML(document.getElementById("name").value)
|
||||
document.getElementById("code-html").value = code
|
||||
}
|
||||
}
|
||||
preview()
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
<textarea name="content" maxlength="140" placeholder="What's new?" required style="width: 100%; box-sizing: border-box; height: 100px;" autofocus></textarea>
|
||||
</div>
|
||||
<input type="submit" value="Submit">
|
||||
<h3>Update status with bookmarklet</h3>
|
||||
<p>Drag to your bookmarks to update from anywhere: <a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status.cafe</a></p>
|
||||
<h3>Display status on your homepage</h3>
|
||||
<p>todo</p>
|
||||
<ul class="tools">
|
||||
<li>Install the <a href="/about/status-updater">status updater</a> bookmarklet</li>
|
||||
<li>Add the <a href="/current-status">current status widget</a> to your homepage</li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
|
|
|
|||
32
web/handler/html/intro.html
Normal file
32
web/handler/html/intro.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{{ define "content" }}
|
||||
<section>
|
||||
<h1>Introduction</h1>
|
||||
<p>
|
||||
Welcome! You've just found a little internet tool that lets you set your current status
|
||||
and see the status of others.
|
||||
</p>
|
||||
|
||||
<h2>Your status</h2>
|
||||
<p>
|
||||
Once you've registered, you will be able to set your current status. A status is anything you are currently doing,
|
||||
on your mind, or that you think about. It can be your mood, the song you are listening to, the book you are reading, or the new
|
||||
cool link you've just found. A status has a maximum length of 140 characters and can be updated as often as you'd like.
|
||||
</p>
|
||||
<h2>Status updater</h2>
|
||||
<p>
|
||||
Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
|
||||
profile page.
|
||||
</p>
|
||||
<h2>Homepage widgets</h2>
|
||||
<h3>Current Status Widget</h3>
|
||||
<h3>Status Feed Widget</h3>
|
||||
<!-- wip -->
|
||||
<p>Use the current status widget to display your latest status directly on
|
||||
homepage, or the status feed widget to display the last few ones.
|
||||
</p>
|
||||
<p>
|
||||
Use the status updater bookmarklet to update your status from anywhere, and capture all your feelings on your
|
||||
profile page, which aggregates all your statuses. You can fully customize it with CSS and HTML. Make it yours!
|
||||
</p>
|
||||
</section>
|
||||
{{ end }}
|
||||
22
web/handler/html/status-updater.html
Normal file
22
web/handler/html/status-updater.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{{ define "content" }}
|
||||
<section>
|
||||
<h1>Status Updater</h1>
|
||||
<p>
|
||||
Instead of having to come back each time you want to set a new status, you can install the
|
||||
status updater bookmarklet directly to your web browser. That way, you will be able to update your status
|
||||
from anywhere.
|
||||
</p>
|
||||
<p>
|
||||
Curious about what a bookmarklet is? It's simply a little javascript link that's placed on your browser's bookmark toolbar.
|
||||
You can think about them as tiny programs.
|
||||
</p>
|
||||
<h2>Instructions</h2>
|
||||
<p>
|
||||
Drag the following link to your bookmarks toolbar:
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:void(open('https://status.cafe/add','status.cafe','resizable,scrollbars,width=360,height=200'))">status updater</a>
|
||||
</p>
|
||||
<p>That's it! From now on, whenever you want to update your status, click the status updater button from your bookmarks and a pop-up window will launch to let you update it.</p>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -6,14 +6,32 @@
|
|||
<div class="cols">
|
||||
<section>
|
||||
<h2>{{ .user }}</h2>
|
||||
{{ if .picture }}
|
||||
<img src="{{ .picture }}" width="100" class="profile-picture"/>
|
||||
{{ end }}
|
||||
<dl>
|
||||
<dt>Homepage</dt>
|
||||
<dd><a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
|
||||
<dd>
|
||||
{{ if .homepage }}
|
||||
<a href="{{ .homepage }}" target="_blank">{{ .homepage }}</a></dd>
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
<dt>Email</dt>
|
||||
<dd><a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
|
||||
<dd>
|
||||
{{ if .email }}
|
||||
<a href="{{ .email }}" target="_blank">{{ .email }}</a></dd>
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
<dt>About</dt>
|
||||
<dd>{{ .about }}</dd>
|
||||
<dd>
|
||||
{{ if .about }}
|
||||
{{ .about }}
|
||||
{{ else }}
|
||||
Not defined
|
||||
{{ end }}
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section>
|
||||
|
|
|
|||
13
web/handler/intro_show.go
Normal file
13
web/handler/intro_show.go
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
package handler
|
||||
|
||||
import "net/http"
|
||||
|
||||
func (h *Handler) showIntroView(w http.ResponseWriter, r *http.Request) {
|
||||
user, _ := h.getUser(r)
|
||||
h.renderLayout(w, "intro", nil, user)
|
||||
}
|
||||
|
||||
func (h *Handler) showStatusUpdaterView(w http.ResponseWriter, r *http.Request) {
|
||||
user, _ := h.getUser(r)
|
||||
h.renderLayout(w, "status-updater", nil, user)
|
||||
}
|
||||
|
|
@ -189,12 +189,23 @@ func (h *Handler) showUserStatusImageView(w http.ResponseWriter, r *http.Request
|
|||
foreground = "#" + c
|
||||
}
|
||||
|
||||
width := 350
|
||||
dc := gg.NewContext(width, 84)
|
||||
width := 125
|
||||
dc := gg.NewContext(width, 125)
|
||||
dc.SetHexColor(background)
|
||||
dc.Clear()
|
||||
dc.SetHexColor(foreground)
|
||||
dc.DrawStringWrapped(text, 8, 4, 0, 0, float64(width-(2*16)), 1.5, gg.AlignLeft)
|
||||
font, err := truetype.Parse(goregular.TTF)
|
||||
if err != nil {
|
||||
panic("")
|
||||
}
|
||||
face := truetype.NewFace(font, &truetype.Options{
|
||||
Size: 9,
|
||||
})
|
||||
dc.SetFontFace(face)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
}
|
||||
dc.DrawStringWrapped(text, 8, 4, 0, 0, float64(width-(2*8)), 1.5, gg.AlignLeft)
|
||||
dc.EncodePNG(w)
|
||||
//dc.SavePNG("out.png")
|
||||
|
||||
|
|
|
|||
33
web/handler/widget_show.go
Normal file
33
web/handler/widget_show.go
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
package handler
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
)
|
||||
|
||||
func (h *Handler) showCurrentStatusJSView(w http.ResponseWriter, r *http.Request) {
|
||||
name := r.URL.Query().Get("name")
|
||||
w.Write([]byte(`
|
||||
document.writeln('<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div>');
|
||||
fetch("https://status.cafe/users/` + name + `/status.json")
|
||||
.then( r => r.json() )
|
||||
.then( r => {
|
||||
if (!r.content.length) {
|
||||
document.getElementById("statuscafe-content").innerHTML = "No status yet."
|
||||
return
|
||||
}
|
||||
document.getElementById("statuscafe-username").innerHTML = '<a href="https://status.cafe/users/` + name + `">' + r.author + '</a>\'s status, updated ' + r.timeAgo
|
||||
document.getElementById("statuscafe-content").innerHTML = r.content
|
||||
})
|
||||
`))
|
||||
}
|
||||
|
||||
func (h *Handler) showCurrentStatusView(w http.ResponseWriter, r *http.Request) {
|
||||
logged, _ := h.getUser(r)
|
||||
name := r.URL.Query().Get("name")
|
||||
if name == "" {
|
||||
name = logged
|
||||
}
|
||||
h.renderLayout(w, "current_status", map[string]interface{}{
|
||||
"name": name,
|
||||
}, logged)
|
||||
}
|
||||
Loading…
Reference in a new issue