Skip to content
Tymur Levtsun edited this page Nov 6, 2022 · 40 revisions

Lab 6

Due Date

Friday October 28 by Midnight.

NOTE: you have an extra week to complete this lab, which is also longer than previous labs. Please don't leave it until the last minute. Start it now and iterate on it over the next few weeks.

Overview

Over the next two weeks, we are going to extend our SSG projects by exploring the features of a popular SSG, Docusaurus. We'll also use this lab in order to learn how Docusaurus works. Seneca is in the process of converting all of our C/C++ curriculum to an OER version based on Docusaurus, and in the second half of the course, you'll have a chance to contribute to this project.

Docusaurus is a React-based static site generator built and maintained by Facebook. It helps projects document their technology for users and developers, without having to put a lot of effort into creating a full website. Lots of projects use Docusaurus for their project documentation, for example Jest, Redis, creact-react-app, Home Assistant, React Native, and many more.

This lab will help you practice the following:

  • setting up and learning the Docusaurus project for a documentation site
  • evaluating existing open source projects for inspiration and ideas when building your own solutions
  • prototyping a new feature in your SSG
  • estimating and planning a change to your software
  • implementing a working proof-of-concept quickly
  • planning future work via Issues

Step 1: Learning Docusaurus

Please read the Docusaurus Docs and Installation instructions. Create a new Docusaurus website and repo and publish your sample site. NOTE: you don't need to write any documentation, just learn how the tool works, get it working and hosted on your site's GitHub Pages.

When you're done, you should have two URLs:

  1. A new GitHub Repo: https://github.com/{your-username}/{your-docusaurus-sample-repo}
  2. A new GitHub Pages hosted Site: https://{your-username}.github.io/{your-docusaurus-sample-repo}

Step 2: Copy a Cool Feature from Docusaurus

Docusaurus is full of cool and interesting features. In the open source world, it's fine to copy where licenses allow it. Docusaurus' License allows you to "use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software," as long as you accept the license.

You are asked to pick a feature of Docusaurus that you think is interesting. You are free to pick whatever feature you like based on Docusaurus, but here are some suggestions:

  • Search Engine Optimization (SEO), including meta tags in the HTML head
  • Improved Accessibility of generated HTML
  • Support for React components
  • Themes
  • Plugins
  • Configurable Sidebar (i.e., table of contents)
  • Full Markdown support (e.g., swap out your basic version for an open source library/module that does it fully)
  • Syntax Highlighting for code blocks
  • Search
  • Static Assets for images, stylesheets, etc.
  • Markdown Frontmatter support
  • Blog posts in addition to Pages

Step 3: Plan your Feature and File Issues

Plan out how you'll implement a prototype of this feature using GitHub Issues. File Issues in your SSG repo to document what needs to be done and ideas on how you'll approach the work. The smaller you can make each Issue, the easier it will be to fix them.

Next, prototype the feature in your SSG project. Prototyping means building just enough of a feature in order to understand how the finished version might work. It doesn't need to be 100% complete or perfect. With a prototype, going fast is more important than being meticulous and detail oriented.

Create a branch and start implementing your code, committing to git as you knock-off various bits of the work.

When you're done, you should have something that can be squashed and merged into your default branch. It can be a simple proof-of-concept (missing key elements), as long as it works and proves your idea.

Step 4: File Follow-Up Issues

The chances of you being able to write the entire feature in the time you have are slim. By the end of the two weeks, for any aspects of the feature that you can't get done, file more Issues to be fixed later on. Challenge yourself to stay on schedule, and convert unfinished work into Issues to be solved in subsequent releases. Figure out what you need to cut in order to ship something on time. Shipping on time is more important than being perfect and never shipping. Software is never done, so it's important to learn to embrace the chaos of rolling releases and ongoing bug fixes.

Step 5: Write a Blog Post

