Skip to content

Commit 724ab1f

Browse files
Crane04Crane04
committed
complete comment feature and fix bugs (v1)
1 parent 4d0f717 commit 724ab1f

20 files changed

+396
-159
lines changed

‎Test templates/Javascript/Comments/rendercomments.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const comment_container = document.getElementById("bloggit-comment-container")
2+
comment_container.classList += "container mt4"
3+
if (comment_container){
4+
comment_container.innerHTML = `<h2>Comments</h2>`
5+
if(data["comments"] != [] || data["comments"]){
6+
data["comments"].forEach(function(parameter){
7+
let name = parameter.name
8+
let comment = parameter.comment
9+
let time = convert_datetime(parameter.time)
10+
11+
comment_container.innerHTML += `
12+
<!-- Comments Display -->
13+
<div id="comments" class="mt-4">
14+
<!-- Comments will be displayed here -->
15+
<div class="card mb-3">
16+
<div class="card-body">
17+
<h3 class="card-title">${name}</h3>
18+
<time>${time}</time>
19+
<article class="card-text">${comment}</article>
20+
</div>
21+
</div>
22+
</div>
23+
24+
`
25+
})
26+
}
27+
}

‎Test templates/Javascript/Comments/renderform.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
document.getElementById("bloggit-comment-rf").innerHTML = `
2+
<div class="container mt-5">
3+
<h1>Leave a Comment</h1>
4+
<form>
5+
<div class="form-group">
6+
<label for="comment-name">Name:* (required)</label>
7+
<input type="text" class="form-control" id="comment-name" placeholder="Enter your name" required>
8+
</div>
9+
<div class="form-group">
10+
<label for="comment-email">Email: (not compulsory, and this won't be published)</label>
11+
<input type="email" class="form-control" id="comment-email" placeholder="Enter your email">
12+
</div>
13+
<div class="form-group">
14+
<label for="comment-comment">Comment:* (required)</label>
15+
<textarea class="form-control" id="comment-comment" rows="4" placeholder="Enter your comment" required></textarea>
16+
</div>
17+
<p id="comment-status"></p>
18+
<button type="submit" class="btn btn-primary" id="bloggit-submit-comment">Submit</button>
19+
20+
</form>
21+
</div>
22+
`

‎Test templates/Javascript/Comments/sendcomment.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const submit_comment_btn = document.getElementById("bloggit-submit-comment")
2+
3+
if(submit_comment_btn){
4+
submit_comment_btn.addEventListener("click", function(e){
5+
6+
e.preventDefault()
7+
let comment = document.getElementById("comment-comment")
8+
let comment_name = document.getElementById("comment-name")
9+
let comment_email = document.getElementById("comment-email")
10+
11+
if(!comment.value|| !comment_name.value){
12+
document.getElementById("comment-status").innerText = 'Name or Comment fields can\'t be empty!'
13+
setTimeout(() => {
14+
document.getElementById("comment-status").innerText = ''
15+
}, 4000);
16+
17+
return
18+
}
19+
data = {
20+
"comment": comment.value,
21+
"name": comment_name.value,
22+
"email": comment_email.value
23+
}
24+
fetch("http://127.0.0.1:8000/comment/" + api_key + "/" + new URLSearchParams(url_parameters).get("id"), {
25+
body: JSON.stringify(data),
26+
method: "POST",
27+
headers: {
28+
'Content-Type': "application/json"
29+
}
30+
})
31+
.then(response => {
32+
if(response.status == '201'){
33+
comment.value = comment_email.value = comment_name.value = ""
34+
35+
document.getElementById("comment-status").innerText = 'Your comment has been added!'
36+
setTimeout(() => {
37+
document.getElementById("comment-status").innerText = ''
38+
}, 4000);
39+
40+
if(data["comment_rf"]){
41+
42+
}
43+
}
44+
return response.json();
45+
46+
})
47+
.then(data => {
48+
})
49+
.catch(error => {
50+
console.error(error);
51+
});
52+
})
53+
}

‎Test templates/Javascript/home_and_blog.js

