diff options
Diffstat (limited to 'cmd/web/templates/articles')
10 files changed, 189 insertions, 0 deletions
diff --git a/cmd/web/templates/articles/htmx-article-page.tmpl b/cmd/web/templates/articles/htmx-article-page.tmpl new file mode 100644 index 0000000..9380c0a --- /dev/null +++ b/cmd/web/templates/articles/htmx-article-page.tmpl @@ -0,0 +1,3 @@ +{{ template "articles/show" . }} +{{ template "components/navbar" . }} +{{ template "components/head" . }}
\ No newline at end of file diff --git a/cmd/web/templates/articles/htmx-post-comments.tmpl b/cmd/web/templates/articles/htmx-post-comments.tmpl new file mode 100644 index 0000000..742b339 --- /dev/null +++ b/cmd/web/templates/articles/htmx-post-comments.tmpl @@ -0,0 +1,2 @@ +{{ template "articles/partials/comments-card" . }} +{{ template "articles/partials/comments-form" . }}
\ No newline at end of file diff --git a/cmd/web/templates/articles/htmx-show.tmpl b/cmd/web/templates/articles/htmx-show.tmpl new file mode 100644 index 0000000..9021bb2 --- /dev/null +++ b/cmd/web/templates/articles/htmx-show.tmpl @@ -0,0 +1,3 @@ +{{ template "articles/partials/detail-title" . }} +{{ template "articles/partials/detail-post-meta" . }} +{{ template "articles/partials/detail-post-content" . }}
\ No newline at end of file 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 diff --git a/cmd/web/templates/articles/show.tmpl b/cmd/web/templates/articles/show.tmpl new file mode 100644 index 0000000..364444e --- /dev/null +++ b/cmd/web/templates/articles/show.tmpl @@ -0,0 +1,38 @@ +<div class="post-page"> + + <div class="banner"> + <div class="container"> + <h1 id="article-detail__title"> + {{ .Article.Title }} + </h1> + + {{ template "articles/partials/detail-post-meta" . }} + </div> + </div> + + <div class="article-detail container page"> + <div class="row post-content"> + <div class="col-md-12"> + {{ .Article.Body }} + </div> + <div class="col-md-12 m-t-2"> + <ul class="tag-list"> + {{ range $tag := .Article.Tags }} + <li class="tag-default tag-pill tag-outline">{{ $tag.Name }}</li> + {{ end }} + </ul> + </div> + </div> + + <hr /> + + <div class="post-actions"> + {{ template "articles/partials/detail-post-meta" . }} + </div> + + <div class="row"> + <div class="col-md-8 col-md-offset-2" hx-get="/htmx/articles/{{ .Article.Slug }}/comments" hx-trigger="load"></div> + </div> + + </div> +</div>
\ No newline at end of file |