After you're all done, write about the experience. Here are some ideas to touch on in your post:

  • How would you describe Docusaurus to a friend who has never used it before?
  • What was it like to set up a Docusaurus project?
  • Which feature did you decide to copy from Docusaurus? Why did you choose it?
  • How did you approach adding it to your SSG?
  • How did the planning experience compare to the actual work? How close were you in your estimation about what you could get done vs. what was left for the future?
  • Talk about your prototype of the feature: what does it do?
  • What are your next steps for the feature and how can people get involved to help you move it forward (e.g., issues you've filed)

Remember, make sure you include URLs to everything you discuss.

Submission

When you have completed all the requirements above, please add your details to the table below.

Name Blog Post (URL) Docusaurus Demo Site URL Squashed Commit of New Feature
Name https://example.com/blog/1 https://username.github.io/docusaurus-sample ddeaf180
Denes Adam Dolhay https://dev.to/dadolhay/osd600-lab6-3e03 https://dadolhay.github.io/docusaurus-sample 9bd61e7
Maxim Nosov https://dev.to/mnosov622/working-with-ssg-docusaurus-4cjc https://mnosov622.github.io/docusaurus-sample/ fc79d37
Rudy Chung https://dev.to/rudychung/osd600-lab-6-4gg9 https://rudychung.github.io/docusaurus-sample 6db44427
Chen-Yuan Chu https://dev.to/cychu42/drawing-inspiration-docusaurus-5a5j https://cychu42.github.io/docusaurusSiteSample/ 160620d
Mario Leonardo https://dev.to/ririio/implementing-a-docusaurus-feature-for-my-ssg-a3i https://ririio.github.io/ririio-docusaurus/ 1ed7f26
Alexander Samaniego https://dev.to/alexsam29/dps909-blog-lab-6-full-md-support-46cf https://alexsam29.github.io/Docusaurus-site/ 64d95e8
Artem Tanyhin https://dev.to/devils2ndself/refactoring-ssgo-letting-old-code-go-is-kinda-sad-40ho https://devils2ndself.github.io/docs/build/ 563b9c5
Batuhan Ipci https://dev.to/batunpc/a-good-code-thief-5dnl https://batunpc.github.io/dokku/ 15cec061
Samina Rahman Purba https://dev.to/saminarp/copying-a-feature-from-docusaurus-for-my-static-site-generator-rwar-49j6 https://saminarp.github.io/docusaurus-demo/ 645b553a
Neil An https://dev.to/neilan99/copying-a-feature-from-docusaurus-into-my-ssg-30j2 https://neilan99.github.io/docusaurus-sample/ 1698f9d7
Ivan Gabrovsky https://blogforwebdevelopment.blogspot.com/2022/10/lab-6-blog.html https://ivanigabrovsky.github.io/text-ssg-tool-docs/ 78447ae
Chan Dinh (Oscar) Phu https://dev.to/lostbutton/docusaurus-179p https://lostbutton.github.io/my-doc/ 090f062
Piotr Drozd https://dev.to/pdr0zd/learning-about-ssg-features-with-docusarus-146e https://p-dr0zd.github.io/pdrozdSSG-Docusaurus/ eefb760
Wonkeun No https://dev.to/genne23v/adding-full-markdown-support-and-sidebar-menu-to-my-openssg-268f https://genne23v.github.io/docusaurus-demo 35e29cb
Tong Liu https://dev.to/liutng/reflect-on-lab-6-3j6c https://liutng.github.io/docusaurus-copy/ 72c3edb
Stefan Frunza https://dev.to/sfrunza13/docusoaring-511o https://sfrunza13.github.io/docusaur/ 7435a0e
Eakampreet Singh https://dev.to/eakam/adding-link-markdown-support-to-rostgen-4gce https://eakam1007.github.io/docusaurus-sample/ fcb6a44
Anshul Gandhi https://dev.to/anshul137/dps909-blog-lab-6-intro-to-docusaurus-1gnf https://anshul137.github.io/docusaurus-sample-repo/ ca0f2f2
Gulnur Baimukhambetova https://dev.to/gulyapulya/docusaurus-first-impression-and-stealing-like-an-open-sourcer-5e8c https://gulyapulya.github.io/docusaurus/ 4a3a6d6
Taimoor Dawami https://dev.to/tdaw/osd600-learning-docusurus-using-remarkable-to-parse-markdown-3ffi https://serpentbytes.github.io/testing-docusaurus/ 38fc0ab
Rohan Kaicker https://dev.to/rokaicker/osd600-lab-6-29db https://rokaicker.github.io/SSGDocs/ 940e4bf
Tymur Levtsun https://dev.to/myrfion/made-markdown-parsing-great-again-567f https://izyum-docusaurus.vercel.app/ 91ffd29
Clone this wiki locally