Routify使ってMarkdownをHTMLページとして表示した使用感

2021-7-24

meko

前置き

使用感...他のルータより良いけど、ドキュメントがいまいち...
そんな感じでした、インテリセンスも効かないのできつかった
最後まで作りきれなかったので、途中までの道筋にどうぞ

環境

Node v 16.4.0
vite 2.3.8

初期設定

Svelteに入門するで作成したviteのプロジェクトの続きで作っています

@sveltech/routifyは前のバージョンのものなので
@roxi/routifyを入れる

yarn add -D @roxi/routify routify-plugin-frontmatter mdsvex

routify-plugin-front-matterはmarkdownの---で囲んだメタ要素を読み込むプラグイン
mdsvexはMarkdownを読み込むため

package.json

package.jsonにroutifyの設定を加えてscriptを書き換える

{
    "scripts": {
        "dev": "routify -c vite",
        ...
    },
    ...
    "devDependencies": {
        ...
    },
    "routify": {
        "base": "/",
        "pages": "./src/pages",
        "dynamicImports": true,
        "rootDir": ".routify",
        "extensions": [
            "md",
            "svx",
            "svelte"
        ],
        "plugins": {
            "routify-plugin-frontmatter": {}
        }
    },
}

baseは書いても効かなかった...からconfigファイルできたときに書き直した
pagesは読み込むページになるファイルのルートディレクトリ
dynamicImportsは動的に加えたかったのでtrue
rootDirはroutes.jsとかconfig.jsとかurlIndex.jsonとか書き出されるディレクトリで基本は触らないけどconfigが設定できなかったところは手動で直せそう
extensionsは名前の通り読み込む拡張子 markdown読み込むからmdとsvxを加えてる
pluginsのroutify-plugin-front-matterはマークダウンのメタ要素を読む用

vite.config.js

svelte.config.jsと統合した

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { mdsvex } from "mdsvex";
import sveltePreprocess from 'svelte-preprocess'

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: { 
    exclude: ["@roxi/routify"]
  },
  plugins: [
    svelte({
      extensions: [".md", ".svx", ".svelte"],
      preprocess: [
        mdsvex({
          extension: "md",
        }),
        sveltePreprocess({
          extension: [".svelte", ".md"],
        }),
      ],
    }),
  ]
})

Routerの設定

src/App.vueを開いて

<script lang="ts">
    import { Router } from '@roxi/routify';
    import { routes } from '../.routify/routes';
</script>
<main>
  <Router {routes} />
</main>

ページ作成

src/pagesディレクトリを作成してsample.mdを入れる

---
title: サンプル
author: meko
---

## Title

src/pagesにindex.svelteを作成

<main>
    Home
</main>

起動

yarn dev

これでrootディレクトリに.routifyディレクトリができるはず
localhost:3000を開くとHomeが見られて、localhost:3000/sampleでマークダウンがhtmlに変換されたページが開ける

おまけ

レイアウト

src/pagesディレクトリに_layout.svelteを作成する

<header>Header</header>

<div class="type-post">
    <article>
        {#if meta && title}
            <h1>{ title }</h1>
        {/if}
        <slot />
    </article>
</div>

<footer>Copyright ©︎ meko All Right Reserved</footer>

これをpostだけに設定したいならsrc/pages/postに_layout.svelteファイルを作成する pagesに入っているとindex.svelte（ページのトップ？）にも反映されちゃう

404ページ

src/pagesに_fallback.svelteを作成する

<script lang="ts">
    import { goto, url } from "@roxi/routify";
    setTimeout(function() {
        $goto($url("/"));
    }, 500);
</script>

<main>
    404 Not Found
</main>

リダイレクトさせてみたgoto使いたかったから

headに加える

routify関係ないけど
svelteには<svelte:head>というものがあるのでメタタグとか加えられる

<svelte:head>
<title>Signpost</title>
<meta name="vieport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="/assets/prism.css" />
<script src="/assets/prism.js"></script>
</svelte:head>

好きなもの入れたら良いと思う

画像の読み込み

これもroutify関係ない気がするけど
publicディレクトリに入れて、public/sample.pngなら

<img src="sample.png" />

まとめ

デメリット

バージョンの話とか知らなかったので遠回りした
ドキュメントのキーワードが検索しにくい
構造が分かりにくいサンプルが少ない

メリット

勝手にファイル拾い上げてくれる
レイアウトが作れる 404ページが設定できる既存のプロジェクトに入れられる

２日間で何が分かるんだという感じかもですが、簡単な使用感でした
@svelte/kitと比べてみてどっち使うか考えます

gridsomeのバージョンがNode v15.14.0でsvelte用のバージョンがNode v16.4.0だから切り替えがめんどい
早めに切り替えたいです

Mekogma