hello astro

Hallo-Astro

Hello Astro ist ein vielseitiges Astro-Einstiegsthema mit vollem Funktionsumfang, das in Typescript und TailwindCSS geschrieben wurde. Es unterstützt Markdown- und MDX-basierte Seiten und Blogbeiträge.

Hello Astro kann für alle der folgenden Zwecke verwendet werden:

• Unternehmens-/Marketing-Website
• Blog
• Dokumentationsseite
• Portfolio-Site, die Fotogalerien unterstützt

Verwendet die folgenden Integrationen:

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/sitemap
• @astrojs/rss
• @astrojs/tailwind
• @astrojs/alpinejs
• Astro-Symbol
• Astro-Seo
• Astro-Roboter-txt

Darüber hinaus stammen SVG- und PNG-Illustrationen von Undraw

Dieses Projekt begann ursprünglich als reine Portierung von Hello-Gatsby-Starter, enthält jetzt aber mehr Funktionen (Hell-/Dunkel-Modi, Kategorieseiten, Suche, Diagramme, Mathematik und mehr!)

Merkmale

• Vollständiger Blog mit Titelangabe (Titel, Beschreibung, Autor, Datum, Bild, Tags)
• Hohe Leistung, geringer Overhead mit minimalem Javascript (AlpineJS)
• Clientbasierte Volltextsuche von Blogseiten über lunrjs (Suchindex wird nur beim ersten Aufruf der Suche auf einer Seite geladen)
• Indexseite und einzelne Seiten für Autoren, Kategorien und Tags, einschließlich Paginierung
• Unterstützung für RSS-Feed, Sitemap und robots.txt
• SVG-Design (unDraw, Hero Patterns, Iconify)
• Unterstützung für Code-Syntax-Hervorhebung
• Vollständige SEO-Unterstützung einschließlich Open Graph, Twitter Cards und Schema.org über JSON-LD
• Volle Unterstützung für helle und dunkle UI-Modi sowie die folgenden Systemeinstellungen gemäß der TailwindCSS-Empfehlung
• Angepasste 404-Fehlerseite
• Mathematische Gleichungen mit KaTeX über comment-math/rehype-katex anzeigen (eingeschlossen in $ ... $ oder $$ ... $$ )
• Anzeige von Mermaid-, Markmap- und PlantUML-Diagrammen (als Codeblock mit den Sprachen mermaid , markmap und plantuml erstellt)
• Zeigen Sie die Karte mit Geokoordinaten und Zoomstufe mithilfe Map an (es muss auch extra: ['map'] ist wichtig, um CSS/JS-Assets für die Seite zu laden.)
• Berechnet die Lesezeit für Blogbeiträge und zeigt sie an
• CSS/JS-Assets externer Bibliotheken werden nur bei Bedarf pro Seite und pro Paket geladen – kein unnötiges Aufblähen
• Fotogalerie und Lightbox mit PhotoSwipe (inkl. Anzeige von EXIF-Tags)
• Karussellkomponente mit Swiper
• Dokumentationsseiten (nach dem Vorbild von Astro Docs Starter, aber mit Tailwind)

Externe Pakete

Der Start verwendet die folgenden externen Pakete:

• Astro
• Typoskript
• TailwindCSS und TailwindUI
• Ikonifizieren
• Heldenmuster
• UnDraw für Illustrationen
• MDX und Markdown
• Schema.org und JSON zum Verknüpfen von Daten, typgeprüft mit schema-dts
• Open Graph wird von Facebook verwendet
• Twitter-Karten
• AlpineJS
• Lokale Volltextsuche mit Lunr
• Mathematische Gleichungen mit KaTeX über comment-math und rehype-katex
• Diagramme mit Mermaid, Markmap und PlantUML
• Öffnen Sie die Straßenkarte mit der Broschüre
• Lesezeit
• PhotoSwipe
• exifr
• Swiper
• Bemerkung Emoji

Es folgt der JAMstack-Architektur, indem es automatisch eine statische Version aus dem Git-Repository erstellt. Die Demo wird auf Github-Seiten bereitgestellt.

Projektstruktur

In diesem Starter sehen Sie die folgenden Ordner und Dateien:

 /
├── 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 sucht im Verzeichnis src/pages/ nach .astro , .md oder .mdx Dateien. Jede Seite wird basierend auf ihrem Dateinamen als Route angezeigt.

src/components/ ist der Ort, an dem wir alle Astro-Komponenten ablegen, und src/layouts/ für Layouts.

Bilder können in src/assets/ abgelegt werden.

Blog- und Dokumentationsinhalte werden als Sammlungen von Markdown- oder MDX-Dateien in src/content erstellt.

Alle statischen Assets, z. Bilder können im Verzeichnis public/ abgelegt werden.

? Befehle

Alle Befehle werden im Stammverzeichnis des Projekts von einem Terminal aus ausgeführt:

Befehl	Aktion
pnpm install	Installiert Abhängigkeiten
pnpm dev	Startet den lokalen Entwicklungsserver bei localhost:3000
pnpm build	Erstellen Sie Ihren Produktionsstandort auf ./dist/
pnpm preview	Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen
pnpm lint	Drucken Sie den Quellcode hübsch aus
pnpm check	Überprüfen Sie den Quellcode auf Fehler
pnpm astro ...	Führen Sie CLI-Befehle wie astro add oder astro preview aus
pnpm astro --help	Erhalten Sie Hilfe bei der Verwendung der Astro-CLI

Veröffentlichungsverlauf

• 1.0.0: Erstveröffentlichung
• 1.0.1: Soziale Bilder nach src verschoben, CoverImage-Verarbeitung verbessert
• 1.0.2: Pakete auf die neueste Version aktualisieren
• 1.1.0: Update auf Astro v2.x, funktioniert jetzt mit Knoten 18 und 19
• 2.0.0: Neue Version unterstützt Astro-Sammlungen! Außerdem wurde klargestellt, dass es sich um ein Mehrzweckthema handelt. Die Suche kann jetzt sowohl Markdown- als auch MDX-Seiten umfassen!
• 2.0.1: Aktualisierte Screenshots und verbesserte Zielseite.
• 2.1.0: auf die neuesten Pakete aktualisiert, Entwickler-Links korrigiert, aus dem persönlichen Blog zurückportierte Funktionen, einschließlich Next/Prev-Links, Fotogalerie-Unterstützung in Markdown und verbesserte Paginierungssteuerung.
• 2.2.0: Lint-Fehler behoben, Karte, Lightbox und Karussell neu implementiert, um Leaflet-, Photoswipe- und Swiper-Pakete zu verwenden, anstatt sich auf externes CDN zu verlassen.
• 2.2.1: Update auf Astro 2.0.10, Problem beim Laden von Anlagen mit der Basis
• 2.3.0: Layout aus Blog- und Dokumentinhalten entfernt
• 2.4.0: @astrojs/images unterstützt jetzt svg , sodass keine besondere Behandlung erforderlich ist
• 2.4.1: Verwenden Sie gerendertes Frontmatter für Blog- und Dokumentbeiträge. Behebt das Problem, dass Diagramme nicht gerendert werden.
• 2.4.2: Aktualisierte Pakete
• 3.0.0: Großes Update:
  • Nutzen Sie die neue, für Astro optimierte Asset-Unterstützung
  • neues Astro-Logo
  • optimierte Post-Draft-Filterung
  • aufgeräumte Galerie
  • SEO-Fehler behoben
  • Flusenfehler bereinigt
  • Autoren und Kategorien in Sammlungen migriert und referenzielle Integrität basierend auf Astro 2.5.0 verwendet
  • Konvertierte soziale Links zu einer Datensammlung (erfordert Astro >2.5.0)
  • Aktualisierte Favicon- und Header-Metadaten
  • Verbessern Sie die Suche, um die Dokumentation einzubeziehen
• 3.1.0: Erweiterungsupdate:
  • Paketmanager von Yarn nach Pnpm migriert
  • Referenzbasis für Kopfverbindungen
  • Eslint und Prettier mit Plugins hinzugefügt
  • Fehler bei Bildattributen in der SEO-Komponente behoben
  • Tsconfig aktualisiert, um Astro-Strict zu entsprechen
  • Aktualisieren Sie den Katex-CSS-Link
  • Problem behoben, bei dem der Autor nicht in der Blog-Karte angezeigt wurde
  • Markdoc-Unterstützung hinzugefügt
• 3.1.1: Kleines Update:
  • Lazy Load-Bilder
  • Unterstützen Sie Github-Emoji über comment-emoji
• 3.1.2: Kleinere Korrekturen:
  • Suchen Sie nach Nullkategorien
  • Leicht verbesserte Kontaktseite
  • Verbesserte Next/Prev-Verarbeitung
  • Aktualisierte Pakete
  • Reduzieren Sie die Größe der Suchschaltfläche, um sie an die minimale Breite anzupassen
  • Die Bildoption für Seiten wurde von „Objekt enthalten“ zu „Objekt abdecken“ geändert
  • site.webmanifest behoben
• 3.1.3: Kleinere Korrekturen:
  • Upgrade auf @astrojs/markdoc 0.4.x und das neueste Astro
  • Props-Deklaration in [slug].astro behoben
  • Markdoc-Beispieldatei aufgrund dieses Problems deaktiviert: withastro/astro#7520
• 3.1.4: Kleinere Verbesserung:
  • Einheitliche Bildverarbeitung für SVG- und Bitmaps
  • ViewTransitions aktiviert
• 3.1.5: Kleinere Verbesserungen:
  • Aktualisieren Sie auf die neueste Paketversion
  • Kleiner Astro-Check-Fehler behoben
• 3.2.0: Wesentliche Verbesserung:
  • Auf Astro 3.x aktualisiert
  • Implementieren Sie eine freizügige Inhaltssicherheitsrichtlinie
• 3.2.1: Kleinere Verbesserung:
  • Aktualisierte Pakete, Astro-Check-Fehler behoben
• 3.2.2: Kleinere Verbesserungen:
  • Aktualisierte Pakete
  • Der Rückgabetyp von json.ts für die Suche wurde korrigiert
• 3.2.3: Wartung:
  • Behoben, dass Mermaid v9 durch ein Upgrade auf die neueste Version von Mermaid nicht mehr funktionierte
  • Upgrade-Pakete
• 3.2.4: Kleinere Verbesserungen:
  • Upgrade auf Astro 4.x
• 3.2.5: Kleinere Verbesserungen:
  • Upgrade-Pakete
  • Entfernen Sie mermaid.initialize()
• 3.2.6: Wartung:
  • Deaktivieren Sie ViewTransition, da es mit Mermaid nicht funktioniert
• 3.3.0: Wartung:
  • Auf die neuesten Pakete und Astro-Icon 1.x aktualisiert
• 3.3.1: Wartung:
  • Auf die neuesten Pakete aktualisiert und Astro-Check-Fehler behoben
• 3.3.2: Wartung:
  • Auf die neuesten Pakete aktualisiert
  • Problem behoben, bei dem die Suche aufgrund einer strengeren Alpenprüfung nicht funktionierte
  • Auf Standard-Astro tsconfig.json migriert
  • Fehler bei der Astroprüfung behoben
• 3.4.0: Kleinere Änderungen:
  • Aktualisierte Pakete
  • Heroicons durch Version 2 ersetzt
  • Verbesserte RSS- und Suchindizes, die den Namen und die E-Mail-Adresse des Autors enthalten
  • Sorgen Sie dafür, dass BlogHero Beiträge als Requisiten und nicht als Hauptthema akzeptiert
  • Markdown-Seiten in die Inhaltssammlung verschoben
  • Eliminierter Frontmatter-Typ
• 4.0.0: Wesentliche Änderungen:
  • Aktualisierte Pakete
  • @types/photoswipe und photoswipe tsconfig entfernt
  • Zum RSS-Schema verschoben
  • getPosts()-Funktion
  • Schema-Tags
  • automatisch generierte Seitenleisten-Links
  • verbesserte RSS- und Suchmetadaten