Skip to content

Commit

Permalink
docs: update facilitator docs with the new way to update challenge pa…
Browse files Browse the repository at this point in the history 
…ges on the website
  • Loading branch information
@adiati98
adiati98 committed Oct 31, 2024
1 parent 72d6e6b commit 930da65
Showing 1 changed file with 54 additions and 75 deletions.
129 changes: 54 additions & 75 deletions monthly-challenges/facilitators-docs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ The Monthly Challenge Team abides by the Virtual Coffee [Code of Conduct](https:
- [Scheduling a Thread](#scheduling-a-thread)
- [Updating the Monthly Challenge Pages on the Website](#updating-the-monthly-challenge-pages-on-the-website)
- [1. Creating a new challenge page](#1-creating-a-new-challenge-page)
- [2. Updating the monthly challenge data](#2-updating-the-monthly-challenge-data)
- [3. Updating the monthly challenge landing page](#3-updating-the-monthly-challenge-landing-page)
- [4. Adding a success "completed challenge" alert to the previous challenge](#4-adding-a-success-completed-challenge-alert-to-the-previous-challenge)
- [2. Updating the monthly challenge landing page](#2-updating-the-monthly-challenge-landing-page)
- [3. Adding a success "completed challenge" alert to the previous challenge](#3-adding-a-success-completed-challenge-alert-to-the-previous-challenge)

## Facilitating a Challenge

Expand Down Expand Up @@ -146,39 +145,19 @@ Every month, we update these pages with the challenge's description and instruct

#### 1. Creating a new challenge page

- Go to `app/routes/__frontend/monthlychallenges`.
- Create a new `jsx` file for the challenge. For example, `feb-2024.jsx`.
- Go to `src\app\monthlychallenges\(challenges)`.
- Create a new folder for the challenge. Follow previous challenges for the naming format. For example, `sept-2024`.
- Create a `page.tsx` file in the folder.
- Write the content.

> [!NOTE]
>
> - For repeated challenges, you can copy and paste the content from the past challenge's file and update it to fit the upcoming challenge.
> - For a brand-new challenge, you need to write the content from scratch to introduce and describe the challenge. You can use the format of any previous challenge.
#### 2. Updating the monthly challenge data
#### 2. Updating the monthly challenge landing page

- Go to `app/data/monthlyChallenges/getChallenges.ts`.
- Update the data with the upcoming challenge data.

Here is an example, adding June 2024 challenge data:

```javascript
import { handle as june2024 } from '~/routes/__frontend/monthlychallenges/june-2024'; // add this data
import { handle as may2024 } from '~/routes/__frontend/monthlychallenges/may-2024';
import { handle as apr2024 } from '~/routes/__frontend/monthlychallenges/apr-2024';
...

const challenges: Challenge[] = [
{ handleData: june2024, slug: 'june-2024' }, // add this data
{ handleData: may2024, slug: 'may-2024' },
{ handleData: apr2024, slug: 'apr-2024' },
...
];
```

#### 3. Updating the monthly challenge landing page

- Go to `app/routes/__frontend/monthlychallenges/index.tsx`.
- Go to `src\app\monthlychallenges\page.tsx`.
- Remove the `current: true` from the previous challenge and set it for the new challenge.
- Update the link to the blog post. If there is no blog post, comment it out.
- Update the link to the challenge page.
Expand All @@ -187,54 +166,54 @@ const challenges: Challenge[] = [
Here is an example:

```javascript
{
current: true, // set for the new challenge
title: 'Blogging Challenge',
subtitle: `A Community Challenge to hit a word count goal for all our tech blogs.`,
description: (
<>
<p>
Based off the NaNoWriMo (National Novel Writing Month) Challenge, this
challenge is the tech take on writing and working together towards the
goal while posting on our own blogs.
</p>
// Update the link to a challenge blog post. If there is no blog post, comment out the paragraph.
<p>
Learn more about this challenge in{' '}
<a href="https://dev.to/virtualcoffee/blogging-2023-monthly-challenge-3kng">
this blog post
</a>
.
</p>
// Update the link to the new challenge page on the website
<p>
To view all of the details of this year's challenge,{' '}
<Link to="/monthlychallenges/nov-2023">
check out the November 2023 challenge page
</Link>
.
</p>
</>
),
links: [
// Add the link and title of the previous challenge
{
href: '/monthlychallenges/nov-2022',
title: 'November, 2022',
},
{
href: '/monthlychallenges/nov-2021',
title: 'November, 2021',
},
{
href: '/monthlychallenges/nov-2020',
title: 'November, 2020',
},
],
},
{
current: true, // set for the new challenge
title: 'Blogging Challenge',
subtitle: `A Community Challenge to hit a word count goal for all our tech blogs.`,
description: (
<>
<p>
Based off the NaNoWriMo (National Novel Writing Month) Challenge, this
challenge is the tech take on writing and working together towards the
goal while posting on our own blogs.
</p>
// Update the link to a challenge blog post. If there is no blog post, comment out the paragraph.
<p>
Learn more about this challenge in{' '}
<a href="https://dev.to/virtualcoffee/blogging-2023-monthly-challenge-3kng">
this blog post
</a>
.
</p>
// Update the link to the new challenge page on the website
<p>
To view all of the details of this year's challenge,{' '}
<Link to="/monthlychallenges/nov-2023">
check out the November 2023 challenge page
</Link>
.
</p>
</>
),
links: [
// Add the link and title of the previous challenge
{
href: '/monthlychallenges/nov-2022',
title: 'November, 2022',
},
{
href: '/monthlychallenges/nov-2021',
title: 'November, 2021',
},
{
href: '/monthlychallenges/nov-2020',
title: 'November, 2020',
},
],
},
```
#### 4. Adding a success "completed challenge" alert to the previous challenge
#### 3. Adding a success "completed challenge" alert to the previous challenge
- Open the previous challenge file.
- Add the alert right on top of `<h1>`.
Expand All @@ -245,6 +224,6 @@ Here is an example:
```javascript
<div className="alert alert-success">
This monthly challenge is complete. Congratulations! Please join us for the{' '}
<Link to="/monthlychallenges/mar-2024">next challenge</Link>!
<Link to="/monthlychallenges/dec-2023">next challenge</Link>!
</div>
```

0 comments on commit 930da65

Please sign in to comment.