Giter Club home page Giter Club logo

zine's Introduction

zine

Crates.io Crates.io license-apache

Zine - a simple and opinionated tool to build your own magazine.

  • Mobile-first.
  • Intuitive and elegant magazine design.
  • Best reading experiences.
  • Theme customizable, extend friendly.
  • RSS Feed supported.
  • Open Graph Protocol supported.
  • Build into a static website, hosting anywhere.

Installation

cargo install zine

Get Started

Run zine new your-zine-site, you'll get following directory:

$ tree your-zine-site
your-zine-site
├── content             # The content directory your seasons located
│   └── season-1        # The first season directory
│       ├── 1-first.md  # The first markdown article in this season
│       └── zine.toml   # The season Zine config file
└── zine.toml           # The root Zine config file of this project

2 directories, 3 files

Run zine serve to preview your zine site on your local computer:

$ cd your-zine-site

$ zine serve

███████╗██╗███╗   ██╗███████╗
╚══███╔╝██║████╗  ██║██╔════╝
  ███╔╝ ██║██╔██╗ ██║█████╗  
 ███╔╝  ██║██║╚██╗██║██╔══╝  
███████╗██║██║ ╚████║███████╗
╚══════╝╚═╝╚═╝  ╚═══╝╚══════╝
                             
listening on http://127.0.0.1:3000

Run zine build to build your zine site into a static website:

$ cd your-zine-site

$ zine build
Build success! The build directory is `build`.

Dive into deep

A Zine project mainly consists of two kind zine.toml files and a bunch of markdown files.

Root zine.toml

This root zine.toml file describes your site meta and all your season's info.

[site]
url = "https://your-domain.com"
name = "Your Zine Site Name"
description = ""
logo = "path/to/favicon"
# the locale to localize your Zine site. default to "en".
# Zine has builtin supported locales, please check the `locales` directory of this repo.
locale = "en"
# the menu tabs
menu = [
    { name = "About", url = "/about" },
    { name = "Blog", url = "/blog" },
]

# You can customize some theme elements in this section.
# All of those elements are optional.
[theme]
# the primary color
primary-color = "#abcdef"
secondary-color = "#fff"
# the main text color
main-color = "#000"
# the link color in article content
link-color = "#e07312"
# the background image
background-image = "/static/background.png"
# you can customize your footer here
footer-template = "templates/footer.html"

# Season 1
[[season]]
# the slug of this season: https://your-domain.com/s1
slug = "s1"
# the number of this season
number = 1
# season title
title = "Season 1"
# the directory path to parse this season, you should put
# your markdown files in this directory
path = "content/season-1"
# the introduction of this season. optional.
intro = "content/season-1/intro.md"

# Season 2
[[season]]
slug = "s2"
number = 2
title = "Season 2"
path = "content/season-2"

Season zine.toml

The season zine.toml file list all your articles of this season.

[[article]]
# the slug of this article. E.g: https://your-domain.com/s1/1
slug = "1"
# the markdown file path of this article
file = "1-first.md"
# the title of this article
title = "First article"
# the optional author of this article
author = ""
# the cover of this article
cover = ""
# the publish date of this article
pub_date = "2022-03-20"
# whether to publish this article or not
publish = true
# whether mark this article as a featured article. 
# the featured articles will be shown on the home page
featured = true

# Another article
[[article]]

Advanced

Pages

Every markdown file located in pages will be rendered as a Page. Just intuitive like this:

$ tree pages
pages
├── about.md        # will be rendered as https://your-domain.com/about
├── blog            
│   └── first.md    # will be rendered as https://your-domain.com/blog/first
├── blog.md         # will be rendered as https://your-domain.com/blog
└── faq.md          # will be rendered as https://your-domain.com/faq

1 directory, 4 files

Comment

You can add an arbitrary number of comments for an article. Simply put the end matter below the article content.

end matter is a terminology similar to front matter in other Static Site Generators. Just like the front matter shown ahead of the markdown content, the end matter is shown below.

You cool article content.

+++
[[comment]]
author = "Bob"
bio = "A developer"
content = "The cool comment"

[[comment]]
author = "Alice"
bio = ""
content = "Another cool comment"
+++

Code blocks

Zine provides some advanced code blocks to help you write articles.

URL preview

```urlpreview
https://github.com/zineland/zine
```

Some cool magazines powered by Zine

TODO

  • Support RSS Feed

  • Support render OGP meta

  • Support l10n

  • Support table of content

  • Support code syntax highlight

  • Support i18n

  • Generate word cloud for season

License

This project is licensed under the Apache-2.0 license.

zine's People

Contributors

folyd avatar kernelerr avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.