Skip to content

Commit e991197

Browse files
auroraongithubauroraongithub
authored
site revamp
1 parent 60f5881 commit e991197

12 files changed

Lines changed: 1302 additions & 848 deletions

File tree

‎admin/add-post.html‎

Lines changed: 93 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,97 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<title>nijika.de</title>
5-
<meta charset="UTF-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<meta name="description" content="roraosu's website." />
9-
<meta name="keywords" content="blog about me" />
10-
<link rel="stylesheet" href="./../styles/admin.css" />
11-
<link rel="stylesheet" href="./../styles/blog.css" />
12-
<link
13-
rel="stylesheet"
14-
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
15-
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
16-
crossorigin="anonymous"
17-
/>
18-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
19-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
20-
<link rel="icon" type="img/x-icon" href="/img/favicon.ico" />
21-
<script src="./../script.js" defer></script>
22-
<script src="./script.js" defer></script>
23-
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
24-
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
25-
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
26-
</head>
27-
28-
<body>
29-
<header>
30-
<h2 class="logo">nijika.de</h2>
31-
<nav class="navigation">
32-
<a href="/">Home</a>
33-
<a href="./blogs.html">Blogs</a>
34-
<a href="./stories.html">Stories</a>
35-
<a href="#">Add Post</a>
36-
<i class="bi bi-brightness-high-fill" id="toggleDark"></i>
37-
</nav>
38-
39-
<nav class="mobilenav">
40-
<div class="menutext">
41-
<ul>
42-
<li>
43-
<a href="#" id="menubutton">Menu <i class="fas fa-caret-down"></i></a>
44-
45-
<div class="dropdown">
46-
<ul>
47-
<li><a href="/">Home</a></li>
48-
<li><a href="./blogs.html">Blogs</a></li>
49-
<li><a href="./stories.html">Stories</a></li>
50-
<li><a href="#">Add Post</a></li>
51-
</ul>
52-
</div>
53-
</li>
54-
</ul>
55-
</div>
56-
<i class="bi bi-brightness-high-fill" id="toggleDark2"></i>
57-
</nav>
58-
</header>
59-
<div class="container">
60-
<br />
61-
<br />
62-
<br />
63-
<br />
64-
<section id="blogs">
65-
<div class="bloglist" class="padded">
66-
<h4>Add Post</h4>
67-
<br />
68-
69-
<form id="addBlogForm">
70-
<div class="form-element">
71-
<label for="title">Title</label>
72-
<input class="form-control" id="title" type="text" placeholder="Title" />
73-
</div>
74-
75-
<br />
76-
<div class="form-element">
77-
<label for="category">Category</label>
78-
<select class="form-control" id="category">
79-
<option value="">Select</option>
80-
<option value="blog">Blog</option>
81-
<option value="story">Story</option>
82-
</select>
83-
</div>
84-
<br />
85-
<div class="form-element">
86-
<label for="tags">Tags</label>
87-
<input class="form-control" id="tags" type="text" placeholder="Tags" />
88-
</div>
89-
90-
<br />
91-
<div class="form-element">
92-
<label>Content</label>
93-
<div id="editor"></div>
94-
</div>
1+
<!doctype html>
2+
<html lang="en" data-theme="dark">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Add Post · nijika.de</title>
7+
<link rel="stylesheet" href="./../assets/styles.css" />
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
9+
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
10+
<link href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" rel="stylesheet" />
11+
</head>
12+
<body>
13+
<header class="site-header">
14+
<div class="container nav">
15+
<div class="brand">nijika.de</div>
16+
<div class="nav-actions">
17+
<button class="theme-toggle" data-toggle-theme title="Toggle theme"><i class="bi bi-brightness-high"></i></button>
18+
</div>
19+
</div>
20+
</header>
9521

