diff --git a/css/blog.css b/css/blog.css
index 3f9f4f6..726b099 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -91,4 +91,34 @@
border-bottom-right-radius: 1rem;
}
+.blog-pagination {
+ margin-bottom: 2rem;
+}
+.blog-pagination .btn {
+ margin-left: 1rem;
+ width: 5rem;
+}
+
+.avatar {
+ max-height: 10rem;
+ max-width: 10rem;
+}
+
+.blogpost-comment {
+ margin-bottom: 0.75rem;
+}
+.blogpost-comment .avatar {
+ max-height: 7rem;
+ max-width: 7rem;
+}
+.blogpost-comment div strong {
+ margin-bottom: 0.5rem;
+}
+.blogpost-comment div div {
+ margin-bottom: 0.5rem;
+}
+.blogpost-comment .bi-calendar {
+ margin-right: 0.5rem;
+}
+
/*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index b1d4b26..f861ae0 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAGF;EACE;;AAIJ;EACE","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index 27118c7..ef3f6dd 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.blogpost-comment{margin-bottom:.75rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}.blogpost-comment div div,.blogpost-comment div strong{margin-bottom:.5rem}.blogpost-comment .bi-calendar{margin-right:.5rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 81f78ec..06966f7 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -94,9 +94,47 @@
border-bottom-right-radius: 1rem;
}
}
+
.form-auth.form-signup {
#confirmPassword {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
}
+
+.blog-pagination {
+ margin-bottom: 2rem;
+
+ .btn {
+ margin-left: 1rem;
+ width: 5rem;
+ }
+}
+
+.avatar {
+ max-height: 10rem;
+ max-width: 10rem;
+}
+
+.blogpost-comment {
+ margin-bottom: 0.75rem;
+
+ .avatar {
+ max-height: 7rem;
+ max-width: 7rem;
+ }
+
+ div {
+ strong {
+ margin-bottom: 0.5rem;
+ }
+
+ div {
+ margin-bottom: 0.5rem;
+ }
+ }
+
+ .bi-calendar {
+ margin-right: 0.5rem;
+ }
+}
diff --git a/img/anonymous.svg b/img/anonymous.svg
new file mode 100644
index 0000000..ffc9539
--- /dev/null
+++ b/img/anonymous.svg
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/blog.js b/js/blog.js
new file mode 100644
index 0000000..8a38ef6
--- /dev/null
+++ b/js/blog.js
@@ -0,0 +1,67 @@
+// blogpost comment creation
+
+const createBlogpostComment = ({author, message, created_at}) => {
+ const comment = document.createElement("div");
+ comment.classList.add("blogpost-comment", "col-12", "d-flex");
+
+ const author_avatar = document.createElement("img");
+ author_avatar.src = author.img;
+ author_avatar.classList.add("avatar", "rounded-circle", "p-2");
+ comment.appendChild(author_avatar);
+
+ const comment_body = document.createElement("div");
+ comment.appendChild(comment_body);
+
+ const comment_author = document.createElement("strong");
+ comment_author.classList.add("h4", "mb-2");
+ comment_author.innerText = author.name;
+ comment_body.appendChild(comment_author);
+
+ const comment_message = document.createElement("div");
+ comment_message.innerText = message;
+ comment_body.appendChild(comment_message);
+
+ const comment_created = document.createElement("small");
+ const icon = document.createElement("i");
+ comment_created.classList.add("text-muted");
+ comment_created.innerText = created_at;
+ icon.classList.add("bi", "bi-calendar");
+ comment_created.insertBefore(icon, comment_created.firstChild);
+ comment_body.appendChild(comment_created);
+
+ return comment;
+}
+
+
+const addBlogpostComment = comment => {
+ const container = document.getElementById("BlogpostCommentsContainer");
+ if (container) container.insertBefore(comment, container.firstChild);
+}
+
+
+const handleNewCommentSubmit = (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ const message = event.target.querySelector("textarea").value.trim();
+ event.target.reset();
+
+ if (!message) return;
+
+ // TODO: get payload from backend
+ const payload = {
+ author: {
+ img: "https://i.pravatar.cc/350?u=da594f2b",
+ name: "Bosco Longhole",
+ },
+ message,
+ created_at: "Feb 2, 2023",
+ }
+
+ const comment = createBlogpostComment(payload);
+ addBlogpostComment(comment);
+}
+
+
+const BlogpostCommentsForm = document.getElementById("BlogpostCommentForm");
+if (BlogpostCommentsForm) BlogpostCommentsForm.addEventListener("submit", handleNewCommentSubmit);
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 44611cd..59e91a9 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -25,17 +25,17 @@
Django Blog
-
-
Authenticate
-
- Toggle Dropdown
-
-
+
+
+
@@ -111,8 +111,8 @@
- hydras volare!
+
hydras volare!
category
@@ -144,7 +144,7 @@
hydras volare!
minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
voluptatem.
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
vitae? Atque?
@@ -167,7 +167,7 @@
hydras volare!
minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
voluptatem.
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
vitae? Atque?
@@ -192,6 +192,80 @@
hydras volare!
+ Comments
+
+
@@ -233,5 +307,6 @@
Out social media
+