Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@amoutonbrady/sbg

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@amoutonbrady/sbg

CLI to make the easiest static blogs

  • 0.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Static Blog Generator

Minimal, experimental & opinionated static blog generator

PWA score 100%

Usage

Add sbg to your local dependencies

yarn add @amoutonbrady/sbg

When you are ready to build your thing just run teh following command from thr root of your project

yarn sbg or npx sbg

You can also create an npm script that runs it for you

// package.json
{
	...,
	"scripts": {
		"build": "sbg"
	}
}

And run yarn build or npm run build


The build will automatically create a dist folder with everything routed for a static host.

Additionnally, it will also provide a service worker to make the website work offline and please the search engine with an okay-ish Lighthouse score.

Architecture

├───assets
├───layouts
├───pages
└───posts
  • assets: contains all the images (we don't care about CSS or JS)
  • layouts: contains the layouts, see the different layouts below
  • pages: each html file will represent a page (eg: blog.html will turn into /blog/index.html). The posts param will be auto-injected
  • posts: contains your posts content. The title of the file will be the slug

Layouts

All layout file have to be in the layouts folder.

Layouts are just nunjucks templates. You can extends and do all sort of things with it.

Any data defined in the front matter markdown files will be injected in the corresponding layout. First it will be be parsed by gray-matter, then compiled to html via marked. All code will be automatically highlighted by shiki.

The content variable is the compiled markdown.

List of supported template files:

NameAvailable variables
post.html_ content: markdown content as html
_ createdAt: creation date (js date) of the markdown file
_ updatedAt: last modified date (js date) of the markdown file
_ url: relative url of the blog post
* Any other data defined in the front matter of the markdown file

More to come as the project needs it.

Pages

List of variables injected into each page:

  • posts: List of posts which an array of object containing the same data as the post.html template minus the content one.

Config

If a config.js is at the root of the directory, it will be resolved and used.

Its needs to default export a configuration object.

For the moment only the filters key work. It is an array of filters for njk templates.

TODO

Initial TODOS

  • Moare layouts (specifically index with list of posts) Implemented as "pages"
  • Process assets Only for JS (minification) & CSS (dead code removal, minification, autoprefixer, tailwind)
  • Mess around with typescript maybe Delayed for later
  • Make it agnostic and configurable maybe Sort of implemented it (only njk filters for now)
  • Add feedback on the CLI Added some more context during build
  • Add a develop mode maybe Add a "serve" command to serve the dist, still to build manually for now

02/25/2020

  • Inject a pages variable in the pages files to be able to make a navigation
  • Add a filter or something to make some sort of pagination
  • Fix perfs issues if possible...
  • Mess around with typescript maybe, could be useful for the config

FAQs

Package last updated on 26 Feb 2020

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc