🖥 The Collab Lab Website

The source repository for The Collab Lab website.

Want to contribute? Check the issues tab for what needs to be done!

Table of Contents

1. 🛠 Built With
2. 📝 Getting Started
   • Prerequisites
   • Installation
   • GraphQL
     • VS Code
     • IntelliJ
3. 🔬 Usage
4. ✨Contributing
   • How to Fork the Project

🛠 Built With

• 🧑‍🚀 Astro - Static Site Generator that supports modern JavaScript templating
• ⌨️ TypeScript - JavaScript with syntax for types
• 📚 Hygraph (Previously GraphCMS) - Content management
• 📡 GraphQL - Data Querying from our CMS
• 💵 Stripe - Processing payments for donations
• 🖥 Netlify - Continuous Deployment / Integration

📝 Getting Started

Prerequisites

This website requires Node (16.17.1 or later) and NPM to be installed in order to run locally. You can view the NPM documentation to learn more about installation.

You may also need the Netlify CLI to test certain features, such as the Stripe donation buttons. If you need access to Netlify, you can request access in #committee-website and someone will invite you to the Netlify project.

Installation

Clone the repository to your machine using Github CLI or a plain Git command.

gh repo clone the-collab-lab/website-next tcl-website

Or:

git clone https://github.com/the-collab-lab/website.git tcl-website

This command will create a new directory called tcl-website in your current working directory. Navigate into the new directory and install the project dependencies.

cd tcl-website
npm ci

This installs all the necessary packages and sets up Husky for pre-commit linting.

GraphQL Introspection

Use this link to access the playground and schema for our GraphQL endpoint.

Depending on your IDE, you may have the ability to introspect the schema and unlock type checking in your editor:

VS Code

1. Install both the GraphQL for VSCode and GraphQL: Language Feature Support plugins.
2. Create a graphql.config.json and copy/paste the json found below.
3. VSCode will automatically introspect the schema without having to create a schema file.

IntelliJ

1. Install the GraphQL Plugin.
2. Create a .graphqlconfig file and copy/paste the json found below.
3. Use the GraphQL plugin to generate a schema.graphql file from the config.

The JSON config for either VS Code's or IntelliJ's config file is:

{
	"name": "Collab Lab GraphQL Schema",
	"schemaPath": "schema.graphql",
	"extensions": {
		"endpoints": {
			"Default GraphQL Endpoint": {
				"url": "https://api-us-east-1.hygraph.com/v2/ckfwosu634r7l01xpco7z3hvq/master",
				"headers": {
					"user-agent": "JS GraphQL"
				},
				"introspect": true
			}
		}
	}
}

For other platforms, consult the documentation for your IDE.

🔬 Usage

• The src/data directory contains all of our logic for fetching third-party data, such as content from Hygraph.
• The src/layouts directory contains a layout .astro file. The contents of our pages (in src/pages) are rendered inside of this layout.
• The src/components directory contains all of our reusable components. Files with the .astro extension are Astro components, and files with the .tsx extension are React components.
• The ./public directory contains static assets that are copied to the root of the build directory. This is where we store our images, fonts, and other assets.

To run the site:

# Starts the development server on localhost:3000
# and opens your browser
npm start

To build the site:

# builds the site and outputs it in the /dist/ folder
npm run build

✨ Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you're a member of the Collab Lab GitHub organization, you can create a new branch and open a pull request. If you're not a member, you can fork the project and open a pull request from your fork.

If you spot an issue, or have a suggestion to make the website better, feel free to create a new issue!

How to Fork the Project

1. Use this link to fork the repository or use the “Fork” button at the top of the repository page
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a pull request, using your repository and branch as the source, and the main branch of this repo as the base.