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 />将在整个画布上拉伸图像，可选地接受声明的宽度道具。