96-
<button class="submit-btn">Add Post</button>
97-
</form>
98-
</div>
99-
</section>
22+
<main class="container" style="padding: 32px 0 48px;">
23+
<div class="narrow">
24+
<h2>Add Post</h2>
25+
</div>
26+
<form id="addBlogForm" class="form narrow">
27+
<div class="field">
28+
<label for="title">Title</label>
29+
<input id="title" type="text" placeholder="Title" />
30+
</div>
31+
<div class="field">
32+
<label for="category">Category</label>
33+
<select id="category">
34+
<option value="">Select</option>
35+
<option value="blog">Blog</option>
36+
<option value="story">Story</option>
37+
</select>
38+
</div>
39+
<div class="field">
40+
<label for="tags">Tags</label>
41+
<input id="tags" type="text" placeholder="tag1, tag2" />
10042
</div>
43+
<div class="field">
44+
<label>Content</label>
45+
<div id="editor"></div>
46+
<small style="color:var(--muted)">Use the toolbar for headings, colors, code, alignment, lists, links, images, video, formulas and more.</small>
47+
</div>
48+
<button class="btn btn-primary" type="submit">Add Post</button>
49+
</form>
50+
</main>
10151

102-
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
103-
<script>
104-
var quill = new Quill('#editor', {
105-
theme: 'snow',
106-
modules: {
107-
toolbar: [
108-
[{ header: [1, 2, 3, 4, 5, 6, false] }],
109-
['bold', 'italic', 'underline', 'strike'],
110-
['blockquote', 'code-block'],
111-
[{ list: 'ordered' }, { list: 'bullet' }],
112-
[{ script: 'sub' }, { script: 'super' }],
113-
[{ indent: '-1' }, { indent: '+1' }],
114-
[{ direction: 'rtl' }],
115-
[{ size: ['small', false, 'large', 'huge'] }],
116-
[{ header: 1 }, { header: 2 }],
117-
[{ color: [] }, { background: [] }],
118-
[{ font: [] }],
119-
[{ align: [] }],
120-
['link', 'video', 'formula'],
121-
['clean'],
122-
],
123-
},
124-
});
125-
</script>
126-
</body>
52+
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
53+
<script src="https://cdn.jsdelivr.net/npm/quill-better-table@1.2.10/dist/quill-better-table.min.js"></script>
54+
<script type="module">
55+
import '../assets/app.js';
56+
const form = document.querySelector('#addBlogForm');
57+
const titleInput = document.querySelector('#title');
58+
const typeInput = document.querySelector('#category');
59+
const tagsInput = document.querySelector('#tags');
60+
const quill = new Quill('#editor', {
61+
theme: 'snow',
62+
modules: {
63+
toolbar: [
64+
[{ header: [1,2,3,4,5,6,false] }],
65+
['bold','italic','underline','strike'],
66+
[{ color: [] }, { background: [] }],
67+
[{ script: 'sub' }, { script: 'super' }],
68+
[{ list: 'ordered' }, { list: 'bullet' }],
69+
[{ indent: '-1' }, { indent: '+1' }],
70+
[{ align: [] }],
71+
['blockquote','code-block'],
72+
['link','image','video','formula'],
73+
['clean']
74+
]
75+
}
76+
});
77+
form?.addEventListener('submit', async (e) => {
78+
e.preventDefault();
79+
const title = titleInput.value.trim();
80+
const type = typeInput.value.trim();
81+
const tags = tagsInput.value.trim();
82+
const content = quill.root.innerHTML;
83+
const token = localStorage.getItem('jwt');
84+
if (!token) return alert('You are not logged in');
85+
if (!title || !type || !tags || !quill.root.innerText.trim()) return alert('Fill all the fields');
86+
const res = await fetch(`https://nijikade-backend.vercel.app/api/post?token=${token}`, {
87+
method: 'POST', headers: { 'Content-Type': 'application/json' },
88+
body: JSON.stringify({ title, type, content, tags })
89+
});
90+
if (!res.ok) { const j = await res.json(); return alert(j.error || 'Failed'); }
91+
alert('Post added successfully');
92+
});
93+
</script>
94+
</body>
12795
</html>
96+
97+

