cws
/
catbase
mirror of https://github.com/velour/catbase.git
1
0
Fork 0
Code Issues Releases Wiki Activity

meme: use foundation

This commit is contained in:
Chris Sexton 2024-02-28 10:09:25 -05:00
parent bd20d4001b
commit a01e52b4d4
4 changed files with 55 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
plugins/meme/index.html
View File

@ -1,213 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router@^2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<title>Memes</title>
</head>
<body>
<div id="app">
<b-navbar>
<b-navbar-brand>Memes</b-navbar-brand>
<b-navbar-nav>
<b-nav-item v-for="item in nav" :href="item.url" :active="item.name === 'Meme'">{{ item.name }}</b-nav-item>
</b-navbar-nav>
</b-navbar>
<b-alert
dismissable
variant="error"
v-if="err"
@dismissed="err = ''">
{{ err }}
</b-alert>
<b-form @submit="saveConfig" v-if="editConfig">
<b-container>
<b-row>
<b-col cols="1">
Name:
</b-col>
<b-col>
{{ editConfig.name }}
</b-col>
</b-row>
<b-row>
<b-col cols="1">
Image:
</b-col>
<b-col>
<img :src="editConfig.url" :alt="editConfig.url" rounded block fluid />
</b-col>
</b-row>
<b-row>
<b-col cols="1">
URL:
</b-col>
<b-col>
<b-input placeholder="URL..." v-model="editConfig.url"></b-input>
</b-col>
</b-row>
<b-row>
<b-col cols="1">
Config:
</b-col>
<b-col>
<b-form-textarea v-model="editConfig.config" rows="10">
</b-form-textarea>
</b-col>
</b-row>
<b-row>
<b-button type="submit" variant="primary">Save</b-button>
&nbsp;
<b-button @click="rm" variant="danger">Delete</b-button>
&nbsp;
<b-button type="cancel" @click="editConfig = null" variant="secondary">Cancel</b-button>
</b-row>
</b-container>
</b-form>
<b-form @submit="addMeme" v-if="!editConfig">
<b-container>
<b-row>
<b-col cols="3">
<b-input placeholder="Name..." v-model="name"></b-input>
</b-col>
<b-col cols="3">
<b-input placeholder="URL..." v-model="url"></b-input>
</b-col>
<b-col cols="3">
<b-input placeholder="Config..." v-model="config"></b-input>
</b-col>
<b-col cols="3">
<b-button type="submit">Add Meme</b-button>
</b-col>
</b-row>
<b-row>
<b-col>
<b-table
fixed
:items="results"
:fields="fields">
<template v-slot:cell(config)="data">
<pre>{{data.item.config | pretty}}</pre>
<b-button @click="startEdit(data.item)">Edit</b-button>
</template>
<template v-slot:cell(image)="data">
<b-img :src="data.item.url" rounded block fluid />
</template>
</b-table>
</b-col>
</b-row>
</b-container>
</b-form>
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: '#app',
router,
data: {
err: '',
nav: [],
name: '',
url: '',
config: '',
results: [],
editConfig: null,
fields: [
{ key: 'name', sortable: true },
{ key: 'config' },
{ key: 'image' }
]
},
mounted() {
axios.get('/nav')
.then(resp => {
this.nav = resp.data;
})
.catch(err => console.log(err))
this.refresh();
},
filters: {
pretty: function(value) {
if (!value) {
return ""
}
return JSON.stringify(JSON.parse(value), null, 2);
}
},
methods: {
refresh: function() {
axios.get('/meme/all')
.catch(err => (this.err = err))
.then(resp => {
this.results = resp.data
})
},
addMeme: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation()
}
if (this.name && this.url)
axios.post('/meme/add', {name: this.name, url: this.url, config: this.config})
.then(resp => {
this.results = resp.data;
this.name = "";
this.url = "";
this.config = "";
this.refresh();
})
.catch(err => (this.err = err));
},
startEdit: function(item) {
this.editConfig = item;
},
saveConfig: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (this.editConfig && this.editConfig.name && this.editConfig.url) {
axios.post('/meme/add', this.editConfig)
.then(resp => {
this.results = resp.data;
this.editConfig = null;
this.refresh();
})
.catch(err => this.err = err);
}
},
rm: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (confirm("Are you sure you want to delete this meme?")) {
axios.delete('/meme/rm', { data: this.editConfig })
.then(resp => {
this.editConfig = null;
this.refresh();
})
.catch(err => this.err = err);
}
}
}
})
</script>
</body>
</html>

