Presentation - static pages for blogging

Changelogs

Check CHANGELOG.md on GitHub

Posts are plain HTML with a bit of Svelte

While the BlogPage component renders the page layout and handle the config and metadata, the content is just an HTML snippet. This means that headers are written using <h2>, <h3>, etc. tags, and paragraphs are written using <p> tags, for example.

The theme is customizable

A default barebones theme is provided, but you can create your own theme. To do so, define a new class somewhere in your project, named after the theme you want to create, and pass it to the config. Then, style the elements of the page as you see fit. They are all prefixed with __sbk__ to avoid conflicts with other styles. Take advantage of the devtools to see the classes applied to each element.

Getting started

View the source code of this page in src/routes/+page.svelte to see how this post was created! You can also check the BlogPage component in src/lib/components/BlogPage.svelte to see how the default theme is defined.

See the GitHub repository here.

What you can put in your post

Classic HTML

Create headers with <h2>, <h3>, etc. tags (<h1> is for the post title!), and paragraphs with <p> You can also use your own components if you want, although it is prefered to keep it simple. Theming of the post is based on the html tags or classes that you use.

Additional shipped components

Some additional quality of life components are provided to make blog writing easier.

Image

The Image component allows you to easily add images to your post. It takes a src prop for the image source, and an alt prop for the alt text. You can also pass a caption prop to add a caption below the image.

FileAttachement

The FileAttachement component allows you to attach files to your post that the reader can download.

Audio

The Audio component allows you to embed audio files in your post. It uses the native audio player with controls enabled by default.

Video

The Video component behaves similarly to the audio component, and uses the native video player.

Quote

The component accepts a citation, and optionally an author. The citation is wrapped in quotation marks.

FramedTextBlock

The FramedTextBlock component allows you to add an emphasized block of text to your post. It is useful for notes, tips, warnings, etc. You can define different variants in your theme to style them differently. To apply a variant, pass it as a prop to the component.