cops-iitbhu / sdg-site

Club of Programmers Software Development Guild Site

SDG Site

SDG site is the place for Software designers, architects and developers to learn, develop and innovate. Containing various Web and App Dev Projects to make college more manageable and blogs to make your learning experience structured and faster, SDG is the go-to site to get rid of your BTs.

The Software Development Group (SDG) is one of the prominent pillars of COPS (Club Of ProgrammerS), IIT (BHU), which aims to unravel the mysteries of the Software world with regular discussions and collaborations. The SDG holds regular Dev talks on intriguing topics and also conducts workshops for students to get started with software development.

Under Heavy Development

Dependencies Include

• nuxt
• @nuxt/content
• @nuxt/axios
• nuxt-windicss
• @nuxtjs/pwa
• @nuxtjs/sitemap
• @nuxtjs/robots
• @nuxtjs/typescript-build
• @nuxtjs/composition-api
• nuxt-purge-icons-module
• sass

Formatter and Linter

• prettier
• eslint
• husky

Typescript is supported and app is in PWA mode

Build Setup

# install dependencies
$ pnpm i

# serve with hot reload at localhost:3000
$ pnpm dev

# build for production and launch server
$ pnpm build
$ pnpm start

# generate static project
$ pnpm generate

For detailed explanation on how things work, check out Nuxt.js docs.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Anshuman Maurya 🤔 🚧 💻	Yash Raj 🚧	Saumya Kushwaha 💻	Tarun Arora 💻 🐛	Shubhangi Choudhary 📖	Somesh Ranjan 💻	Yash Prakash 💻 🐛
Devansh Mishra 💻 🐛	Anii 💻	Debarati Bandopadhyay 💻 🐛	Manan Rathi 💻 👀	Jayesh Dewangan 💻	Arvind Yadav. 💻	Mohit Sharma 💻
Eshaan Aggarwal 💻 🚧	Soustab Haldar 💻 🤔	Vedika Chandra 💻 🎨	Shriya Tiwari 💻 🎨

This project follows the all-contributors specification. Contributions of any kind are welcome!

sdg-site's Issues

Update footer to include link to contact page

Is your feature request related to a problem? Please describe.
The current footer does not have a link to the contact page. See below:

Describe the solution you'd like
The footer must have a link pointing to the contact page.

Describe alternatives you've considered
NA

Additional context
None

Update the Team page

Update the team with the new team and move Y23 batch to alum section :/

BUG

https://docs.google.com/presentation/d/1QmXNJtEcEYSjcWbNiKnpOmCGyoTF-u4Pc5-MLHRoVvk/edit?usp=sharing

New pages

• GSOC Mentees and Mentors Page
• News page
• Responsive Check
• Image Sizing
• Windicss config HMR issue
• Color Standardization

FEATURE: Create component for Meet the Team page

Proposed changes:

FEATURE: Create social media links component for Contact Us page

Proposed Design:

FEATURE: Create Navigation Component for the Open Source Programs Page.

Proposed design:

Failing GitHub Actions

I can see the last three workflow runs failed in the "Build Project" step with an error related to threads. This step runs the generate command as written in the package.json.

Expected Behavior

Since there's nothing wrong as far as I can see in the code for this repo, things are expected to work fine.

Current Behavior

Builds are failing.

Possible Reason

The GitHub actions seem to run with Node with versions 14 and 16 from the following lines in the workflow.

sdg-site/.github/workflows/ci.yml

Lines 15 to 18 in 4492dae

	strategy:
	matrix:
	os: [ubuntu-latest]
	node: [14, 16]

The errors in the actions seem to be related to the node-fibers package in the package.json. As per the package repo, the package is obsolete on newer versions of Node.js due to a breaking change in the V8 engine and has reached its EOL.

Read below:

Update [April 13th, 2021] -- Fibers is not compatible with nodejs v16.0.0 or later. Unfortunately, v8 commit dacc2fee0f is a breaking change and workarounds are non-trivial.

IMO, the builds are failing when the node v16 is being used.

Possible Solution

There are two possible solutions to this:

