A static site generator powered by Deno + React

Overview

Pagic

A static site generator powered by Deno + React

简体中文 | Website | Docs | Config | Demos | Themes | Plugins | Blog

deno pagic discord ci

Features

Easy to configure

  • Convention over configuration
  • Single config file pagic.config.ts
  • Intuitive design

Support md and tsx

  • Render md/tsx to static HTML page
  • Support React Hooks
  • Pre-render to static HTML, run as an SPA once loaded

Themes and plugins

  • Official themes default/docs/blog with dark mode
  • Combine plugins to build process
  • Import third-party themes or plugins through URL

Demos

Get 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 --allow-run --name=pagic https://deno.land/x/pagic/mod.ts

Initialize the project

To use pagic to build a static website, the project must include at least one pagic.config.ts config file and one md/tsx page file:

site/
├── pagic.config.ts
└── README.md

You can create the above site project by running the following command:

mkdir site && cd site && echo "export default {};" > pagic.config.ts && echo "# Hello world" > README.md

Run pagic

pagic build --watch --serve

More information

Special thanks

  • StrawBerry Icon: A free and open iconic font library for developer and creator

Backers

Backers

Contributors

Contributors

LICENSE

MIT


Have fun with Pagic!

Issues
  • 还是会复制其他文件的问题

    还是会复制其他文件的问题

    当存在子目录的情况下,copyOtherFiles中glob.sync需要带上nodir配置,否则,子目录的md和_layout.js会因为拷贝目录而被带入。

    function copyOtherFiles(srcDir, distDir) {
      const otherFiles = glob.sync('**/*', {
        ignore: [
          '**/*.md',
          '**/_*',
        ],
        nodir:true,//查了一下glob有这个避开目录的配置
        cwd: srcDir,
      });
    
      otherFiles.forEach(filePath => {
        const fileResolvedPath = path.resolve(srcDir, filePath);
        const distPath = path.resolve(distDir, filePath);
    
        fse.copySync(fileResolvedPath, distPath);
    
        console.log(`Generated ${distPath}`);
      });
    }
    
    
    opened by shellphon 10
  • 按照官网首页给的三行命令,启动项目了,但是乱码

    按照官网首页给的三行命令,启动项目了,但是乱码

    # 安装 pagic
    deno install --unstable --allow-read --allow-write --allow-net --name=pagic https://deno.land/x/pagic/mod.ts
    
    # 创建 pagic.config.ts 和 README.md
    mkdir site && cd site && echo "export default {};" > pagic.config.ts && echo "# Hello world" > README.md
    
    # 运行 pagic
    pagic build --watch --serve
    

    bug 
    opened by vearvip 10
  • Added a new Pagic command to generate mod.ts

    Added a new Pagic command to generate mod.ts

    This is supposed to 'ease some burdens' for shah as mentioned in issue #47 , although I'm hesitant to outright say it completely resolves the issue. Users can now write 'pagic genmod' to automatically generate a mod.ts in their theme directory.

    opened by MVEMCJSUNPE 9
  • Double math for latex snippet appears, with the second math not rendered correctly

    Double math for latex snippet appears, with the second math not rendered correctly

    Describe the bug When I write a latex snippet in a markdown file, it is rendered TWO times, with the second rendering not rendered correctly.

    To Reproduce Any math in a markdown file will have the problem: index.md: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

    Expected behavior The math should be rendered once correctly.

    Screenshots pagic

    I think it could be solved by adding a katex.min.css to "src/theme/default/assets", which will hide the mathml code and correctly style the html output, and then modifying "src/theme/default/_layout.tsx" to include katex.min.css. However, this would not correctly render math for users with their own custom _layout.tsx.

    Context

    • Pagic version: v0.10.0
    • Deno version: v1.4.5
    • Browser version (optional): 81.0
    • OS version: Windows 10 Home 64-bit (10.0, Build 19041)
    bug 
    opened by MVEMCJSUNPE 8
  • Clear cache for _xxx.js

    Clear cache for _xxx.js

    _xxx.js always used as a partial layout, we need to clear it's cache when modify it.

    opened by xcatliu 8
  • Feature Request: Support yaml front matter

    Feature Request: Support yaml front matter

    Would be really nice if this supported yaml front matter[1], when present passed as first parameter instead of title... This would allow for more dynamic options as well as some additional configurability (like not processing an item when the "published" date is in the future.

    index.md

    ---
    title: My Title
    published: 2017-02-28
    --- 
    # {title}
    
    My Content
    

    _layout.js

    module.exports = function ({ frontMatter, content, relativeToRoot }) {
      return `
        <!doctype html>
        <html>
          <head>
            <title>${frontMatter.title}</title>
            <link rel="stylesheet" href="${relativeToRoot}/css/site.css" />
          </head>
          <body>
            ${content}
            <footer>
              published: ${frontMatter.published}
            </footer>
          </body>
        </html>
      `
    };
    

    [1] http://assemble.io/docs/YAML-front-matter.html

    opened by tracker1 6
  • fix: Identifier 'shouldSetIsDark' has already been declared

    fix: Identifier 'shouldSetIsDark' has already been declared

    修复控制台重复声明变量的问题。

    image

    opened by Shenfq 5
  • 配置工具`editOnGithub`默认指向master分支,希望兼容main分支

    配置工具`editOnGithub`默认指向master分支,希望兼容main分支

    Describe the bug 我新建了一个Pagic工程,但配置功能有些问题,参考自配置

    export default {
      tools: {
        editOnGithub: true,
        backToTop: true
      }
    };
    

    其中editOnGithub设置为true,点击回跳转自master分支,但您可能知道,现在github上新建项目主分支为main而不是master,希望能够修复,或提供配置项以兼容旧项目。谢谢。

    To Reproduce Steps to reproduce the behavior:

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Context

    • Pagic version:
    • Deno version:
    • Browser version (optional):
    • OS version:
    bug 
    opened by Sogrey 4
  • Please tell me migration procedure about sidebar (Breaking Change)

    Please tell me migration procedure about sidebar (Breaking Change)

    Describe the bug Can you give me an example of the migration procedure for the sidebar?
    Sorry, I tried looking at the code to understand how to set it up, but I didn't understand.

    error: Uncaught TypeError: sidebarConfig.map is not a function
      return sidebarConfig.map((sidebarConfigItem) => {
                           ^
        at parseSidebarConfig (sidebar.tsx:54:24)
        at Object.fn (sidebar.tsx:35:31)
        at Pagic.runPlugins (Pagic.ts:301:20)
        at async Pagic.rebuild (Pagic.ts:149:5)
        at async Pagic.build (Pagic.ts:133:5)
    

    To Reproduce When pagic build at https://github.com/yoshixmk/profile, this error occurs. Here is Detail Log by Github Action.

    Expected behavior

    • How to migration.
    • Be able to build.

    Context

    • Pagic version: v0.8.6
    • Deno version: 1.2.3
    • Browser version (optional): (no effect)
    • OS version: (no effect)
    bug 
    opened by yoshixmk 4
  • blog日期自动加1

    blog日期自动加1

    使用blog模板,在markdown文件头部 添加 date: 2021/03/31,自动部署后,变成了32号,请问这是bug么?

    bug 
    opened by wangpeng022 4
  • 在移动端上docs主题页面不能展开nav

    在移动端上docs主题页面不能展开nav

    Describe the bug 在我的手机上点击nav展开的图标,没有反应。

    To Reproduce 在手机上点击nav图标。 Pagic

    Expected behavior 展开并可以点击和跳转。

    Screenshots

    Context

    • Pagic version: 1.4.0
    • Deno version: 1.11.0
    • Browser version (optional):
    • OS version: Android 10
    bug 
    opened by 0xzhang 0
  • Support generate RSS page

    Support generate RSS page

    Is your feature request related to a problem? Please describe. How about support RSS? It can help subscribe the blog.

    Describe the solution you'd like Support generate RSS page (Atom, RSS2 or jsonfeed), and render RSS link to home page for RSS reader auto discover. Example:

    • http://www.ruanyifeng.com/blog/
    • https://coolshell.cn/
    <link rel="alternate" type="application/rss+xml" title="酷 壳 - CoolShell &raquo; Feed" href="https://coolshell.cn/feed" />
    

    Describe alternatives you've considered None

    Additional context eg: https://gohugo.io/templates/rss/

    feature 
    opened by guyskk 0
  • 使用第三方主题生成的js文件内容为404

    使用第三方主题生成的js文件内容为404

    Describe the bug 我把仓库clone到本地进行开发时发现了这个问题, 然后把theme换成线上的'https://deno.land/x/[email protected]/src/themes/blog/mod.ts', 依然存在这个问题,即生成的dist/xxx.js内容为:

    404;
    Not;
    Found;
    

    如果theme正常使用'blog'则不会出现这个问题

    To Reproduce 修改配置文件

    export default {
      // ...other config
      // theme: 'blog',
      theme: 'https://deno.land/x/[email protected]/src/themes/blog/mod.ts',
      // ...other config
    }
    

    生成网站

    pagic build --watch --serve
    

    Expected behavior 生成正常的有代码的js文件

    Screenshots image 左边为 theme: 'blog' 生成,右边为 theme: 'https://deno.land/x/[email protected]/src/themes/blog/mod.ts', 生成

    Context

    • Pagic version: 1.3.1
    • Deno version: 1.10.1 (release, aarch64-apple-darwin)
    • Browser version (optional):
    • OS version: macOS 11.2(m1)
    bug 
    opened by Suzichen 0
  • fix: config.head has only one child

    fix: config.head has only one child

    配置文件中,如果在 head 属性中使用 Fragments,且只配置了一个子节点,得到的 element.props.children 为一个对象,而非数组。

    export default {
      head: <>
        <script src="/assets/hm.js" />
      </>
    }
    

    image

    增加一层判断,如果不为数组,这直接调用 traverseElement 方法。

    opened by Shenfq 0
  • Performance of 100k+ page sites with Hugo vs. Pagic?

    Performance of 100k+ page sites with Hugo vs. Pagic?

    @xcatliu I love the direction Pagic is going - great work, especially md/tsx generation (which means that MDX might not be far behind!).

    I was curious about the largest site(s) you've tried building with Pagic. Our Hugo site generates over 100k pages of *.html files and I'd love to consider moving parts or all of our sites to Deno-based Pagic if you think Pagic is ready for 100k+ page sites.

    Thoughts?

    opened by shah 1
  • [Develop Theme] How to theme debugging on development

    [Develop Theme] How to theme debugging on development

    Is your feature request related to a problem? Please describe.

    error: Uncaught (in promise) TypeError: Import 'https://deno.land/x/[email protected]/src/pagic_theme_custom/mod.ts' failed: 404 Not Found
    

    Describe the solution you'd like 请问可以支持这样引用主题吗? https://github.com/xcatliu/pagic/blob/8df4be35ea/src/Pagic.ts#L30

    theme: "../pagic_theme_custom",
    

    Describe alternatives you've considered 还是目前只能基于 Pagic 源码进行开发调试。

    Additional context https://github.com/xcatliu/pagic/blob/8df4be35ea8b4f1d820d9e1a12d4664d2ffb782f/src/utils/import.ts#L30-L37

    feature 
    opened by drizzlesconsin 8
Releases(v1.5.1)
  • v1.5.1(Oct 14, 2021)

  • v1.5.0(Oct 14, 2021)

    What's Changed

    • Markdown katex macro by @ziqiq in https://github.com/xcatliu/pagic/pull/89
    • Markdown deflist plugins by @ziqiq in https://github.com/xcatliu/pagic/pull/91
    • Upgrade deno to 1.15.1 deno_std to 0.111.0
    • Upgrade react to 17.0.2

    New Contributors

    • @ziqiq made their first contribution in https://github.com/xcatliu/pagic/pull/89

    Full Changelog: https://github.com/xcatliu/pagic/compare/v1.4.0...v1.5.0

    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(Jul 19, 2021)

    • [feature] https://github.com/xcatliu/blog/issues/15 Support footer options
    • [docs] #86 @mrxiaozhuox Added configuration documentation for Github Page
    • [upgrade] deno v1.11.5
    • [upgrade] deno_std v0.100.0
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(May 10, 2021)

  • v1.3.0(May 10, 2021)

  • v1.2.1(Apr 2, 2021)

  • v1.2.0(Jan 27, 2021)

  • v1.1.1(Dec 23, 2020)

  • v1.1.0(Dec 22, 2020)

  • v1.0.0(Dec 14, 2020)

  • v1.0.0-beta.3(Dec 14, 2020)

  • v1.0.0-beta.2(Dec 10, 2020)

  • v1.0.0-beta.1(Dec 5, 2020)

    Bugfix

    • cli: Fix port option in pagic.config.ts not work
    • theme(blog): Fix blog theme relative link
    • theme(default, docs, blog): #52 Add print style

    Docs

    • docs: Add --allow-run (@justjavac)
    • docs: Complete blog, i18n, themes, plugins, about
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha.4(Nov 19, 2020)

  • v1.0.0-alpha.1(Nov 17, 2020)

    Pagic v1 is coming!

    After releasing v1.0.0-alpha.1,

    • The core function has been developed
    • APIs will not have breaking changes
    • There will have changelogs in each release

    Features

    Easy to configure

    • Convention over configuration
    • Single config file pagic.config.ts
    • Intuitive design

    Support md and tsx

    • Render md/tsx to static HTML page
    • Support React Hooks
    • Pre-render to static HTML, run as an SPA once loaded

    Themes and plugins

    • Official themes default/docs/blog with dark mode
    • Combine plugins to build process
    • Import third-party themes or plugins through URL

    Demos

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-alpha.2(Nov 17, 2020)

  • v1.0.0-alpha.3(Nov 17, 2020)

  • v0.6.0(Apr 3, 2017)

  • v0.5.0(Mar 14, 2017)

  • v0.3.0(Mar 11, 2017)

  • v0.4.0(Mar 11, 2017)

    Breaking Changes

    • Use pagic build instead of pagic
    • require('pagic') will return the Pagic class

    New Features

    _config.yml

    We can set the configuration in _config.yml, the default is:

    src_dir: src
    public_dir: public
    

    pagic build

    We can use pagic build to build static page, there are some options while using build command:

    pagic build [options]
    
    # -w, --watch  watch src dir change
    # -s, --serve  serve public dir
    # -p, --port   override default port
    

    pagic init

    We can use pagic init to create a new Pagic folder:

    pagic init <dir>
    
    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(Mar 11, 2017)

Owner
xcatliu
A cat who writes code
xcatliu
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 1.9k Oct 3, 2021
📏 A resizable component for React.

?? A resizable component for React.

bokuweb 1.5k Oct 17, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 183 Oct 5, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 343 Oct 3, 2021
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 186 Sep 21, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
Easily create presentation board using React

React Speaker Board Easily create presentation board using React. Quick Usage It install react-speaker-board running this comand. $ yarn add react-spe

nappa 6 Oct 14, 2021
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 109 Oct 14, 2021
Utility Components for determining whether elements are in the center of the screen.

@n1ru4l/react-in-center-of-screen Utility Components for determining whether elements are in the center of the screen. Codesandbox Quick Demo: https:/

Laurin Quast 12 May 29, 2021
redis like key-value state management solution for React

jedisdb redis like key-value state management solution for React Reactive. Redux alternative. Simple and powerful global state management system, acce

Hassan 10 Oct 16, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 82 Oct 13, 2021
🔌 "Plug and play" for RxJS Observables in React Apps!

"Plug and play" for RxJS Observables in React Apps! npm install @ngneat/react-rxjs useObservable Ever had an Observable holding data that you need to

ngneat 12 Oct 11, 2021