/minista

Next.js Like Development with 100% Static Generate.

Primary LanguageTypeScriptMIT LicenseMIT

minista

Site & Documentation

https://minista.qranoko.jp

About

minista（ミニスタ）は、React の JSX で書けるスタティックサイトジェネレーターです。Next.js 風の快適な環境で開発しながら 100% 静的に出力できます。SaaS の web テンプレートコーディング業務を想定しているため、ビルド後のデータが綺麗（ヒューマンリーダブル）です。

How To Use

Automatic Setup

$ npm init minista@latest

Manual Setup

$ npm install --save-dev minista react@17 react-dom@17
public # Copy dist
src
└── pages # Required!
    ├── about
    │   └── index.jsx
    └── index.jsx
const PageHome = () => {
  return (
    <h1>Home</h1>
  )
}

export default PageHome

package.json を開き、以下のスクリプトを追加します。

"scripts": {
  "dev": "minista",
  "build": "minista build",
  "preview": "minista preview",
}

Commands

command detail
minista Development mode, Press Ctrl+C to stop
minista build Static site generate
minista preview Static data preview

Customize

// minista.config.ts
import { defineConfig } from "minista"

export default defineConfig({
  base: "/", // string
  public: "public", // string
  out: "dist", // string
  root: {
    srcDir: "src", // string
    srcName: "root", // string
    srcExt: ["tsx", "jsx"], // string[]
  },
  pages: {
    srcDir: "src/pages", // string
    srcExt: ["tsx", "jsx", "md", "mdx"], // string[]
  },
  assets: {
    entry: "",
    // | string
    // | string[]
    // | { [key: string]: string }
    // | {
    //      name?: string
    //      input: string
    //      insertPages: string | string[] | { include: string[]; exclude?: string[] }
    //   }[]
    outDir: "assets", // string
    outName: "[name]", // string
    bundle: {
      outName: "bundle", // string
    },
    partial: {
      useSplitPerPage: false, // boolean
      usePreact: false, // boolean
      useIntersectionObserver: true, // boolean
      outName: "partial", // string
      rootAttrSuffix: "partial-hydration", // string
      rootValuePrefix: "ph", // string
      rootDOMElement: "div", // "div" | "span"
      rootStyle: { display: "contents" }, // React.CSSProperties
      intersectionObserverOptions: {
        root: null, // Element | null
        rootMargin: "0px", // string
        thresholds: [1], // ReadonlyArray<number>
      },
    },
    images: {
      outDir: "assets/images", // string
      outName: "[name]", // string
    },
    fonts: {
      outDir: "assets/fonts", // string
      outName: "[name]", // string
    },
    svgr: {
      svgrOptions: {}, // https://react-svgr.com/docs/options/
    },
    icons: {
      useSprite: true, // boolean
      srcDir: "src/assets/icons", // string
      outDir: "assets/images", // string
      outName: "icons", // string
      svgstoreOptions: {
        cleanSymbols: ["fill", "stroke", "stroke-linejoin", "stroke-width"],
      }, // https://github.com/svgstore/svgstore#svgstore-options
    },
    download: {
      useRemote: false, // boolean
      remoteUrl: ["https://", "http://"], // string[]
      remoteName: "remote-[index]", // string
      outDir: "assets/images", // string
    },
  },
  vite: {}, // https://ja.vitejs.dev/config/
  resolve: {
    alias: [], // { [key: string]: string } | { find: string, replacement: string }[]
  },
  css: {
    modules: {
      cache: true,
      scopeBehaviour: "local",
      globalModulePaths: [],
      generateScopedName: undefined,
      hashPrefix: "",
      localsConvention: "camelCaseOnly",
    }, // https://ja.vitejs.dev/config/#css-modules
    preprocessorOptions: {
      scss: {},
      less: {},
      stylus: {},
    }, // https://ja.vitejs.dev/config/#css-preprocessoroptions
  },
  markdown: {
    syntaxHighlighter: "highlight", // "highlight" | "none"
    highlightOptions: {}, // https://github.com/rehypejs/rehype-highlight#options
    mdxOptions: {
      remarkPlugins: [], // https://mdxjs.com/packages/mdx/#optionsremarkplugins
      rehypePlugins: [], // https://mdxjs.com/packages/mdx/#optionsrehypeplugins
    },
  },
  search: {
    useJson: false, // boolean
    cache: false, // boolean
    outDir: "assets", // string
    outName: "search", // string
    include: ["**/*"], // string[]
    exclude: ["404"], // string[]
    trimTitle: "", // string
    targetSelector: "[data-search]", // string
    hit: {
      minLength: 3, // number
      number: false, // boolean
      english: true, // boolean
      hiragana: false, // boolean
      katakana: true, // boolean
      kanji: true, // boolean
    },
  },
  beautify: {
    useHtml: true, // boolean
    useAssets: false, // boolean
    htmlOptions: {
      indent_size: 2,
      max_preserve_newlines: 0,
      indent_inner_html: true,
      extra_liners: [],
      inline: ["span", "strong", "b", "small", "del", "s", "code", "br", "wbr"],
    }, // https://github.com/beautify-web/js-beautify#css--html
    cssOptions: {}, // https://github.com/beautify-web/js-beautify#css--html
    jsOptions: {}, // https://github.com/beautify-web/js-beautify#options
  },
})

Libraries

Media

Respect

License

  • MIT

Credit