Merge pull request #1 from CambioML/jojo-dev

initial draft page

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["prettier", "react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "eqeqeq": "error",
+    "no-console": "warn",
+    "prettier/prettier": "error",
+    "react/display-name": "off",
+    "react/no-children-prop": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/no-explicit-any": "warn"
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "ignorePatterns": ["node_modules", "build", "dist", "public"]
+}

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Default codeowners/reviewers for all code changes
+* @CambioML @jojortz

.github/workflows/build-checks.yml

@@ -0,0 +1,44 @@
+name: Build Checks
+
+on:
+    push:
+        branches: [ "main" ]
+    pull_request:
+        branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Lint Code
+        run: npm run lint

.github/workflows/nextjs.yml

@@ -0,0 +1,94 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    environment: github-pages
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

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

.prettierignore

@@ -0,0 +1 @@
+**/*.yml

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "useTabs": false,
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "es5"
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+}

app/components/Agenda.tsx

@@ -0,0 +1,27 @@
+import Section from './Section';
+
+const agendaItems = [
+  'Section 1: Introduction to RAG and LLM Fine-Tuning (20 mins)',
+  'Section 2: Lab1: RAG pipeline (30 mins)',
+  'Section 3: Lab 2: LLM fine-tuning (30 mins)',
+  'Break (10 mins)',
+  'Section 4: The Pros and Cons of RAG and Fine-tuning (30 mins)',
+  'Section 5: Lab3: RAG + Fine-tuning and Benchmarking (45 mins)',
+  'Section 6: Summary and Q&A (15 mins)',
+];
+
+const Agenda = () => {
+  return (
+    <Section title="Agenda">
+      <ul>
+        {agendaItems.map((item, index) => (
+          <li key={index} className="list-disc ml-4 text-lg py-2">
+            {item}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+};
+
+export default Agenda;

app/components/Container.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+interface ContainerProps {
+  styles?: string;
+  bgcolor?: string;
+  children: React.ReactNode;
+  centerX?: boolean;
+  centerY?: boolean;
+}
+
+const Container = ({ children, styles, bgcolor, centerX, centerY }: ContainerProps) => {
+  return (
+    <div
+      className={`
+                max-w-screen-xl
+                mx-auto
+                xl:px-20
+                md:px-10
+                sm:px-4
+                px-4
+                ${styles || 'h-full'}
+                ${bgcolor || ''}
+                ${(centerX || centerY) && 'flex flex-col'}
+                ${centerX && 'items-center'}
+                ${centerY && 'justify-center'}
+                `}
+    >
+      {children}
+    </div>
+  );
+};
+export default Container;

app/components/Hero.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import Container from './Container';
+import Image from 'next/image';
+import { imgPrefix } from '@/app/hooks/useImgPrefix';
+
+interface HeroProps {
+  title: string;
+  subtitle?: string;
+  center?: boolean;
+  image?: string;
+}
+
+const Hero = ({ title, subtitle, center, image }: HeroProps) => {
+  return (
+    <div
+      className={`w-full h-full overflow-hidden relative mix-blend-overlay ${!image && 'bg-gradient-to-r from-slate-900 to-slate-600'}`}
+    >
+      {image && (
+        <>
+          <Image
+            src={imgPrefix + image}
+            alt="Hero"
+            fill
+            style={{
+              objectFit: 'cover',
+              zIndex: -1,
+              backgroundPosition: 'center',
+              filter: 'blur(2px)',
+              opacity: 0.5,
+            }}
+            quality={100}
+          />
+          <div className="absolute -z-10 bg-gradient-to-r from-cambio-blue from-10% via-white to-cambio-blue to-90% h-full w-full" />
+        </>
+      )}
+      <Container styles="h-[30vh] min-h-[200px]">
+        <div className={`flex flex-col justify-center ${center && 'items-center'} h-full w-full`}>
+          <div className="max-w-[900px]">
+            <h1 className={`text-6xl font-bold text-neutral-100 pt-4 pb-5 ${center && 'text-center'}`}>{title}</h1>
+            {subtitle && <div className={`mt-3 text-3xl text-neutral-100 ${center && 'text-center'}`}>{subtitle}</div>}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Hero;

app/components/Navbar.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useWindowScroll } from '@/app/hooks/useWindowScroll';
+import Container from './Container';
+
+const Navbar = () => {
+  const isScrolled = useWindowScroll(50);
+
+  return (
+    <div
+      className={`fixed w-full z-50 flex flex-col justify-center ${isScrolled ? 'bg-slate-900 shadow-sm h-[75px]' : 'bg-transparent h-[100px]'} transition-all duration-300 ease-in-out`}
+    >
+      <div
+        className="
+        py-4
+        "
+      >
+        <Container>
+          <div
+            className="
+                    flex
+                    flex-row
+                    items-center
+                    justify-between
+                    gap-3
+                    md: gap-0
+                    text-xl
+                    text-neutral-100
+                    "
+          >
+            KDD Workshop 2024
+          </div>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;