Skip to content

articlesディレクトリ内にサブディレクトリを作るのを許容してほしい #550

Description

@mehm8128

現状、articlesディレクトリ直下にしかMDファイルを配置できないため、記事がたくさんあるときにエディタのファイルツリーでもzenn-editorのUI上でも記事の検索性が悪くなってしまっています。

そこで、articlesディレクトリ内にあるサブディレクトリ内のMDも検知できるようにし、zenn-editorのUIでは「articles」のアコーディオンのように、ディレクトリ名をクリックして展開できるようなUIを追加してほしいです。

もしかしたらZennとの同期部分でZenn本体側の修正が必要かもしれませんが...。


「articles」アコーディオン
zenn-editor上の、矢印アイコン・フォルダアイコンと共に「articles」と書かれたボタン

現状
zenn-editorのサイドバーにたくさんの記事が同じ階層にリストされている

ファイルの読み込みはここらへんっぽい

function getArticleFilenames(sort?: ItemSortType): string[] {
const dirpath = getWorkingPath('articles');
const allFiles =
sort === 'system'
? listFilenames(dirpath)
: listFilenamesOrderByModified(dirpath);
if (allFiles === null) {
Log.error(
'プロジェクトルートの articles ディレクトリを取得できませんでした。`npx zenn init`を実行して作成してください'
);
return [];
}
// filter markdown files
return allFiles.filter((f) => /\.md$/.test(f)); // `.md`で終わるファイルのみに絞り込む
}

UIはここらへん

const ListArticles: React.FC<{ sort: ItemSortType }> = ({ sort }) => {
const { data, mutate } = useFetch<{ articles: ArticleMeta[] }>(
`/api/articles?sort=${sort}`,
{
revalidateOnFocus: false,
errorRetryCount: 3,
}
);
const articles = data?.articles;
// refetch when local file changes
useLocalFileChangedEffect(() => {
mutate();
});
return (
<Directory title="articles" uniqueKey="dir-articles" defaultOpen={true}>
<ul>
{!!articles?.length && (
<li>
{articles.map((article) => (
<ArticleLinkItem
key={`item-article-${article.slug}`}
article={article}
/>
))}
</li>
)}
</ul>
</Directory>
);
};

API

export function getArticles(req: Express.Request, res: Express.Response) {
const sort = getValidSortTypes(req.query.sort);
const articles = getLocalArticleMetaList(sort);
res.json({ articles });
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions