Merge pull request #205 from jordanopensource/development

Merge development into main

Author: thread-koder

.drone.yml

@@ -31,7 +31,7 @@ steps:
         ]
       tags:
         - ${DRONE_COMMIT_SHA}
-        - stable
+        - latest
       username:
         from_secret: docker_username
       password:

.env.sample

@@ -1,10 +1,11 @@
 # endpoint for API
-COMMUNITY_API_URL=
-TARGET_ENV=
-DRONE_COMMIT_SHA=
-DRONE_BUILD_NUMBER=
-DRONE_BUILD_LINK=
-DRONE_COMMIT_LINK=
-DRONE_REPO_LINK=
-DRONE_BUILD_FINISHED=
-DEBUG=
+NUXT_PUBLIC_COMMUNITY_API_URL=
+NUXT_PUBLIC_TARGET_ENV=
+NUXT_PUBLIC_BUILD_COMMIT_SHA=
+NUXT_PUBLIC_BUILD_NUMBER=
+NUXT_PUBLIC_BUILD_LINK=
+NUXT_PUBLIC_BUILD_COMMIT_LINK=
+NUXT_PUBLIC_BUILD_REPO_LINK=
+NUXT_PUBLIC_BUILD_TIMESTAMP=
+NUXT_PUBLIC_DEBUG=
+NUXT_PUBLIC_SESSION_COOKIE_NAME=

CONTRIBUTING.md

