v1.8.1+fa22

This patch release for the Fall 2022 semester includes a new feature to allow sitemaps to be displayed without a label (#202).

v1.8.0+fa22

Overview

• NEW FEATURES

  • 🔗 Add external links to your Sitemap (#194) (docs) (Thanks @noah-weingarden!)
  • ↕️ Reorder entries in your Sitemap (#194) (docs) (Thanks @noah-weingarden!)

• ⚡ Miscellaneous

  • Fixed: Mermaid diagrams were clipped in Safari (#187)
  • Fixed: "Copy all commands" button in console code blocks did not copy multi-line console blocks and pycon code (#199, #200)
  • Enhancement: FontAwesome icons are preloaded so that they don't "flash" when the page loads (#189)
  • A11y: Changed toggle buttons to be "real" buttons (#190)

• Fun

  • 🤡 Limited edition April Fools joke! (#197)

Acknowledgements

• @awdeorio and @sugihjamin / @eecs441staff for the awesome bug reports, feature requests and discussions!
• @noah-weingarden for jumping in to build a new feature, and for fixing the setup and onboarding scripts 😃

And as always, thanks to course instructors for continuing to use Primer Spec!

v1.7.1+ss22

Check out the release notes of v1.7.0 for the more interesting updates in v1.7 of Primer Spec.

This patch update fixes an issue with printing pages while in dark mode — the Mermaid diagrams would not recolor themselves before the page was printed!

v1.7.0+ss22

Overview

Wow there's a lot to talk about in this Spring/Summer 2022 release. Here's a TLDR overview with links to relevant documentation:

• NEW FEATURES

  • 🖼️ Diagrams with Excalidraw & Mermaid (docs)
  • 🌙 Dark-mode images (docs)
  • 😶 Code blocks with no line numbers! (#165) (demo)

• 📝 New docs

  • "Markdown Tips" guide (#153) compiles a list of Markdown features you may not have known before!

• ⚡ Miscellaneous

  • Fixed: Headers with formatting got truncated in the Sidebar. (#160)
  • Fixed: Leading whitespace in first line of code block was trimmed. (#178)
  • Enhancement: "Copy" button in console code block only copies commands! (#169)

• Fun

  • 🍎 New logo! (#162)
  • 🎃 Limited edition Halloween theme! (#157)

• ⚠️ DEPRECATION NOTICE: useLegacyCodeBlocks configuration options will be removed in a future version of Primer Spec. Use defaultCodeblockVariant instead.

Acknowledgements

Quite a few people were involved with the changes in this release. Thank you all for your contributions, Primer Spec wouldn't be awesome without you all! 🙇

• @awdeorio and @sugihjamin / @eecs441staff for the terrific feature requests, discussions and PR validation!
• @bellakiminsun for keeping me focused via design & product-philosophy discussions 😃
• @jackphong and @marcus-darden for reporting several bugs in Primer Spec!

Last but not least, thank you course instructors and tutorial authors for using Primer Spec! Your usage of this theme keeps me motivated to continue improving Primer Spec ❤️

Feature spotlights

🖼️ Diagrams with Excalidraw & Mermaid

Excalidraw

Docs: demo/diagrams.html#excalidraw

Primer Spec recommends using excalidraw.com (or the official VSCode extension) to create free-form diagrams for use with your spec. As long as you name your images with the file extension .excalidraw.png or .excalidraw.svg, Primer Spec will automatically optimize them for users in dark mode!

Light mode	Dark mode

Mermaid

Docs: demo/diagrams.html#mermaid

If you don't prefer using Excalidraw, you can also use Mermaid. Mermaid allows you to create beautiful diagrams declaratively. GitHub recently added support for Mermaid, and you can use the same API in Primer Spec! Just remember to add mermaid: true at the top of your Markdown file.

Light mode	Dark mode

🌙 Dark-mode images

Docs: demo/images.html

When I use dark mode to read webpage, my biggest pet-peeve is that images don't change colors too.

Primer Spec now makes it ultra-easy to optimize most images for dark-mode users — just add the class invert-colors-in-dark-mode to your image element! (See the docs for exact syntax.)

Unfortunately, this doesn't work for all images. If you need fine-grained control over your images, you can even specify two different versions of your image — one optimized for light-mode and the other optimized for dark-mode! Simply add #gh-light-mode-only or #gh-dark-mode-only to the URL of each image. (See the docs for an example.)

😶 Code blocks with no line numbers!

Demo: demo/enhanced-code-blocks.html#no-line-numbers

Primer Spec "enhanced" code blocks automatically add line numbers to the code block. If you don't like the line numbers (or you think it's confusing), you can use the data-variant="no-line-numbers" attribute to hide the line numbers!

Here are screenshots of each variant:

enhanced (default)	no-line-numbers	legacy

⚠️ DEPRECATION NOTICE

useLegacyCodeBlocks configuration options will be removed in a future version of Primer Spec. Use defaultCodeblockVariant instead.

v1.6.4+wn22

This patch release for Winter 2022 fixes an issue with the formatting of certain enhanced code blocks. Thanks for reporting the issue @awdeorio! (#150)

v1.6.3+wn22

This patch release for Winter 2022 adds support for abbreviations and footnotes. (#148)

v1.6.2+wn22

This patch release for Winter 2022 fixes some more miscellaneous bugs that I noticed in EECS 280 and EECS 183 specs last week:

• [Code blocks][Firefox-specific] Fix dark mode colors on small screens (#145)
• [Code Blocks] Allow <pre> to contain <code> child (#147)
• Fix dark mode colors for <kbd> elements (#146)

v1.6.1+wn22

This patch release for Winter 2022 fixes some bugs I observed in code blocks after deploying v1.6.0 to the EECS 280 websites.

• Tolerate whitespace when parsing code block HTML in #140
• Assign unique anchor ID to codeblockcks with the same title in #141
• Remove border from inline-code in tables in dark mode in #142

v1.6.0+wn22

Primer Spec is largely unchanged for the Winter 2022 semester, except for...

🪄 Enhanced Code Blocks!

Check out the demo for documentation and examples! https://eecs485staff.github.io/primer-spec/demo/enhanced-code-blocks.html

By default, Primer Spec will upgrade code blocks on the page:

Before	After

The new enhanced code blocks don't just look fancier.

• Copy the entire code block to your clipboard using the copy-button in the top right corner.

  Screen.Recording.2021-10-01.at.11.40.16.PM.mov

• Select a single line of code by clicking the line number. You can even select multiple lines of code with a click + drag. (And if the line of code contains a console command, Primer Spec will only select the command itself!)

  Screen.Recording.2021-10-01.at.11.37.43.PM.mov

• Instructors can add a title to the code block using the data-title attribute.
  

• Instructors can highlight specific lines in the code block using the data-highlight attribute!
  

Many thanks to @awdeorio and @bellakiminsun for all of their feedback and contributions to the design of Enhanced Code Blocks 🙏

v1.5.3+fa21

This patch update for the Fall 2021 semester brings back alternate-row background colors to tables. (#135)
(These changes also accommodate a proposed change to the EECS 485 P5 spec.)