🍋

fresh 一問一答

2022/09/12に公開

Deno

fresh

tech

1. まとめてサイトタイトルを設定したい

routes/_app.tsxが全ルーティングに適応されます。
ただし、この先Headタグには更新が入りそうなのでアップデートは確認したほうが良さそうです　

// routes/_app.tsx

/** @jsx h */
import { h } from "preact";
import { Head } from "$fresh/runtime.ts"; // ここがアップデートされそう
import { AppProps } from "$fresh/src/server/types.ts";

export default function App({ Component }: AppProps) {
  return (
    <html>
      <Head>
        <title>VoiceCamp</title>
      </Head>
      <body>
        <Component />
      </body>
    </html>
  );
}

2. 複数のダイナミックパスを作りたい

routes/[your]/[dynamicPath].tsx

params.your
params.dynamicPath

3. iframeを表示したい

google formをiframe表示するサンプル

/** @jsx h */
import { h } from "preact";

export default function Form() {
  return (
    <div>
      <iframe
        src=""
        frameborder="0"
        marginheight="0"
        marginwidth="0"
      >
        読み込んでいます…
      </iframe>
    </div>
  );
}

4. handler内でリダイレクトさせる

export const handler: Handlers<GetPodcast | null> = {
  async GET(_, ctx) {
    return new Response("", {
      status: 303,
      headers: {
        Location: `YOUR_REDIRECT_URL`,
      },
    });
  },
};

5. freshのインテグレーションテストでテストをブラウザで確認する

freshリポジトリで　deno run -A ./tests/fixture/main.ts