NotionToHtml is a Ruby gem designed to integrate Notion with Ruby applications. It provides a set of tools for rendering Notion pages and blocks, allowing you to maintain a database of pages in Notion while rendering them real time in you application with ease.
Now you can use Notion to publish your pages directly to your Ruby web page with one click.
NotionToHtml allows you to seamlessly integrate Notion pages and blocks into your Ruby application. It provides a set of renderers for various Notion block types, including headings, paragraphs, images, and more. With NotionToHtml, you can easily display and format Notion content in your views.
You just need to create a database in Notion, integrate it and start writing!
Add the gem to your application's Gemfile:
bundle add notion_to_html
Or install it yourself as:
gem install notion_to_html
NotionToHtml uses tailwindcss classes to define a default styling that mimics Notion's own styling, so make sure to inlcude it in your application. If you wish to use something else you can always override the default styling provided, see Customizing styles for more details.
This gem is currently very opinionated on how it expects the Notion database to be defined. If you wish to customize this you can override the methods defined in NotionToHtml::Service.
By default the database should have the following structure:
Once you have the database created you will have to setup a Notion Integration, so the Notion API can communicate with your database. For this you will have to follow the Create Your Integration In Notion tutorial.
If you wish to just quickly set it up, you can follow the relevant steps below, which are taken from that tutorial.
The first step to building any integration (internal or public) is to create a new integration in Notion’s integrations dashboard: https://www.notion.com/my-integrations.
+ New Integration.
API requests require an API secret to be successfully authenticated.
Remember to keep your API secret a secret!
Any value used to authenticate API requests should always be kept secret. Use environment variables and avoid committing sensitive data to your version control history.
If you do accidentally expose it, remember to “refresh” your secret.The database that we’re about to create will be added to a parent Notion page in your workspace. For your integration to interact with the page, it needs explicit permission to read/write to that specific Notion page.
To give the integration permission, you will need to:
Read Contents:
Now you're finally ready to config the gem!
To configure NotionToHtml, you need to set up your Notion API token and database ID.
If you're using Rails add an initializer file in your Rails application, such as config/initializers/notion_to_html.rb, and include the following configuration block:
NotionToHtml.configure do |config|
config.notion_api_token = 'NOTION_API_TOKEN'
config.notion_database_id = 'NOTION_DATABASE_ID'
end
To get these values:
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
|--------- Database ID --------|
Remember to keep these values secret!
Now you should be all setup!
To get and render a preview of the pages of your database:
<% NotionToHtml::Service.get_pages.each do |page| %>
<%= article.formatted_published_at %>
<%= article.id %>
<%= article.formatted_title %>
<%= article.formatted_description %>
<% end %>
To get and render a specific page:
<% page = NotionToHtml::Service.get_page(page_id) %>
<%= page.formatted_title %>
<%= page.formatted_published_at %>
<% page.formatted_blocks.each do |block| %>
<%= block %>
<% end %>
NotionToHtml ships with default css classes for each supported block. You can add your own set of styling on top by specifying the class: option when calling the formatter:
NotionToHtml::Service.get_page(page_id)
.formatted_title(class: 'text-4xl md:text-5xl font-bold')
You can also specify classes for each type of supported block like this:
NotionToHtml::Service.get_page(page_id).formatted_blocks(
paragraph: 'text-lg',
heading_1: 'text-3xl md:text-4xl font-bold',
heading_2: 'text-white',
heading_3: 'font-bold',
quote: 'italic',
)
If you feel like you want a clean slate regarding styling you can override the provided default styles by setting the override_class option to true:
NotionToHtml::Service.get_page(page_id)
.formatted_title(class: 'font-bold', override_class: true)
It also works for formatted_blocks:
NotionToHtml::Service.get_page(page_id)
.formatted_blocks(
paragraph: { class: 'text-lg', override_class: true },
quote: 'italic'
)
By default the NotionToHtml::Service is setup to follow the database structure sepcified above. This way it will only return pages that have been marked as public.
You can filter the results by specifying a tag and/or a specific slug:
NotionToHtml::Service.get_pages(tag: 'web', slug: 'test-slug')
The default sorting is by the published Date column in the database
To see how the default renderings of the supported blocks look, go over to the examples.
After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.
Bug reports and pull requests are welcome on Github. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.
The gem is available as open source under the terms of the MIT License.
Everyone interacting in the Notion::Rails project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.
FAQs
Unknown package
We found that notion_to_html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.