[Release 1.0.0] Stable templates

.github/workflows/upload_to_release.yml

@@ -0,0 +1,50 @@
+name: Upload distribution to release
+
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v4
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build the dist
+        run: npm run build:dev
+
+      - name: Create archives
+        run: |
+          zip -r dist.zip ./dist
+          zip -r handlebars.zip ./src/views
+
+      - name: Upload release asset (dist)
+        uses: actions/upload-release-asset@v1
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: ./dist.zip
+          asset_name: dist.zip
+          asset_content_type: application/zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload release asset (handlebars)
+        uses: actions/upload-release-asset@v1
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: ./handlebars.zip
+          asset_name: handlebars.zip
+          asset_content_type: application/zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -5,9 +5,33 @@ This repo contains Bootstrap templates for the task tracker project.
 Getting started
 ---------------
 
-[//]: # (TODO: complete getting section)
+Download the repository to your local machine.
+This project uses `npm` and `nodejs` to handle builds via `webpack`.
+
+Install dependencies using command:
+
+```shell
+npm install
+```
+
+After that other commands will be available.
+You can review all commands within `scripts` section of *package.json* file.
+
+Create a developers' distribution:
+
+```shell
+npm run build:dev
+```
+
+Run dev server:
+
+```shell
+npm run start
+```
 
 References
 ----------
 
 - [Bootstrap v5.3](https://getbootstrap.com/docs/5.3/)
+- [NodeJS](https://nodejs.org)
+- [Webpack](https://webpack.js.org/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tasktracker-bootstrap",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Task tracker site bootstrap5 templates",
   "private": true,
   "scripts": {

src/index.js

@@ -15,7 +15,6 @@ import * as htmx from "htmx.org"
 // include custom stylesheets, javascript, icons etc.
 import "./scss/auth.scss"
 import "./scss/detail.scss"
-import "./scss/form.scss"
 import "./scss/list.scss"
 import "./scss/profile.scss"
 

src/views/partials/_navbar.hbs

@@ -6,18 +6,20 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-        <a href="" class="navbar-brand"><i class="bi bi-list-task"></i>&nbsp;Task Tracker</a>
+        <a href="{{ListView}}" class="navbar-brand"><i class="bi bi-list-task"></i>&nbsp;Task Tracker</a>
         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
           {{# if is_admin }}  {{! visible for admins only }}
-            <li class="nav-item"><a href="" class="nav-link">Administration</a></li>
+            <li class="nav-item"><a href="{{AdminIndex}}" class="nav-link">Administration</a></li>
           {{/if}}
           {{# if is_authenticated }}  {{! visible for authenticated users only }}
-            <li class="nav-item"><a href="" class="nav-link btn btn-outline-primary mx-2">Create new</a></li>
-            <li class="nav-item"><a href="" class="nav-link">Profile</a></li>
-            <li class="nav-item"><a href="" class="nav-link">Sign Out</a></li>
+            {{# unless is_admin }}
+              <li class="nav-item"><a href="{{FormView}}" class="nav-link">Create new</a></li>
+              <li class="nav-item"><a href="{{ProfileView}}" class="nav-link">Profile</a></li>
+            {{/unless}}
+            <li class="nav-item"><a href="{{SignOutView}}" class="nav-link">Sign Out</a></li>
           {{else}}
-            <li class="nav-item"><a href="" class="nav-link">Sign Up</a></li>
-            <li class="nav-item"><a href="" class="nav-link">Sign In</a></li>
+            <li class="nav-item"><a href="{{SignUpView}}" class="nav-link">Sign Up</a></li>
+            <li class="nav-item"><a href="{{SignInView}}" class="nav-link">Sign In</a></li>
           {{/if}}
         </ul>
       </div>

src/views/partials/profile_main.hbs

@@ -5,12 +5,12 @@
       <p class="h5 text-center">{{email}}</p>
     </div>
     <div class="card-body">
-      <div class="row row-cols-1 row-cols-md-2">
+      <div class="row row-cols-1 row-cols-lg-2">
         <section class="col d-flex justify-content-center">
           <img src="{{image}}" alt="avatar" class="rounded-circle shadow avatar">
         </section>
-        <section class="col">
-          <ul class="nav nav-underline mb-3" role="tablist">
+        <section class="col mt-3 mt-lg-0">
+          <ul class="nav nav-underline mb-3 justify-content-center" role="tablist">
             <li class="nav-item" role="presentation">
               <button class="nav-link active" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks-tab-pane"
                       type="button" role="tab" aria-controls="tasks-tab-pane" aria-selected="true">

src/views/partials/signin_form.hbs

@@ -1,16 +1,18 @@
-<form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
-  <h1 class="h3 fw-normal mb-3 text-center">Please sing in</h1>
-  <div class="form-floating">
-    <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">
-    <label for="username">Username</label>
-  </div>
-  <div class="form-floating">
-    <input type="password" class="form-control shadow" id="password" name="password" placeholder="Password">
-    <label for="password">Password</label>
-  </div>
-  <p class="text-center mt-3">
-    Have no account?
-    <a href="{{SignUpView}}" class="text-body fw-bold">Register now</a>
-  </p>
-  <button class="btn btn-primary w-100 mt-2"><span class="h3">Login</span></button>
-</form>
+<main class="col col-md-10 col-lg-9">
+  <form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
+    <h1 class="h3 fw-normal mb-3 text-center">Enter your credentials</h1>
+    <div class="form-floating mb-3">
+      <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">
+      <label for="username">Username</label>
+    </div>
+    <div class="form-floating mb-3">
+      <input type="password" class="form-control shadow" id="password" name="password" placeholder="Password">
+      <label for="password">Password</label>
+    </div>
+    <button class="btn btn-primary w-100 my-2 fs-5">Sign In</button>
+    <p class="text-center mt-3">
+      Have no account?
+      <a href="{{SignUpView}}" class="text-body fw-bold">Register now</a>
+    </p>
+  </form>
+</main>

src/views/partials/signup_form.hbs

@@ -1,25 +1,27 @@
-<form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
-  <h1 class="h3 fw-normal mb-3 text-center">Register a new account</h1>
-  <div class="form-floating">
-    <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">
-    <label for="username">Username</label>
-  </div>
-  <div class="form-floating">
-    <input type="email" class="form-control shadow" id="email" name="email" placeholder="Email">
-    <label for="email">Email</label>
-  </div>
-  <div class="form-floating">
-    <input type="password" class="form-control shadow" id="password" name="password" placeholder="Password">
-    <label for="password">Password</label>
-  </div>
-  <div class="form-floating">
-    <input type="password" class="form-control shadow" id="confirmPassword" name="confirm_password"
-           placeholder="Confirm Password">
-    <label for="confirmPassword">Confirm Password</label>
-  </div>
-  <p class="text-center mt-3">
-    Already have an account?
-    <a href="{{SignInView}}" class="text-body fw-bold">Login</a>
-  </p>
-  <button class="btn btn-primary w-100 mt-2"><span class="h3">Register</span></button>
-</form>
+<main class="col col-md-10 col-lg-9">
+  <form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
+    <h1 class="h3 fw-normal mb-3 text-center">Register a new account</h1>
+    <div class="form-floating mb-3">
+      <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">
+      <label for="username">Username</label>
+    </div>
+    <div class="form-floating mb-3">
+      <input type="email" class="form-control shadow" id="email" name="email" placeholder="Email">
+      <label for="email">Email</label>
+    </div>
+    <div class="form-floating mb-3">
+      <input type="password" class="form-control shadow" id="password" name="password" placeholder="Password">
+      <label for="password">Password</label>
+    </div>
+    <div class="form-floating mb-3">
+      <input type="password" class="form-control shadow" id="confirmPassword" name="confirm_password"
+             placeholder="Confirm Password">
+      <label for="confirmPassword">Confirm Password</label>
+    </div>
+    <button class="btn btn-primary w-100 my-2 fs-5">Sign Up</button>
+    <p class="text-center mt-3">
+      Already have an account?
+      <a href="{{SignInView}}" class="text-body fw-bold">Login</a>
+    </p>
+  </form>
+</main>

src/views/signin_view.hbs

@@ -15,9 +15,7 @@
 {{>partials/_navbar}}
 <div class="container">
   <div class="row justify-content-center">
-    <main class="col col-md-10 col-lg-9">
-      {{>partials/signin_form}}
-    </main>
+    {{>partials/signin_form}}
   </div>
 </div>
 </body>