diff options
Diffstat (limited to 'cmd/web/templates/articles/partials')
6 files changed, 143 insertions, 0 deletions
diff --git a/cmd/web/templates/articles/partials/comments-card.tmpl b/cmd/web/templates/articles/partials/comments-card.tmpl new file mode 100644 index 0000000..1e6062a --- /dev/null +++ b/cmd/web/templates/articles/partials/comments-card.tmpl @@ -0,0 +1,25 @@ +<div class="card"> + <div class="card-block"> + <p class="card-text">{{ .Comment.Body }}</p> + </div> + <div class="card-footer"> + <a href="/users/{{ .Comment.User.Username }}" + hx-push-url="/users/{{ .Comment.User.Username }}" + hx-get="/htmx/users/{{ .Comment.User.Username }}" + hx-target="#app-body" + class="comment-author" + > + <img src="{{ .Comment.User.Image }}" class="comment-author-img" /> + </a> + + <a href="/users/{{ .Comment.User.Username }}" + hx-push-url="/users/{{ .Comment.User.Username }}" + hx-get="/htmx/users/{{ .Comment.User.Username }}" + hx-target="#app-body" + class="comment-author" + > + {{ .Comment.User.Name }} + </a> + <span class="date-posted">{{ .Comment.GetFormattedCreatedAt }}</span> + </div> +</div>
\ No newline at end of file diff --git a/cmd/web/templates/articles/partials/comments-form.tmpl b/cmd/web/templates/articles/partials/comments-form.tmpl new file mode 100644 index 0000000..09f9697 --- /dev/null +++ b/cmd/web/templates/articles/partials/comments-form.tmpl @@ -0,0 +1,18 @@ +<form id="article-comment-form" class="card comment-form" + hx-post="/htmx/articles/{{ .Article.Slug }}/comments" + hx-target="#article-comments-wrapper" hx-swap="afterbegin show:top" + + {{ if .IsOob }} + hx-swap-oob="true" + {{ end }} +> + <div class="card-block"> + <textarea class="form-control" placeholder="Write a comment..." rows="3" name="comment"></textarea> + </div> + <div class="card-footer"> + <img src="{{ .Article.User.Image }}" class="comment-author-img" /> + <button class="btn btn-sm btn-primary"> + Post Comment + </button> + </div> +</form>
\ No newline at end of file diff --git a/cmd/web/templates/articles/partials/comments-wrapper.tmpl b/cmd/web/templates/articles/partials/comments-wrapper.tmpl new file mode 100644 index 0000000..266b4e5 --- /dev/null +++ b/cmd/web/templates/articles/partials/comments-wrapper.tmpl @@ -0,0 +1,26 @@ +<div id="article-comments-wrapper"> + {{ range $comment := .Article.Comments }} + {{ template "articles/partials/comments-card" Dict "Comment" $comment }} + {{ end }} +</div> + +{{ if .IsAuthenticated }} + <div id="form-message"></div> + + {{ template "articles/partials/comments-form" . }} +{{ else }} + <div> + <a href="/htmx/sign-in" hx-get="/htmx/sign-in" hx-target="#app-body" + hx-push-url="/sign-in" + > + Sign in + </a> + or + <a href="/htmx/sign-up" hx-get="/htmx/sign-up" hx-target="#app-body" + hx-push-url="/sign-up" + > + sign up + </a> + to add comments on this article. + </div> +{{ end }}
\ No newline at end of file diff --git a/cmd/web/templates/articles/partials/detail-post-meta.tmpl b/cmd/web/templates/articles/partials/detail-post-meta.tmpl new file mode 100644 index 0000000..a871b44 --- /dev/null +++ b/cmd/web/templates/articles/partials/detail-post-meta.tmpl @@ -0,0 +1,42 @@ +<div class="post-meta"> + <a href="#"><img src="{{ .Article.User.Image }}" /></a> + <div class="info"> + <a href="/users/{{ .Article.User.Username }}" + hx-push-url="/users/{{ .Article.User.Username }}" + hx-get="/htmx/users/{{ .Article.User.Username }}" + hx-target="#app-body" + class="author" + > + {{ .Article.User.Name }} + </a> + <span class="date">{{ .Article.GetFormattedCreatedAt }}</span> + </div> + + {{ if .IsSelf }} + + <button class="btn btn-outline-secondary btn-sm edit-button" + hx-get="/htmx/editor/{{ .Article.Slug }}" + hx-target="#app-body" + hx-push-url="/editor/{{ .Article.Slug }}" + > + <i class="ion-edit"></i> + Edit Article + </button> + + <button class="btn btn-outline-danger btn-sm delete-button" + hx-delete="/htmx/articles/{{ .Article.Slug }}" + hx-target="#app-body" + hx-confirm="Are you sure you wish to delete the article?" + > + <i class="ion-trash-a"></i> + Delete Article + </button> + + {{ else }} + + {{ template "articles/partials/follow-button" . }} + + {{ template "articles/partials/favorite-button" . }} + + {{ end }} +</div>
\ No newline at end of file diff --git a/cmd/web/templates/articles/partials/favorite-button.tmpl b/cmd/web/templates/articles/partials/favorite-button.tmpl new file mode 100644 index 0000000..3146830 --- /dev/null +++ b/cmd/web/templates/articles/partials/favorite-button.tmpl @@ -0,0 +1,15 @@ +<button class="btn btn-outline-primary btn-sm {{ if .IsArticleFavorited }} active {{ end }} favorite-button" + hx-post="/htmx/articles/{{ .Article.Slug }}/favorite" + + {{ if .IsOob }} + hx-swap-oob="outerHTML:.favorite-button" + {{ end }} +> + <i class="ion-heart"></i> + {{ if .IsArticleFavorited }} + Unfavorite Post + {{ else }} + Favorite Post + {{ end }} + ({{ .Article.GetFavoriteCount }}) +</button>
\ No newline at end of file diff --git a/cmd/web/templates/articles/partials/follow-button.tmpl b/cmd/web/templates/articles/partials/follow-button.tmpl new file mode 100644 index 0000000..7184278 --- /dev/null +++ b/cmd/web/templates/articles/partials/follow-button.tmpl @@ -0,0 +1,17 @@ +<button class="btn btn-sm btn-outline-secondary follow-button" + hx-post="/htmx/articles/follow-user/{{ .Article.Slug }}" + + {{ if .IsOob }} + hx-swap-oob="outerHTML:.follow-button" + {{ end }} +> + {{ if .IsFollowed }} + <i class="ion-minus-round"></i> + Unfollow + {{ else }} + <i class="ion-plus-round"></i> + Follow + {{ end }} + {{ .Article.User.Name }} + <span class="counter">({{ .Article.User.FollowersCount }})</span> +</button>
\ No newline at end of file |