nushackers / nushackers-site

NUS Hackers website

NUS Hackers Website

This is the repository behind NUS Hackers' website https://nushackers.org, built with the Hugo framework.

Getting started 🚀

To get started, you'll need:

1. Hugo v0.111.3 (the extended version)
2. Yarn v1 with a recent version of NodeJS

Then clone this repository and run

yarn install # install dependencies
yarn dev # start development server

Hugo will now generate the site and watch the directory and update the site when any changes are made. You can access the site at http://localhost:1313.

Data Management 📊

Most of the data used to populate the site are stored in the data/ folder as .yaml files. These includes files that contain information about the coreteam and upcoming projects/events for the semester.

The current academic year and semester are kept tracked of in the config.toml under the [params] section. This is used to automatically determine which project/event data file to use for the current semester. Project/event data files are named in the format <project-name>_<academic-year>_<semester>.yml and are stored in corresponding data/<project-name> folder.

Coreteam Details 🙋‍♂️🙋‍♀️

Coreteam details and introductions are stored in the /data/coreteam_members.yml file. Include your wittiest introductions here and don't be shy to share your contact details and links!

This file is primarily for active coreteam members, we have a separate file for coreteam alumni in /data/alumni.yml.

Projects / Events 📅

Friday Hacks 🎉

• Data location: /data/friday_hacks
• Data Format:

  start_date: <date-time-of-first-friday-hack>
  start_nr: <number-of-first-friday-hack-in-the-list-below>
  hacks:
     # each event/hack consists of a venue, blog post and talk topics
     - venue: <where>
       blog_post: <blog-post-url>
       topics:
         # each topic consists of a speaker name, affiliation and the title of the talk
         - speaker: <name>
           from: <affiliation>
           title: <title>
      # if there is no friday hack, just put nohack: <reason>
      - nohack: <reason>

  • ❗️Each hack has a date tagged to it implicitly based on the order of the list. The first hack in the list will have start_date as the event date, the second hack will be the next Friday (+7d) and so on.
    • This means that there needs to be a entry for every Friday between the start date and the end of the semester!
  • start_date: This is used to automatically generate the date for each event in the list.
  • start_nr: This is used to automatically generate the Friday Hacks number for each event
    • For example, if start_nr is 200, then the first event in the list below is the Friday Hacks #200 and the next event would be Friday Hacks #201 and so on (this is all done automatically)
  • Refer to Creating a Post for more details on how to create a new blog post for Friday Hacks

The data format for Friday Hacks is a little more involved than the others due to legacy reasons

Hackerschool 📚

• Data location: /data/hacker_school
• Data Format:

  events:
    # Each event consists of a topics, venue and date
    - topic: <what-is-the-workshop-about>
      venue: <where>
      date: <when>

  • Events are not sorted by date automatically, so do remember to list them in chronological order!

Hackers Toolbox 🧰

• Data location: /data/hackers_toolbox
• Data Format: same as Hackerschool

Creating a Post 📝

All blog posts are stored under the content/posts folder.

To create a new post:

1. Add a markdown file to the content/posts folder
2. Name the file in the format YYYY-MM-DD-<post-title>.md
3. Add the following frontmatter to the top of the file:

   ---
   title: <post-title>
   date: <YYYY-MM-DD>
   url: /<year>/<month>/<day>/<post-tag>
   ---

4. If the post is sponsored, add the following frontmatter:

   sponsors:
     - <sponsor-name>

Adding a new sponsor 🤝

Sponsors will be added to a post via HTML partials. These sponsor partials are stored under the layouts/partials/sponsors folder. The naming convention for these partials is <sponsor-name>.html.

To add a new sponsor:

1. Create a new HTML partial under the layouts/partials/sponsors folder
2. The name of the partial must match the name under the sponsors frontmatter in the post
3. The logo of the sponsor should be stored under the static/img/sponsors folder

nushackers-site's Issues

As a user, I want to see social media links to our social media channels