1. Remove the fibers package from package.json if it isn't being used anywhere.
2. Use a version of node strictly lower than 16.

BUG: Map Info is getting blurred in the Contact Us page

Expected Behavior

The Box containing the Institute name , address and rating should be clearly visible

Current Behavior

Currently the name of the Institute and address is not visible and is getting blurred by nav bar (on laptop screens)
Here is the screenshot:

Possible Solution

We can make the blur property of the nav bar depend on the 'scrollY ' position. So the nav bar is transparent at first but becomes blurred again when we scroll down by certain pixels.

Steps to Reproduce (for bugs)

1. Open the site
2. Go to the Contact Us page
3. The bug will be visible in the top left section

Your Environment

• Operating System and version: Windows 11

Scroll bug in Map and Footer is inconsistent with the theme.

• The details are blurred in the map in Contact Us when someone scrolls the map accidently then it fades for 2 seconds.

• The footer appears inconsistent with the overall theme of the site.

Expected Behavior

• The fading on scrolling on the map should zoom based on scrolling instead.

• Also blog entries should not contain the "Challenge and submission" section (submission guidelines, deadlines, etc.) in them.

Current Behavior

• Scrolling the map section fades it for the 2 seconds unnecessarily.
• Blog entries show the old CSoC'21 Challenges with all the submission guidelines.
• Footer is in light theme with provides a poor user experience.

Possible Solution

• Scrolling the map should zoom on it based on scrolling gesture.
• We can remove the submission part in the blog entries since it does not adhere the post.
• Footer should be devoloped in the dark theme adhering the overall theme of the site.

Steps to Reproduce (for bugs)

1. Go to Contact Us page and just scroll the map part.
2. Go to the footer section.
3. Go to the Blog page and read any blog to find the submission part.

Your Environment

• Version used:
• Environment name and version (e.g. Node 8):
• Operating System and version: Ubuntu 22.04
• Link to your project:

Grammatical errors

Contributing.md file has couple of grammatical errors

Enhancement: Contact Us Page Map

Should add some sort of background to the Contact Us text on the map so that there is better contrast and for better readability of the title.

FEATURE: Create project carousel for landing page

Proposed design:

UI enhancement of the Achievements Carousel in the About US page

Is your feature request related to a problem? Please describe.
The current carousel used in the about us page looks just out of place with the site.

Describe the solution you'd like
The current carousel should be replaced with some carousel matching the theme of the site.

BUG: Font Standardization

All pages should use a common font-family with standard font sizes along with other attributes(spacing, margin, padding) etc.

Expected Behavior

All pages should use a common font-family and font styles.

Current Behavior

Several pages lack consistency in font styles.

If approved, please assign it to me.

FEATURE: Create map component for Contact Us page

Design:

FEATURE: Create card components for blogs page

Proposed design:

FEATURE: Create content component for landing page

Proposed design:

FEATURE: Create landing component for landing page

Proposed Design:

footer is only in centre

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

FEATURE: Create component for About US page

Proposed changes:

Final Touchup

Following is the final worklist to get the site ready for the public reveal

• Image Webp
• Image sizes and lazy loading
• accessible tags
• previewer additon
• project update
• dns change
• alums addition
• members check
• carousel errors fix
• carousel text overflow
• Meta tags
• Image Selection at different places

FEATURE: Create footer component

Proposed design:

FEATURE: Birthday Highlight

Is your feature request related to a problem? Please describe.
A lack of knowledge about birthday of people in the team

Describe the solution you'd like
Meet the Team page should highlight the birthday of people on the specific day site is opened dynamically.

• updates in ui for the feature
• collection and addition of json data

Describe alternatives you've considered
Maybe a monthly alternative can be done to display all the birthdays in month

Additional context

Add description for SDG in readme

Is your feature request related to a problem? Please describe.
NA

Describe the solution you'd like
A clear and concise description of SDG group.

Describe alternatives you've considered
Sadly none.

Additional context
Hacktoberfest WS

Minor UI changes

• Fix the position of Meet The Team title on the Team page.
• Change color of slider button of Achievements on the About Us page.

