osdg-iiith/astronomy-club-website

Codebase for the IIIT-H astronomy club website

Astronomy Club Website

Mentors

• Ansh Puvvada
• Nishant Sachdeva
• KV Aditya

New Contributors:

1. Clone the repo on your local machine
2. Install hugo (v0.59 and above).
3. Find issues with the club website
4. Provide ideas and suggestions for improvement
5. Contribute by providing content or help in designing the pages

Club Website Creation

The website is built with Hugo.

Updating Content or Design

1. Go to the content folder to update content like event content
2. Go to layouts folder to update the webpage design
3. GO to data to update events,images, site params,etc
4. team.yml contains the memebers of the club, modify it accordingly.
5. activities.yml contains the list of major events the club does and gets listed in the homepage of your club.
6. event.yml shows a list of events conducted and gets displayed as a gallery, on the events page.
7. Modify the title and type in event.yml to reflect the events in activities.yml.

Deploying the site on the local machine

1. We use, Hugo a static site generater to generate the website.
2. Install Hugo
3. Run hugo server to run the server on your local machine. Execute this command in the root directory of the project.
4. If you have drafts, then run hugo server -D to view them. Do not keep drafts, and set the value to False when you're done as they do not get deployed on the site.
5. Make sure to have the latest version Hugo installed.

Adding Content

1. Run hugo new event_name.md in the /content/your-club-name/archive.
2. All the content posts are written in Markdown, and you can look into the Hugo Documentation for more details.
3. Modify the event.yl file in the /data/your-club-name/, and add a picture for that event.
4. Make a new entry directly below the old ones, and give it a picture, and link it to the event-post created in the archive section done earlier. You can do a hardlink if you want(site is deployed on www.clubs.iiit.ac.in/clubs/your-club-name), but preferably make it a relative link, with the link being {{< ref "/your-club-name/archive/my-post" >}}.
5. Add the relavant type for it.
6. If you want to add more than one picture make a seperate entry in `activities,yml

Modifying homepage

1. Go to layouts/your_club/index.html and modify the files over there
2. Go to data\your_club\homepage.yml and modify the Hugo variables from there.
3. Make sure to go to layouts/partials/club_name/header.html and change the home path to your club name from club_name The names and the rest are pretty self-explanatory. In case you don't like it, you are free to rewrite index.html however you like as a normal html file.
4. Make sure to have the latest version Hugo installed. I'm currently running v0.59.1.

Adding events to your club

1. Take a look at data.

Issues or Doubts

Raise a GitHub issue, and I'll get back to you within a day.

astronomy-club-website's Issues

Contact Form

Need to create a contact form which will redirect any messages to the club email [email protected] . You can use any free third party service.

Social Media icons

The icons on the landing page are almost invisible.
Remove dribble , twitter and instagram logo and add a whatsapp and mail icons.
These should be added to the contact page and should be fairly visible.
Suggestion : change to a icon theme which has fb,whatsappa and mail logos

Articles/Blogs redirection goes to the wrong place

The navbar and footer are incorrect.
Find the partial/template affecting this rendering.

Page Editing

Use the wiki option on the repo to create a small tutorial on how to edit the 5 main pages of the website.

The tutorial should clearly show where the data and partial files located.

Update README.md

The whole readme is very messy and needs a lot of points to be deleted.
Things which can be done:

1. Remove unnecessary steps
2. Add tutorial links for hugo and the theme
3. Add better markdown and images

Add mobile support

The images do not scale properly when changed to a mobile view.
Add CSS/Javascript support when the screen size changes.

The navbar doesn't work on small screens. You can use w3schools.com example to fix this

Navbar Active Page not working

Irrespective of the page that is currently active, the Navbar always shows HOME as active, as shown in this screenshot:

It is currently at the About page, but the HOME link is highlighted in the navbar.

Unwanted Scroll in Embedded Form

The form is embedded in an iframe tag. The way it is styled is causing it to have its own scroll. As a result, the page ends up having 2 scrollbars while the user is over the form. This leads to discontinuous scrolling in the page, which is bad UI/UX. Below is what it looks like:

Can be solved by changing the styling on the iframe and enclosing div.

Section for Upcoming Astronomical events

A section on the homepage where visitors can look at the upcoming astronomical events.

There is a need to find an API which can interact with JS and which will update the DOM.
If no such API could be found, use webscraping to create a JSON file which will be used by JS to update DOM.

Idea for design- Use a calendar to mark the events . Design ideas are not limited to this

Update the font of page title

There is a font file present in the static/fonts directory. (Procrastinating Pixie).
This needs to be added to the page title.
Using @font-face add it to the css file
Currently the syntax is not working as expected

Content Addition

Astronomy Club description - Can include quotes from famous astronomers
Info about stargazing nights, outdoor sessions, informative session
Information about past events

Keep adding them to this thread