From 5efa15aa003c22df976243c2399d7f5776749828 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 08:59:51 -0400 Subject: [PATCH 01/11] refactor: Adjust padding in UseWorkshopsCard.js --- components/Hooks/UseWorkshopsCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Hooks/UseWorkshopsCard.js b/components/Hooks/UseWorkshopsCard.js index 5111042..1effaab 100644 --- a/components/Hooks/UseWorkshopsCard.js +++ b/components/Hooks/UseWorkshopsCard.js @@ -115,7 +115,7 @@ export default function UseWorkshopCard({ workshop, gitUser, gitRepo, instUser,

{parsedWorkshop.data['cover title'] || parsedWorkshop.data.title}

From cf4fb706cc7292f9029cdfda27aef36ce86552dc Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 11:40:55 -0400 Subject: [PATCH 02/11] refactor: Update README.md with project overview, features, and getting started instructions --- README.md | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 126 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a9becd1..8c30d31 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,137 @@ -# DHRI Curriculum Static +# DHRIFT - Digital Humanities Research Infrastructure for Teaching -Static site for DHRIFT using next.js. +DHRIFT (Digital Humanities Research Infrastructure for Teaching) is a static site generator built using Next.js. It supports the creation and dissemination of digital humanities workshops, institutes, and other educational materials. This repository provides the development framework for building static websites and generating resources for the DHRIFT initiative. -## Usage +## Table of Contents +- [Project Overview](#project-overview) +- [Features](#features) +- [Getting Started](#getting-started) +- [Development](#development) +- [Usage](#usage) +- [Custom Workshops](#custom-workshops) +- [Contributing](#contributing) +- [License](#license) + +## Project Overview + +DHRIFT aims to create a sustainable infrastructure for teaching and learning in the digital humanities. It powers [app.dhrift.org](https://app.dhrift.org), providing open-source workshops and resources for educators and students in the digital humanities field. + +DHRIFT uses Next.js to ensure high performance, scalability, and easy deployment across multiple platforms. + +## Features + +- **Next.js framework** for building and deploying static sites. +- **Customizable workshops** with exercises and examples for digital humanities. +- **Scalable design** to allow contributions and expansions of teaching resources. +- **Interactive in-browser code editing** using WebAssembly (WASM). +- **GitHub Actions integration** for automatic deployment to GitHub Pages. + +## Getting Started + +Deploying DHRIFT using GitHub Actions is simple. By forking the repository and enabling Actions, your workshop site can be automatically deployed. However, after enabling Actions, you will need to trigger the workflow by either running it manually or making a small change to the repository. + +### Quick Deployment Steps + +1. **Fork the Repository**: + - Fork the [DHRIFT repository](https://github.com/DHRI-Curriculum/DHRIFT) to your own GitHub account. + +2. **Enable GitHub Actions**: + - In your forked repository, go to the **Actions** tab. + - Click **Enable Actions** if GitHub Actions are not already active. + +3. **Trigger the Deployment**: + - **Option 1**: Make a small change (e.g., edit the README) and push it to trigger the GitHub Actions workflow. + - **Option 2**: Manually trigger the workflow by navigating to the **Actions** tab, selecting the workflow, and clicking **Run workflow**. + +4. **Automatic Deployment**: + - Once triggered, GitHub will run the deployment workflow, building and deploying your site to GitHub Pages or your specified hosting platform. + - Future updates to the `main` branch will automatically trigger a rebuild and redeploy. + +## Development + +### Prerequisites + +To set up a local development environment for DHRIFT, ensure you have the following: +- **Node.js** (v14.x or later) +- **npm** (v6.x or later) + +### Installation + +1. Clone your forked repository: + +```bash +git clone https://github.com//DHRIFT.git +cd DHRIFT +``` +Install dependencies: ```bash -# Install dependencies npm install +``` -# Run dev server +## Running the Development Server +To start the development server, run: + +```bash npm run dev +``` +Visit http://localhost:3000 to preview your changes. + +# Contributing +We welcome contributions to DHRIFT! To contribute: + +## Fork the repository. +Create a new branch for your feature or bugfix. +Submit a pull request with detailed information about your changes. +Be sure to follow the project's code style and conventions. -# Build for prod and export static website -npm run build +# Custom Workshops +DHRIFT allows creators to host their own repositories of workshops and configure DHRIFT to pull and display content dynamically from those repositories using query parameters. + +## Example: Custom Workshops Repository +To point DHRIFT to a custom workshop repository, use the following URL format: + +``` +https://app.dhrift.org/inst?instUser=&instRepo= ``` -https://dhri-curriculum.github.io/DHRIFT/ -[Dev site](https://curious-frangollo-6adf45.netlify.app/) +For instance, to use the dhrift-site-template repository under the dhri-curriculum organization, the URL would be: + +``` +https://app.dhrift.org/inst?instUser=dhri-curriculum&instRepo=dhrift-site-template +``` + +DHRIFT will fetch and process workshops from this repository and convert them into interactive web pages. + +## How to Create Custom Workshop Repositories +Create a GitHub Repository: + +Set up a new repository for your workshops. Each workshop can be a Markdown file with content like lesson plans, code examples, and exercises. +Organize Your Content: +Create a clear structure, such as a workshops/ folder for lesson files and an assets/ folder for images. +## Write Workshop Files: + +Use Markdown to create each workshop. For example: +```markdown +# Workshop Title +Introduction and objectives. + +## Lesson 1: Getting Started +Explanation and tasks... +``` + +```bash +echo "Hello, DHRIFT!" +``` + +## Deploy the Repository: + +Once the repository is ready, use the appropriate query string to point DHRIFT at your custom repository. + +## Benefits of Using Custom Repositories +Customizability: Tailor the workshop content to specific needs or curricula. +Interactivity: DHRIFT supports WebAssembly (WASM) for in-browser code execution, providing interactive learning experiences. +Flexibility: Any updates to the repository automatically reflect on the live site. +# License +This project is licensed under the MIT License. See the LICENSE file for details. From 44cbba57367b6cbbfd01023f2391ee9671794e32 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 12:29:10 -0400 Subject: [PATCH 03/11] refactor: Update DHRIFT README.md with project overview, features, and getting started instructions --- README.md | 162 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 98 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 8c30d31..05ae86b 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,105 @@ # DHRIFT - Digital Humanities Research Infrastructure for Teaching -DHRIFT (Digital Humanities Research Infrastructure for Teaching) is a static site generator built using Next.js. It supports the creation and dissemination of digital humanities workshops, institutes, and other educational materials. This repository provides the development framework for building static websites and generating resources for the DHRIFT initiative. +DHRIFT (Digital Humanities Research Infrastructure for Teaching) is a static site generator built using Next.js. It facilitates the creation and dissemination of digital humanities workshops, institutes, and educational materials. This repository contains the development framework for building static websites and resources for the DHRIFT initiative. ## Table of Contents - [Project Overview](#project-overview) - [Features](#features) - [Getting Started](#getting-started) -- [Development](#development) - [Usage](#usage) -- [Custom Workshops](#custom-workshops) +- [Development](#development) - [Contributing](#contributing) +- [Custom Workshops](#custom-workshops) - [License](#license) - ## Project Overview -DHRIFT aims to create a sustainable infrastructure for teaching and learning in the digital humanities. It powers [app.dhrift.org](https://app.dhrift.org), providing open-source workshops and resources for educators and students in the digital humanities field. - -DHRIFT uses Next.js to ensure high performance, scalability, and easy deployment across multiple platforms. +DHRIFT provides an infrastructure for teaching and learning in the digital humanities. It powers [app.dhrift.org](https://app.dhrift.org), a platform that dynamically pulls and displays workshops based on the repository specified in the URL query. The platform reads metadata from the `config.yml` file of the specified repository, allowing for dynamic loading of workshops and resources. ## Features - **Next.js framework** for building and deploying static sites. -- **Customizable workshops** with exercises and examples for digital humanities. +- **Customizable workshops** following a structured format. - **Scalable design** to allow contributions and expansions of teaching resources. -- **Interactive in-browser code editing** using WebAssembly (WASM). -- **GitHub Actions integration** for automatic deployment to GitHub Pages. +- **Interactive in-browser code execution** using WebAssembly (WASM). +- **GitHub Actions integration** for automatic deployment. ## Getting Started -Deploying DHRIFT using GitHub Actions is simple. By forking the repository and enabling Actions, your workshop site can be automatically deployed. However, after enabling Actions, you will need to trigger the workflow by either running it manually or making a small change to the repository. +Deploying DHRIFT using GitHub Actions is simple. By forking the repository and enabling Actions, your workshop site can be automatically deployed. After enabling Actions, you will need to trigger the workflow by either running it manually or making a small change to the repository. ### Quick Deployment Steps 1. **Fork the Repository**: - - Fork the [DHRIFT repository](https://github.com/DHRI-Curriculum/DHRIFT) to your own GitHub account. + - Fork the [DHRIFT repository](https://github.com/DHRI-Curriculum/DHRIFT) to your GitHub account. 2. **Enable GitHub Actions**: - - In your forked repository, go to the **Actions** tab. + - In your forked repository, navigate to the **Actions** tab. - Click **Enable Actions** if GitHub Actions are not already active. 3. **Trigger the Deployment**: - - **Option 1**: Make a small change (e.g., edit the README) and push it to trigger the GitHub Actions workflow. - - **Option 2**: Manually trigger the workflow by navigating to the **Actions** tab, selecting the workflow, and clicking **Run workflow**. + - **Option 1**: Make a small change (e.g., edit the README) and push the change to trigger the GitHub Actions workflow. + - **Option 2**: Manually trigger the workflow from the **Actions** tab by selecting the workflow and clicking **Run workflow**. 4. **Automatic Deployment**: - Once triggered, GitHub will run the deployment workflow, building and deploying your site to GitHub Pages or your specified hosting platform. - Future updates to the `main` branch will automatically trigger a rebuild and redeploy. +## Usage + +### How DHRIFT Works + +When you deploy DHRIFT, it dynamically pulls content from a GitHub repository specified in the URL query. DHRIFT reads the `config.yml` file from the specified repository to gather metadata (e.g., site title, description) and locate the workshops repository. + +For example, if your repository URL is: +``` +https://app.dhrift.org/inst?instUser=dhri-curriculum&instRepo=dhrift-site-template +``` + +DHRIFT will pull the `config.yml` from `https://github.com/DHRI-Curriculum/dhrift-site-template`: +```yaml +# Example config.yml +title: "DHRI Curriculum" +description: "A site for DHRI workshops" +workshopsuser: dhri-curriculum +workshopsrepo: workshops +``` + +The `workshopsuser` and `workshopsrepo` keys point to the repository containing the Markdown workshop files. + +### Workshop Repository Structure + +The workshops repository must adhere to a specific structure for DHRIFT to correctly load and display the content. Here is an example of the structure based on the [DHRI-Curriculum/workshops repository](https://github.com/DHRI-Curriculum/workshops): + +``` +├── command-line.md # Markdown files for each workshop +├── data-literacies.md +├── git.md +│ +└── images/ # Any images used in workshops + ├── example.png +``` + +Each Markdown file represents a workshop. The files should follow a clear and consistent format, such as: + +```markdown +# Workshop Title +Introduction and objectives. + +## Lesson 1: Getting Started +Explanation and tasks... + +```bash +# Example command +echo "Hello, DHRIFT!" +``` + +DHRIFT will use the structure defined in the `config.yml` and the content in the `workshops` repository to populate the site dynamically. + +### Adding New Workshops + +To add new workshops, update the `workshops_repo` in your `config.yml` file to point to a GitHub repository structured according to the example above. Ensure that each workshop is written in Markdown format and follows the proper structure for integration into the platform. + ## Development ### Prerequisites @@ -59,79 +111,61 @@ To set up a local development environment for DHRIFT, ensure you have the follow ### Installation 1. Clone your forked repository: - + ```bash git clone https://github.com//DHRIFT.git cd DHRIFT ``` -Install dependencies: + +2. Install dependencies: ```bash npm install ``` -## Running the Development Server -To start the development server, run: +### Running the Development Server +To start the development server, run: ```bash npm run dev ``` -Visit http://localhost:3000 to preview your changes. - -# Contributing -We welcome contributions to DHRIFT! To contribute: - -## Fork the repository. -Create a new branch for your feature or bugfix. -Submit a pull request with detailed information about your changes. -Be sure to follow the project's code style and conventions. - -# Custom Workshops -DHRIFT allows creators to host their own repositories of workshops and configure DHRIFT to pull and display content dynamically from those repositories using query parameters. +Visit `http://localhost:3000` to preview your changes. -## Example: Custom Workshops Repository -To point DHRIFT to a custom workshop repository, use the following URL format: +### Building for Production +To build and export the static site: +```bash +npm run build ``` -https://app.dhrift.org/inst?instUser=&instRepo= -``` +This will generate static files in the `out` folder. -For instance, to use the dhrift-site-template repository under the dhri-curriculum organization, the URL would be: +## Contributing -``` -https://app.dhrift.org/inst?instUser=dhri-curriculum&instRepo=dhrift-site-template -``` +We welcome contributions to DHRIFT! To contribute: -DHRIFT will fetch and process workshops from this repository and convert them into interactive web pages. +1. Fork the repository. +2. Create a new branch for your feature or bugfix. +3. Submit a pull request with detailed information about your changes. -## How to Create Custom Workshop Repositories -Create a GitHub Repository: +Be sure to follow the project's code style and conventions. -Set up a new repository for your workshops. Each workshop can be a Markdown file with content like lesson plans, code examples, and exercises. -Organize Your Content: -Create a clear structure, such as a workshops/ folder for lesson files and an assets/ folder for images. -## Write Workshop Files: +## Custom Workshops -Use Markdown to create each workshop. For example: -```markdown -# Workshop Title -Introduction and objectives. +DHRIFT allows creators to host their own repositories of workshops and configure DHRIFT to dynamically pull and display content from those repositories. -## Lesson 1: Getting Started -Explanation and tasks... -``` +### How to Create Custom Workshop Repositories -```bash -echo "Hello, DHRIFT!" -``` +1. **Create a GitHub Repository**: + - Set up a new GitHub repository for your workshops. Each workshop can be a separate Markdown file with content like lesson plans, code examples, and exercises. + +2. **Organize Your Repository**: + - Create a clear structure following the requirements above. -## Deploy the Repository: +3. **Write Workshop Files**: + - Use Markdown to write each workshop. Ensure they follow the structured format as shown in the example above. -Once the repository is ready, use the appropriate query string to point DHRIFT at your custom repository. +4. **Update the `config.yml`**: + - Point to your custom workshops repository by setting the `workshopsuser` and `workshopsrepo` keys in the `config.yml` file of your institute repository. -## Benefits of Using Custom Repositories -Customizability: Tailor the workshop content to specific needs or curricula. -Interactivity: DHRIFT supports WebAssembly (WASM) for in-browser code execution, providing interactive learning experiences. -Flexibility: Any updates to the repository automatically reflect on the live site. +## License -# License -This project is licensed under the MIT License. See the LICENSE file for details. +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. \ No newline at end of file From 7b776b71cd0a6ac506b8b463bf5d77ba52d317b9 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 13:08:54 -0400 Subject: [PATCH 04/11] refactor: Update README.md with WASM capabilities and interactive Python editor example --- README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/README.md b/README.md index 05ae86b..19235f2 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,23 @@ DHRIFT (Digital Humanities Research Infrastructure for Teaching) is a static sit ## Table of Contents - [Project Overview](#project-overview) - [Features](#features) +- [WASM Capabilities](#wasm-capabilities) + - [Key Features Enabled by WASM](#key-features-enabled-by-wasm) + - [Example: Interactive Python Editor](#example-interactive-python-editor) - [Getting Started](#getting-started) + - [Quick Deployment Steps](#quick-deployment-steps) - [Usage](#usage) + - [How DHRIFT Works](#how-dhrift-works) + - [Workshop Repository Structure](#workshop-repository-structure) + - [Adding New Workshops](#adding-new-workshops) - [Development](#development) + - [Prerequisites](#prerequisites) + - [Installation](#installation) + - [Running the Development Server](#running-the-development-server) + - [Building for Production](#building-for-production) - [Contributing](#contributing) - [Custom Workshops](#custom-workshops) + - [How to Create Custom Workshop Repositories](#how-to-create-custom-workshop-repositories) - [License](#license) ## Project Overview @@ -24,6 +36,43 @@ DHRIFT provides an infrastructure for teaching and learning in the digital human - **Interactive in-browser code execution** using WebAssembly (WASM). - **GitHub Actions integration** for automatic deployment. +## WASM Capabilities + +DHRIFT offers advanced interactive features through WebAssembly (WASM), allowing users to engage with code directly in the browser. This makes DHRIFT workshops not just static learning resources, but dynamic, interactive experiences where learners can execute and modify code in real-time. + +### Key Features Enabled by WASM: + +1. **Integrated Code Editors**: + DHRIFT provides in-browser code editors that allow users to write and execute code without needing any local setup. These editors support multiple programming languages and are embedded directly into the workshop content. Participants can edit code examples within the workshop itself and see live output, creating an immersive learning experience. + + - **Supported Languages**: Python, JavaScript, HTML/CSS, and more. + - **Real-time Execution**: Learners can immediately see the results of the code they write, without leaving the browser. + +2. **Simulated Command Line Interface**: + For workshops that teach command-line skills, DHRIFT integrates a browser-based simulated command line. This allows users to practice common terminal commands like navigating directories, managing files, or using version control (e.g., `git`) directly in the browser. + + - **Features**: Basic shell commands like `ls`, `cd`, `echo`, etc. + - **Hands-On Practice**: Participants can try out commands as they progress through the lesson, reinforcing their learning through active engagement. + +3. **Interactive Code Execution with WASM**: + Using WebAssembly, DHRIFT enables secure and fast in-browser execution of code blocks. This is particularly useful for running code snippets in languages like Python or JavaScript without requiring server-side execution. WASM ensures that the execution happens efficiently within the user's browser environment, providing an experience similar to using a local IDE. + +### Example: Interactive Python Editor + +Within a Python workshop, users might encounter code blocks like this: + +```python +# Example Python Code +print("Welcome to the Python workshop!") +``` + +The results are displayed instantly, without needing to leave the browser, reinforcing learning by allowing immediate feedback. + +Benefits of WASM Integration: +- **No Setup Required**: Learners don’t need to install any local tools or environments. Everything runs directly in the browser. +- **Performance**: WebAssembly allows fast execution of complex tasks, including running code or simulating environments, without the performance limitations of JavaScript alone. +- **Interactive Learning**: By offering interactive editors and terminals, DHRIFT transforms passive reading into active learning, where participants can experiment and engage directly with the material. + ## Getting Started Deploying DHRIFT using GitHub Actions is simple. By forking the repository and enabling Actions, your workshop site can be automatically deployed. After enabling Actions, you will need to trigger the workflow by either running it manually or making a small change to the repository. From df62bc25fd7d6f33ef9453327faa010659901630 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 14:53:33 -0400 Subject: [PATCH 05/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 19235f2..6401862 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ Within a Python workshop, users might encounter code blocks like this: print("Welcome to the Python workshop!") ``` -The results are displayed instantly, without needing to leave the browser, reinforcing learning by allowing immediate feedback. +Users are able to open the code editor and run this code themselves within the browser. Benefits of WASM Integration: - **No Setup Required**: Learners don’t need to install any local tools or environments. Everything runs directly in the browser. @@ -217,4 +217,4 @@ DHRIFT allows creators to host their own repositories of workshops and configure ## License -This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. \ No newline at end of file +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. From c9aaf5973a0fdb8ebd86220ab21326a998c0b7b5 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 24 Oct 2024 14:54:05 -0400 Subject: [PATCH 06/11] Update README.md --- README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/README.md b/README.md index 6401862..a9c4763 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,6 @@ DHRIFT (Digital Humanities Research Infrastructure for Teaching) is a static sit - [Prerequisites](#prerequisites) - [Installation](#installation) - [Running the Development Server](#running-the-development-server) - - [Building for Production](#building-for-production) - [Contributing](#contributing) - [Custom Workshops](#custom-workshops) - [How to Create Custom Workshop Repositories](#how-to-create-custom-workshop-repositories) @@ -179,14 +178,6 @@ npm run dev ``` Visit `http://localhost:3000` to preview your changes. -### Building for Production - -To build and export the static site: -```bash -npm run build -``` -This will generate static files in the `out` folder. - ## Contributing We welcome contributions to DHRIFT! To contribute: From 29e73946f740c4949c601758e581ce32d0a72f87 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Mon, 28 Oct 2024 15:00:54 -0400 Subject: [PATCH 07/11] Update README.md --- README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/README.md b/README.md index a9c4763..9099cbd 100644 --- a/README.md +++ b/README.md @@ -137,9 +137,6 @@ Introduction and objectives. ## Lesson 1: Getting Started Explanation and tasks... -```bash -# Example command -echo "Hello, DHRIFT!" ``` DHRIFT will use the structure defined in the `config.yml` and the content in the `workshops` repository to populate the site dynamically. From 16c224d177133405ad285a615bfb030710b20152 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Tue, 29 Oct 2024 14:36:01 -0400 Subject: [PATCH 08/11] Update README.md --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 9099cbd..c3b1c98 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,18 @@ Deploying DHRIFT using GitHub Actions is simple. By forking the repository and e When you deploy DHRIFT, it dynamically pulls content from a GitHub repository specified in the URL query. DHRIFT reads the `config.yml` file from the specified repository to gather metadata (e.g., site title, description) and locate the workshops repository. +DHRIFT generates a URL that pulls specific event and workshop content from a GitHub repository. Here’s how the URL is set up: + +```php +https://app.dhrift.org/inst?instUser={github_username}&instRepo={repository_name} +``` + +1. **Base URL**: `https://app.dhrift.org/inst` – Directs to DHRIFT’s content loader. + +2. **Parameters**: + - **`instUser`**: The GitHub username or organization (e.g., `dhri-curriculum`). + - **`instRepo`**: Repository name containing a `config.yml` file with event info, such as date, location, and sessions (e.g., `dhrift-site-template`). + For example, if your repository URL is: ``` https://app.dhrift.org/inst?instUser=dhri-curriculum&instRepo=dhrift-site-template From fc6c8ea522fd176d6bec9417aad777d212f9b6fb Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Thu, 7 Nov 2024 14:30:20 -0500 Subject: [PATCH 09/11] feat: Add AllTracksView and OneTrackView components for track management --- components/AllTracksView.js | 38 +++++++++++++++++++++++++++ components/OneTrackView.js | 52 +++++++++++++++++++++++++++++++++++++ pages/_app.js | 3 +++ pages/tracks/index.js | 29 +++++++++++++++++++++ pages/workshops/index.js | 8 +++--- 5 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 components/AllTracksView.js create mode 100644 components/OneTrackView.js create mode 100644 pages/tracks/index.js diff --git a/components/AllTracksView.js b/components/AllTracksView.js new file mode 100644 index 0000000..5901898 --- /dev/null +++ b/components/AllTracksView.js @@ -0,0 +1,38 @@ +import React, { useEffect, useState } from 'react'; +import Link from 'next/link'; +import useSWR from 'swr'; +import yaml from 'js-yaml'; + +const fetcher = (...args) => fetch(...args).then(res => res.text()); + +export default function AllTracksView({ gitUser, gitRepo }) { + const [shouldFetch, setShouldFetch] = useState(false); + + useEffect(() => { + if (gitUser && gitRepo) { + setShouldFetch(true); + } + }, [gitUser, gitRepo]); + + const { data, error } = useSWR(shouldFetch ? `https://raw.githubusercontent.com/${gitUser}/${gitRepo}/main/tracks.yaml` : null, fetcher); + + if (error) return
Failed to load tracks
; + if (!data) return
Loading...
; + + const tracks = yaml.load(data); + + console.log(tracks); + return ( +
+ {Array.isArray(tracks.tracks) && tracks.tracks.map(track => ( +
+

{track.name}

+

{track.description}

+ + View {track.name} Workshops + +
+ ))} +
+ ); +} diff --git a/components/OneTrackView.js b/components/OneTrackView.js new file mode 100644 index 0000000..df21006 --- /dev/null +++ b/components/OneTrackView.js @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from 'react'; +import UseWorkshopsCard from './Hooks/UseWorkshopsCard'; +import useAllWorkshops from './Hooks/UseAllWorkshops'; +import useSWR from 'swr'; +import yaml from 'js-yaml'; + +const fetcher = (...args) => fetch(...args).then(res => res.text()); + +export default function OneTrackView({ gitUser, gitRepo, instUser, instRepo, track }) { + const [shouldFetch, setShouldFetch] = useState(false); + + const { workshops } = useAllWorkshops({ gitUser, gitRepo, instUser, instRepo }); + useEffect(() => { + if (gitUser && gitRepo) { + setShouldFetch(true); + } + }, [gitUser, gitRepo]); + + const { data, error } = useSWR(shouldFetch ? `https://raw.githubusercontent.com/${gitUser}/${gitRepo}/main/tracks.yaml` : null, fetcher); + + if (error) return
Failed to load track
; + if (!data) return
Loading...
; + + const tracks = yaml.load(data); + const trackData = tracks.tracks.find(t => t.short_name === track); + + console.log('trackData workshops', trackData.workshops); + console.log('all workshops', workshops); + // workshop names have '.md' at the end, so we need to remove it + // Filter workshops by track + + const trackWorkshops = workshops.filter(workshop => trackData.workshops.includes(workshop.name.replace('.md', ''))); + const reverseTrackWorkshops = trackWorkshops.reverse(); + + return ( +
+

{trackData.name}

+
+ {reverseTrackWorkshops.map((workshop, index) => ( + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/pages/_app.js b/pages/_app.js index 4d9ed9b..133e835 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -23,6 +23,7 @@ function MyApp({ Component, pageProps }) { const [gitRepo, setGitRepo] = useState(null); const [instGitUser, setInstGitUser] = useState(null); const [instGitRepo, setInstGitRepo] = useState(null); + const [query, setQuery] = useState(null); const [cacheCleared, setCacheCleared] = useState(false); const { cache, mutate } = useSWRConfig() const router = useRouter(); @@ -32,6 +33,7 @@ function MyApp({ Component, pageProps }) { useEffect(() => { const urlParams = new URLSearchParams(window.location.search); + setQuery(urlParams); setInstGitUser(urlParams.get('instUser')); setInstGitRepo(urlParams.get('instRepo')); if (router.pathname === '/inst' && urlParams.get('user') && urlParams.get('repo')) { @@ -54,6 +56,7 @@ function MyApp({ Component, pageProps }) { } }, [router]) + pageProps.query = query pageProps.title = title pageProps.setTitle = setTitle pageProps.workshopMode = workshopMode diff --git a/pages/tracks/index.js b/pages/tracks/index.js new file mode 100644 index 0000000..6a26f5c --- /dev/null +++ b/pages/tracks/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import TracksView from '../../components/AllTracksView'; +import OneTrackView from '../../components/OneTrackView'; +import Header from '../../components/Header'; +import { Container } from '@mui/material' + +export default function Tracks(props) { + + return ( + <> +
+ + {props.query?.get('t') ? ( +
+ +
+ ) : ( +
+

All Tracks

+ +
+ )} + + + ); +} \ No newline at end of file diff --git a/pages/workshops/index.js b/pages/workshops/index.js index d363329..77bfd33 100644 --- a/pages/workshops/index.js +++ b/pages/workshops/index.js @@ -40,10 +40,10 @@ export default function Workshops(props) { } }, [props.instGitUser, props.instGitRepo]) - useEffect(() => { - // console.log(props.gitUser) && props.gitRepo && props.instGitUser && props.instGitRepo) - // }, [props.gitUser, props.gitRepo, props.instGitUser, props.instGitRepo]) - }, [props.gitUser, props.gitRepo, props.instGitUser, props.instGitRepo]) + // useEffect(() => { + // // console.log(props.gitUser) && props.gitRepo && props.instGitUser && props.instGitRepo) + // // }, [props.gitUser, props.gitRepo, props.instGitUser, props.instGitRepo]) + // }, [props.gitUser, props.gitRepo, props.instGitUser, props.instGitRepo]) From d5ae7959f05e75426801c2e20859751be7db5e1e Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Fri, 8 Nov 2024 14:57:46 -0500 Subject: [PATCH 10/11] feat: Enhance AllTracksView and OneTrackView with improved layout and styling --- components/AllTracksView.js | 49 +++++++++++++++++++++++-------- components/Hooks/UseWorkshop.js | 2 -- components/OneTrackView.js | 16 +++++----- pages/tracks/index.js | 45 ++++++++++++++++------------ styles/styles.scss | 52 ++++++++++++++++++++++++++++++--- 5 files changed, 121 insertions(+), 43 deletions(-) diff --git a/components/AllTracksView.js b/components/AllTracksView.js index 5901898..fe6992c 100644 --- a/components/AllTracksView.js +++ b/components/AllTracksView.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import useSWR from 'swr'; import yaml from 'js-yaml'; +import { Card, CardActionArea, CardContent, Typography, Grid, CardMedia } from '@mui/material'; const fetcher = (...args) => fetch(...args).then(res => res.text()); @@ -21,18 +22,42 @@ export default function AllTracksView({ gitUser, gitRepo }) { const tracks = yaml.load(data); - console.log(tracks); return ( -
- {Array.isArray(tracks.tracks) && tracks.tracks.map(track => ( -
-

{track.name}

-

{track.description}

- - View {track.name} Workshops - -
- ))} -
+ + {Array.isArray(tracks.tracks) && tracks.tracks.map(track => { + const imageBuiltURL = `https://raw.githubusercontent.com/${gitUser}/${gitRepo}/main/${track.coverimage}`; + const randomNumberBetween1and7 = Math.floor(Math.random() * 7) + 1; + var coverimage = track.coverimage; + if (!track.coverimage) { + { + track.coverimage = "/images/img" + randomNumberBetween1and7 + ".jpg"; + } + } + return ( + + + +
+ +
+ + + {track.name} + + + {track.description} + + + + + + ) + })} + ); } diff --git a/components/Hooks/UseWorkshop.js b/components/Hooks/UseWorkshop.js index 0144347..ecc758f 100644 --- a/components/Hooks/UseWorkshop.js +++ b/components/Hooks/UseWorkshop.js @@ -1,7 +1,5 @@ -import useSWRImmutable from "swr/immutable"; import useSWR from "swr"; import { useState, useEffect } from "react"; -import { set } from "date-fns"; export default function useWorkshop(gitUser, gitFile, builtURL, editing) { diff --git a/components/OneTrackView.js b/components/OneTrackView.js index df21006..13778a7 100644 --- a/components/OneTrackView.js +++ b/components/OneTrackView.js @@ -24,18 +24,20 @@ export default function OneTrackView({ gitUser, gitRepo, instUser, instRepo, tra const tracks = yaml.load(data); const trackData = tracks.tracks.find(t => t.short_name === track); - console.log('trackData workshops', trackData.workshops); - console.log('all workshops', workshops); - // workshop names have '.md' at the end, so we need to remove it - // Filter workshops by track - const trackWorkshops = workshops.filter(workshop => trackData.workshops.includes(workshop.name.replace('.md', ''))); const reverseTrackWorkshops = trackWorkshops.reverse(); +console.log('gitUser', gitUser) +console.log('gitRepo', gitRepo) +console.log('instUser', instUser) +console.log('instRepo', instRepo) + return (
-

{trackData.name}

-
+

{trackData.name} Track

+

{trackData.description}

+
{reverseTrackWorkshops.map((workshop, index) => ( { + const track = router.query.t; + setSelectedTrack(track); + }, [router.query.t]); + + console.log('props', props) return ( <> -
- - {props.query?.get('t') ? ( -
- -
- ) : ( -
-

All Tracks

- -
- )} - +
+ + {selectedTrack ? ( +
+ +
+ ) : ( +
+

All Tracks

+ +
+ )} + ); } \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss index 728c1a5..551d538 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -113,12 +113,11 @@ html { } - #__next { box-sizing: border-box; margin: 0; padding: 0; - min-height: 100vh; + // min-height: 100vh; max-width: 100%; background-color: $background-page; color: $foreground; @@ -128,10 +127,10 @@ html { .container { position: relative; - min-height: 100vh; + min-height: 95vh; display: flex; flex-direction: column; - justify-content: flex-end; + justify-content: flex-start; } @@ -619,6 +618,51 @@ header { } } +// track cards +.track-card { + background-color: $primary-color-cream; + width: 100%; // ensure full width within grid item + border-radius: 0px; + box-shadow: none; + padding-left: 20px; + @include respond-above(md) { + padding-left: 0px; + } + + h3 { + font-weight: 900; + font-size: 1.5rem; + margin-top: -5px; + } + + .description { + font-size: 1rem; + margin-top: -5px; + } + + &:hover { + transform: translateY(-10px); + overflow: visible; + z-index: 0; + box-shadow: $primary-color-sky 16px 16px 0px; + transition: all 0.5s ease; + } + + .MuiCardContent-root { + padding: 10px; + } + + .MuiTypography-h5 { + font-weight: 900; + font-size: 1.5rem; + margin-top: -5px; + } + + .MuiTypography-body2 { + font-size: 1rem; + margin-top: -5px; + } +} //frontmatter styles .frontmatter { From 86ad65307b371672a6f61382d22e80dc15332385 Mon Sep 17 00:00:00 2001 From: Stephen Zweibel Date: Fri, 8 Nov 2024 20:35:27 -0500 Subject: [PATCH 11/11] refactor: Clean up code formatting and improve layout in UseWorkshopsCard and Institute components --- components/Hooks/UseWorkshopsCard.js | 44 ++++---- pages/inst/index.js | 6 +- styles/styles.scss | 145 ++++++++++++++++----------- 3 files changed, 106 insertions(+), 89 deletions(-) diff --git a/components/Hooks/UseWorkshopsCard.js b/components/Hooks/UseWorkshopsCard.js index 1effaab..823fc6d 100644 --- a/components/Hooks/UseWorkshopsCard.js +++ b/components/Hooks/UseWorkshopsCard.js @@ -74,44 +74,40 @@ export default function UseWorkshopCard({ workshop, gitUser, gitRepo, instUser, } else { // setSrc("/images/img" + randomNumberBetween1and7 + ".jpg") - setSrc( process.env.NEXT_PUBLIC_ASSET_PREFIX + setSrc(process.env.NEXT_PUBLIC_ASSET_PREFIX + "/images/img" + randomNumberBetween1and7 + ".jpg") } }, [coverimage]) const workshopLink = './dynamic?user=' + gitUser + '&repo=' + gitRepo + '&file=' + workshop.name.split('.')[0] + '&instUser=' + instUser + '&instRepo=' + instRepo; - if(parsedWorkshop?.data?.published === false){ + if (parsedWorkshop?.data?.published === false) { console.log('not published', parsedWorkshop.data.title) return null; } return ( <> {parsedWorkshop && parsedWorkshop.data.title && parsedWorkshop.data.description && (parsedWorkshop.data.published === 'true' || !parsedWorkshop.data.published) && -
- - + + className='workshop-card'> +
- + className='stylized-image-container'> +

{parsedWorkshop.data['cover title'] || parsedWorkshop.data.title}

{parsedWorkshop.data.title}

{parsedWorkshop?.data?.description?.length > 200 ? parsedWorkshop.data.description.substring(0, 200) + '...' : parsedWorkshop.data.description}

 -
+ } ) diff --git a/pages/inst/index.js b/pages/inst/index.js index a083924..f0e2dfc 100644 --- a/pages/inst/index.js +++ b/pages/inst/index.js @@ -221,11 +221,11 @@ export default function Institute(props) {
{parsedYAML &&

{parsedYAML.description}

} {parsedYAML && (parsedYAML.registerlink || parsedYAML.registerLink) && -

+ }
{parsedYAML && parsedYAML.DHRIFTfrontpage === false || parsedYAML && !parsedYAML.DHRIFTfrontpage ? aboutAccordion : null} @@ -258,8 +258,6 @@ export default function Institute(props) { div { @include respond-above(sm) { @@ -470,6 +471,7 @@ header { padding-left: 100px; padding-right: 100px; } + // padding: 0px 20px 0px 20px; position: absolute; height: 500px; @@ -491,11 +493,13 @@ header { flex-direction: column; padding-left: 20px; padding-top: 20px; + @include respond-above(md) { flex-direction: row; padding-left: 0px; padding-top: 0px; } + align-items: baseline; justify-content: space-between; } @@ -539,19 +543,23 @@ header { position: relative; display: flex; flex-direction: column; + align-items: center; padding-left: 20px; + @include respond-above(md) { flex-direction: row; padding-left: 0px; - } + } justify-content: flex-start; p { padding-right: 20px; + @include respond-above(md) { padding-right: 8cap; } + max-width: 100%; } } @@ -568,6 +576,8 @@ header { .button { margin-top: -10px; margin-top: -10px; + padding-left: 50px; + padding-right: 50px; } } @@ -577,24 +587,23 @@ header { .workshop { &-grid { display: grid; - // 3 columns - // grid-template-columns: repeat(3, 1fr); - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + justify-content: center; // bit of space - grid-gap: 30px; - grid-gap: 30px; + grid-gap: 80px; margin-bottom: 30px; } &-card { background-color: $primary-color-cream; - width: 400px; + // width: 400px; border-radius: 0px; box-shadow: none; padding-left: 20px; + @include respond-above(md) { padding-left: 0px; - } + } h3 { font-weight: 900; @@ -620,54 +629,55 @@ header { // track cards .track-card { - background-color: $primary-color-cream; - width: 100%; // ensure full width within grid item - border-radius: 0px; - box-shadow: none; - padding-left: 20px; - @include respond-above(md) { - padding-left: 0px; - } + background-color: $primary-color-cream; + width: 100%; // ensure full width within grid item + border-radius: 0px; + box-shadow: none; + padding-left: 20px; - h3 { - font-weight: 900; - font-size: 1.5rem; - margin-top: -5px; - } + @include respond-above(md) { + padding-left: 0px; + } - .description { - font-size: 1rem; - margin-top: -5px; - } + h3 { + font-weight: 900; + font-size: 1.5rem; + margin-top: -5px; + } - &:hover { - transform: translateY(-10px); - overflow: visible; - z-index: 0; - box-shadow: $primary-color-sky 16px 16px 0px; - transition: all 0.5s ease; - } + .description { + font-size: 1rem; + margin-top: -5px; + } - .MuiCardContent-root { - padding: 10px; - } + &:hover { + transform: translateY(-10px); + overflow: visible; + z-index: 0; + box-shadow: $primary-color-sky 16px 16px 0px; + transition: all 0.5s ease; + } - .MuiTypography-h5 { - font-weight: 900; - font-size: 1.5rem; - margin-top: -5px; - } + .MuiCardContent-root { + padding: 10px; + } - .MuiTypography-body2 { - font-size: 1rem; - margin-top: -5px; - } + .MuiTypography-h5 { + font-weight: 900; + font-size: 1.5rem; + margin-top: -5px; + } + + .MuiTypography-body2 { + font-size: 1rem; + margin-top: -5px; + } } //frontmatter styles .frontmatter { display: block; - + @include respond-above(xl) { width: 90%; padding-left: 20px; @@ -688,11 +698,12 @@ header { overflow-x: hidden; padding-left: 20px; padding-right: 20px; + @include respond-above(md) { overflow-x: visible; padding-left: 0px; padding-right: 0px; - } + } h1 { // front page title @@ -711,9 +722,11 @@ header { position: absolute; height: 100%; width: 201vw; + @include respond-above(md) { width: 100vw; - } + } + left: -150px; overflow-x: hidden; } @@ -752,8 +765,8 @@ header { margin-bottom: 0px; position: relative; grid-column: 1; - @include respond-above(md) { - } + + @include respond-above(md) {} } .button { @@ -767,9 +780,10 @@ header { &-item { grid-column: 1; padding-left: 20px; + @include respond-above(md) { padding-left: 0px; - } + } h2, h3 { @@ -799,6 +813,7 @@ header { position: relative; margin-top: 0px; padding-left: 20px; + @include respond-above(xl) { position: absolute; display: block; @@ -806,7 +821,7 @@ header { grid-row-start: 1; justify-self: right; padding-left: 0px; - } + } &-authors { @@ -836,11 +851,12 @@ header { // page content styles .page-content { - + margin-top: 150px; margin-bottom: 100px; padding-left: 20px; + @include respond-above(md) { padding-left: 0px; } @@ -1150,7 +1166,7 @@ nav.sidenav { // } .message pre { -background-color: inherit; + background-color: inherit; } .loading-message { @@ -1218,15 +1234,17 @@ background-color: inherit; // Forms .form { - h2{ + h2 { font-weight: 700; margin-bottom: 10px; } + h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; } + h4 { margin-top: 0px; margin-bottom: 0px; @@ -1243,28 +1261,31 @@ background-color: inherit; background-color: $primary-color-sky; } } + .sessions { display: flex; justify-content: space-between; margin-bottom: 20px; - + div { - background-color: $primary-color-cream; + background-color: $primary-color-cream; } - h4{ + h4 { margin-bottom: 20px; } } - .logoUpload, .heroImageUpload{ + .logoUpload, + .heroImageUpload { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; background-color: $primary-color-cream; + // input { // display: none; // } @@ -1322,6 +1343,7 @@ footer { .footer-logo { max-width: 50%; display: none; + @include respond-above(md) { margin-left: 55px; display: block; @@ -1334,10 +1356,11 @@ footer { justify-content: space-between; align-items: center; flex-wrap: nowrap; + // margin-top: -30px; @include respond-above(md) { margin-left: 100px; - flex-direction: row; + flex-direction: row; }