Current Behavior

• Meet The Team title is overlapping with the navbar.
  

• Slider buttons are not visible properly for navigation.
  

Expected Behavior

• Meet The Team title should not overlap for any screen size i.e. should be similar to other page titles.
• Button color should match with UI and its styling of getting darker when hovering should also be compatible with the new color.

FEATURE: Create Discord component for Contact Us page

Design:

Add SDG Sophomore details

Update members.json to contain your details.

Buttons get displaced a little on hovering

Expected Behavior

The buttons used to navigate the Home page, About Us page and the like should remain in their place while hovering.

Current Behavior

Currently, the other buttons get displaced a little while hovering on other buttons. Here's a preview of the same:
Screencast_24_08_22_06:53:21_PM_IST.webm

Possible Solution

A possible solution is using the 'outline' property in the CSS of the buttons.

Lighthouse Performance Improvement

1. Home Page:

Desktop: 97%

Improvements:

• NA

Mobile: 86%

Improvements:

• Reduce initial server response time
• Properly size images

2. Blogs page:

Desktop: 88-89%

Improvements:

• Add alt attributes in image tag

Author text should be in h3 not h4

Image and text have discrete boundary in between them and they should be put inside a card which is clickable.

Mobile: 33-37%

Improvements:

Some images are not centre aligned.

3. JavaScript Blog page:

Mobile: 66%

Improvements:

Don't Use passive listeners to improve scrolling performance

Add iframe and frame titles

Desktop: 67%

Improvements: same as above

4. Team Page:

Desktop: 63%

Improvements:

• Navbar blocks the H1 heading
• Script evaluation takes 1922ms. Hence needs to be optimised! (Reduce unused javascript)

Mobile: 39%

Improvements:

• Hamburger menu collides with the description text and the H1 heading has very little to zero top margin in some mobile resolutions.
• Reduce unused javascript.
• Proposed solution would be a separate top navbar which will hold the hamburger menu.

5. About Us:

Desktop: 74%

Improvements:

• "CSAW 2021" should be in H2

Mobile: 73%

Improvements:

• Does not use passive listeners to improve scrolling experience

• The navigation buttons are not clearly visible in mobile view hence affecting accessibility.

6. Contact Us:

Desktop: 70%

Mobile: 57%

Improvements:

• Add a passive flag to the event listeners to improve the page's scroll performance. (https://web.dev/uses-passive-event-listeners for reference).

• Can use the nuxt/image component and specify explicit width and height to reduce layout shifts and improve CLS.
  

• Link text (and alternate text for images, when used as links) should be made discernible, unique, and focusable to improve the navigation experience for screen reader users.

• Usage of deprecated API: window.webkitStorageInfo is deprecated. Please use navigator.webkitTemporaryStorage or navigator.webkitPersistentStorage instead.

• Serve static assets with an efficient cache: A long cache lifetime can speed up repeat visits to your page.

Common Issues:

• Minimize main-thread work and consider reducing the time spent parsing, compiling and executing JS.
• Time to Interactive and speed index is much larger (for nearly all pages):
• Errors must not be logged to console:

BUG: No default avatar on Team Page

There is no default avatar for a team member in the Team page.

Expected Behavior

If the avatar image can't be fetched, then instead a simple avatar with the initials of the team member must be shown.

Current Behavior

Possible Solution

Place a check to see if the image can be loaded, and if not, use a third-party library to create a Avatar from the initials of the user and display it.

FEATURE: Create Achievements component

Proposed design:

FEATURE: Create reusable component for hero design

Proposed design:

BUG: Color Standardization

Expected Behavior

A definitive set of colours limited to primary, secondary (only if very necessary), black and white.

Current Behavior

Use of custom Hexa decimals at various places:

• Project Card Glow
• Hover Contact Us
• Footer

Possible Solution

Define a set of colours and then replace custom colors

FEATURE: Create Navigation Bar

Proposed Design:

FEATURE: Create component for Open Source Programs page.

Proposed changes:

FEATURE: Create navigation component

Proposed changes: