Skip to content
This repository has been archived by the owner on Nov 16, 2022. It is now read-only.

Latest commit

 

History

History
65 lines (45 loc) · 2.91 KB

README.md

File metadata and controls

65 lines (45 loc) · 2.91 KB
Raw

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:

Then run npm install.

Commands

  • 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.

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 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.

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