add all files

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/check-html-metadata.yaml

@@ -0,0 +1,112 @@
+name: Validate HTML Metadata on PRs
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  validate-metadata:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout the PR branch
+      - name: Checkout PR branch
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Validate all HTML files in the PR branch
+        id: validate
+        run: |
+          ERROR_MESSAGE=""
+          VALIDATION_PASSED=false
+          
+          # Find all HTML files in the public/submissions/ directory
+          HTML_FILES=$(find public/submissions -name "*.html" || true)
+
+          # If no HTML files are found, skip validation
+          if [ -z "$HTML_FILES" ]; then
+            echo "No HTML files found in public/submissions/. Skipping validation."
+            exit 0
+          else
+            echo "Validating the following HTML files:"
+            echo "$HTML_FILES"
+          fi
+
+          # Loop through all HTML files and validate them
+          for file in $HTML_FILES; do
+            echo "Processing file: $file"
+
+            # Check for <meta name="author"> tag
+            AUTHOR=$(grep -Poz '(?s)<meta[^>]*name=["'\'']author["'\''][^>]*>' "$file" || true)
+            if [ -z "$AUTHOR" ]; then
+              ERROR_MESSAGE+="File $file is missing <meta name='author'> tag.\n"
+            fi
+
+            # Check for <title> tag
+            TITLE=$(grep -Poz '(?s)<title[^>]*>.*?</title>' "$file" || true)
+            if [ -z "$TITLE" ]; then
+              ERROR_MESSAGE+="File $file is missing <title> tag.\n"
+            fi
+          done
+
+          # Pass the error message to the next step
+          echo "ERROR_MESSAGE=$ERROR_MESSAGE" >> $GITHUB_ENV
+
+          # If there are no errors, mark validation as passed
+          if [ -z "$ERROR_MESSAGE" ]; then
+            echo "VALIDATION_PASSED=true" >> $GITHUB_ENV
+          else
+            echo "VALIDATION_PASSED=false" >> $GITHUB_ENV
+            exit 1  # Fail the step if validation fails
+          fi
+
+      # Always delete the existing validation comment (whether it passed or failed)
+      - name: Delete existing validation comment
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number
+            });
+
+            const validationComment = comments.find(comment => comment.user.login === 'github-actions[bot]' && (comment.body.includes('HTML Metadata Validation Failed') || comment.body.includes('HTML Validation Passed')));
+
+            if (validationComment) {
+              console.log("Deleting previous comment...");
+              await github.rest.issues.deleteComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: validationComment.id
+              });
+            } else {
+              console.log("No existing comment found.");
+            }
+
+      # Post a new validation comment (either pass or fail)
+      - name: Post validation comment
+        uses: actions/github-script@v5
+        env:
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          ERROR_MESSAGE: ${{ env.ERROR_MESSAGE }}
+          VALIDATION_PASSED: ${{ env.VALIDATION_PASSED }}
+        with:
+          script: |
+            const issueNumber = context.payload.pull_request.number;
+            const prAuthor = `@${process.env.PR_AUTHOR}`;
+            
+            let message;
+            if (process.env.VALIDATION_PASSED === 'true') {
+              message = `**HTML Validation Passed**\n\nGreat job, ${prAuthor}! All required metadata is present.`;
+            } else {
+              message = `**HTML Metadata Validation Failed:**\n\n${prAuthor}, the following issues were found:\n\n${process.env.ERROR_MESSAGE}`;
+            }
+
+            await github.rest.issues.createComment({
+              issue_number: issueNumber,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: message
+            })

.github/workflows/regenerate-submissions.yaml

