Template for #30Days Projects

The initial #30Days series provided a platform and process to help create structured learning roadmaps for a 30-day learning sprint organized as:

• Kickoff Post (Day 1)
• 4 Themed Weeks (Days 2-29)
• Wrap-up Post (Day 30)

The initial thinking was to focus on technology themes (core concepts, developer tools, best practices, usage examples). However, I realized I could use the #30Days approach to support different kinds of journeys that can help us learn.

Here are some examples:

#30DaysTo	Journey
Learn	Use the month to explore documentation and code samples to build familiarity
Deconstruct	Use the month to tear-down an open-source project to build understanding
Build	Use the month to implement an end-to-end scenario to build dev expertise
Share	Use the month to share "Today I Learned" updates (visual or snippet) to build recall

Using The Template

There are two main directories:

• website contains a template for a Docusaurus-based website that is hosted on GitHub pages. Use this for documenting your journey to share with others.
• code contains a README (for TIL-style table of contents). Use this to setup subfolders for each code sample or tutorial, to learn by doing.

The second is self-explanatory, so a couple of words about the website feature.

• website/docusaurus.config.js is the primary configuration file.
  • Update it for your repository name and project.
  • Commit changes - triggers deploy.yml action.
  • Update Pages settings - deploy from gh-pages
  • Your website should be live at site URL given
• website/sidebars.js is the file used to configure sidebar categories
  • default shows "concepts", "tutorials" and "solutions" as example themes. Customize it.
  • changes should be reflected in the navbar routes defined in docusuaruus.config.js
  • sidebars are setup to be autogenerated from folder contents - and separated (so each folder shows as a standlone sidebar in deployed site)
• create new pages under website/src/pages/name - these will get automatically hosted at /name route.

Docusaurus supports more features (e.g., blog, footer, plugins etc.) that have not been activated here by default. Read the Documentation to learn more.

Note that Docusaurus supports content in Markdown and MDX (JSX-flavored Markdown). The latter allows us to embed React components into a page for interactive or enhanced content UI/UX.

---

Projects Using Template

Tracking usage using this GitHub Action

1 Repositories using template

• 30DaysOf/nextjs