DEV Community

xcatliu
xcatliu

Posted on

A real deno app: Pagic

The easiest way to generate static html page from markdown, built with Deno! πŸ¦•

Features

  • Markdown + Layout => HTML
  • React component as a page
  • Copy static files
  • Sub pages and layouts
  • Front matter

Getting started

Installation

# Install deno https://deno.land/#installation
curl -fsSL https://deno.land/x/install/install.sh | sh
# Install pagic
deno install --unstable --allow-read --allow-write --allow-net https://raw.githubusercontent.com/xcatliu/pagic/master/pagic.ts

Markdown + Layout => HTML

Let's say we have a project like this:

docs/
β”œβ”€β”€ public/
└── src/
    β”œβ”€β”€ _layout.tsx
    └── index.md

The src/_layout.tsx is a simple react component:

// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/react@16.13.1';
import { PagicLayout } from 'https://raw.githubusercontent.com/xcatliu/pagic/master/pagic.ts';

const Layout: PagicLayout = ({ title, content }) => (
  <html>
    <head>
      <title>{title}</title>
      <meta charSet="utf-8" />
    </head>
    <body>{content}</body>
  </html>
);

export default Layout;

The src/index.md is a simple markdown file:

# Pagic

The easiest way to generate static html page from markdown, built with Deno! πŸ¦•

Then run:

pagic build

We'll get an index.html file in public directory:

docs/
β”œβ”€β”€ public/
|   └── index.html
└── src/
    β”œβ”€β”€ _layout.tsx
    └── index.md

The content should be:

<html>
  <head>
    <title>Pagic</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <article>
      <h1 id="pagic">Pagic</h1>
      <p>The easiest way to generate static html page from markdown, built with Deno! πŸ¦•</p>
    </article>
  </body>
</html>

Other features please see GitHub

Top comments (0)