Completed the basic image gallery (#95)

* Add lazy loading attribute for image HTML elements

* This commit fixes #39 (#41)

* Contact Page updated ; Color scheme modifed

* Unused images removed ; Navbar navigation improved

* Made changes myself

---------

Co-authored-by: Aditya Raute <[email protected]>
Co-authored-by: Aditya Raute <[email protected]>

* Implemented a responsive grid gallery that gets images from a json file (#56)

* Implemented a responsive grid gallery that gets images from a json file

* added image gallery to activities page

* Update PULL_REQUEST_TEMPLATE.MD

* Delete PULL_REQUEST_TEMPLATE.md

* Fixed typos

* Change navbar and body text color to white (#60)

* Change navbar and body text color to white

* Change underline from #ccc to #fff

* Prettier workflow merging (#62)

* Create main.yml

* Sample commit

* Update and rename main.yml to .github/workflows/main.yml

* Update and rename main.yml to prettify.yml

* Update prettify.yml

* Update the git command

* Prettified Code!

---------

Co-authored-by: adityaraute <[email protected]>

* Prettified Code!

* CSS: fix font color on contacts page  (#66)

* CSS: fix font color on contacts page.

* CSS: Change font color to white on active list item.

* Create SECURITY.md

* Footer Fixed by changing CSS (#71)

* height changed for footer

* chnages some css to make contact page look better

* To achieve that, I have restrucuture the html to add body inside a div with class mainbody

* Updated Favicon (#73)

* Uniformity restored in bug report issue template (#76)

* feat: add Prettier (#72)

* feat(project): add initial package.json file

* chore(package): update package.json config

- Remove unnecessary fields (version, main, keywords, author, license)
- Add `sideEffects` field set to false to enable better bundling optimizations.
- Specify package as an ES module by setting the `type` field to "module".
- Mark the package as private to prevent accidental publication.

* feat(npm-config): enforce installation of exact version dependencies

Add `.npmrc` file with `save-exact` set to `true` to enforce that the exact versions of dependencies are saved in package.json

* chore(dependencies): add `prettier` and `prettier-plugin-packagejson` as dev. dependencies

* feat(project): add Prettier config file

* chore: add .gitignore and .prettierignore files

Add .gitignore and .prettierignore files to prevent 'node_modules' and 'package-lock.json' from being tracked by git and formatted by Prettier.

* feat(package-scripts): add linting and formatting npm scripts

Added new `lint` and `fix` scripts in the package.json, allowing for code linting and auto-fixing issues using Prettier.

It also includes `concurrently` as a dev. dependency enabling running multiple npm scripts in parallel.

* style: add formatting changes made by Prettier

* chore(dependencies): add husky and lint-staged for pre-commit hooks

This commit adds two new development dependencies to the project: `husky` and `lint-staged`. Husky is used to configure Git hooks, and lint-staged allows running linters on staged files in Git

* chore(husky): add 'prepare' script for husky install

This commit ensures that Husky's git hooks are installed after running `npm install`.

* feat(husky): add pre-commit hook

* feat(lint-staged): add code formatting on commit

Added `.lintstagedrc.js` with a default export setting up Prettier to run against all matched files. The `--ignore-unknown` flag allows Prettier to skip files it does not recognize.

* ci(github-actions): add `node` setup in prettify workflow

This commit updates the code formatting's workflow. The 'Checkout' action is upgraded from v3 to v4. Additionally, this update introduces the setup-node action, specifying the `lts` version of Node.js, followed by `npm ci` to install dependencies based on the lock file.

* feat(environment): specify lts version of node in package.json

This commit introduces a `.nvmrc` file with the version `20.10.0`, and updates the `package.json` to include both `engines` and `volta` fields that enforce the use of the long-term support (LTS) of Node.js.

* ci(workflow): add names to new CI steps

* chore(dependencies): update `prettier-plugin-packagejson` to 2.4.9

* Added checkbox for issue template (#79)

* Added would you like to work on this issue

* Added would you like to work on this issue

* Update .github/ISSUE_TEMPLATE/feature_request.md

Co-authored-by: Aditya Raute <[email protected]>

---------

Co-authored-by: Aditya Raute <[email protected]>

* Change logo on all pages

change logo to favicon

* Added links to the logo (#86)

* Added would you like to work on this issue

* Added would you like to work on this issue

* Update .github/ISSUE_TEMPLATE/feature_request.md

Co-authored-by: Aditya Raute <[email protected]>

* Update index.html

* Update gallery.html

* Update contact.html

* Update gallery.html

* Update activities.html

* full url to reletive path

---------

Co-authored-by: Aditya Raute <[email protected]>

* Delete gallery.html

Unnecessary and unused file

* Convert all Issue Templates to Issue Forms #81 (#89)

* Convert all Issue Templates to Issue Forms #81

* Convert all Issue Templates to Issue Forms #81

* Convert all Issue Templates to Issue Forms #81

* Convert all Issue Templates to Issue Forms #81

* Convert all Issue Templates to Issue Forms #81

* Add media queries for contact page (#90)

* fixes issue #78

change logo to favicon

* Fixes the issue-#84

Add media query for mobile screen

* Fixes the issue-#84

Changed the contact CSS page. removed
unwanted code.

* Update style.css

* Split JS files

* Update feature_report.yml

remove discord link

* Update feature_report.yml

remove discord link

* Remove extra empty EOL

* Added sample activities

* Created an image gallery

---------

Co-authored-by: Agriya Khetarpal <[email protected]>
Co-authored-by: Ashutosh Kapoor <[email protected]>
Co-authored-by: Chilufya <[email protected]>
Co-authored-by: BulumkoJele <[email protected]>
Co-authored-by: adityaraute <[email protected]>
Co-authored-by: Suyog Kurlekar <[email protected]>
Co-authored-by: Nishar Miya <[email protected]>
Co-authored-by: SaiPreethamReddyy <[email protected]>
Co-authored-by: S A G A R <[email protected]>
Co-authored-by: Bryan Mendoza <[email protected]>
Co-authored-by: Adam Basha <[email protected]>
Co-authored-by: VJKUMAR <[email protected]>
Co-authored-by: Latish 705 <[email protected]>
Co-authored-by: Hemant <[email protected]>

.github/ISSUE_TEMPLATE/feature_report.yml

@@ -49,7 +49,4 @@ body:
       description: For example reference any existing code
     validations:
       required: false
-  - type: markdown
-    attributes:
-      value: |
-        You can also join our Discord community [here]
+

.gitpod.yml

@@ -0,0 +1,8 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install

activities.html

@@ -19,14 +19,14 @@
     <div id="navbar">
       <nav>
         <a href="/">
-        <img
-          class="logo"
-          alt="RBJKS LOGO"
-          src="./assets/images/faviconn.png"
-          loading="lazy"
-        />
+          <img
+            class="logo"
+            alt="RBJKS LOGO"
+            src="./assets/images/faviconn.png"
+            loading="lazy"
+          />
         </a>
-      
+
         <ul>
           <!-- <li></li>  -->
           <li><a class="translate" href="/" aria-label="होम">Home</a></li>
@@ -158,4 +158,5 @@ <h3>Activities</h3>
     </div>
   </body>
   <script src="script/main.js"></script>
+  <script src="script/gallery.js"></script>
 </html>

images.json

@@ -1,40 +1,24 @@
 {
   "images": [
     {
-      "url": "https://via.placeholder.com/300",
-      "caption": "Placeholder Image 1"
+      "url": "assets/images/Activities/3 July.jpg",
+      "caption": "3 July 2023 - Constructed a toilet for a family in GP Bhadwar"
     },
     {
-      "url": "https://via.placeholder.com/350",
-      "caption": "Placeholder Image 2"
+      "url": "assets/images/Activities/8 Aug.jpg",
+      "caption": "8 August 2023 - Delivered a sports kit in GP Minjgram"
     },
     {
-      "url": "https://via.placeholder.com/400",
-      "caption": "Placeholder Image 3"
+      "url": "assets/images/Activities/14 Dec.jpg",
+      "caption": "14 Dec 2023"
     },
     {
-      "url": "https://via.placeholder.com/450",
-      "caption": "Placeholder Image 4"
+      "url": "assets/images/Activities/18 May.jpg",
+      "caption": "18 May 2023"
     },
     {
-      "url": "https://via.placeholder.com/500",
-      "caption": "Placeholder Image 5"
-    },
-    {
-      "url": "https://via.placeholder.com/500",
-      "caption": "Placeholder Image 5"
-    },
-    {
-      "url": "https://via.placeholder.com/500",
-      "caption": "Placeholder Image 5"
-    },
-    {
-      "url": "https://via.placeholder.com/500",
-      "caption": "Placeholder Image 5"
-    },
-    {
-      "url": "https://via.placeholder.com/500",
-      "caption": "Placeholder Image 5"
+      "url": "assets/images/Activities/21 Aug.jpg",
+      "caption": "21 August 2023"
     }
   ]
 }

index.html

@@ -151,4 +151,5 @@ <h1 class="title translate" aria-label="रणजीत बख्शी जन 
     </div>
   </body>
   <script src="script/main.js"></script>
+  <script src="script/gallery.js"></script>
 </html>

script/gallery.js

@@ -0,0 +1,33 @@
+// PULL IMAGES FROM 'imges.json' AND DISPLAY THEM
+console.log('images')
+document.addEventListener('DOMContentLoaded', function () {
+    const gallery = document.getElementById('gallery');
+
+    // Fetch JSON data
+    fetch('images.json')
+      .then((response) => response.json())
+      .then((data) => {
+        // Iterate through each image in the JSON
+        data.images.forEach((image) => {
+          // Create elements for image and caption
+          const item = document.createElement('div');
+          item.classList.add('gallery-item');
+
+          const img = document.createElement('img');
+          img.src = image.url;
+          img.alt = image.caption;
+
+          const caption = document.createElement('p');
+          caption.textContent = image.caption;
+
+          // Append elements to the gallery
+          item.appendChild(img);
+          item.appendChild(caption);
+          gallery.appendChild(item);
+        });
+      })
+      .catch((error) => {
+        console.error('Error fetching data:', error);
+      });
+  });
+

script/main.js

@@ -55,34 +55,3 @@ function toggleMobileNav() {
   }
 }
 
-// PULL IMAGES FROM 'imges.json' AND DISPLAY THEM
-document.addEventListener('DOMContentLoaded', function () {
-  const gallery = document.getElementById('gallery');
-
-  // Fetch JSON data
-  fetch('images.json')
-    .then((response) => response.json())
-    .then((data) => {
-      // Iterate through each image in the JSON
-      data.images.forEach((image) => {
-        // Create elements for image and caption
-        const item = document.createElement('div');
-        item.classList.add('gallery-item');
-
-        const img = document.createElement('img');
-        img.src = image.url;
-        img.alt = image.caption;
-
-        const caption = document.createElement('p');
-        caption.textContent = image.caption;
-
-        // Append elements to the gallery
-        item.appendChild(img);
-        item.appendChild(caption);
-        gallery.appendChild(item);
-      });
-    })
-    .catch((error) => {
-      console.error('Error fetching data:', error);
-    });
-});