maggieappleton.com V2

Jardim digital de Maggie

Este é o código -fonte do MaggieAppleton.com, um jardim digital cheio de notas, ensaios e padrões de design.

É de código aberto permitir que as pessoas cutucam e obtenham idéias para seu próprio jardim. No entanto, eu prefiro que você não o bifurize por atacado para construir seu próprio jardim. Primeiro, porque meu código é uma bagunça quente (sou um desenvolvedor por necessidade, não por profissão ou escolha) e, segundo, porque o projetei de acordo com minhas próprias preferências estéticas e necessidades / desejos funcionais. O seu não será o mesmo.

Também é estranho quando tropeço no site de outra pessoa que é uma expressão exata do meu próprio sabor e identidade de design. Como entrar em alguém vestindo suas roupas. Dito isto, você pode fazer o que quiser na web e não vou fazer uma grande confusão sobre isso.

Eu o encorajo fortemente a construir seu próprio jardim! Eu mantenho uma lista com curadoria de ferramentas e recursos que podem ajudá -lo a fazê -lo.

A pilha

• Next.js
• Reagir
• Mdx
• MDX Remote
• Ícones de heróis - usados para ícones menores (cruzamentos, setas, etc.)
• Pesquisa de Algolia
• Componentes estilizados
• Motivo de Framer
• Alcance a interface do usuário
• Tippy.js
• Reaja CSS de alvenaria
• Próximo SEO
• Lodash

Sistema de design

• Variáveis globais declaradas em componentes/globalstyles.js
• Situado em uma grade de 8 pixels; 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160. Isso é definitivamente muitas opções de tamanho. Deve revisá -lo e reduzi -lo no futuro.
• As fontes são o deck canela para títulos, texto Canela para corpo de longa data e Lato como uma fonte de cavalo de trabalho sem serrif para componentes práticos da interface do usuário.
• Tipo definido em uma escala de fluido usando cálculos sofisticados do sistema Utopia

Componentes MDX

• <ProseWrapper /> envolve toda a cópia do MDX Longform. Limita-o a 72ch e o coloca na grid-column: 2 .
• Elementos de layout
  • <TwoColumn />
  • <ThreeColumn />
• Elementos da imagem
  • <Img /> escapa da grid-column: 2 posicionamento e define uma largura máxima de 1000px. Substituição opcional com suporte width . Estilos mínimos, substitui o elemento IMG padrão.
  • <BasicImage /> tem recursos mais completos - inclui uma legenda opcional do texto ALT.
  • <ImageFrame/> Adiciona um pequeno quadro e uma sombra de gota. Útil para capturas de tela.

Imagens

Estou usando o truque de imagem de sangria completa de Josh Comeau com grade CSS.

• Todas as imagens nos arquivos MDX são transmitidos para <img /> . Ele declara uma largura padrão de 1000px e aceita um suporte width opcional
• <BasicImage /> esticará a imagem em toda a tela, opcionalmente aceita um suporte de largura declarada.