Top Trends in Cybersecurity for 2024 | 
変化は避けられず、時々起こる。 過去数年間に私達に強制された変更がある、私達が直接制御できなかった変更。 しかしLayer0/Edgioでは、最近の変更は私たち自身のものであり、非常に必要とされていたものである。それは、Edgioドキュメントの完全な書き直しと再設計である。
このオーバーホールは基礎的で制御可能であることが意図されていた。 実は、今までにないようなことを自分たちの手でやってみたいと思っていた。 だからReact beta docsに強くインスパイアされて、ベースリポジトリのインスタンスを作成し、特定のユースケースに合わせて微調整することで、巨人の肩に乗って行った。
まず最初に
最初のステップはReactiflux Discordチャンネルだった。 簡単に言えば、コミュニティはReactのベータ版ドキュメントリポジトリを特定するのを手伝った。
Reactベータレポが先行スタート
React docsのベータサイトがどのように構築されたか、どのような技術を使用しているか、そして私たちの特定のニーズに応えるためにこのスタックをどのように活用して構築できるかを調査するために数日を費やした。 MDXとNext.jsについての私たちの直感は正しかったし、私たちは自分自身を先頭に立って見つけた。
技術
使用されている主な技術のいくつかは次のとおりである。
- MDX: Reactコンポーネントが埋め込まれた機能的なマークダウン
- Next.js: Reactフレームワーク
- webpack:モジュールバンドル
- スタイル設定されたコンポーネント:スタイル設定
- Algolia:検索
- Prism :コード構文の強調表示
MDX：MDXはMarkdownのコンポーネント時代の拡張形式である。 任意のマークダウン文書にJSXを埋め込むことができ、マークダウンによるコンテンツオーサリングを新たなレベルに引き上げることができるため、マークダウン機能を実現する。
MDXとは何か、またMDXがいかに強力であるかは、MDX、The secret ingredient and Front-End Documentation、Style Guides、The Rise of MDXなどの記事からすでにわかっていた。 これは、私たちが作成したカスタムコンポーネントのいくつかの道を開いた。
Next.js : MDXとNext.jsをペアリングするのは新しいことではないので、最初の直感は公式ドキュメントやこのブログ記事を読むことだった。 Next.jsページにマークダウンを取得するには、ローカルのマークダウンドキュメントを持ち、getStaticProps、getStaticPaths、またはgetServerSidePropsのいずれかの中でremarkやremark-htmlのようなパッケージを使用してHTMLに変換するようないくつかのアプローチがある。
もう一つのアプローチは、`.md`または`.mdx`ファイルを@next/mdxパッケージで直接Next.jsページとして定義することである。あるいは、下位レベルのものを扱いたい場合はReactのチームアプローチとDIYに従う。
webpack: next.config.js (またはnext.config.mjs)はNext.jsサーバーとビルドフェーズで使用される。ここで、Markdownがpagesディレクトリの`.mdx`ファイル拡張子を読み取り、Next.jsページとしてロードするなど、高度なユースケースに合わせてNext.jsを設定できる。
webpackはファイルを前処理するためにローダーを使用する。最も一般的なユースケースの1つはtranspilingであり、そのような一般的なパッケージの1つはbabel-loaderである(Babelを使用してES2015+コードをロードし、transpiles to ES5にtranspiles )。
remark/rehypeプラグインの豊富なエコシステムは@MDX-js/loaderによってサポートを求められ、markdownをHTMLに細かい変換することができる。
Styled Components : Next.jsにはCSSを書く方法がたくさんあるが、私たちはStyled Componentsを選んだ。 Styled Componentsを使用すると、よりコロケーション化されたモジュール化された、結合された、より邪魔にならない方法でコンポーネントスタイルを作成することができる。 Styled-ComponentsをReactで使用する方法を学ぶか、Styled-Components Happy Pathを使ってStyled-Componentsの詳細を見る。
Algolia: Algolia AutoComplete上に構築されたDocSearch v3の最新バージョンにアップグレードした。アクセシビリティと応答性が強化され、デスクトップとモバイルデバイスの両方でよりスムーズなエクスペリエンスを提供。 Algoliaクローラーは、検索を実行するときに最も関連性の高い情報を抽出する。
Prism : Prismは十分にテストされ信頼されているコードシンタックスハイライトである。 使い始めるのが簡単なだけでなく、豊富なプラグインエコシステムを備えており、テーマ設定などの操作のための賢明なデフォルトで拡張可能である。
機能
再設計は表面価値のほとんどの表面的な変更を特色にする間、次のような他の特徴がある:
重要な詳細情報が記載された新しいホームページ
Layer0/Edgioプラットフォームの4つの柱から始めて、Layer0/Edgioが提供するより多くの機能を構築する。
テーマ
テーマを切り替えるには、ボタンをクリックするだけ。 ライトモードからダークモードへ、またはその逆に移動するか、オペレーティングシステムに決定させる。
改善されたナビゲーション
メニュー（左側）と目次（右側）の2つのメインナビゲーションモードは、ナビゲーションとスキャンを向上させるために再設計された。 新しいページネーションコントロール(下部)は、次のガイドと前のガイドを知るのに役立つ。
改善されたコードブロック
PrismJSでは、構文の強調表示とカスタマイズが非常に簡単になっている。
検索機能の向上
Algolia検索がv3にアップグレードされ、結果のインデックスを作成するコンテンツをより細かく制御できるようになった。 これはモバイルデバイスでも動作する。
しかし、待って、まだある
React beta docs repoには多くのことが書かれており、ここではオープンソースの力を活用することができた。 目次、ドキュメントのページネーション、ブレッドクラム、SEOなどのように、私たちが箱からほとんど出てくるものがある。 これらのいくつかは、私たちのコンテキストをよりよく提供するために微調整し、いくつかはまだ調査中である。
貢献
私たちにとって、これは新しい文書が正しい方向への一歩であり、新しい始まりの始まりである。 私たちは開発者の経験を損なうことなく、あなたのウェブサイトをより速く、より安全にするのを助け続けるので、あなたがこの旅に私たちに参加してほしい。 Layer0開発者ドキュメントのソースコードはGitHubのオープンリポジトリにあり、フィードバックとプルリクエストを歓迎する。 誤植やより良い説明方法を見つけた場合は、プルリクエストを提出するか、問題を提出して! また、貢献ガイドラインを参照。
