maggieappleton.com V2

สวนดิจิตอลของแม็กกี้

นี่คือซอร์สโค้ดสำหรับ maggieappleton.com สวนดิจิตอลที่เต็มไปด้วยโน้ตที่เพิ่มขึ้นเรียงความและรูปแบบการออกแบบ

มันเป็นโอเพ่นซอร์สที่จะให้ผู้คนแหย่และได้รับแนวคิดสำหรับสวนของตัวเอง อย่างไรก็ตามฉันอยากให้คุณไม่ได้แยกมันขายส่งเพื่อสร้างสวนของคุณเอง ครั้งแรกเพราะรหัสของฉันเป็นระเบียบร้อนแรง (ฉันเป็นนักพัฒนาโดยความจำเป็นไม่ใช่โดยอาชีพหรือทางเลือก) และที่สองเพราะฉันออกแบบมันตามความสวยงามของฉันเองและความต้องการ / ความต้องการที่ใช้งานได้ คุณจะไม่เหมือนเดิม

นอกจากนี้ยังน่าอึดอัดใจเมื่อฉันสะดุดเว็บไซต์ของคนอื่นซึ่งเป็นการแสดงออกที่แน่นอนเกี่ยวกับรสนิยมและตัวตนของการออกแบบของฉันเอง เหมือนเดินในคนที่สวมใส่เสื้อผ้าของคุณ ที่กล่าวว่าคุณสามารถทำสิ่งที่คุณชอบบนเว็บและฉันจะไม่ทำเรื่องยุ่งยากมาก

ฉันขอแนะนำให้คุณสร้างสวนของคุณเอง! ฉันเก็บรายการเครื่องมือและทรัพยากรที่สามารถช่วยคุณได้

สแต็ค

• next.js
• ตอบโต้
• MDX
• ระยะไกล MDX
• ไอคอนฮีโร่ - ใช้สำหรับไอคอนเล็กน้อย (ข้ามลูกศร ฯลฯ )
• การค้นหา Algolia
• ส่วนประกอบสไตล์
• การเคลื่อนไหวของ framer
• ไปถึง UI
• tippy.js
• ตอบโต้การก่ออิฐ CSS
• SEO ถัดไป
• การอึกทึก

ระบบออกแบบ

• ตัวแปรทั่วโลกที่ประกาศในส่วนประกอบ/globalstyles.js
• ตั้งอยู่บนกริด 8 พิกเซล 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160 นี่เป็นตัวเลือกขนาดมากเกินไป ควรตรวจสอบและลดลงในอนาคต
• แบบอักษรเป็นดาดฟ้า Canela สำหรับส่วนหัวข้อความ Canela สำหรับร่างกายยาวและ Lato เป็นตัวอักษร sans-serif workhorse สำหรับส่วนประกอบ UI ที่ใช้งานได้จริง
• พิมพ์ชุดในระดับของเหลวโดยใช้การคำนวณแฟนซีจากระบบยูโทเปีย

ส่วนประกอบ MDX

• <ProseWrapper /> ล้อมรอบสำเนา MDX Longform ทั้งหมด จำกัด ไว้ที่ 72ch และวางไว้ใน grid-column: 2 .
• องค์ประกอบเลย์เอาต์
  • <TwoColumn />
  • <ThreeColumn />
• องค์ประกอบภาพ
  • <Img /> หลบหนี grid-column: 2 ตำแหน่งและตั้งค่าความกว้างสูงสุด 1000px เป็นตัวเลือกแทนที่ด้วย width สไตล์ที่น้อยที่สุดแทนที่องค์ประกอบ IMG เริ่มต้น
  • <BasicImage /> เป็นคุณสมบัติที่สมบูรณ์ยิ่งขึ้น - รวมคำบรรยายใต้ภาพเพิ่มเติมจากข้อความ alt
  • <ImageFrame/> เพิ่มเฟรมเล็กน้อยและ drop-shadow มีประโยชน์สำหรับภาพหน้าจอ

ภาพ

ฉันใช้เคล็ดลับการตกเลือดเต็มรูปแบบของ Josh Comeau กับ CSS Grid

• รูปภาพทั้งหมดในไฟล์ MDX จะถูกส่งไปยัง <img /> มันประกาศความกว้างเริ่มต้นที่ 1,000px และยอมรับ width เสริม
• <BasicImage /> จะยืดภาพไปทั่วผืนผ้าใบเต็มรูปแบบโดยเลือกยอมรับความกว้างที่ประกาศไว้