Skip to content
Ritik Bheda edited this page Nov 2, 2021 · 74 revisions

Lab 6

Due Date

Friday October 29 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 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
Anatoliy Serputov https://medium.com/@aserputov/docusaurus-build-optimized-websites-quickly-75fee49f8e43 https://aserputov.github.io/docu/ e215f95
Trang Nguyen https://tracy016.medium.com/osd600-cloning-a-docusauruss-feature-2330e552f16d https://trangntt-016.github.io/docusaurus-sample/ 834eea
Tuan Phong Nguyen https://blog.andrewnt.dev/post/osd-600-lab-6 https://andrewnt219.github.io/my-website/ 99ad7302
Minsu Kim https://dev.to/mkim219/mimicking-features-from-docusaurus-10o1 https://mkim219.github.io/docusaurus-sample/ 98e689b
89cc6d5
98cb9ec
Eugene Chung https://ycechung-opensource.blogspot.com/2021/10/lab-6-working-with-docusauraus.html https://ycechungai.github.io/cmd-ssg-docs/docs/intro 6536f0a
Chi Kien Nguyen https://dev.to/kiennguyenchi/implement-a-docusaurus-feature-35oe https://kiennguyenchi.github.io/knc-docusaurus-website/index.html commit
Tengzhen Zhao https://dev.to/yodacanada/lab-6-apply-a-cool-feature-from-docusaurus-to-my-ssg-p25 https://yoda-canada.github.io/tengzhen-docusaurus-sample/ aaae462
Kunwarvir Dhillon https://dev.to/dhillonks/exploring-docusaurus-and-enhancing-cli-ssg-1cn6 https://dhillonks.github.io/docusaurus-sample/ eb670a37
Roman Rezinkin https://dev.to/romanrezinkin/dps909-lab-6-3j4c https://roman-rezinkin.github.io/DPS909_Docusaurus/ 109fe39
Gustavo Tavares https://dev.to/gmotgit/osd600-lab-06-4c9i https://osd-600-lab-06-site.vercel.app/ 37d7bfd9
Emily Phan blog https://hphan9.github.io/emilyPage/ issue
Minh Hang Nguyen https://dev.to/minhhang107/static-site-generator-support-static-files-f73 https://minhhang107.github.io/sample-docusaurus 4ffc2e9
Japneet Singh Kalra https://dev.to/japneetsingh035/adding-more-features-to-ssg-similar-to-docusaurus-26pi https://japneetsingh035.github.io/docusaurus/ 418540a
Le Minh Pham Blog Post Hosted Docusaurus Site 0f719ac
Thanh Cong Van https://dev.to/tcvan0707/osd600-lab-6-docusaurus-2nae https://tcvan0707.github.io/my-website/ eabfc5f
Hung Nguyen https://dev.to/nguyenhung15913/osd600-ssg-with-docusaurus-features-3m31 https://nguyenhung15913.github.io/osddocusaurus/ 39cb70e6
Ahmad Rokay https://dev.to/ar/trying-out-docusaurus-lab-6-2gae https://a-rokay.github.io/docusaurus-test/ 9c9c5ffb
Andre Willomitzer https://dev.to/andrewillomitzer/docusaurus-adventures-and-ssg-inspiration-4op6 https://andrewillomitzer.github.io/andrewillomitzerDocusaur/ 2aef898
Oliver Pham https://dev.to/oliverpham/prototype-markdown-frontmatter-support-for-silkie-502a https://oliver-pham.github.io/docusaurus-demo/ 68f8cc8
Joshua Li https://dev.to/jli/checking-out-docusaurus-9dg https://joshuali7536.github.io/DocusaurusSampleSite/ 5937652, e9a05c0
Leyang Yu https://dev.to/lyu4321/adding-markdown-support-to-a-static-site-generator-1f86 https://lyu4321.github.io/docusaurus-website/ aaf53ca
Francesco Menghi https://dev.to/menghif/checking-out-docusaurus-2nd5 https://menghif.github.io/my-docusaurus-website b5ca26f, fb89f41
Minh Quan Nguyen https://dev.to/mqnguyen/prototype-markdown-and-static-assets-support-for-ssg-547e https://mqnguyen5.github.io/docusaurus-demo/ 9741451
Tuan Thanh Tan https://dev.to/tuanthanh2067/implement-cool-features-for-my-static-site-generator-6k2 https://tuanthanh2067.github.io/docusaurus-sample-repo/build/index.html d1e0f28
Antonio Bennett Blog Docusaurus Demo fb117cf4
Gus McCallum Blog Commit
Reza Poursafa https://medium.com/@rezapscodes/osd600-using-docusaurus-for-documentation-be69ce9a63a2 https://reza9472.github.io/Docusaurus/ 3e26a86
Vivian Vu https://dev.to/vivianvu/osd600-adding-new-feature-from-docusaurus-1k7l https://hlavu.github.io/Docusaurus-Sample/ fbdf8e4
Mizuho Okimoto Open Source: Copy a Cool Feature from Docusaurus https://mizuhookimoto.github.io/Docusaurus_sample a4433b4
Amasia Nalbandian looking for the right one Github Page bd7dc30
Roxanne Lee https://medium.com/@Roxanne.Lee/lab-6-docusaurus-2e1d31e15c83 Sample Site 3384cee
Ritik Bheda https://dev.to/ritikbheda/adding-docusaurus-site-4gih GitHub Page commit
Jun Song https://dev.to/juuuuuuun/about-lab6-2c2k First GitHub Page commit
Andrei Batomunkuev https://medium.com/@andreibatomunkuev/implementing-features-from-docusaurus-b76e5515f984 Docusaurus Example Squashed commit
Suhhee Kim https://dev.to/suhhee1011/using-docusaurus-16ak https://suhhee1011.github.io/docusaurous/ 1d161b0
Tue Nguyen Blog Docusaurus demo 1a3ba2dd
Kevan Yang Blog Docusaurus demo 8539d5d7
James Mai Blog Docusaurus demo 051a53
Jia Hua Zou https://medium.com/@jhzou/inspired-by-docusaurus-1ee44a9ef823 https://jiahua-zou.github.io/JiaHua-Zou-docusaurus-demo/ 72af92a
Luigi Zaccagnini https://dev.to/luigizaccagnini/inspired-to-improve-octo-4gmj https://luigizaccagnini.github.io/docusaurus-demo/ 1aa2423
Jiyun Jung https://dev.to/jjung99/getting-to-know-about-docusaurus-3nda https://jyssg-docusaurus.netlify.app/ e46a0a0
Qiwen Yu blog https://qiwen-yu.github.io/docusarus-example/ 9a3b38e
Duc Bui Manh blog https://dukemanh.github.io/award-winning-doc/ f4c8a40
Clone this wiki locally