added main page

components/GoogleSlides.jsx

@@ -1,7 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
-function GoogleSlides({ src, sourceLink, width = "100%", height = "100%", paddingBottom = "56.25%" }) {
+function GoogleSlides({ src, sourceLink, aspectRatio = 16 / 9 }) {
     const [key, setKey] = useState(0); // Use key to force re-render
+    const [height, setHeight] = useState(0);
+    const containerRef = useRef(null);
+
+    useEffect(() => {
+        const handleResize = () => {
+            if (containerRef.current) {
+                const width = containerRef.current.offsetWidth;
+                setHeight(width / aspectRatio);
+            }
+        };
+
+        handleResize(); // Call initially to set the correct height
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [aspectRatio]);
 
     const restartPresentation = () => {
         setKey(prevKey => prevKey + 1); // Increment key to re-render the iframe
@@ -36,17 +51,14 @@ function GoogleSlides({ src, sourceLink, width = "100%", height = "100%", paddin
 
     return (
         <>
-            <div style={{ position: 'relative', height: '0', paddingBottom, overflow: 'hidden', maxWidth: '100%' }}>
+            <div ref={containerRef} style={{ width: '100%', position: 'relative', maxWidth: '100%', backgroundColor: 'white' }}>
                 <iframe
                     key={key}
                     src={src}
                     style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width,
-                        height,
-                        frameBorder: '0',
+                        width: '100%',
+                        height: `${height}px`,
+                        border: '0',
                         allowFullScreen: true
                     }}
                 ></iframe>

docusaurus.config.js

@@ -11,7 +11,7 @@ import rehypeKatex from 'rehype-katex';
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'bpd',
-  tagline: 'dsc10 ❤️ bpd',
+  tagline: 'DSC 10 ❤️ bpd',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "^3.3.2",
+    "@docusaurus/plugin-content-docs": "^3.3.2",
     "@docusaurus/plugin-sitemap": "^3.3.2",
     "@docusaurus/preset-classic": "^3.3.2",
     "@docusaurus/theme-live-codeblock": "^3.3.2",

src/components/HomepageFeatures/index.js

@@ -1,64 +1,25 @@
-import clsx from 'clsx';
-import Heading from '@theme/Heading';
+import React from 'react';
 import styles from './styles.module.css';
 
-const FeatureList = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
 export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
+    return (
+        <section>
+            <div className={styles.container}>
+                <div className={styles.course}>
+                    <h1>DSC 10: Principles of Data Science</h1>
+                    <p>(4)</p>
+                </div>
+                <p className={styles.description}>
+                    This first course in data science introduces students to data exploration, statistical inference,
+                    and prediction. It introduces Python programming language as a tool for tabular data manipulation,
+                    visualization, and simulation. Through homework assignments and projects, students are given an
+                    opportunity to develop their analytical skills while working with real-world datasets from a variety
+                    of domains.
+                </p>
+                <div className={styles.imageContainer}>
+                    <img src="img/dsc10graph.png" alt="DSC 10 Chart" className={styles.image}/>
+                </div>
+            </div>
+        </section>
+    );
+}

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,45 @@
-.features {
+.container {
+  margin: 2rem auto;
+  max-width: 800px;
+}
+
+.course {
   display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  align-items: baseline; /* Aligns text of different font sizes properly */
+}
+
+.course h1 {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-right: 1rem; /* Adds space between the title and the (4) */
+}
+
+.course p {
+  font-size: 1.2rem;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
+.description {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-top: 1rem;
 }
+
+.imageContainer {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+.code {
+  font-family: 'Courier New', Courier, monospace;
+  padding: 2px 4px;
+  border-radius: 4px;
+}