The Codewars Blog
Blog for Codewars with Zola + TailwindCSS.
Contributing Content
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.
Developing
Installing Dependencies
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
.
Commands
npm run dev
to start a local server that reloads automatically on file change. Works by runningzola serve
andpostcss --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.
Directory Structure
├── 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.js
Shortcodes
Zola'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 withid
with optionalcolor
forbackgroundColor
.container(type: note|tip|info|warning|danger, title?: string)
wrapsbody
in a styled container<div>
with icon, similar to gridsome-remark-container.title
defaults totype
.details(summary: string)
wrapsbody
in<details>
with<summary>
.figure(src: string, alt?: string, themed?: bool = false)
produces centered responsive image inside<figure>
withalt
in<figcaption>
if provided.src
is a co-located asset and relative to the page or section. Ifthemed
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)
requiresfoo-light.png
andfoo-dark.png
.
TODO
- Use feeds to show recent articles on the Codewars dashboard
- Show short summary in listing
- Featured articles
- Categorize and provide navigation
- Authors
- Improve tagging
- Archiving old articles
- Add "Edit on GitHub" link