used an api to change the online content cards

.github/workflows/deploy.yaml

@@ -1,49 +1,56 @@
-name: Deploy
+name: Deploy to Vercel
 
 on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
-      - name: Build project
-        run: npm run build
-
-      - name: Upload production-ready build files
-        uses: actions/upload-artifact@v4
-        with:
-          name: production-files
-          path: ./dist
-
   deploy:
-    name: Deploy
-    needs: build
     runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-
     steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: production-files
-          path: ./dist
-
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+      - uses: actions/checkout@v4
+
+      - name: Get commit message
+        id: commit
+        run: |
+          msg=$(git log -1 --pretty=%B | tr -d '\n')
+          echo "message=$msg" >> "$GITHUB_OUTPUT"
+
+      - name: Install Vercel CLI
+        run: npm install -g vercel
+
+      - name: Pull Vercel project config
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        run: |
+          vercel pull --yes --token=$VERCEL_TOKEN
+
+      - name: Build
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VITE_GOOGLE_CALENDAR_ID: ${{ secrets.VITE_GOOGLE_CALENDAR_ID }}
+          VITE_GOOGLE_CALENDAR_API_KEY: ${{ secrets.VITE_GOOGLE_CALENDAR_API_KEY }}
+          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
+        run: |
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" || "${{ steps.commit.outputs.message }}" == *"#prod"* || "${{ steps.commit.outputs.message }}" == *"hotfix"* ]]; then
+            echo "🏗️ Building for Production"
+            vercel build --prod --token=$VERCEL_TOKEN
+          else
+            echo "🏗️ Building for Preview"
+            vercel build --token=$VERCEL_TOKEN
+          fi
+
+      - name: Deploy
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        run: |
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" || "${{ steps.commit.outputs.message }}" == *"#prod"* || "${{ steps.commit.outputs.message }}" == *"hotfix"* ]]; then
+            echo "🚀 Auto Production Deploy (from commit)"
+            vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN
+          else
+            echo "👀 Preview Deploy"
+            vercel deploy --prebuilt --token=$VERCEL_TOKEN
+          fi

.gitignore

@@ -12,13 +12,24 @@ dist
 dist-ssr
 *.local
 
+# Environment variables
+.env
+.env.local
+.env.*.local
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/typescriptreact.code-snippets
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+# Python
+.venv/
+__pycache__/

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+build
+.vscode
+*.min.js
+package-lock.json

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "rodrigovallades.es7-react-js-snippets",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "prettier.printWidth": 100,
+  "[html][javascript][javascriptreact][css][typescript][typescriptreact][jsonc][json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.tabSize": 2
+    },
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+}

.vscode/typescriptreact.code-snippets

@@ -0,0 +1,36 @@
+{
+	"cpg": {
+		"prefix": "cpg",
+		"body": [
+			"import Page from \"${1|../../Components/Page/Page,../../../Components/Page/Page,../../../../Components/Page/Page|}\"",
+			"",
+			"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",
+			"  return (",
+			"    <Page>",
+			"      $0",
+			"    </Page>",
+			"  )",
+			"}",
+			"",
+			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
+		],
+		"description": "Create a new page component with Page wrapper"
+	},
+	"csec": {
+		"prefix": "csec",
+		"body": [
+			"import Section from \"${1|../../Components/Section,../../../Components/Section,../../../../Components/Section|}\"",
+			"",
+			"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",
+			"  return (",
+			"    <Section>",
+			"      $0",
+			"    </Section>",
+			"  )",
+			"}",
+			"",
+			"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
+		],
+		"description": "Create a new section component with Section wrapper"
+	}
+}

README.md

@@ -1,13 +1,13 @@
-# DS3 Main Site Documentation
+# 🚀 DS3 Main Site Documentation for the github workshop
 
-## Getting Started
+## 🎯 Getting Started 
 
 1. Clone the repo with `git clone https://github.com/ucsdds3/main-site.git`
 2. Open the repo in your preferred code editor (For VSCode, use the command `code main-site`)
 3. Run `npm install` to install dependencies
 4. Run `npm run dev` to start the development server
 
-## Contribution Guidelines
+## 🤝 Contribution Guidelines 
 
 To make contributions to the DS3 Main Site, please follow these guidelines:
 
@@ -17,9 +17,9 @@ To make contributions to the DS3 Main Site, please follow these guidelines:
 4. Create a pull request from your branch to the main branch. Write a summary of your changes in the pull request description.
 5. Once the pull request is merged, you can safely delete your branch using the command `git branch -d <branch-name>`.
 
-## Project Structure
+## 📁 Project Structure 
 
-Stick to the project structure shown below to keep things organized. The project is structured as follows:
+Stick to the project structure shown below to keep things organized:
 
 ```
 main-site/  
@@ -39,14 +39,14 @@ main-site/
 │   │   └── types.ts      # Utility types  
 ```
 
-## Dependencies
+## 📦 Dependencies 
 
 Check the depencencies listed below for this project before starting. Use these to your advantage so you don't have to do more work! There are more dependencies that you can find in the `package.json` file, but these are the ones you should be familiar with.
 
-- [Vite](https://vitejs.dev/) - Build Tool
-- [React](https://react.dev/) - Frontend Framework
-- [React Router](https://reactrouter.com/en/main) - Routing
-- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework (prefer this over making your own styles)
-- [React Icons](https://react-icons.github.io/react-icons/) - Icon Library (prefer this over svgs)
-- [Daisy UI](https://daisyui.com/) - Tailwind CSS Component Library (prefer this over making your own components)
-- [Framer Motion](https://www.framer.com/motion/) - Animation Library (prefer this over making your own animations)
+- [Vite](https://vitejs.dev/) - Build Tool ⚡
+- [React](https://react.dev/) - Frontend Framework ⚛️
+- [React Router](https://reactrouter.com/en/main) - Routing 🛣️
+- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework 🎨
+- [React Icons](https://react-icons.github.io/react-icons/) - Icon Library 🖼️
+- [Daisy UI](https://daisyui.com/) - Tailwind CSS Component Library 🎯
+- [Framer Motion](https://www.framer.com/motion/) - Animation Library ✨

index.html

@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/svg+xml" href="/src/Assets/Images/ds3_logo.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Jura:wght@300..700&display=swap" rel="stylesheet">
     <title>DS3 @ UCSD</title>
   </head>
   <body>