maggieappleton.com V2

マギーのデジタルガーデン

これは、成長しているメモ、エッセイ、デザインパターンで満たされたデジタルガーデンであるMaggieappleton.comのソースコードです。

人々が突き刺して自分の庭のアイデアを得るためのオープンソースです。しかし、私はあなた自身の庭を建てるためにそれを卸売りしたくないでしょう。まず、私のコードは熱い混乱であるため（私は職業や選択ではなく、必然的に開発者です）、次に自分の美的好みと機能的なニーズ /欲求に従って設計したためです。あなたは同じではありません。

また、自分のデザインの味とアイデンティティの正確な表現である他の人のウェブサイトに出くわすと、厄介です。あなたの服を着ている人に歩いて行くようなものです。とはいえ、あなたはあなたがウェブ上で好きなことをすることができ、私はそれについて大きな騒ぎをするつもりはありません。

私はあなたがあなた自身の庭を建てることを強くお勧めします！私はあなたがそうするのに役立つツールとリソースの厳選されたリストを保持しています。

スタック

• next.js
• 反応します
• MDX
• MDXリモート
• ヒーローアイコン - マイナーアイコン（交差、矢など）に使用
• アルゴリア検索
• スタイルのコンポーネント
• フレーマーの動き
• UIに到達します
• tippy.js
• 反応石積みcss
• 次のSEO
• ロダッシュ

設計システム

• コンポーネント/GlobalStyles.jsで宣言されたグローバル変数
• 8ピクセルグリッドに設定します。 2、4、8、12、16、24、32、40、48、64、80、96、128、160。これは間違いなくサイズのオプションが多すぎます。将来、レビューして削減する必要があります。
• フォントは、見出し用のCanelaデッキ、Longform Body用のCanelaテキスト、および実用的なUIコンポーネント用のSans-Serif WorkhorseフォントとしてのLatoです。
• ユートピアシステムからの派手な計算を使用して、流体スケールに設定されたタイプ

MDXコンポーネント

• <ProseWrapper />すべてのMDX LongFormコピーをラップします。 72CHに制限し、 grid-column: 2に配置します。
• レイアウト要素
  • <TwoColumn />
  • <ThreeColumn />
• 画像要素
  • <Img /> grid-column: 2配置を行い、最大幅1000pxを設定します。 width小道具でオプションのオーバーライド。最小限のスタイルは、デフォルトのIMG要素を置き換えます。
  • <BasicImage />はより完全な機能です - ALTテキストからのオプションのキャプションが含まれています。
  • <ImageFrame/>わずかなフレームとドロップシャドウを追加します。スクリーンショットに役立ちます。

画像

CSSグリッドでJosh Comeauのフルブリード画像トリックを使用しています。

• MDXファイルのすべての画像は<img />に渡されます。デフォルトの幅1000pxを宣言し、オプションのwidth小道具を受け入れます
• <BasicImage />完全なキャンバス全体に画像を伸ばし、オプションで宣言された幅の小道具を受け入れます。