maggieappleton.com V2

Jardín digital de Maggie

Este es el código fuente de Maggieappleton.com, un jardín digital lleno de notas crecientes, ensayos y patrones de diseño.

Es de código abierto dejar que la gente se hague y obtenga ideas para su propio jardín. Sin embargo, prefiero que no lo hagas al por mayor para construir tu propio jardín. Primero porque mi código es un desastre (soy un desarrollador por necesidad, no por profesión o elección), y segundo porque lo diseñé de acuerdo con mis propias preferencias estéticas y necesidades / deseos funcionales. El tuyo no será lo mismo.

También es incómodo cuando me encuentro en el sitio web de otra persona que es una expresión exacta de mi propio sabor e identidad de diseño. Como entrar en alguien que usa tu ropa. Dicho esto, puedes hacer lo que quieras en la web y no voy a hacer un gran alboroto al respecto.

¡Te recomiendo que construyas tu propio jardín! Mantengo una lista curada de herramientas y recursos que pueden ayudarlo a hacerlo.

La pila

• Next.js
• Reaccionar
• MDX
• Remoto MDX
• Íconos de héroe: utilizado para iconos menores (cruces, flechas, etc.)
• Búsqueda de algolia
• Componentes de estilo
• Movimiento del marco
• Llegar a la interfaz de usuario
• Tippy.js
• React Masonry CSS
• Next SEO
• Lodash

Sistema de diseño

• Variables globales declaradas en componentes/globalstyles.js
• Establecido en una cuadrícula de 8 píxeles; 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160. Estas son definitivamente muchas opciones de tamaño. Debería revisarlo y reducirlo en el futuro.
• Las fuentes son la cubierta Canela para encabezados, el texto de Canela para el cuerpo de forma larga y Lato como una fuente de caballo de batalla sans-serif para componentes prácticos de la interfaz de usuario.
• Tipo establecido en una escala de fluido utilizando cálculos elegantes del sistema Utopía

Componentes MDX

• <ProseWrapper /> envuelve toda la copia MDX Longform. Lo limita a 72ch y lo coloca en grid-column: 2 .
• Elementos de diseño
  • <TwoColumn />
  • <ThreeColumn />
• Elementos de imagen
  • <Img /> escapa de la grid-column: 2 colocación y establece un ancho máximo de 1000px. Anulación opcional con accesorio width . Estilos mínimos, reemplaza el elemento IMG predeterminado.
  • <BasicImage /> son más características: incluye un subtítulo opcional del texto alternativo.
  • <ImageFrame/> agrega un ligero marco y sombra de caída. Útil para capturas de pantalla.

Imágenes

Estoy usando el truco de imagen de sangrado completo de Josh Comeau con la cuadrícula CSS.

• Todas las imágenes en los archivos MDX se pasan a <img /> . Declara un ancho predeterminado de 1000px y acepta un accesorio width opcional
• <BasicImage /> estirará la imagen en el lienzo completo, opcionalmente acepta un accesorio de ancho declarado.