frontend implementation

node_modules_real/composer-title-container.tpl

@@ -0,0 +1,62 @@
+{/* <div class="title-container align-items-center gap-2 d-flex">
+    {{{ if isTopic }}}
+    <div class="category-list-container {{{ if !template.compose }}}d-none d-md-block{{{ end }}} align-self-center">
+        <!-- IMPORT partials/category/selector-dropdown-left.tpl -->
+    </div>
+    {{{ end }}}
+
+    {{{ if showHandleInput }}}
+    <div data-component="composer/handle">
+        <input class="handle form-control h-100 border-0 shadow-none" type="text" placeholder="[[topic:composer.handle-placeholder]]" value="{handle}" />
+    </div>
+    {{{ end }}}
+
+    <div data-component="composer/title" class="position-relative flex-1" style="min-width: 0;">
+        {{{ if isTopicOrMain }}}
+        <input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{topicTitle}" />
+        {{{ else }}}
+        <span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{{{ if isEditing }}}[[topic:composer.editing-in, "{topicTitle}"]]{{{ else }}}[[topic:composer.replying-to, "{topicTitle}"]]{{{ end }}}</span>
+        {{{ end }}}
+        <div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
+            <div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
+            <div class="quick-search-results-container"></div>
+        </div>
+    </div>
+
+    <div class="{{{ if !template.compose }}}d-none d-md-flex{{{ else }}}d-flex{{{ end }}} action-bar gap-1 align-items-center">
+        <button class="btn btn-sm btn-link text-body fw-semibold composer-minimize" data-action="hide"><i class="fa fa-angle-down"></i> <span class="d-none d-md-inline">[[topic:composer.hide]]</span></button>
+        <button class="btn btn-sm btn-link composer-discard text-body fw-semibold" data-action="discard"><i class="fa fa-trash"></i> <span class="d-none d-md-inline">[[topic:composer.discard]]</span></button>
+        <div class="btn-group btn-group-sm" component="composer/submit/container">
+            <button class="btn btn-primary composer-submit fw-bold {{{ if !(submitOptions.length || canSchedule) }}}rounded-1{{{ end }}}" data-action="post" data-text-variant=" [[topic:composer.schedule]]"><i class="fa fa-check"></i> <span class="d-none d-md-inline">[[topic:composer.submit]]</span></button>
+            <div component="composer/submit/options/container" data-submit-options="{submitOptions.length}" class="btn-group btn-group-sm {{{ if !(submitOptions.length || canSchedule) }}}hidden{{{ end }}}">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-caret-down"></i>
+                    <span class="sr-only">[[topic:composer.additional-options]]</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end p-1" role="menu">
+                    <li><a class="dropdown-item rounded-1 display-scheduler {{{ if !canSchedule }}}hidden{{{ end }}}" role="menuitem">[[topic:composer.post-later]]</a></li>
+                    <li><a class="dropdown-item rounded-1 cancel-scheduling hidden" role="menuitem">[[modules:composer.cancel-scheduling]]</a></li>
+                    {{{ each submitOptions }}}
+                    <li><a class="dropdown-item rounded-1" href="#" data-action="{./action}" role="menuitem">{./text}</a></li>
+                    {{{ end }}}
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="form-group mt-3">
+    <label for="anonymousRadioGroup">Post anonymously?</label>
+    <div id="anonymousRadioGroup" class="form-check">
+        <input class="form-check-input" type="radio" name="anon_post" id="no" value="none" checked>
+        <label class="form-check-label" for="anonymousNo">
+            No
+        </label>
+    </div>
+    <div class="form-check">
+        <input class="form-check-input" type="radio" name="anon_post" id="yes" value="anonymous">
+        <label class="form-check-label" for="anonymousYes">
+            Yes
+        </label>
+    </div>
+</div> */}

node_modules_real/post.tpl

