Revamped AOSSIE website

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "disable-telemetry": "npx next telemetry disable"
   },
   "author": "AOSSIE",
   "license": "ISC",
@@ -18,14 +19,14 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@headlessui/react": "^1.7.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^6.4.1",
     "@mui/material": "^6.4.1",
-    "@next/mdx": "^13.5.6",
+    "@next/mdx": "^14.1.3",
     "@tailwindcss/typography": "^0.5.4",
     "@types/mdx": "^2.0.11",
     "autoprefixer": "^10.4.12",
@@ -34,12 +35,13 @@
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^12.0.6",
+    "framer-motion": "^12.30.0",
     "next": "^14.1.3",
     "postcss-focus-visible": "^6.0.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.2.1"
   },

src/app/about/page.jsx

@@ -0,0 +1,186 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { Container } from '@/components/shared/Container';
+import { Banner } from '@/components/shared/Banner';
+import { Timeline } from '@/components/about/Timeline';
+import { Team } from '@/components/about/Team';
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';
+import { motion } from 'framer-motion';
+
+ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+
+export default function About() {
+  const [stats, setStats] = useState({
+    years: 8,
+    projects: 80,
+    contributors: 70,
+    graphData: { 
+      labels: ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'], 
+      data: [4, 8, 12, 9, 9, 11, 8, 6, 18] 
+    }
+  });
+
+  // Detect dark mode preference on page load and fetch stats
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const res = await fetch('/api/stats');
+        const data = await res.json();
+        if (!data.error) {
+          setStats(data);
+        }
+      } catch (error) {
+        console.error('Failed to fetch stats:', error);
+      }
+    };
+
+    fetchStats();
+  }, []);
+
+  const data = {
+    labels: stats.graphData.labels, // Include '0' on the x-axis
+    datasets: [
+      {
+        label: 'Number of Repositories',
+        data: stats.graphData.data, // Start data points from '2017', leave '0' as null
+        fill: false,
+        borderColor: '#32a852',
+        tension: 0.4,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        type: 'category',
+        grid: {
+          display: true,
+          color: '#FFCC00',
+        },
+        ticks: {
+          callback: (value, index) => data.labels[index], // Match x-axis labels
+        },
+      },
+      y: {
+        beginAtZero: true, // Start y-axis from 0
+        ticks: {
+          stepSize: 5, // Increment y-axis labels by 5
+        },
+        grid: {
+          display: true,
+          color: '#FFCC00',
+        },
+      },
+    },
+  };
+
+ return (
+    <>
+      <Container className="mt-4 sm:mt-16 mb-20">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <div className="my-8">
+            <motion.h1 
+              className="text-4xl md:text-5xl font-mono font-black text-[#32a852]"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+            >
+              ABOUT US
+            </motion.h1>
+            <motion.p 
+              className="text-base md:text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 font-mono mt-5 mb-10 text-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              <span className="text-[#32a852] font-bold">AOSSIE</span> (Australian Open
+              Source Software Innovation and Education) is a not-for-profit
+              umbrella organization for open-source projects. We believe the
+              open-source philosophy provides a resource-efficient channel to
+              transfer knowledge and achieve innovation and education.
+            </motion.p>
+          </div>
+
+          <div className="my-8 space-y-12">
+            <motion.div 
+              className="w-full h-[300px] md:h-[400px]"
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5 }}
+            >
+              <Line data={data} options={options} />
+            </motion.div>
+
+            <motion.div 
+              className="flex flex-wrap justify-around gap-6 mt-8"
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: true }}
+              variants={{
+                hidden: { opacity: 0 },
+                show: {
+                  opacity: 1,
+                  transition: {
+                    staggerChildren: 0.2
+                  }
+                }
+              }}
+            >
+             {/* Stats Cards */}
+             {[
+               { value: stats.years, label: 'years completed' },
+               { value: stats.projects, label: 'projects completed' },
+               { value: `${stats.contributors}+`, label: 'contributors' }
+             ].map((item, index) => (
+                <motion.div
+                  key={index}
+                  variants={{
+                    hidden: { opacity: 0, y: 20 },
+                    show: { opacity: 1, y: 0 }
+                  }}
+                  className="bg-white dark:bg-zinc-800 p-6 rounded-xl shadow-lg w-full sm:w-48 lg:w-56 cursor-pointer transform hover:scale-105 transition-transform duration-300"
+                >
+                  <div className="text-4xl font-bold text-[#32a852]">{item.value}</div>
+                  <div className="text-lg text-zinc-600 dark:text-zinc-400 mt-1">{item.label}</div>
+                </motion.div>
+             ))}
+            </motion.div>
+          </div>
+        </div>
+
+        <motion.div 
+          className="mt-20"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+        >
+            <Timeline />
+        </motion.div>
+
+        <motion.div 
+          className="mt-24 mb-24"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+        >
+           <Team />
+        </motion.div>
+      </Container>
+    </>
+  );
+}