@@ -0,0 +1,77 @@
+name: Regenerate Submissions and Screenshots
+
+on:
+  push:
+    branches:
+      - main  # Trigger this action only when changes are pushed to the main branch
+
+jobs:
+  regenerate-submissions:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install Puppeteer
+        run: npm install puppeteer
+
+      - name: Ensure screenshots directory exists
+        run: mkdir -p public/screenshots
+
+      - name: Regenerate all screenshots and update submissions.json
+        run: |
+          SUBMISSIONS_FILE="public/submissions.json"
+
+          # Start fresh by clearing the submissions.json file
+          echo "[]" > $SUBMISSIONS_FILE
+
+          for file in public/submissions/*.html; do
+            SLUG=$(basename "$file" .html)
+
+            # Extract title and author from HTML
+            TITLE=$(grep -oP '(?<=<title>)(.*?)(?=</title>)' "$file")
+            AUTHOR=$(grep -oP '(?<=<meta name="author" content=")(.*?)(?=")' "$file")
+
+            # Log if title and author are missing
+            if [ -z "$TITLE" ]; then
+              echo "Warning: Missing <title> tag in $file"
+              TITLE="Unknown Title"
+            fi
+            if [ -z "$AUTHOR" ]; then
+              echo "Warning: Missing <meta name='author'> tag in $file"
+              AUTHOR="Unknown Author"
+            fi
+
+            SCREENSHOT="public/screenshots/$SLUG.png"
+
+            # Generate screenshot using Puppeteer
+            node -e "
+              const puppeteer = require('puppeteer');
+              (async () => {
+                const browser = await puppeteer.launch();
+                const page = await browser.newPage();
+                await page.goto('file://' + process.cwd() + '/$file');
+                await page.screenshot({ path: '$SCREENSHOT' });
+                await browser.close();
+              })();
+            "
+
+            # Append the new submission to the submissions.json file
+            jq --arg title "$TITLE" --arg author "$AUTHOR" --arg screenshot "/screenshots/$SLUG.png" --arg slug "$SLUG" \
+              '. += [{title: $title, author: $author, screenshot: $screenshot, slug: $slug}]' \
+              $SUBMISSIONS_FILE > tmp.json && mv tmp.json $SUBMISSIONS_FILE
+          done
+
+      - name: Commit changes
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git add public/screenshots/*.png
+          git add public/submissions.json
+          git commit -m "Regenerated screenshots and updated submissions.json"
+          git push origin main

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.nvmrc

@@ -0,0 +1 @@
+v18.17.0

README.md

@@ -0,0 +1,70 @@
+# Hackathon @ TPAC 2024
+
+Welcome to the TPAC Hackathon! This event is designed to challenge your HTML and CSS skills in a fun, relaxed atmosphere with fellow W3C attendees. Whether you're a seasoned developer or just starting out, you'll have the opportunity to show off your creativity, meet new people, and compete for nerdy prizes.
+
+The event is open to all in-person attendees at [W3C TPAC 2024](https://www.w3.org/events/tpac/2024/) on Tuesday, September 24th, 8:30 PM to 10:30 PM at the Hilton Anaheim, Huntington, Concourse level, 4th floor.
+
+Make sure to pre-register [here](https://www.w3.org/events/meetings/d33f09f9-a171-452e-8998-1c5130669f97/).
+
+## How to Submit Your Project
+
+Follow these steps to submit your project for the TPAC Hackathon.
+
+### 1. Fork the Repository
+
+1. Navigate to the top right of this repository and click the **Fork** button.
+2. This will create a copy of the repository under your own GitHub account.
+
+### 2. Clone Your Fork Locally
+
+Once you've forked the repo, clone it to your local machine:
+
+```bash
+git clone https://github.com/elenalape/hackathon-tpac-2024.git
+cd hackathon-tpac-2024
+```
+
+### 3. Add Your Project
+
+1. In the cloned repository, navigate to the `submissions/` directory.
+2. Add your HTML file to the `submissions/` directory. Name your HTML file appropriately (e.g. `your-username.html` or `your-project-name.html`).
+
+**Important:** Make sure your HTML file contains the following tags:
+
+- A `<title>` tag with the title of your project.
+
+```html
+<title>Your Project Title</title>
+```
+
+- A `<meta name="author">` tag with your name or names, if you're working as a pair.
+
+```html
+<meta name="author" content="Your Name" />
+```
+
+- If your project uses external CSS or JavaScript files, include them in the `submissions/` directory as well, and reference them in your HTML file.
+
+### 4. Commit Your Changes
+
+Once you've added your project, commit your changes:
+
+```bash
+git add submissions/your-username.html
+git commit -m "Add your project"
+git push origin main
+```
+
+### 5. Create a Pull Request
+
+1. Navigate to the original repository at GitHub (this one).
+2. Click the **Pull Requests** tab.
+3. Click the **New Pull Request** button.
+4. Select your fork in the **base repository** dropdown.
+5. Click the **Create Pull Request** button.
+
+Once your pull request is approved, your project will be live on the hackathon website!
+
+---
+
+We look forward to seeing your creative projects! Happy coding!

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig