hola-astro
Hello Astro es un tema inicial multipropósito de Astro con todas las funciones escrito en Typecript y TailwindCSS. Admite páginas y publicaciones de blog basadas en Markdown y MDX.
Hello Astro se puede utilizar para cualquiera o todos los siguientes:
- sitio corporativo/de marketing
- blog
- sitio de documentación
- sitio de cartera que admite galerías de fotos
Utiliza las siguientes integraciones:
- @astrojs/mdx
- @astrojs/markdoc
- @astrojs/mapa del sitio
- @astrojs/rss
- @astrojs/viento de cola
- @astrojs/alpinejs
- icono astro
- astro-seo
- astro-robots-txt
Además, las ilustraciones SVG y PNG proceden de Undraw.
Este proyecto comenzó inicialmente como una versión básica de hello-gatsby-starter, pero ahora contiene más funciones (modos claro/oscuro, páginas de categorías, búsqueda, diagramas, matemáticas y más).
Características
- Blog con todas las funciones y contenido inicial (título, descripción, autor, fecha, imagen, etiquetas)
- Alto rendimiento y baja sobrecarga con Javascript mínimo (AlpineJS)
- Búsqueda de páginas de blogs basada en cliente de texto completo a través de lunrjs (el índice de búsqueda solo se carga en la primera invocación de la búsqueda en una página)
- Página de índice y páginas individuales para autores, categorías y etiquetas, incluida la paginación
- Soporte para feeds RSS, mapas del sitio y robots.txt
- Diseño SVG (unDraw, Hero Patterns, Iconify)
- Soporte para resaltado de sintaxis de código
- Soporte completo de SEO que incluye Open Graph, Twitter Cards y Schema.org a través de JSON-LD
- Soporte completo para los modos de UI claro y oscuro, así como las siguientes preferencias del sistema, de acuerdo con la recomendación de TailwindCSS
- Página de error 404 personalizada
- Mostrar ecuaciones matemáticas usando KaTeX a través de remark-math/rehype-katex (entre
$ ... $ o $$ ... $$ ) - Mostrar diagramas Mermaid, Markmap, PlantUML (creados como un bloque de código con lenguaje
mermaid , markmap y plantuml ) - Muestre el mapa en coordenadas geográficas y nivel de zoom usando el componente
Map (también debe incluir extra: ['map'] es un tema principal para cargar recursos CSS/JS para la página) - Calcula y muestra el tiempo de lectura de las publicaciones del blog.
- Los activos CSS/JS de bibliotecas externas se cargan solo cuando es necesario, por página y por paquete, sin excesos innecesarios.
- Galería de fotos y caja de luz usando PhotoSwipe (incluida la visualización de etiquetas EXIF)
- Componente de carrusel usando Swiper
- Páginas de documentación (modeladas a partir del iniciador de astro docs pero usando Tailwind)
Paquetes externos
El inicio utiliza los siguientes paquetes externos:
- Astro
- Mecanografiado
- TailwindCSS y TailwindUI
- Iconificar
- Patrones de héroe
- desdibujar para ilustraciones
- MDX y rebajas
- Schema.org y JSON para vincular datos, verificados mediante esquema-dts
- Open Graph utilizado por Facebook
- Tarjetas de Twitter
- alpinojs
- Búsqueda local de texto completo usando Lunr
- Ecuaciones matemáticas usando KaTeX a través de comentarios-matemáticas y rehype-katex
- Diagramas usando Mermaid, Markmap y PlantUML
- Abrir mapa de calles usando Folleto
- tiempo de lectura
- Deslizar foto
- exifr
- deslizador
- Observación Emoji
Sigue la arquitectura JAMstack al crear automáticamente una versión estática desde el repositorio de Git. La demostración se implementa en páginas de Github.
Estructura del proyecto
Dentro de este iniciador, verá las siguientes carpetas y archivos:
/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── image.png
│ │ └── gallery/
│ │ └── gallery-name/
│ │ └── image.jpg
│ ├── components/
│ │ └── header.astro
│ ├── content/
│ │ ├── blog/
│ │ | └── 2022-08-01-post.md
│ │ ├── doc/
│ │ | └── documentation-page.md
| │ └── config.ts
│ ├── layouts/
│ │ ├── base.astro
│ │ ├── blog.astro
│ │ └── doc.astro
│ ├── pages/
│ │ ├── index.astro
│ │ └── contact.astro
│ └── config.ts
└── package.json
Astro busca archivos .astro , .md o .mdx en el directorio src/pages/ . Cada página se expone como una ruta según su nombre de archivo.
src/components/ es donde colocamos los componentes de Astro y de manera similar src/layouts/ para los diseños.
Las imágenes se pueden colocar en src/assets/ .
El contenido del blog y la documentación se crean como colecciones de archivos Markdown o MDX en src/content .
Cualquier activo estático, por ejemplo. imágenes, se pueden colocar en el directorio public/ .
? Comandos
Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal:
| Dominio | Acción |
|---|
pnpm install | Instala dependencias |
pnpm dev | Inicia el servidor de desarrollo local en localhost:3000 |
pnpm build | Construya su sitio de producción en ./dist/ |
pnpm preview | Obtenga una vista previa de su compilación localmente, antes de implementarla |
pnpm lint | Imprime bastante el código fuente. |
pnpm check | Verifique el código fuente en busca de errores. |
pnpm astro ... | Ejecute comandos CLI como astro add , astro preview |
pnpm astro --help | Obtenga ayuda para usar Astro CLI |
Historial de lanzamientos
- 1.0.0: versión inicial
- 1.0.1: Imágenes sociales movidas a src, procesamiento de imágenes de portada mejorado
- 1.0.2: Actualizar paquetes a la última versión
- 1.1.0: Actualización a astro v2.x, ahora funciona con los nodos 18 y 19
- 2.0.0: ¡Nueva versión compatible con las colecciones de Astro! También aclaró que este es un tema multipropósito. ¡La búsqueda ahora puede incluir páginas Markdown y MDX!
- 2.0.1: capturas de pantalla actualizadas y página de inicio mejorada.
- 2.1.0: actualizado a los paquetes más recientes, enlaces de desarrollo corregidos, funciones respaldadas desde el blog personal, incluidos enlaces Siguiente/Anterior, compatibilidad con galería de fotos en Markdown y control de paginación mejorado.
- 2.2.0: Se corrigieron errores de pelusa, mapa, caja de luz y carrusel reimplementados para usar paquetes de folletos, fotos y swiper en lugar de depender de una CDN externa.
- 2.2.1: Actualización a astro 2.0.10, problema de carga de activos fijos con la base
- 2.3.0: Diseño eliminado del contenido del blog y del documento.
- 2.4.0:
@astrojs/images ahora admite svg por lo que no es necesario un manejo especial - 2.4.1: Use material frontal renderizado para publicaciones de blogs y documentos, soluciona el problema con los diagramas que no se representan.
- 2.4.2: Paquetes actualizados
- 3.0.0: Actualización importante:
- Utilice el nuevo soporte de activos optimizado de Astro
- nuevo logotipo de Astro
- filtrado post-borrador optimizado
- galería limpia
- Se corrigieron errores de SEO.
- limpió errores de pelusa
- migré autores y categorías a colecciones y utilicé integridad referencial basada en Astro 2.5.0
- enlaces sociales convertidos a una colección de datos (requiere Astro >2.5.0)
- metadatos de encabezado y favicon actualizados
- mejorar la búsqueda para incluir documentación
- 3.1.0: Actualización de mejora:
- Administrador de paquetes migrado de hilo a pnpm
- Base de referencia para eslabones de cabeza.
- Se agregó eslint y es más bonito con complementos.
- Se corrigió el error de atributos de imagen en el componente SEO.
- Tsconfig actualizado para que coincida con astro estricto
- Actualizar enlace CSS de Katex
- Se corrigió que el autor no apareciera en la tarjeta del blog.
- Se agregó soporte para Markdoc
- 3.1.1: Actualización menor:
- Imágenes de carga diferida
- Admite emoji de Github a través de comentarios-emoji
- 3.1.2: Correcciones menores:
- Buscar categorías nulas
- Página de contacto ligeramente mejorada
- Procesamiento siguiente/anterior mejorado
- Paquetes actualizados
- Reducir el tamaño del botón de búsqueda para adaptarlo al ancho mínimo
- Opción de imagen modificada para páginas de contenido de objeto a cubierta de objeto
- Sitio fijo.webmanifest
- 3.1.3: Correcciones menores:
- Actualice a
@astrojs/markdoc 0.4.x y la versión astro más reciente - Declaración de accesorios fijos en [slug].astro
- archivo de muestra Markdoc deshabilitado debido a este problema: withastro/astro#7520
- 3.1.4: Mejora menor:
- Procesamiento de imágenes unificado para svg y mapas de bits
- Transiciones de visualización habilitadas
- 3.1.5: Mejoras menores:
- Actualizar a la última versión de los paquetes
- Se corrigió un error menor de verificación de astros.
- 3.2.0: Mejora importante:
- Actualizado a Astro 3.x
- Implementar una política de seguridad de contenido permisiva
- 3.2.1: Mejora menor:
- Paquetes actualizados, errores de verificación astro resueltos
- 3.2.2: Mejoras menores:
- Paquetes actualizados
- Se corrigió el tipo de retorno json.ts para búsqueda.
- 3.2.3: Mantenimiento:
- Se corrigió que sirena v9 ya no funciona al actualizar a la última versión de sirena
- Paquetes de actualización
- 3.2.4: Mejoras menores:
- 3.2.5: Mejoras menores:
- Paquetes de actualización
- Quitar sirena.initialize()
- 3.2.6: Mantenimiento:
- Desactive ViewTransition ya que no funciona con sirena
- 3.3.0: Mantenimiento:
- Actualizado a los últimos paquetes y astro-icon 1.x
- 3.3.1: Mantenimiento:
- Se actualizó a los paquetes más recientes y se corrigieron errores de verificación de astros.
- 3.3.2: Mantenimiento:
- Actualizado a los últimos paquetes
- Se corrigió que la búsqueda no funcionara debido a una verificación alpina más estricta.
- Migrado al astro tsconfig.json estándar
- Se corrigieron errores de verificación de astros.
- 3.4.0: Cambios menores:
- Paquetes actualizados
- Heroicones reemplazados a v2
- RSS e índices de búsqueda mejorados para incluir el nombre del autor y el correo electrónico
- Hacer que BlogHero acepte publicaciones como accesorios en lugar de portada
- Se movieron las páginas de Markdown a la colección de contenido.
- Tipo de Frontmatter eliminado
- 4.0.0: Cambios importantes:
- Paquetes actualizados
- Se eliminaron @types/photoswipe y photoswipe tsconfig
- Movido al esquema RSS
- función getPublicaciones()
- etiquetas de esquema
- enlaces de barra lateral generados automáticamente
- RSS mejorado y metadatos de búsqueda