‎admin/blogs.html‎

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,69 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<title>nijika.de</title>
5-
<meta charset="UTF-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<meta name="description" content="roraosu's website." />
9-
<meta name="keywords" content="blog about me" />
10-
<link rel="stylesheet" href="../styles/blog.css" />
11-
<link
12-
rel="stylesheet"
13-
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
14-
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
15-
crossorigin="anonymous"
16-
/>
17-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
18-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
19-
<link rel="icon" type="img/x-icon" href="/img/favicon.ico" />
20-
<script src="/script.js" defer></script>
21-
<script src="./script.js" defer></script>
22-
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
23-
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
24-
</head>
25-
26-
<body onload="getPostsAdmin('blog')">
27-
<header>
28-
<h2 class="logo">nijika.de</h2>
29-
<nav class="navigation">
30-
<a href="/">Home</a>
31-
<a href="#">Blogs</a>
32-
<a href="./stories.html">Stories</a>
33-
<a href="./add-post.html">Add Post</a>
34-
<i class="bi bi-brightness-high-fill" id="toggleDark"></i>
35-
</nav>
1+
<!doctype html>
2+
<html lang="en" data-theme="dark">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Admin Blogs · nijika.de</title>
7+
<link rel="stylesheet" href="./../assets/styles.css" />
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
9+
</head>
10+
<body>
11+
<header class="site-header">
12+
<div class="container nav">
13+
<div class="brand">nijika.de</div>
14+
<nav class="site-nav">
15+
<a href="./blogs.html">Blogs</a>
16+
<a href="./stories.html">Stories</a>
17+
<a href="./add-post.html">Add Post</a>
18+
</nav>
19+
<div class="nav-actions">
20+
<button class="theme-toggle" data-toggle-theme title="Toggle theme"><i class="bi bi-brightness-high"></i></button>
21+
</div>
22+
</div>
23+
</header>
3624

37-
<nav class="mobilenav">
38-
<div class="menutext">
39-
<ul>
40-
<li>
41-
<a href="#" id="menubutton">Menu <i class="fas fa-caret-down"></i></a>
25+
<main class="container" style="padding: 32px 0 48px;">
26+
<div class="section-head">
27+
<h2>Blogs</h2>
28+
</div>
29+
<div id="posts" class="post-list stack-4">Please wait...</div>
30+
</main>
4231

43-
<div class="dropdown">
44-
<ul>
45-
<li><a href="/">Home</a></li>
46-
<li><a href="#">Blogs</a></li>
47-
<li><a href="./stories.html">Stories</a></li>
48-
<li><a href="./add-post.html">Add Post</a></li>
49-
</ul>
50-
</div>
51-
</li>
52-
</ul>
53-
</div>
54-
<i class="bi bi-brightness-high-fill" id="toggleDark2"></i>
55-
</nav>
56-
</header>
57-
<div class="container">
58-
<br />
59-
<br />
60-
<br />
61-
<br />
62-
<section id="blogs">
63-
<div class="bloglist" class="padded">
64-
<h4>Blogs</h4>
65-
<div id="posts">Please wait</div>
66-
</div>
67-
</section>
68-
</div>
69-
</body>
32+
<script type="module">
33+
import '../assets/app.js';
34+
async function load() {
35+
const root = document.querySelector('#posts');
36+
const res = await fetch('https://nijikade-backend.vercel.app/api/post?type=blog');
37+
const data = await res.json();
38+
root.innerHTML = '';
39+
data.posts.forEach(year => {
40+
const y = document.createElement('h3'); y.textContent = year.year; root.appendChild(y);
41+
year.posts.forEach(post => {
42+
const div = document.createElement('div');
43+
div.className = 'post-item';
44+
div.innerHTML = `<a class="link" href="./post.html?id=${post.id}">${post.title}</a>
45+
<span class="row-actions">
46+
<a class="btn-icon" href="./update-post.html?id=${post.id}" title="Edit"><i class="bi bi-pencil"></i></a>
47+
<a class="btn-icon" href="#" data-del="${post.id}" title="Delete"><i class="bi bi-trash"></i></a>
48+
</span>`;
49+
root.appendChild(div);
50+
})
51+
})
52+
root.querySelectorAll('[data-del]').forEach(a => a.addEventListener('click', async (e) => {
53+
e.preventDefault();
54+
const id = a.getAttribute('data-del');
55+
const token = localStorage.getItem('jwt');
56+
if (!token) return alert('You are not logged in');
57+
if (!confirm('Delete this post?')) return;
58+
const delRes = await fetch(`https://nijikade-backend.vercel.app/api/post/${id}?token=${token}`, { method: 'DELETE' });
59+
if (!delRes.ok) return alert('Delete failed');
60+
alert('Post deleted');
61+
load();
62+
}))
63+
}
64+
load();
65+
</script>
66+
</body>
7067
</html>
68+
69+

0 commit comments

Comments
 (0)