🙄

Freshで記事集約ブログを作った

2023/02/11に公開

https://flu.deno.dev
https://github.com/kstdx/flu

なにしたか

DenoのFreshで記事を集約するタイプのブログサイトを今日作ってみました。
やっぱりDenoとFreshって開発体験が最高ですね。
名前はflu(インフルエンザ)っていう(!?)プロダクトですが、ネット上の様々な場所に拡散された記事たちをウイルスに例えて、それを集約できるブログということでこの名前にしました。(ちょっと不謹慎かも)

技術的な話

フレームワークにはFreshを利用しました。
サイトの集約の仕方としては、サイトのAPIやRSSをうまく活用しました。
また、サイトを集約する機構はプラグインとして独立しているため、簡単に自分でも作れます。
ちなみにファーストパーティのプラグインはpluginHello(テスト用)と、pluginNote(note.comの記事集約)とpluginZenn(zenn.devの記事集約)を用意しているので、作らなくてもある程度集約できます。
インストールやデプロイの仕方はREADMEに書いている通り、gitで落としてflu.config.tsを自分用に編集してdeno deployにデプロイするだけです。

flu.config.tsについて

このファイルはfluの設定ファイルです。自分のプロフィールやプラグインを設定できます。
初期設定は

flu.config.ts
import { pluginNote, pluginZenn } from './core/plugins.js'
import { defineConfig } from './core/config.js'

export default defineConfig({
    title: 'My Hub',
    description:
        'I have uploaded the repository of this web application to GitHub.',
    username: 'kstdx',
    icon: 'https://avatars.githubusercontent.com/u/104671361?v=4',
    links: {
        twitter: 'https://twitter.com/kstdx',
        github: 'https://github.com/kstdx',
        others: [
            'https://note.com/kstdx',
            'https://zenn.dev/kstdx',
            'https://scratch.mit.edu/users/kst_dx'
        ]
    },
    plugins: [
        [pluginNote, 'kstdx'],
        [pluginZenn, 'kstdx']
    ]
})

となっています。
最初にやってるインポートはファーストパーティのプラグインと、設定関数ですね。

title

その名の通りサイトのタイトルです。
(ユーザー名とは違います)

description

自分のプロフィール、説明です。
自分の仕事とか書いてもいいんじゃないでしょうか(適当)

username

ユーザー名(自分の名前)です。
ここもなんでもいいと思います。

icon

じぶんのアイコンのURLです。基本的には多分svgもできると思います。
imgタグのsrcにそのまま入ります。

自分の外部リンクです。
今の所Twitter(twitter)とGitHub(github)が独自アイコンに対応しており、それ以外(others)はリンクアイコンが表示されます。
基本的には上のソースコードのように記述すればOKです。

plugins

集約するサイトを定義するプラグイン関数を置く設定です。
Arrayのように定義します。

plugins: [
	[プラグイン関数, ...引数],
	[プラグイン関数, ...引数],
	[プラグイン関数, ...引数],
	...
]

みたいに定義します。
ファーストパーティのプラグインのpluginHelloは引数なしで動きます。pluginNotepluginZennは引数にユーザー名を入れればいいです。

プラグイン関数について

プラグイン関数の作り方です。

{
	where: 'サイト名(note.comとか)',
	color: 'ラベル色(twindの対応してる色で)',
	title: '記事タイトル',
	description: '記事の説明とか本文(長いと省略されます)',
	href: '記事のURL'
}

みたいな連想配列をリストにして、

[
	{ where: '', color: '', ... },
	{ where: '', color: '', ... },
	{ where: '', color: '', ... },
	...
]

みたいにしたものをreturnしてくれれば処理できます。

おわりに

作れば作るほどDenoとかFreshがスキになります。
もうすぐバレンタインなのに、サイトを作ってしまう...
まあいいか(!?)

Discussion

ログインするとコメントできます