v2.63.0

[yufeih]

New Modern Template

This release features a brand new modern site template based on bootstrap 5 with a lot of visual and usability improvements:

• Supports both dark and light themes
• Match .NET API reference docs with https://learn.microsoft.com
• Usability improvements such as code copy, clickable images, external link icons, better API text breaks, link to GitHub, etc.

The docfx official site has also been updated to use the new template. To use the modern template in your website, set the template to ["default", "modern"].

What's Changed

💥 Breaking Changes

• BREAKING CHANGE: drop support of liquid template by @yufeih in BREAKING CHANGE: drop support of liquid template #8437

🎉 New Features

• feat: new modern template @yufeih in feat: update modern template to bootstrap 5 #8470 feature: make in this article a list #8440 feat: build modern template TOC as JSON #8498 feat: add dotnet in this article section #8515 feat: update markdown tab style #8516 chore: tweak the color, spacing, icons of the modern template #8524
• feat: add dark theme to modern template by @yufeih in feat: add dark theme to modern template #8499 feature: add theme toggle #8512
• feat: adjust .NET API display for modern template by @yufeih in feat: adjust .NET API display for modern template #8525
• feat: show _appName after logo by @yufeih in feat: show _appName after logo #8438
• feat: add code copy by @yufeih in feat: add code copy #8517
• feat: clickable image by @yufeih in feat: clickable image #8518
• feat: update docfx to use modern template by @yufeih in feat: update docfx to use modern template #8513
• feat: add tags to word boundaries by @yufeih in feat: add <wbr> tags to word boundaries #8521
• feat: add icon to external links by @yufeih in feat: add icon to external links #8523
• feat: show TOC node as expanded using the expanded property by @yufei in feat: build modern template TOC as JSON #8498
• feat: Group explicit interface implementations into their own section by @mikernet in Group explicit interface implementations into their own section #8445

🐞 Bug Fixes

• fix: Newtonsoft.Json.Schema -> JsonSchema.Net by @yufeih in fix: Newtonsoft.Json.Schema -> JsonSchema.Net #8418
• fix: incorrect type name for unresolved generic types by @yufeih in fix: incorrect type name for unresolved generic types #8491
• fix: mref properties inherit parent items by @yufeih in fix: mref properties inherit parent items #8492
• fix: custom logo does not override logo from template by @yufeih in fix: custom logo not override logo from template #8510 fix: always copy template resources before build #8522

🔧 Engineering

• build: setup ts/scss/watch by @yufeih in build: setup ts/scss/watch #8421 build: enable eslint #8423
• test: add visual snapshot testing by @yufeih in test: add visual snapshot testing #8422 ci: snapshot test as standalone job #8481
• build: upgrade to YamlDotNet 13.0.1 by @lahma in build: upgrade to YamlDotNet 13.0.1 #8442

📄 Documentation

• Add minimal template by @sotanakamura in Add minimal template #8447
• Improvement Document Guideline markdown with image by @chuongmep in Improvement Document Guideline markdown with image #8485

New Contributors

• @sotanakamura made their first contribution in Add minimal template #8447
• @chuongmep made their first contribution in Improvement Document Guideline markdown with image #8485

Full Changelog: v2.62.2...v2.63.0

---

This discussion was created from the release v2.63.0.

[VaclavElias]

This is so impressive!!! Thank you @yufeih. I will be migrating soon my community docs (https://doc.stride3d.net/latest/en/) to this new version and because I have been using also Bootstrap 5, I can reuse many things.

[VaclavElias]

@yufeih I see that the modern template has some Bootstrap elements removed like .row and col-. Is that intended?

Also, do you plan to add to the modern template also Filter Page?

I have finally started playing with the new docfx! 🙂

[VaclavElias]

I guess, I can use this @import url("bootstrap-grid.min.css"); in my main.css.

[yufeih]

... has some Bootstrap elements removed like .row and col-. Is that intended?

It seems I did set $enable-grid-classes: false; to clean up usage of .row and .col in favor of flex boxes and CSS grids. Do find find these bootstrap grid helpers useful? If so we can re-enable them.

Also, do you plan to add to the modern template also Filter Page?

Yes!

[VaclavElias]

Thanks for removing $enable-grid-classes: false;. I don't have to hack the css to bring that part back.

Also, my hack caused the issue with the logo. Now it is ok :).

The usage of .row and .col doesn't bloat that css file that much.

[VaclavElias]

Also, I found a glitch, in the modern template, I can't figure out why the search box is under the scroll bar, the container-xxl should give it the correct padding. In Bootstrap examples, the scroll bar is next to the form elements..

[yufeih]

Right, same as been reported in #8604

[VaclavElias]

Other glitches with the modern template, when the page is in mobile version..

1. Logo should be on the top, our "Stride" logo is longer so it would push the content even more
2. There are three dots
3. Search misalign
4. And again the right padding is missing across the whole page

[yufeih]

It doesn't seem to appear in https://dotnet.github.io/docfx/ , is it because of some custom CSS?

[VaclavElias]

Yes, it was. It is now fixed.