50
plugins/meme/meme.templ
View File

@ -1,21 +1,22 @@
package meme package meme
templ (p *MemePlugin) index(all webResps) { templ (p *MemePlugin) index(all webResps) {
<div class="container"> <div class="grid-container">
<h2>Meme</h2>
<form> <form>
<div class="row"> <div class="grid-x grid-margin-x">
<div class="col-3"> <div class="cell auto">
<input type="text" name="name" placeholder="Name..." /> <input type="text" name="name" placeholder="Name..." />
</div> </div>
<div class="col-3"> <div class="cell auto">
<input type="text" name="url" placeholder="URL..." /> <input type="text" name="url" placeholder="URL..." />
</div> </div>
<div class="col-3"> <div class="cell auto">
<textarea name="config"> <textarea name="config">
</textarea> </textarea>
</div> </div>
<div class="col-3"> <div class="cell small-2">
<button class="btn btn-primary" <button class="button"
hx-post="/meme/add" hx-post="/meme/add"
hx-target="#newMemes" hx-target="#newMemes"
>Save</button> >Save</button>
@ -31,23 +32,25 @@ templ (p *MemePlugin) index(all webResps) {
} }
templ (p *MemePlugin) Show(meme webResp) { templ (p *MemePlugin) Show(meme webResp) {
<div class="row" id={ meme.Name }> <div class="grid-x grid-margin-x" id={ meme.Name }>
<div class="col-3"> <div class="cell small-3">
{ meme.Name }
<img <img
class="img-thumbnail rounded" class="thumbnail"
style="max-height: 150px"
alt={ meme.Name } alt={ meme.Name }
src={ meme.URL } /> src={ meme.URL } />
<p>{ meme.Name }</p>
</div> </div>
<div class="col-3"> <div class="cell small-7">
<pre> <pre>
{ meme.Config } { meme.Config }
</pre> </pre>
</div> </div>
<div class="col-3"> <div class="cell small-2">
<button class="btn btn-primary" <button class="button"
hx-get={ "/meme/edit/"+meme.Name } hx-get={ "/meme/edit/"+meme.Name }
hx-target={ "#"+meme.Name } hx-target={ "#"+meme.Name }
hx-swap="outerHTML"
>Edit</button> >Edit</button>
</div> </div>
</div> </div>
@ -55,27 +58,30 @@ templ (p *MemePlugin) Show(meme webResp) {
templ (p *MemePlugin) Edit(meme webResp) { templ (p *MemePlugin) Edit(meme webResp) {
<form> <form>
<div class="row" id={ meme.Name }> <div class="grid-x grid-margin-x" id={ meme.Name }>
<div class="col-3"> <div class="cell-small-3">
<img <img
class="img-thumbnail rounded" class="thumbnail"
style="max-height: 150px"
alt={ meme.Name } alt={ meme.Name }
src={ meme.URL } /> src={ meme.URL } />
</div> </div>
<div class="col-3"> <div class="cell small-7">
<textarea name="config"> <textarea name="config" rows="10">
{ meme.Config } { meme.Config }
</textarea> </textarea>
<input type="text" name="url" value={ meme.URL } /> <input type="text" name="url" value={ meme.URL } />
</div> </div>
<div class="col-3"> <div class="cell small-2">
<button class="btn btn-primary" <button class="button"
hx-put={ "/meme/save/"+meme.Name } hx-put={ "/meme/save/"+meme.Name }
hx-target={ "#"+meme.Name } hx-target={ "#"+meme.Name }
hx-swap="outerHTML"
>Save</button> >Save</button>
<button class="btn btn-danger" <button class="button alert"
hx-delete={ "/meme/rm/"+meme.Name } hx-delete={ "/meme/rm/"+meme.Name }
hx-target={ "#"+meme.Name } hx-target={ "#"+meme.Name }
hx-swap="outerHTML"
>Delete</button> >Delete</button>
</div> </div>
</div> </div>

54
plugins/meme/meme_templ.go
View File

@ -23,7 +23,7 @@ func (p *MemePlugin) index(all webResps) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><form><div class=\"row\"><div class=\"col-3\"><input type=\"text\" name=\"name\" placeholder=\"Name...\"></div><div class=\"col-3\"><input type=\"text\" name=\"url\" placeholder=\"URL...\"></div><div class=\"col-3\"><textarea name=\"config\"></textarea></div><div class=\"col-3\"><button class=\"btn btn-primary\" hx-post=\"/meme/add\" hx-target=\"#newMemes\">Save</button></div></div></form><div id=\"newMemes\"></div>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h2>Meme</h2><div class=\"grid-container\"><form><div class=\"grid-x grid-margin-x\"><div class=\"cell auto\"><input type=\"text\" name=\"name\" placeholder=\"Name...\"></div><div class=\"cell auto\"><input type=\"text\" name=\"url\" placeholder=\"URL...\"></div><div class=\"cell auto\"><textarea name=\"config\"></textarea></div><div class=\"cell small-2\"><button class=\"button\" hx-post=\"/meme/add\" hx-target=\"#newMemes\">Save</button></div></div></form><div id=\"newMemes\"></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -57,7 +57,7 @@ func (p *MemePlugin) Show(meme webResp) templ.Component {
templ_7745c5c3_Var2 = templ.NopComponent templ_7745c5c3_Var2 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"row\" id=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"grid-x grid-margin-x\" id=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -65,20 +65,7 @@ func (p *MemePlugin) Show(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"col-3\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"cell small-3\"><img class=\"thumbnail\" style=\"max-height: 150px\" alt=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 35, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <img class=\"img-thumbnail rounded\" alt=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -94,20 +81,33 @@ func (p *MemePlugin) Show(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"col-3\"><pre>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><p>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 41, Col: 26}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"cell small-7\"><pre>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Config) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Config)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 43, Col: 29} return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 45, Col: 29}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</pre></div><div class=\"col-3\"><button class=\"btn btn-primary\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</pre></div><div class=\"cell small-2\"><button class=\"button\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -123,7 +123,7 @@ func (p *MemePlugin) Show(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Edit</button></div></div>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\">Edit</button></div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -147,7 +147,7 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
templ_7745c5c3_Var5 = templ.NopComponent templ_7745c5c3_Var5 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form><div class=\"row\" id=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form><div class=\"grid-x\" id=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -155,7 +155,7 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"col-3\"><img class=\"img-thumbnail rounded\" alt=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"cell-small-3\"><img class=\"thumbnail\" style=\"max-height: 150px\" alt=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -171,14 +171,14 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"col-3\"><textarea name=\"config\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"cell small-7\"><textarea name=\"config\" rows=\"10\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var6 string var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Config) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(meme.Config)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 66, Col: 29} return templ.Error{Err: templ_7745c5c3_Err, FileName: `plugins/meme/meme.templ`, Line: 70, Col: 29}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -192,7 +192,7 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"col-3\"><button class=\"btn btn-primary\" hx-put=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div><div class=\"cell small-2\"><button class=\"button\" hx-put=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -208,7 +208,7 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Save</button> <button class=\"btn btn-danger\" hx-delete=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\">Save</button> <button class=\"button alert\" hx-delete=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -224,7 +224,7 @@ func (p *MemePlugin) Edit(meme webResp) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Delete</button></div></div></form>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\">Delete</button></div></div></form>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

4
plugins/meme/webHandlers.go
View File

@ -1,7 +1,6 @@
package meme package meme
import ( import (
"embed"
"encoding/json" "encoding/json"
"fmt" "fmt"
"net/http" "net/http"
@ -14,9 +13,6 @@ import (
"github.com/velour/catbase/bot" "github.com/velour/catbase/bot"
) )
//go:embed *.html
var embeddedFS embed.FS
func (p *MemePlugin) registerWeb(c bot.Connector) { func (p *MemePlugin) registerWeb(c bot.Connector) {
r := chi.NewRouter() r := chi.NewRouter()
r.HandleFunc("/slash", p.slashMeme(c)) r.HandleFunc("/slash", p.slashMeme(c))