samoacodehub / website

Samoa Code Hub Website built with Svelte-Kit by local developers

Samoa Code Hub Website

The website for the Samoa Code Hub community, built with SvelteKit

Languages & Tools

• SvelteKit
• Svelte
• Tailwind CSS

Getting Started

Prerequisites

• Node v18.18.1 (LTS)

Clone the Repo

git clone https://github.com/SamoaCodeHub/website.git
cd website

Installing dependencies

npm install

Running the project

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Running Tests

# Make sure you install playwright browsers
npx playwright install

# Run e2e test
npm run test:e2e

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Analytics

To enable analytics set up Google Analytics set the GA_MEASUREMENT_ID env variable.

Contributing

Check out our Contributions Guideline

Environments

Local

http://localhost:5173

Platform: Local Machine

Description: used for local development, creating new features and bug fixes.

Staging

https://dev.samoacodehub.org

Platform: Netlify

Description: reflects the latest changes on the main branch. This ensures there is a working website with the most recent updates.

Production

https://www.samoacodehub.org

Platform: Vercel

Description: the live Samoa Code Hub website. The website is deployed on production once a release tag is created.

website's Issues

Add Projects Nav Item to link to Projects section

Add SSO Join Google Form link in the Hero Section CTA

Google form link https://docs.google.com/forms/d/e/1FAIpQLSckLWtZky5-jGFWi4HnzuCQC3F1af3-LaCYhRrU5NCK36HJ4g/viewform

Update Website Launch Month in About

Change March to May

Add SITA Web App GitHub Repo once they're public

Add to Featured Projects:

https://github.com/sita-samoa/sita-membership

Enhance ReadME documentation

Create documentation explaining the project structure, technologies used, and how to contribute (Use Confluence for Website Documentation).

Provide setup instructions for new contributors (i.e. go to GitHub, fork repo, fix issue, then open a pull request).

Related to #35

Sidebar Broken!

Sidebar is broken on mobile and tablet views when you run npm run build && npm run preview. But npm run dev is fine.

You can't close sidebar at all.

Add Standard Logging

Add standard logging that plays well with SvelteKit. Ensure can handle both client and server side logging.

Projects Section

Portfolio of Projects done by SSO Community.
SITA DBMS

SSO Website

E2E Tests

• Create E2E tests with playwright
• Update docs to provide instructions on how to run

Contributors Section missing Images

Describe the bug

Update contributors to use real job titles

Media Section

Use resources from Google Drive Link in https://drive.google.com/drive/folders/1B-T7uSxAYuAOvnOeJbUlu0-L3eF26JVO

Can add highlights from Discord/FB Group.

[UX] Open external links in new window

Helps preserve current position on the page.

Currently when I click on a github profile then press back to go to the website I start from the top of the page and have to scroll back down

Reduce Padding Top of Media Section

When you press the Media link in the navbar, it scrolls to the Media section, the padding on top looks a bit off.

Please reduce the padding top till it looks good.

Close Mobile Navbar (sidebar) when clicking on Menu Item

So far, it scrolls correctly to the component when you click on the link. But the navbar on mobile is still blocking the screen, the navbar should close once the user clicks the link/menu item.

Show Hamburger Icon/Mobile Menu < 1000px screen width

Make Footer Mobile Responsive

I would suggest using tailwinds mobile breakpoint utility classes to flex the items in a column

Change White text to Black on Media & Contact Sections on Light Theme

• Consistency with other section title heading colors (light theme activated)
  
  

Nav bar - Update icons so every section has its own icon

Currently for mobile, every section has the same IconCar icon

We should choose some unique to the section by updating menuItems.js

Add GitHub Action for Light House Test

Google, copy and paste action for lighthouse score. Make sure this runs only on main.

About Section - SSO Timeline

Show Timeline of Events from creation of SSO to current time.

Use information from Discord in channel about-sso

Scroll to Relevant Section with Navbar Links

Upon clicking menu item, scroll to Component Section.

Update Contributing Markdown File

Add steps to show how someone from outside the SSO organization can help contribute to the repo.

e.g. Forking the repo, make changes locally, pushing to their own branch, creating a PR to merge to main.

Update SCH in Featured Projects

For SCH Project, remove 'Try it now' button since they're already trying it since they are on the page.
Update GitHub Repo link, still says sso and points to correct repo but would like to update the url link itself to 'https://github.com/SamoaCodeHub/website'

Scroll to Top Feature

Contributors Section

Kind of like a testimonials section but using the members who have helped develop the SSO Website. Pictures/Images with Names or Titles.

About Section - What we do

Use information from Discord About Channel.

Re-organize sections

Is your feature request related to a problem? Please describe.
Some of the sections are jumbled up in order.

Describe the solution you'd like
I would like the order of sections to be the following:

1. Hero Section
2. About Us Section (What we do and then SSO Timeline)
3. Media Section
4. Contributors Section
5. Contact Us Section

Setup Google Analytics (GA4)

Add google analytics

Update all SSO references to SCH

Change and update all references of Samoa Stack Overflow to Samoa Code Hub or SSO to SCH.

Add Initial Unit Tests for Functional Testing

Create first test or two to configure vitest for basic functional testing. Make sure it plays well with svelte.

Remove PR and Issue Templates

Too much clutter and too complicated. Remember K.I.S.S.

Dockerfy

Add docker support

Design a logo

Logo for the org and the website!
Calling out you awesome designers!

Component Tests

Tests to ensure components are rendered and props passed to them are reflected on the component. Use vitest.

Clicking home button should take you to the welcome section

Home button on top left.

When clicked, nothing happens. It should take you to the Welcome section I think

Fix Contact Us Form

Contact Us Form is currently broken on Production.
Ensure that:

• Contact Us Form Submits successfully
• Add padding to contact us message on mobile
  

Lazy load images

To improve load times on low bandwidth

SCH logo not displayed in Mobile version

Dark mode switch AND github link disappears in mobile view

Portrait mode on mobile

No dark switch or github

Landscape mode on mobile

No dark switch

Update Profile Photos of Contributors

Package Svelte Vertical Timeline outdated

Ideally, we would like to not be reliant on packages that are rarely maintained, if this vertical timeline could be implemented from scratch in its own component; that would be better for us.

Implement ReCAPTCHA for Contact Form

Add GitHub Action for Test Validation

Ensure all tests pass before building and deploying website to production. Use only unit and component tests (Do not use E2E tests).

Update SCH GitHub Org Link for GitHub Icon in header

Update Mobile Menu Icons