A user should be able to see our FB page, FB (group), Google Groups, a link to Google Maps view of NUS Hackerspace (https://goo.gl/maps/FhmxkVYqkg42), and our Discord channel (https://discord.gg/Au3VJxz) as icons at the header at the minimum.

If further integration is possible and more appropriate places in high-traffic areas can be found for any of these links, that would be a nice-to-have.

Get rid of gulp

Hugo can integrate with PostCSS and plugins. Time to get rid of Gulp.

Some outdated information on Friday Hacks FAQ page

We should update http://nushackers.com/fridayhacks/ to reflect that we don't always hold our FH talks in UTown.

Add links to Friday Hacks videos

Videos are here: https://engineers.sg/episodes/

RSS feed for all of our events

Because not everyone is on FB/Twitter.

Most recent FH should appear first on top

think it makes more sense this way...

Page with info for email blasts should contain info on "cooldown"

New policy to be added to job posting contact info page: companies can only send one job posting per semester.

Refactor "featured articles" section to use the same markdown file

Currently we have to duplicate the markdown file into the featured folder if we want it to appear in the featured section. This is not a big deal, but files can get out of sync. It would be good to figure out a way to avoid this duplication.

An ideal solution would involve specifying the featured content type in the front matter of the relevant post.

See related PR: #576

Add blog post links to FH sidebar.

This could be done by adding (for eg.) a "blogPost" variable to each sidebar entry, then linking to that post if it's present.

The h1 tag is smaller than the h2 tag on posts

Fix old /res links

Some old /res links are broken, and need to be fixed.

Div is misaligned on landing page.

The div containing the text "We're building a community of passionate hackers..." gets misaligned if the number of friday hacks in the right column is too few.

Usual Behaviour:

Behaviour when only one or two friday hacks are listed:

Steps to replicate: Run jekyll locally -> remove all but one friday hacks from _data/friday_hacks.yml -> Go to landing page

As a user, I want to see a page containing links to our friends

At the minimum, we should link to NTU OSS, Hackerspace.SG, and Engineers.SG .

Complete and ship (Dec and h&r) plans

GOGOGOGOGO

As a user, I want to look through archives of blog posts

Three separations - year, year/month & year/month/day

• nushackers.org/2017
• nushackers.org/2017/01
• nushackers.org/2017/01/01

Add anchors on sections on static pages

eg. We might want to point someone to some particular section of http://nushackers.org/about/
I'll do it myself, assuming no one sees any problem with this.

Include description of FH on front page, right above list of FH events this semester

I propose putting a simple description of FH to

• indicate that it's open to everyone
• tell readers how to contact us if they'd like to speak.

This is primarily to reduce the number of emails we get asking us if talks are open to non-NUS students or if they'd need to register to attend.

Sample Description
Friday Hacks is our weekly gathering where we invite students and speakers from academia and industry to give technical talks. Anyone, even non-NUS students are welcome to attend, just show up on the day itself! If you'd like to speak, find out more on how to contact us and what to include in your message. See you at our next Friday Hacks!

Question regarding download.nus.edu.sg/mirror

Sorry for the off-topic issue, but I tried the mirror contact email address but no one is responding for the last month.

Since around 2023-03-20 the rsync service is down:

$ rsync --timeout=30 rsync://download.nus.edu.sg
[Receiver] io timeout after 30 seconds -- exiting
rsync error: timeout in data send/receive (code 30) at io.c(200)
[Receiver=3.2.7]

Does anyone know what the problem is, and/or if there can be something done about it?

thanks

@tohlh @shenyih0ng (mentioning recent active contributors here)

Add discord link somewhere prominent, e.g. header

http://bit.ly/Hackersound

As a user, I want to view dates, etc beautifully instead of code

Currently, ruby block quotes are littered around blog posts.

{{ page.title | split:", " | last }}

should be replaced with shortcodes as well as their functionalities.

Post Generation Script: incorrect "semester's over"

Expected:
Prompt for user's name when running the script to generate this week's FH post.

Result:

Clean up and review site content

For each page:

1. Convert HTML to Markdown where possible
2. Review the content, correct any typos, out-of-date information and grammatical errors. Review the tone a la #258 if necessary.

Pages:

• about/_index.md
• about/what-is-hacking.md
• alumni/_index.md
• archive/_index.md
• code/_index.md
• code/in-support-of-git.md
• contact/_index.md
• discussion/_index.md
• events/_index.md
• fh/_index.md
• fridayhacks/_index.md
• fridayhacks/speak-at-friday-hacks.md
• hackerdefined/_index.md
• hackerdefined/related.md
• _index.md
• join-coreteam/_index.md
• name-change/_index.md
• name-change/related.md
• recordings/_index.md
• sponsor/hello-world.md
• sponsor/_index.md
• the-hacker-attitude/_index.md
• the-hacker-attitude/related.md
• why/_index.md

Integrate MathJaX or LaTeX

I'd like to publish several digest articles requiring math support. Suggest looking into integrating MathJaX or KaTeX

Clicking on a FH location on our webpage should link to some sort of directions to get there

I'm referring to the text highlighted in the image below

Link to FB, Twitter, Mailing List, YT, etc on homepage

zig-zag layout on redesigned page is potentially disorienting

As alluded to by @harishv7

Not exactly sure about the horizontal / zig-zag layout. I naturally found myself expecting a vertical layout. For example, in Friday Hacks, the events are in ascending order of date from left to right. Under Articles, the left-most side contains the latest article.

Article blurbs are presented in chronological order in a zig-zag fashion.

Proposed solution: We can limit it to just a single row of 3 blurbs so that it reads more naturally.

Change OSS@nushackers to code@NUS

No link to a complete Friday Hacks and hackerschool schedule

We only show upcoming events on our current website redesign.

(At the moment it is possible to view the complete friday hack schedule by looking through the blog posts and the hackerschool schedule by visiting the hackerschool subdomain but this is a bit of a hassle)

Features: Telegram/Instagram feed and displaying content better

probably to discuss during some coreteam meeting

What is the value of the website?

Guiding ideas on why the website is still relevant/can be more relevant:

• Improving the flow on the website will drive interest in NUS Hackers
  • Will need more analytics from a longer timeframe on how many people read the secondary webpages
  • Easier to recruit during SLF
• Retain the relevance of the website as a means to engage with our vision and mission
  • Individual posts do not convey the broader vision we have; people engage with FH/HS/HT individually through our social media channels, but not with NUS Hackers and our broader vision of a hacking community
• Reduce the burden of maintaining the website
• Need to make it easier to publicise secondary initiatives like Project Mentor and Project Intern
• Add a wiki/resources page that a) is on technical topics or b) collates tech insights around NUS/SG/the world or c) how-to guides or d) links to our past presentations