@@ -0,0 +1,140 @@
+// {{{ if (!./index && widgets.mainpost-header.length) }}}
+// <div data-widget-area="mainpost-header">
+// 	{{{ each widgets.mainpost-header }}}
+// 	{widgets.mainpost-header.html}
+// 	{{{ end }}}
+// </div>
+// {{{ end }}}
+// <div class="d-flex align-items-start gap-3">
+// 	<div class="bg-body d-none d-sm-block rounded-circle" style="outline: 2px solid var(--bs-body-bg);">
+// 		{{{ if (posts.anon_post == "no") }}}
+// 		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" aria-label="[[aria:user-avatar-for, {./user.username}]]">
+// 			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
+// 			<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}">
+// 				<span class="visually-hidden">[[global:{posts.user.status}]]</span>
+// 			</span>
+// 		</a>
+// 		{{{ else }}}
+// 		<!-- Display a "?" as the generic avatar for anonymous -->
+// 		<div class="avatar avatar-tooltip" style="width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; background-color: #ccc; border-radius: 50%; font-size: 24px; color: #fff;">
+// 			?
+// 		</div>
+// 		{{{ end }}}
+
+// 			</div>
+// 	<div class="post-container d-flex flex-grow-1 flex-column w-100" style="min-width:0;">
+// 		<div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1" itemprop="author" itemscope itemtype="https://schema.org/Person">
+// 			<meta itemprop="name" content="{./user.username}">
+// 			{{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
+
+// 			<div class="bg-body d-sm-none">
+// 				<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+// 					{buildAvatar(posts.user, "20px", true, "", "user/picture")}
+// 					<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+// 				</a>
+// 			</div>
+// 			{{{ if (posts.anon_post == "no") }}}
+// 			<a class="fw-bold text-nowrap" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+// 			{{{ else }}}
+// 			<span class="fw-bold text-muted">anonymous</span>
+// 			{{{ end }}}
+
+// 			{{{ each posts.user.selectedGroups }}}
+// 			{{{ if posts.user.selectedGroups.slug }}}
+// 			<!-- IMPORT partials/groups/badge.tpl -->
+// 			{{{ end }}}
+// 			{{{ end }}}
+
+// 			{{{ if posts.user.banned }}}
+// 			<span class="badge bg-danger rounded-1">[[user:banned]]</span>
+// 			{{{ end }}}
+
+// 			<div class="d-flex gap-1 align-items-center">
+// 				<span class="text-muted">{generateWroteReplied(@value, config.timeagoCutoff)}</span>
+
+// 				<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
+// 				<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
+// 			</div>
+
+// 			{{{ if posts.user.custom_profile_info.length }}}
+// 			<div>
+// 				<span>
+// 					&#124;
+// 					{{{ each posts.user.custom_profile_info }}}
+// 					{posts.user.custom_profile_info.content}
+// 					{{{ end }}}
+// 				</span>
+// 			</div>
+// 			{{{ end }}}
+// 			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
+// 				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
+// 				<a href="{config.relative_path}/post/{./pid}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
+// 			</div>
+// 		</div>
+
+// 		<div class="content mt-2 text-break" component="post/content" itemprop="text">
+// 			{posts.content}
+// 		</div>
+// 	</div>
+// </div>
+
+// <div component="post/footer" class="post-footer border-bottom pb-2">
+// 	{{{ if posts.user.signature }}}
+// 	<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
+// 	{{{ end }}}
+
+// 	<div class="d-flex">
+// 		{{{ if !hideReplies }}}
+// 		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
+// 			<span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
+// 				{{{each posts.replies.users}}}
+// 				<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
+// 				{{{end}}}
+// 				{{{ if posts.replies.hasMore}}}
+// 				<span><i class="fa fa-ellipsis"></i></span>
+// 				{{{ end }}}
+// 			</span>
+
+// 			<span class="ms-2 replies-count fw-semibold" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+// 			<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+
+// 			<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
+// 		</a>
+// 		{{{ end }}}
+// 	</div>
+
+// 	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
+
+// 	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
+// 		<!-- IMPORT partials/topic/reactions.tpl -->
+// 		<a component="post/reply" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
+// 		<a component="post/quote" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
+
+// 		{{{ if !reputation:disabled }}}
+// 		<div class="d-flex votes align-items-center">
+// 			<a component="post/upvote" href="#" class="btn-ghost-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
+// 				<i class="fa fa-fw fa-chevron-up text-primary"></i>
+// 			</a>
+
+// 			<meta itemprop="upvoteCount" content="{posts.upvotes}">
+// 			<meta itemprop="downvoteCount" content="{posts.downvotes}">
+// 			<a href="#" class="px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
+
+// 			{{{ if !downvote:disabled }}}
+// 			<a component="post/downvote" href="#" class="btn-ghost-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
+// 				<i class="fa fa-fw fa-chevron-down text-primary"></i>
+// 			</a>
+// 			{{{ end }}}
+// 		</div>
+// 		{{{ end }}}
+
+// 		<!-- IMPORT partials/topic/post-menu.tpl -->
+// 	</div>
+// </div>
+// {{{ if (!./index && widgets.mainpost-footer.length) }}}
+// <div data-widget-area="mainpost-footer">
+// 	{{{ each widgets.mainpost-footer }}}
+// 	{widgets.mainpost-footer.html}
+// 	{{{ end }}}
+// </div>
+// {{{ end }}}