+34-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
// Preloader
21
let bloggit_data = null;
3-
document.addEventListener("DOMContentLoaded", function() {
4-
const preloader_view = document.querySelector("#bloggit-preloader");
2+
var SendComment = null;
3+
54
// Define Variables
5+
const preloader_view = document.querySelector("#bloggit-preloader");
66
let current_url = window.location.href
77
let api_key = bloggit_conf.api_key
88
let cont_rend = bloggit_conf.cont_rend
99
let header_type = bloggit_conf.header.type
10-
10+
if(bloggit_conf.comment){
11+
var comment_rf = bloggit_conf.comment.render_form
12+
var comment_rc = bloggit_conf.comment.render_comments
13+
var comment_data = true
14+
var bloggit_comment_data = null;
15+
}else{
16+
var comment_rf = false, comment_rc = false
17+
var comment_data = false
18+
}
1119
if(preloader_view && bloggit_conf.preloader ){
1220
let css_style = document.createElement("style")
1321
css_style.textContent = `
@@ -95,9 +103,8 @@ function strip_tags(param){
95103
const url_parameters = window.location.search;
96104

97105
const category = new URLSearchParams(url_parameters).get("category");
98-
console.log(category);
99106

100-
fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=${cont_rend}&header_type=${header_type}&category=${category}`)
107+
fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=${cont_rend}&header_type=${header_type}&category=${category}&comment=${comment_data}&comment_rf=${comment_rf}&comment_rc=${comment_rc}`)
101108

102109
.then((response) => {
103110
if (response.status === 200) { // Replace with the expected status code
@@ -129,7 +136,8 @@ fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=$
129136
}
130137

131138
// Set the attributes of the link element
132-
bloggit_data = data["posts"]
139+
140+
bloggit_data = data["post"]
133141

134142
if(data["script"]){
135143
const jsCodeString = data["script"].join('\n');
@@ -144,15 +152,32 @@ fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=$
144152
let css_render = document.createElement("style")
145153

146154
css_render.textContent = data["css_render"].join('\n')
147-
console.log(css_render);
148155
document.body.appendChild(css_render)
149156
}
150157

151158
if(data["css_header"]){
152159
let css_header = document.createElement("style")
153160

154161
css_header.textContent = data["css_header"].join("\n")
155-
console.log(css_header);
162+
163+
}
164+
if(data["comments"]){
165+
bloggit_comment_data = data["comments"]
166+
167+
let send_comment_link = document.createElement("script")
168+
send_comment_link.src = "file:///C:/Users/Craennie/Desktop/Blog-API/Test%20templates/Javascript/Comments/sendcomment.js"
169+
document.head.appendChild(send_comment_link)
170+
}
171+
if (data["comment_rc"]){
172+
const render__comments = data["comment_rc"].join("\n")
173+
174+
eval(render__comments)
175+
}
176+
177+
if(data["comment_rf"]){
178+
const render__form = data["comment_rf"].join("\n")
179+
180+
eval(render__form)
156181

157182
}
158183
if(document.getElementById("bloggit-preloader")){
@@ -165,6 +190,3 @@ fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=$
165190
.catch((error) => {
166191
console.error(error);
167192
});
168-
169-
170-
});

‎Test templates/admin.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2>Bloggit</h2>
1515
<section>
1616
<span> Mayowa</span>
1717
</section>
18-
18+
lorem
1919
</section>
2020
<section class="container">
2121

‎Test templates/blog.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<script>
88
const bloggit_conf = {
99
"api_key": "7070aa3bfb7a4f6f8266fa44180d4aaf",
10+
'preloader': 'veron',
1011
"cont_rend":"classic",
1112
"header": {
1213
"type": "milky-way",
@@ -23,9 +24,12 @@
2324
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
2425
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
2526
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
26-
<script src="./Javascript/home_and_blog.js"></script>
27+
<script src = "./Javascript/home_and_blog.js"></script>
2728
</head>
2829
<body>
30+
<div id="bloggit-preloader">
31+
32+
</div>
2933
<section id="bloggit-header">
3034

3135
</section>

‎Test templates/home.html

+33-5
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
1111
<script>
1212
const bloggit_conf = {
13-
"api_key": "e9f51a0a6cc0494cb5525d9e8def7337",
14-
"preloader": "loda",
13+
"api_key": "e527f15623dc4494ae0e90ec50aeb7af",
14+
"preloader": "veron",
1515
"cont_rend":"classic",
1616
"header": {
1717
"type": "milky-way",
@@ -23,17 +23,45 @@
2323
}
2424
}
2525
}
26-
</script>
27-
<script src="https://bloggit.pythonanywhere.com/static/Javascript/config.js"></script>
26+
</script>
27+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
28+
29+
<script src="./Javascript/config.js" defer></script>
2830
</head>
2931
<body>
32+
3033
<div id="bloggit-preloader">
3134

3235
</div>
3336
<section id="bloggit-header">
3437

3538
</section>
36-
39+
<div class="container mt-4">
40+
<div class="row">
41+
<div class="col-md-6">
42+
<h2>
43+
Welcome to my Blog
44+
</h2>
45+
<p>I use this platform to document my adventures in Backend Development, including in-depth insights into my API projects and related topics.</p>
46+
<p>You'll find information on how I've tackled challenges, valuable resources, and more.</p>
47+
<p>Explore some of my projects below</p>
48+
49+
<div class="mb-3">
50+
<a href="https://web.facebook.com/profile.php?id=100074315773238" class="btn btn-primary mr-2"><i class="fab fa-facebook-f"></i></a>
51+
<a href="https://twitter.com/craennie" class="btn btn-secondary mr-2"><i class="fab fa-twitter"></i></a>
52+
<a href="https://github.com/Crane04" class="btn btn-info mr-2"><i class="fab fa-github"></i></a>
53+
<a href="https://www.linkedin.com/in/yusuf-mayowa-2031522a0/" class="btn btn-success mr-2"><i class="fab fa-linkedin-in"></i></a>
54+
<a href="mailto:[email protected]" class="btn btn-warning mr-2"><i class="far fa-envelope"></i></a>
55+
<a href="https://wa.me/+2349114081137" class="btn btn-danger"><i class="fab fa-whatsapp"></i></a>
56+
</div>
57+
</div>
58+
<div class="col-md-6">
59+
<div class="image-container">
60+
<img src="https://mayowadev.pythonanywhere.com/static/assets/blog/myImage.png" alt="Your Image" class="img-fluid">
61+
</div>
62+
</div>
63+
</div>
64+
</div>
3765
<section id="bloggit-container">
3866

3967
<!-- Add more posts as needed -->

‎Test templates/new.html

+21-87
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,23 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Admin Page</title>
7-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8-
<link rel="stylesheet" href="./CSS/admin.css">
9-
</head>
10-
<body>
11-
<section class="header">
12-
<section>
13-
<h2>Bloggit</h2>
14-
</section>
15-
<section>
16-
<span> Mayowa</span>
17-
</section>
18-
19-
</section>
20-
<section class="container">
21-
22-
<section id="btns">
23-
<button id="create-post-btn" onclick="toggleSection('create-post')">Create Post</button>
24-
<button id="manage-post-btn" onclick="toggleSection('manage-post')">Manage Posts</button>
25-
</section>
26-
27-
<!-- Create Post Section -->
28-
<section id="create-post" class="form-section active">
29-
<h3>Create New Post</h3>
30-
<form id="post-form">
31-
<section class="form-group">
32-
<label for="title">Title:</label>
33-
<input type="text" class="form-control" id="title" name="title" required>
34-
</section>
35-
36-
<section class="form-group">
37-
<label for="content">Content:</label>
38-
<textarea id="content" name="content"></textarea>
39-
</section>
40-
41-
<section class="form-group">
42-
<label for="image">Image:</label>
43-
<input type="file" class="form-control-file" id="image" name="image" accept=".png, .jpg, .jpeg">
44-
</section>
45-
46-
<section class="form-check">
47-
<input type="checkbox" class="form-check-input" id="publish" name="publish">
48-
<label class="form-check-label" for="publish">Publish</label>
49-
</section>
50-
51-
<section class="form-check">
52-
<input type="checkbox" class="form-check-input" id="featured" name="featured">
53-
<label class="form-check-label" for="featured">Featured</label>
54-
</section>
55-
56-
<button type="submit" class="btn btn-primary">Create Post</button>
57-
</form>
58-
</section>
59-
60-
<!-- Manage Post Section -->
61-
<section id="manage-post" class="form-section">
62-
<h2>Manage Posts</h2>
63-
<table class="table table-responsive">
64-
<thead>
65-
<tr>
66-
<th>S/N</th>
67-
<th>Title</th>
68-
<th>Date</th>
69-
<th>Edit</th>
70-
<th>Delete</th>
71-
<th>Publish</th>
72-
<th>Featured</th>
73-
</tr>
74-
</thead>
75-
<tbody>
76-
<!-- Posts will be dynamically added here -->
77-
</tbody>
78-
</table>
79-
</section>
80-
</section>
81-
82-
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
83-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
84-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
85-
<script src="./Javascript/summernote.js"></script>
86-
<script src = "./Javascript/admin.js"></script>
87-
<script src = "./Javascript/make-post.js"></script>
88-
</body>
2+
<html>
3+
<head>
4+
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
5+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
6+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
7+
</head>
8+
<body>
9+
10+
<div id="mydiv"></div>
11+
12+
<script type="text/babel">
13+
function Hello() {
14+
return <h1>Hello Word!</h1>;
15+
}
16+
17+
const container = document.getElementById('mydiv');
18+
const root = ReactDOM.createRoot(container);
19+
root.render(<Hello />)
20+
</script>
21+
22+
</body>
8923
</html>

0 commit comments

Comments
 (0)