@@ -0,0 +1,62 @@
+## Contributing to JOSA.community
+
+Thank you for your interest in contributing to our project! We welcome your help and appreciate your support.
+To ensure a smooth and collaborative process, please take a moment to review this contributing guide.
+
+## Code or Documentation Contributions
+
+1. [Fork this repository](https://github.com/jordanopensource/community-web/fork).
+2. Clone the forked repository to your local machine with this command:    
+`git clone https://github.com/<your github username>/community-web.git`
+3. Switch to `development` branch with this command: `git checkout development`.    
+**If your contribution is a documentation, jump to step 7 below**.
+4. (**_You can ignore this step if you're using docker compose_**) Create a `.env` file and copy the content of [`.env.sample`](https://github.com/jordanopensource/community-web/blob/development/.env.sample) file into it,
+then add the value(s) of environment variable(s).
+You can use the current running API URL as the value to `NUXT_PUBLIC_COMMUNITY_API_URL` variable as the following:
+`NUXT_PUBLIC_COMMUNITY_API_URL=https://community.api.prod.josa.ngo/v2`.    
+(_other environment variables are optional_).
+
+5. [Run the project locally](https://github.com/jordanopensource/community-web/blob/main/CONTRIBUTING.md#running-the-project-locally).
+6. Check current [issues](https://github.com/jordanopensource/community-web/issues), 
+and if you're a beginner, you can [filter issues with `good first issues` label](https://github.com/jordanopensource/contributions-web/issues?q=is%3Aopen+is%3Aissue+label%3Ahacktoberfest+label%3A%22good+first+issue%22).    
+If you decide to work on one of the issues, write a comment on the issue asking to be assigned to it.    
+_Do not work on issues that you're not assigned to in order to avoid duplicate work_.
+7. Create a new branch from `development` branch for the task that you want to work on:    
+    `git checkout -b <prefix>/branch-title`    
+      - `<prefix>`: The prefix should be one of the following:
+        - `feat` for new features
+        - `fix` for bug fixes
+        - `task` for other general tasks
+        - `docs` for documentation
+      - `branch-title` should be short and concise and written in kebab-case (separate each word with '-')    
+**Example**:
+        ```sh
+        git checkout development && git pull # pull the latest changes from development branch
+
+        git checkout -b fix/type # create new branch
+        ```
+
+8. Write descriptive and concise commit messages.    
+    Follow these guidelines when writing commit messages:
+    - Limit the first line of the commit message to 72 characters or less.
+    - Use the imperative mood and present tense in the subject line, e.g. "Fix typo in the homepage" instead of "Fixed typo...".
+    - Use the body of the commit message to provide additional context or details, _if necessary_.
+      - Use bullet points in the body of the commit message to break down changes, _if necessary_.
+
+9. Push to your branch and then make a pull request from your branch to the base `development`.
+
+### Running the Project Locally
+
+#### Using Docker
+Make sure that [docker](https://docs.docker.com/engine/install/) is installed on your system
+and then run the project locally using [docker compose](https://github.com/jordanopensource/community-web/blob/development/docker-compose.yaml) with this command:
+`docker compose up`.
+
+#### Using Node:
+1. Make sure [Node](https://nodejs.org/en) v18 is installed. Alternatively, you can use [NVM](https://github.com/nvm-sh/nvm#installing-and-updating) to install any node version.
+2. Navigate to the project directory and run `npm i` to install the dependancies.
+3. Run the project in development mode by running `npm run dev`. You can now preview the project on port `3000` by visiting `http://localhost:3000/` in your browser.
+
+## Issues and Features Requests
+
+If you want to report a bug or submit a feature request, please use one of the [templates here](https://github.com/jordanopensource/community-web/issues/new/choose).

Dockerfile

@@ -1,68 +1,47 @@
 # set global args
-ARG COMMUNITY_API_URL HOST=0.0.0.0 PORT=3000 USER=node TARGET_ENV DRONE_COMMIT_SHA=${DRONE_COMMIT_SHA} DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG='false'
+ARG USER=node DRONE_COMMIT_SHA=${DRONE_COMMIT_SHA} DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED}
 
 ###########
 # BUILDER #
 ###########
-FROM node:16.14.0 AS builder
+FROM node:18.14.0 AS builder
 
-# pass the global args
-ARG COMMUNITY_API_URL
-ARG HOST
-ARG PORT
-ARG TARGET_ENV
-ARG DRONE_COMMIT_SHA
-ARG DRONE_BUILD_NUMBER
-ARG DRONE_BUILD_LINK
-ARG DRONE_COMMIT_LINK
-ARG DRONE_REPO_LINK
-ARG DRONE_BUILD_FINISHED
-ARG DEBUG
 
 # copy build context and install dependencinpm res
 WORKDIR /workspace
 COPY . .
 RUN npm install
 
-# inject build args as enviroment variables
-ENV COMMUNITY_API_URL=${COMMUNITY_API_URL} HOST=${HOST} PORT=${PORT} TARGET_ENV=${TARGET_ENV} DRONE_COMMIT_SHA=$DRONE_COMMIT_SHA DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG=${DEBUG}
 # build NuxtJS project
 RUN npm run build
 
 ###########
 # PROJECT #
 ###########
-FROM node:16-slim
+FROM node:18-slim
 
 # pass the global args
-ARG COMMUNITY_API_URL
-ARG HOST
-ARG PORT
 ARG USER
-ARG TARGET_ENV
 ARG DRONE_COMMIT_SHA
 ARG DRONE_BUILD_NUMBER
 ARG DRONE_BUILD_LINK
 ARG DRONE_COMMIT_LINK
 ARG DRONE_REPO_LINK
 ARG DRONE_BUILD_FINISHED
-ARG DEBUG
 
 # copy builder output to project workdir
 WORKDIR /app
-COPY --from=builder --chown=${USER}:${USER} /workspace/.nuxt /app/.nuxt
-COPY --from=builder --chown=${USER}:${USER} /workspace/.output /app/.output
-COPY --from=builder --chown=${USER}:${USER} /workspace/node_modules /app/node_modules
 COPY --from=builder --chown=${USER}:${USER} /workspace/package.json /app/
-
-# inject build args as enviroment variables
-ENV COMMUNITY_API_URL=${COMMUNITY_API_URL} HOST=${HOST} PORT=${PORT} TARGET_ENV=${TARGET_ENV} DRONE_COMMIT_SHA=${DRONE_COMMIT_SHA} DRONE_BUILD_NUMBER=${DRONE_BUILD_NUMBER} DRONE_BUILD_LINK=${DRONE_BUILD_LINK} DRONE_COMMIT_LINK=${DRONE_COMMIT_LINK} DRONE_REPO_LINK=${DRONE_REPO_LINK} DRONE_BUILD_FINISHED=${DRONE_BUILD_FINISHED} DEBUG=${DEBUG}
+COPY --from=builder --chown=${USER}:${USER} /workspace/.output /app/.output
 
 # set user context
 USER ${USER}
 
+# inject build args as enviroment variables
+ENV NUXT_PUBLIC_BUILD_COMMIT_SHA=${DRONE_COMMIT_SHA} NUXT_PUBLIC_BUILD_NUMBER=${DRONE_BUILD_NUMBER} NUXT_PUBLIC_BUILD_LINK=${DRONE_BUILD_LINK} NUXT_PUBLIC_BUILD_COMMIT_LINK=${DRONE_COMMIT_LINK} NUXT_PUBLIC_BUILD_REPO_LINK=${DRONE_REPO_LINK} NUXT_PUBLIC_BUILD_TIMESTAMP=${DRONE_BUILD_FINISHED}
+
 # expose port
 EXPOSE ${PORT}
 
 # run for production
-CMD [ "npm", "run", "start"]
+CMD [ "node", "/app/.output/server/index.mjs"]

app.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-josa-warm-grey-light">
-    <BuildInfoBanner v-if="config.public.TARGET_ENV === 'development'" />
+  <div class="bg-community-grey-light">
+    <BuildInfoBanner v-if="config.public.targetEnv === 'development'" />
     <PageHeader />
     <NuxtPage />
     <PageFooter />

assets/css/form.css

@@ -3,31 +3,31 @@ input {
 }
 
 input::placeholder {
-  @apply text-josa-warm-grey-dark;
+  @apply text-community-grey-dark;
 }
 
 textarea::placeholder {
-  @apply text-josa-warm-grey-dark;
+  @apply text-community-grey-dark;
 }
 
 .input-control label {
-  display      : block;
+  display: block;
   margin-bottom: 0.5rem;
 }
 
 .input-control input,
 .input-control textarea {
-  display      : block;
-  width        : 100%;
-  box-sizing   : border-box;
-  font         : inherit;
-  border       : 1px solid #e0dddb;
-  padding      : 10px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  border: 1px solid #e0dddb;
+  padding: 10px;
   margin-bottom: 1rem;
 }
 
 .input-control input:focus,
 .input-control textarea:focus {
   background-color: #f7f6f5;
-  outline         : none;
+  outline: none;
 }

assets/css/global.css

@@ -11,7 +11,7 @@ padding 40 px btween eneties top bottom, between container items 20px
 */
 body {
   @apply text-base font-normal;
-  @apply text-josa-black-text;
+  @apply text-community-black-text;
 }
 
 /* Titles are classes used to descirbe titles of entities  */
@@ -27,18 +27,37 @@ body {
   @apply border-dotted border-b border-gray-500;
 }
 
-h1 {
-  @apply text-5xl;
+.secondary-text {
+  @apply text-community-grey-text;
+}
+
+h1:not(.heading h1) {
+  @apply text-4xl;
   @apply text-white;
 }
 
 h2 {
-  @apply text-4xl;
+  @apply text-2xl;
 }
 
 h3 {
   @apply lg:text-xl;
 }
+.loader {
+  @apply h-6 w-6;
+  @apply border-4 border-solid border-gray-200;
+  border-radius: 50%;
+  border-top: 3px solid #0c97ac;
+  animation: spin 0.8s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 
 .rounded {
 }
@@ -59,15 +78,15 @@ h3 {
 }
 
 .button-blue {
-  @apply border-josa-blue text-josa-blue;
+  @apply border-community-blue text-community-blue;
 }
 
 .button-blue:hover {
-  @apply bg-josa-blue text-white !important;
+  @apply bg-community-blue text-white !important;
 }
 
 .button-blue-full {
-  @apply border-josa-blue bg-josa-blue;
+  @apply border-community-blue bg-community-blue;
   color: #fff !important;
 }
 
@@ -77,7 +96,7 @@ h3 {
 }
 
 .button-flat {
-  @apply rounded-none border-none normal-case py-3 px-6 text-josa-black font-semibold;
+  @apply rounded-none border-none normal-case py-3 px-6 text-community-black font-semibold;
 }
 
 .button-flat:hover {
@@ -92,11 +111,11 @@ a {
 
 a:hover,
 a.active {
-  @apply text-josa-blue;
+  @apply text-community-blue;
 }
 
 .nav-link {
-  @apply p-2 uppercase block text-josa-warm-grey-light;
+  @apply p-2 uppercase block text-community-grey-light;
 }
 
 @screen lg {
@@ -125,4 +144,12 @@ ul > li {
 
 .title {
   font-weight: 500;
-}
+}
+
+.delete-btn {
+  @apply cursor-pointer bg-trashIcon bg-no-repeat bg-contain w-4 h-4 border-none;
+}
+
+.edit-btn {
+  @apply cursor-pointer bg-contain w-4 h-4 bg-no-repeat;
+}

assets/css/typography.css

@@ -184,10 +184,7 @@ title {
 .mono,
 h1,
 h2,
-h3,
-h4,
-h5,
-h6 {
+h3 {
   font-family: 'IBM Mono';
 }