Show HN: A real deno app: Pagic

By
rachid
-
0
0
Show HN: A real deno app: Pagic

The best method to generate static html internet web page from markdown, constructed with Deno! πŸ¦•

Components

  • Markdown + Structure => HTML
  • React facet as an online web page
  • Copy static recordsdata
  • Sub pages and layouts
  • Entrance matter

Getting began

Set up

# Set up deno https://deno.land/#set up
curl -fsSL https://deno.land/x/set up/set up.sh | sh
# Set up pagic
deno set up --unstable --enable-learn --enable-write --enable-get https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts

Markdown + Structure => HTML

As an example now we catch a venture love this:

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

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

// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/[email protected]';
import { PagicLayout } from 'https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts';

const Structure: PagicLayout = ({ title, grunt materials }) => (
  <html>
    <head>
      <title>{title}</title>
      <meta charSet="utf-8" />
    </head>
    <physique>{grunt materials}</physique>
  </html>
);

export default Structure;

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

# Pagic

The best method to generate static html internet web page from markdown, constructed with Deno! πŸ¦•

Then sprint:

We’ll derive an index.html file in public listing:

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

The grunt materials ought to all the time be:

<html>
  <head>
    <title>Pagictitle>
    <meta charset="utf-8" />
  head>
  <physique>
    <article>
      <h1 id="pagic">Pagich1>
      <p>The best method to generate static html internet web page from markdown, constructed with Deno! πŸ¦•p>
    article>
  physique>
html>

React facet as an online web page

A react facet would possibly maybe maybe properly properly furthermore be constructed to html:

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

Right here we type src/whats up.tsx to public/whats up.html, the utilization of src/_layout.tsx as a result of the format.

src/whats up.tsx is a simple react facet:

// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/[email protected]';

const Hey = () => <h1>Hey World</h1>;

export default Hey;

And public/whats up.html would possibly maybe maybe properly properly be:

<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>
  <physique>
    <h1>Hey World</h1>
  </physique>
</html>

Copy static recordsdata

If there are different static recordsdata that are not ended with .tsx or launch up with _, we will merely copy them:

docs/
β”œβ”€β”€ public/
|   β”œβ”€β”€ assets
|   |   └── index.css
|   β”œβ”€β”€ index.html
|   └── whats up.html
└── src/
    β”œβ”€β”€ assets
    |   └── index.css
    β”œβ”€β”€ _layout.tsx
    β”œβ”€β”€ _partial.tsx
    β”œβ”€β”€ index.md
    └── whats up.tsx

Sub pages and layouts

We’re in a position to catch sub listing which comprises markdown or facet.

Sub listing would possibly maybe maybe properly properly furthermore catch a _layout.tsx file.

For every markdown or react facet, this would possibly maybe often maybe properly maybe merely stroll your file design taking a behold for the closest _layout.tsx. It begins from essentially the most up-to-date listing after which strikes to the guardian listing until it finds the _layout.tsx.

docs/
β”œβ”€β”€ public/
|   β”œβ”€β”€ assets
|   |   └── index.css
|   β”œβ”€β”€ index.html
|   └── whats up.html
|   └── sub
|       └── index.html
└── src/
    β”œβ”€β”€ assets
    |   └── index.css
    β”œβ”€β”€ _layout.tsx
    β”œβ”€β”€ _partial.tsx
    |── index.md
    └── sub
        β”œβ”€β”€ _layout.tsx
        └── index.md

Entrance matter

Entrance matter permits us add additional meta knowledge to markdown:

---
writer: xcatliu
printed: 2020-05-20
---

# Pagic

The best method to generate static html internet web page from markdown, constructed with Deno! πŸ¦•

Each merchandise inside the entrance matter will go to the _layout.tsx as a result of the props:

// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/[email protected]';
import { PagicLayout } from 'https://uncooked.githubusercontent.com/xcatliu/pagic/grasp/pagic.ts';

const Structure: PagicLayout = ({ title, grunt materials, writer, printed }) => (
  <html>
    <head>
      <title>{title}</title>
      <meta charSet="utf-8" />
    </head>
    <physique>
      {grunt materials}
      <footer>
        Creator: ${writer}, Printed: ${printed}
      </footer>
    </physique>
  </html>
);

export default Structure;

Entrance matter in react facet

In react facet we will export a frontMatter variable:

// @deno-varieties="https://deno.land/x/varieties/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/[email protected]';

const Hey = () => <h1>Hey World</h1>;

export default Hey;

export const frontMatter = {
  title: 'Hey World',
  writer: 'xcatliu',
  printed: '2020-05-20'
};

Make the most of pagic as cli

pagic type

We’re in a position to make the most of pagic type to type static pages, there are some alternate options whereas the utilization of type expose:

pagic type [options]

# --test  take a look at src dir alternate
# --support  help public dir
# --port   override default port

LICENSE

MIT

Possess fulfilling with pagic!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here