Sign in
Log inSign up
View previous changelogs

Custom JavaScript feature on docs, enchancements to card components and more.

Author

Haimantika Mitra

·

new
changelog banner

Are you building documentation for your company? We launched Docs by Hashnode a few weeks ago, and we're adding new features almost every week to make the documentation process better for your team.

This week, we're focusing on features that will enhance the developer experience and offer more customization options.

TLDR;

  • Custom JavaScript feature (available only in paid plans): Allows you to include custom JavaScript on all pages.

  • Enhancements to Card and Card Group components: Support for custom images and card-level links.

  • Custom Button Component: Lets you add buttons to your docs.

  • Custom Pages: Allows you to add custom pages to your docs.

  • Auto-optimizes images inside pages for faster loading: This improves the LCP value in page speed analysis and overall performance by dynamically resizing and optimizing images.

  • Automatic page OG images: Adds an auto-generated default image as OG image if none are supplied.

Ability to add custom JavaScript to docs.

We have introduced the capability to include custom JavaScript code on all documentation pages. This gives you more flexibility and control over your documentation.

It is currently available on paid plans. To use it, navigate to the Docs dashboard, scroll down to the Appearance section, and under More customization, you can enter your JavaScript code in the Custom JavaScript box as shown below.

Card elements in documentation can help improve your user experience. You can use them to list your product features, available guides, and more.

We have now added the ability to add links and images to the card and card group components in your docs.

To use it, go to the docs editor, use the /card command, and then add the link and image as shown below:

Ability to add custom button element to your docs.

Documentation acts as the first point of entry for your users, and you may want to connect it to other resources, forms, or enhance navigation within your documentation. Custom buttons can help in achieving this goal. This week, we introduced the feature to add custom button elements to your documentation.

Here’s how you can implement it:

  • Open your docs editor and type /button.

  • This action will insert a new button component, which you can customize and utilize within your documentation as shown below.

Adding custom pages to docs.

Documentation goes beyond just explaining your code. You might have community resources, program details, a glossary, and other similar types of content that need to be documented, but you do not know where they fit in your documentation. This is where custom pages come in.

We just released the new custom pages feature in our docs that allows you to create pages and link them to your documentation navigation bar.

To access this feature, go to the Docs dashboardCustom pagesCreate a new page, and then add the details as shown below:

Better OG image support on docs.

An OG (Open Graph) image is the image that appears when a link to a web page is shared on social media. We have made an update so that if an individual page does not have an OG image, it will default to the guide-level OG image. If the guide level OG image isn't provided, that's when we use our auto generated OG image.
This prevents blank images from appearing when you share your guides on social media, ensuring that it looks great on all platforms.

Heres’s an example of how we define OG image on docs:

Auto-optimizing images inside pages for faster loading.

We have added an update that automatically optimizes images within your pages to enhance loading speed. This update improves the LCP (Largest Contentful Paint) value in your page speed analysis and overall performance by dynamically resizing and optimizing images. This leads to better overall page speed. Each image will have ?auto=format at the end, which performs the optimizations.


Wrapping up our feature-packed week here. If you have any questions, feel free to reach out to us on Discord.