maggieappleton.com V2

瑪姬的數字花園

這是Maggieapleton.com的源代碼，這是一個數字花園，裡面充滿了成長的音符，論文和設計模式。

這是開源的，讓人們四處閒逛並為自己的花園獲取想法。但是，我寧願您不批發它來建造自己的花園。首先是因為我的代碼是一個熱混亂（我是開發人員，而不是專業或選擇的開發人員），其次是因為我根據自己的美學偏好和功能需求 /慾望設計了它。你的不會一樣。

當我在別人的網站上偶然發現這是我自己的設計品味和身份的確切表達時，這也很尷尬。就像走進穿衣服的人一樣。也就是說，您可以在網上做自己喜歡的事情，我不會對此大驚小怪。

我強烈鼓勵您建造自己的花園！我保留了可以幫助您完成的工具和資源的精心策劃列表。

堆棧

• next.js
• 反應
• MDX
• MDX遙控器
• 英雄圖標 - 用於次要圖標（十字，箭頭等）
• Algolia搜索
• 樣式的組件
• 制定運動
• 到達UI
• tippy.js
• 反應砌體CSS
• 下一個SEO
• Lodash

設計系統

• 組件/globalstyles.js中聲明的全局變量
• 設置在8像素網格上； 2、4、8、12、16、24、32、40、48、64、80、96、128、160。這絕對是太多尺寸的選項。將來應該審查並將其刪除。
• 字體是用於標題的Canela甲板，用於長形體的Canela文本，而LATO是用於實用UI組件的sans-serif sorkhorse字體。
• 使用烏托邦系統的精美計算以流體量表設置

MDX組件

• <ProseWrapper />包裹所有MDX長音副本。將其限制為72ch，並將其放grid-column: 2 。
• 佈局元素
  • <TwoColumn />
  • <ThreeColumn />
• 圖像元素
  • <Img />逃脫grid-column: 2位置，並將最大寬度設置為1000px。可選覆蓋width 。最小樣式，替換默認的IMG元素。
  • <BasicImage />是更完整的功能 - 包括來自Alt文本的可選字幕。
  • <ImageFrame/>添加了一個輕微的框架和掉落陰影。用於屏幕截圖。

圖像

我正在使用喬什·科莫（Josh Comeau）和CSS網格的完整出血圖像技巧。

• MDX文件中的所有圖像都將其傳遞到<img />中。它聲明默認寬度為1000px，並接受可選的width道具
• <BasicImage />將在整個畫布上拉伸圖像，可選地接受聲明的寬度道具。