Blog for Codewars with Zola + TailwindCSS.
Contributions are welcomed!
To fix any issues you found, simply edit the Markdown files under content/ and open pull requests.
If you'd like to write about Codewars and publish here, please open an issue about it first.
You'll need zola and node installed:
zola executable (a single binary, see how to install it)node v12+ (see how to install it)Then run npm install.
npm run dev to start a local server that reloads automatically on file change. Works by running zola serve and postcss --watch concurrently. CSS changes rarely thanks to Tailwind and Zola is extremely fast, so each build finishes in milliseconds!npm run build to build the site.├── content/ <- Markdown files
├── public/ <- generated site
├── static/ <- static assets to be copied to `public/`
├── templates/ <- Tera templates
├── config.toml <- Zora config
├── package.json
├── postcss.config.js
├── styles.css <- source of `static/styles.css` (processed by PostCSS)
└── tailwind.config.jsZola's shortcodes allow easily inject HTML in Markdown and reduce repetition. We curently have the following custom shortcodes defined:
airtable(id: string, color?: string = "gray") embeds Airtable base with id with optional color for backgroundColor.container(type: note|tip|info|warning|danger, title?: string) wraps body in a styled container <div> with icon, similar to gridsome-remark-container. title defaults to type.details(summary: string) wraps body in <details> with <summary>.figure(src: string, alt?: string, themed?: bool = false) produces centered responsive image inside <figure> with alt in <figcaption> if provided. src is a co-located asset and relative to the page or section. If themed is true, light/dark image variants are used. src is a file name without -light/-dark suffix. For example, figure(src='foo.png', themed=true) requires foo-light.png and foo-dark.png.