90 lines
3.5 KiB
HTML
90 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Content Manager - new news</title>
|
|
<link rel="stylesheet" href="/styles/markdown.css">
|
|
<link rel="stylesheet" href="/styles/color-pallet.css">
|
|
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
form fieldset {
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
}
|
|
|
|
#new-news {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
#preview {
|
|
border: black solid 1px;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="new-news">
|
|
<div>
|
|
<h3>New News</h3>
|
|
<form id="create-entry" hx-post="/api/news" hx-swap="none">
|
|
<fieldset>
|
|
<legend>Create Entry</legend>
|
|
<label for="entryType">Entry Type:</label>
|
|
<div>
|
|
<input type="radio" id="entryType-article" name="entryType" value="0" checked>
|
|
<label for="entryType-article">Article</label>
|
|
<input type="radio" id="entryType-tweet" name="entryType" value="1">
|
|
<label for="entryType-tweet">Tweet</label>
|
|
</div>
|
|
|
|
<label for="cardContent">Card Content:</label>
|
|
<textarea type="text" id="cardContent" name="cardContent" required></textarea>
|
|
|
|
<label for="article">Content:</label>
|
|
<textarea id="article" name="article" rows="24" cols="80"></textarea>
|
|
|
|
<label for="linkPath">Link Path (Optional):</label>
|
|
<div style="display: inline-flex;">
|
|
<p>/news/</p>
|
|
<input style="height: 1em; margin: auto 0;" text id="linkPath" name="linkPath">
|
|
</div>
|
|
|
|
<label for="coverImagePath">Cover Image Path (Optional):</label>
|
|
<input type="text" id="coverImagePath" name="coverImagePath">
|
|
</fieldset>
|
|
<button id="submit-button" type="submit">Create Entry</button>
|
|
<a href="/index.html"><button role="none" type="button">Cancel</button></a>
|
|
</form>
|
|
</div>
|
|
<div id="preview">
|
|
<h3>Preview</h3>
|
|
<h4>Card Content</h4>
|
|
<div id="preview-card-content"></div>
|
|
<h4>Article</h4>
|
|
<div id="preview-article" class="markdown"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const markdownPreview = document.getElementById('preview-article');
|
|
const cardContentPreview = document.getElementById('preview-card-content');
|
|
const articleEditor = document.getElementById('article');
|
|
const cardContentInput = document.getElementById('cardContent');
|
|
const submitButton = document.getElementById('submit-button');
|
|
|
|
articleEditor.addEventListener('input', () => {
|
|
markdownPreview.innerHTML = marked.parse(articleEditor.value);
|
|
});
|
|
|
|
cardContentInput.addEventListener('input', () => {
|
|
cardContentPreview.innerHTML = marked.parse(cardContentInput.value);
|
|
});
|
|
|
|
submitButton.addEventListener('click', () => {
|
|
window.location.href = "/index.html";
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |