jason/cpolis
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases 58 Wiki Activity

feature/id-for-hmtl-headers #3

Merged
jason merged 61 commits from jonathan/cpolis:feature/id-for-hmtl-headers into devel 2025-03-01 09:28:54 +01:00
Conversation 0 Commits 61 Files Changed 1 +67 -86
4 changed files with 67 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 203a1ed147 - Show all commits

15
cmd/frontend/articles.go
View File

@@ -1,9 +1,11 @@
package frontend
import (
"encoding/json"
"fmt"
"html/template"
"io"
"io/fs"
"log"
"net/http"
"os"
@@ -462,6 +464,12 @@ func UploadImage(c *b.Config) http.HandlerFunc {
return
}
if err = os.MkdirAll(fmt.Sprint(c.PicsDir, "/"), fs.FileMode(0755)); err != nil {
log.Println(err)
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
img, err := os.Create(absFilepath)
if err != nil {
log.Println(err)
@@ -476,10 +484,9 @@ func UploadImage(c *b.Config) http.HandlerFunc {
return
}
alt := strings.Join(nameStrings[0:len(nameStrings)-1], " ")
imgMD := fmt.Sprint("![", alt, "](", c.Domain, "/pics/", filename, ")")
tmpl, err := template.ParseFiles(c.WebDir + "/templates/editor.html")
template.Must(tmpl, err).ExecuteTemplate(w, "editor-images", imgMD)
url := fmt.Sprint(c.Domain, "/pics/", filename)
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(url)
}
}

79
web/templates/editor.html
View File

@@ -2,9 +2,6 @@
<h2>Editor</h2>
<form id="edit-area">
{{if eq .Mode 0}}
<button class="btn" hx-post="/preview-article" hx-target="#page-content">Vorschau</button>
<div class="flex flex-col gap-y-1">
<label for="article-title">Titel</label>
<input name="article-title" type="text" value="{{.Title}}" />
@@ -15,8 +12,9 @@
</div>
<div class="flex flex-col">
<label for="article-content">Artikel</label>
<textarea name="article-content">{{.Content}}</textarea>
<textarea id="easyMDE">{{.Content}}</textarea>
</div>
<input id="article-content" name="article-content" type="hidden" />
<div>
<span>Tags</span>
@@ -30,63 +28,40 @@
</div>
</div>
<div id="editor-images">
<input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image"
hx-swap="beforeend" hx-target="#editor-images" />
</div>
<div class="btn-area">
<input class="action-btn" type="submit" value="Senden" hx-post="/submit-article" hx-target="#page-content" />
<button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
</div>
{{else}}
<button class="btn" hx-get="/write-article" hx-target="#page-content">Schreiben</button>
<span>Titel</span>
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
{{.Title}}
</div>
<span>Beschreibung</span>
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
{{.Description}}
</div>
<span>Artikel</span>
<div class="bg-white border mb-3 px-2 py-2 rounded-md w-full">
<div class="prose">
{{.HTMLContent}}
</div>
</div>
{{end}}
</form>
<script>
function copyToClipboard(text) {
event.preventDefault(); // Get-Request verhindern
var easyMDE = new EasyMDE({
element: document.getElementById('easyMDE'),
hideIcons: ['image'],
imageTexts: {sbInit: ''},
showIcons: ["code", "table", "upload-image"],
uploadImage: true,
var textarea = document.createElement("textarea");
textarea.textContent = text;
document.body.appendChild(textarea);
imageUploadFunction: function (file, onSuccess, onError) {
var formData = new FormData();
formData.append('article-image', file);
textarea.select();
try {
document.execCommand('copy');
} catch (err) {
console.warn('Fehler beim Kopieren', err);
}
fetch('/upload-image', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
onSuccess(data);
})
.catch(error => {
onError(error);
});
},
});
document.body.removeChild(textarea);
}
easyMDE.codemirror.on("change", () => {
document.getElementById('article-content').value = easyMDE.value();
});
</script>
{{end}}
{{define "editor-images"}}
{{if gt (len .) 0}}
<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
<div class="self-center">{{.}}</div>
<button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
onclick="copyToClipboard('{{.}}')">Kopieren</button>
</div>
{{end}}
{{end}}

4
web/templates/index.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orient Editor</title>
<link href="/web/static/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
</head>
<body class="flex flex-col justify-between min-h-screen bg-slate-50">
@@ -25,7 +26,8 @@
</p>
</footer>
<script src="/web/static/js/htmx.min.js"></script>
<script src="https://unpkg.com/htmx.org@2.0.1"></script>
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
</body>
</html>

55
web/templates/rework-article.html
View File

@@ -14,6 +14,7 @@
<label for="article-content">Artikel</label>
<textarea name="article-content" placeholder="Artikel">{{.Article.Content}}</textarea>
</div>
<input id="article-content" name="article-content" type="hidden" />
<div>
<span>Tags</span>
@@ -28,11 +29,6 @@
</div>
</div>
<div id="editor-images">
<input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image"
hx-swap="beforeend" hx-target="#editor-images" />
</div>
<div class="btn-area">
<input class="action-btn" type="submit" value="Senden" hx-post="/resubmit-article/{{.Article.ID}}"
hx-target="#page-content" />
@@ -41,32 +37,33 @@
</form>
<script>
function copyToClipboard(text) {
event.preventDefault(); // Get-Request verhindern
var easyMDE = new EasyMDE({
element: document.getElementById('easyMDE'),
hideIcons: ['image'],
imageTexts: {sbInit: ''},
showIcons: ["code", "table", "upload-image"],
uploadImage: true,
var textarea = document.createElement("textarea");
textarea.textContent = text;
document.body.appendChild(textarea);
imageUploadFunction: function (file, onSuccess, onError) {
var formData = new FormData();
formData.append('article-image', file);
textarea.select();
try {
document.execCommand('copy');
} catch (err) {
console.warn('Fehler beim Kopieren', err);
}
document.body.removeChild(textarea);
}
fetch('/upload-image', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
onSuccess(data);
})
.catch(error => {
onError(error);
});
},
});
easyMDE.codemirror.on("change", () => {
document.getElementById('article-content').value = easyMDE.value();
});
</script>
{{end}}
{{define "editor-images"}}
{{if gt (len .) 0}}
<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
<div class="self-center">{{.}}</div>
<button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
onclick="copyToClipboard('{{.}}')">Kopieren</button>
</div>
{{end}}
{{end}}