src/app/api/stats/route.js

@@ -0,0 +1,94 @@
+import { NextResponse } from 'next/server';
+import projects from '@/helper/projects';
+
+export async function GET() {
+  try {
+    const startYear = 2016;
+    const currentYear = new Date().getFullYear();
+    const yearsOfAossie = currentYear - startYear;
+
+    // Count projects from the helper file as requested
+    const completedProjectsCount = projects.length;
+
+    // Fetch GitHub Data
+    // Note: Unauthenticated requests are limited to 60 per hour per IP.
+    const org = 'AOSSIE-Org';
+    const headers = {
+      'Accept': 'application/vnd.github.v3+json',
+      // Add 'Authorization': `token ${process.env.GITHUB_TOKEN}` if you have one
+    };
+
+    // 1. Fetch Repositories
+    const reposRes = await fetch(`https://api.github.com/orgs/${org}/repos?per_page=100&type=public`, { headers, next: { revalidate: 3600 } });
+
+    if (!reposRes.ok) {
+      throw new Error(`GitHub API Error: ${reposRes.statusText}`);
+    }
+
+    const repos = await reposRes.json();
+
+    // 2. Process for Graph (Repos per year)
+    // The user wants "Number of repos in (green) over the past years".
+    // We will group by 'created_at'.
+    const repoCountsByYear = {};
+    const yearsSet = new Set();
+
+    // Initialize years from startYear to currentYear to ensure continuous axis
+    for (let y = startYear; y <= currentYear; y++) {
+        repoCountsByYear[y] = 0;
+        yearsSet.add(y);
+    }
+
+    repos.forEach(repo => {
+      const year = new Date(repo.created_at).getFullYear();
+      if (year >= startYear) {
+          repoCountsByYear[year] = (repoCountsByYear[year] || 0) + 1;
+      }
+    });
+
+    const labels = Object.keys(repoCountsByYear).sort((a, b) => parseInt(a) - parseInt(b));
+    const data = labels.map(year => repoCountsByYear[year]);
+
+
+    // 3. Count Contributors
+    // Fetching contributors for ALL repos consumes too much rate limit (N requests).
+    // We will proactively fetch contributors for the top 6 most starred/popular repos to get a good estimate.
+    // Sorting repos by stargazers_count
+    const topRepos = repos.sort((a, b) => b.stargazers_count - a.stargazers_count).slice(0, 6);
+
+    const contributorIds = new Set();
+
+    const contributorPromises = topRepos.map(async (repo) => {
+        try {
+            const contribRes = await fetch(repo.contributors_url + '?per_page=100', { headers, next: { revalidate: 3600 } });
+            if (contribRes.ok) {
+                const contributors = await contribRes.json();
+                if (Array.isArray(contributors)) {
+                    contributors.forEach(c => contributorIds.add(c.id));
+                }
+            }
+        } catch (e) {
+            console.error(`Failed to fetch contributors for ${repo.name}`, e);
+        }
+    });
+
+    await Promise.all(contributorPromises);
+
+    // Fallback if APIs fail or return 0 (which is unlikely for top repos)
+    const contributorCount = contributorIds.size > 0 ? contributorIds.size : 70; 
+
+    return NextResponse.json({
+      years: yearsOfAossie,
+      projects: completedProjectsCount,
+      contributors: contributorCount,
+      graphData: {
+        labels,
+        data
+      }
+    });
+
+  } catch (error) {
+    console.error('API Error:', error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/apply/page.jsx

@@ -0,0 +1,56 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { Container } from '@/components/shared/Container'
+import { TimelineElement } from '@/components/about/TimelineElement'
+import { ApplyHeader } from '@/components/apply/ApplyHeader'
+import GSoC from '@/images/logo.svg'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDiscord, faGitlab } from '@fortawesome/free-brands-svg-icons'
+import { faLightbulb, faComments, faPaperPlane } from '@fortawesome/free-solid-svg-icons'
+
+export const metadata = {
+  title: 'Application Timeline',
+  description: 'How to apply for GSOC',
+}
+
+export default function Apply() {
+  return (
+    <>
+      <ApplyHeader>
+            <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
+              <TimelineElement
+                title="Join us on Discord"
+                description="Join the AOSSIE community on Discord and connect with other developers, mentors, and organizers. Our Discord server is a great place to ask questions, share ideas, and get support throughout the Google Summer of Code application process. From proposal writing tips to coding advice, our community is here to help you succeed. Don't go through the process alone, join us on Discord now!"
+                button="Join Discord"
+                link="https://discord.gg/hjUhu33uAn"
+              />
+              <TimelineElement
+                title="Start Contributing"
+                description="Contribute to the project and make your mark on open-source development with AOSSIE. By making a Pull Request (PR) to one of our existing projects, you'll have the opportunity to showcase your skills and demonstrate your understanding of the project. This will also give you an opportunity to work with the mentors and get familiar with the project before the official GSoC coding period starts. This is a great way to get started and increase your chances of being selected for the program."
+                button="Contribute"
+                link="https://gitlab.com/aossie"
+              />
+              <TimelineElement
+                title="Write a Draft Application"
+                description="Select an Idea and write a draft application that expands this idea with your own proposals and showcases how you will execute and complete your project. This is your chance to demonstrate your understanding of the project, your skills, and your passion for open-source development. Our mentors will provide feedback and help you refine your proposal, increasing your chances of being selected for the program."
+                button="Choose an Idea"
+                link="/ideas"
+              />
+              <TimelineElement
+                title="Discuss with Mentors"
+                description="Share your draft application with our mentors and get feedback on your proposal. Our mentors are experienced developers who have been through the GSoC process before and can provide valuable insights to help you improve your application. Discussing your proposal with mentors also demonstrates your commitment to the project and your willingness to learn and improve."
+                button="Mentors List"
+                link="https://github.com/orgs/AOSSIE-Org/people"
+              />
+              <TimelineElement
+                title="Submit Application"
+                description="Submit your final application to Google Summer of Code before the deadline. Make sure to double-check your application and ensure that you have included all the necessary information. Good luck!"
+                button="Apply Now"
+                link="https://summerofcode.withgoogle.com/"
+              />
+            </ol>
+      </ApplyHeader>
+    </>
+  )
+}

src/pages/ideas/2022/agora-blockchain.mdx → src/app/ideas/2022/agora-blockchain/page.mdx

@@ -1,12 +1,12 @@
-import { IdeaLayout } from '@/components/IdeaLayout'
+import { IdeaLayout } from '@/components/ideas/IdeaLayout'
 
 export const meta = {
   title: 'Agora Blockchain',
   description:
     'First version of Blockchain based Agora web application, with basic features like user registration, election creation, voting and result calculation.',
 }
 
-export default (props) => <IdeaLayout meta={meta} {...props} />
+export default ({ children }) => <IdeaLayout meta={meta}>{children}</IdeaLayout>
 
 ### Project Duration: 175 hrs