Telegram/Instagram feed

Current workflow: post publicity on separate social media channels; update the website with a post

Issues:

• Tedious - publicity is complex and slow
• Establishing a source of truth
• Poor data management

Idea:

• Telegram: the RSS feed will get updated automatically, Telegram channels is searchable
• We can set up a script that automatically creates a post as our Telegram channel gets updated

Archive of past schedules and content display

Currently, we cannot view past HS and HT events. For FH, we have to scroll through the posts.

Issues:

• Managing links - using linktree to organise the most relevant links now
• YouTube playlists are standalone
• Link between individual posts and the past schedule could be better
• No sense of continuity between past HS and HT sessions, even if they are on the same topic
• The content on our site grows - the number of posts is increasing, drowns out other posts such as the FH posts and this one for example (https://www.nushackers.org/2020/06/mock-interviews/)

Ideas:

• Some data management solution to manage yml files and create an internal wiki that's searchable (implementing a database seems too high-effort because it would disrupt the existing workflow)
• For FH posts, they should not be visible under 'Articles' and should be specifically linked to via an archive of past schedules - but they can be searchable
• Link management is better: old invalid links get invalided automatically

Make an individual event in 'Upcoming Events' entirely clickable

Currently, only the text highlighted in orange is clickable. #244: Sep 8 redirects to the relevant blog post, but the whole event should redirect (without highlighting). Thoughts?

As a user, I want to view pages when I click on "read more".

• Navigational pages (e.g. About/Code)
• Inner navigational pages (e.g. About -> hackerdefined)
• Other pages not known at this point of time.

As a user, I want to search and filter blog posts by categories and tags

Should be pretty obvious, currently we have http://nushackers.org/categories/uncategorized/ and so on, but no main category page.

• Categories page listing all categories
• Category page listing posts by category
• Tags page listing all Tags
• Tag page listing posts by tag

"Upcoming events" section on redesigned front page shows past events

We are showing the oldest events in the current semester instead of the most recent upcoming events.

Make articles searchable

We have a new president!

Our "about" page has not been updated to reflect @advaypal ascension to the throne.

As a user, I want to see relevant blog posts on the front page

Currently if you go to the front page, you'll see blogposts about Friday hacks overwhelming content.

We want to filter them out. This involves:

• Inserting a "friday-hacks" category to all posts (This should be easily automated)
• Writing a function to only pick non-friday hack blog posts to display in the front page.