hello astro

halo-astro

Hello Astro adalah tema starter multiguna Astro berfitur lengkap yang ditulis dalam TypeScript dan TailwindCSS. Ini mendukung halaman dan posting blog berbasis Markdown dan MDX.

Hello Astro dapat digunakan untuk salah satu/semua hal berikut:

• situs perusahaan/pemasaran
• blog
• situs dokumentasi
• situs portofolio pendukung galeri foto

Menggunakan integrasi berikut:

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/peta situs
• @astrojs/rss
• @astrojs/tailwind
• @astrojs/alpinejs
• ikon astro
• astro-seo
• astro-robots-txt

Selain itu, ilustrasi SVG dan PNG bersumber dari Undraw

Proyek ini awalnya dimulai sebagai port sederhana hello-gatsby-starter, tetapi sekarang berisi lebih banyak fitur (mode terang/gelap, halaman kategori, pencarian, diagram, matematika, dan banyak lagi!)

Fitur

• Blog berfitur lengkap dengan frontmatter (judul, deskripsi, penulis, tanggal, gambar, tag)
• Kinerja tinggi, overhead rendah dengan Javascript minimal (AlpineJS)
• Pencarian halaman blog berbasis klien teks lengkap melalui lunrjs (indeks pencarian hanya dimuat pada permintaan pencarian pertama pada halaman)
• Halaman indeks dan halaman individual untuk penulis, kategori dan tag, termasuk pagination
• Dukungan untuk umpan RSS, peta situs, dan robots.txt
• Desain SVG (unDraw, Pola Pahlawan, Iconify)
• Dukungan untuk penyorotan sintaksis kode
• Dukungan SEO penuh termasuk Open Graph, Twitter Cards, dan Schema.org melalui JSON-LD
• Dukungan penuh untuk mode UI Terang dan gelap, serta mengikuti preferensi sistem, sesuai dengan rekomendasi TailwindCSS
• Halaman kesalahan 404 yang disesuaikan
• Menampilkan persamaan matematika menggunakan KaTeX melalui comment-math/rehype-katex (dilampirkan dalam $ ... $ atau $$ ... $$ )
• Menampilkan diagram Mermaid, Markmap, PlantUML (ditulis sebagai blok kode dengan bahasa mermaid , markmap dan plantuml )
• Tampilkan peta pada koordinat geografis dan tingkat zoom menggunakan komponen Map (perlu juga menyertakan extra: ['map'] adalah materi depan untuk memuat aset CSS/JS untuk halaman)
• Menghitung dan menampilkan waktu membaca untuk posting blog
• Aset CSS/JS perpustakaan eksternal dimuat hanya bila diperlukan pada basis per halaman dan per paket - tidak ada pembengkakan yang tidak perlu
• Galeri foto dan lightbox menggunakan PhotoSwipe (termasuk tampilan tag EXIF)
• Komponen carousel menggunakan Swiper
• Halaman dokumentasi (meniru astro docs starter tetapi menggunakan Tailwind)

Paket Eksternal

Awal menggunakan paket eksternal berikut:

• Astro
• skrip ketikan
• TailwindCSS dan TailwindUI
• Ikonifikasi
• Pola Pahlawan
• batalkan gambar untuk ilustrasi
• MDX dan Penurunan Harga
• Schema.org dan JSON untuk Menghubungkan Data, diperiksa jenisnya menggunakan skema-dts
• Grafik Terbuka yang digunakan oleh Facebook
• Kartu Twitter
• AlpenJS
• Pencarian teks lengkap lokal menggunakan Lunr
• Persamaan matematika menggunakan KaTeX melalui comment-math dan rehype-katex
• Diagram menggunakan Mermaid, Markmap dan PlantUML
• Buka Peta Jalan menggunakan Leaflet
• waktu membaca
• Gesek Foto
• exifr
• penggesek
• Komentar Emoji

Ini mengikuti arsitektur JAMstack dengan secara otomatis membuat versi statis dari repositori Git. Demo ini diterapkan di Halaman Github.

Struktur Proyek

Di dalam starter ini, Anda akan melihat folder dan file berikut:

 /
├── 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 mencari file .astro , .md atau .mdx di direktori src/pages/ . Setiap halaman diekspos sebagai rute berdasarkan nama filenya.

src/components/ adalah tempat kita meletakkan komponen Astro dan juga src/layouts/ untuk tata letak.

Gambar dapat ditempatkan di src/assets/ .

Konten blog dan dokumentasi dibuat sebagai kumpulan file Markdown atau MDX di src/content .

Aset statis apa pun, misalnya. gambar, dapat ditempatkan di direktori public/ .

? Perintah

Semua perintah dijalankan dari root proyek, dari terminal:

Memerintah	Tindakan
pnpm install	Menginstal dependensi
pnpm dev	Memulai server pengembang lokal di localhost:3000
pnpm build	Bangun situs produksi Anda ke ./dist/
pnpm preview	Pratinjau build Anda secara lokal, sebelum diterapkan
pnpm lint	Cukup cetak kode sumbernya
pnpm check	Periksa kode sumber untuk kesalahan
pnpm astro ...	Jalankan perintah CLI seperti astro add , astro preview
pnpm astro --help	Dapatkan bantuan menggunakan Astro CLI

Riwayat Rilis

• 1.0.0: Rilis Awal
• 1.0.1: Memindahkan gambar sosial ke src, meningkatkan pemrosesan coverImage
• 1.0.2: Tingkatkan paket ke yang terbaru
• 1.1.0: Pembaruan ke astro v2.x, sekarang berfungsi dengan node 18 dan 19
• 2.0.0: Versi baru mendukung koleksi Astro! Diklarifikasi juga bahwa ini adalah tema multiguna. Pencarian sekarang dapat mencakup halaman Markdown dan MDX!
• 2.0.1: Tangkapan layar yang diperbarui, dan laman landas yang ditingkatkan.
• 2.1.0: diperbarui ke paket terbaru, tautan pengembang tetap, fitur yang di-backport dari blog pribadi, termasuk tautan Berikutnya/Sebelumnya, dukungan galeri foto dalam Penurunan Harga, dan kontrol penomoran halaman yang ditingkatkan.
• 2.2.0: Memperbaiki kesalahan lint, mengimplementasikan ulang peta, lightbox, dan carousel untuk menggunakan paket leaflet, photoswipe, dan wiper daripada mengandalkan CDN eksternal.
• 2.2.1: Pembaruan ke astro 2.0.10, masalah pemuatan aset tetap dengan basis
• 2.3.0: Menghapus tata letak dari konten blog dan dokumen
• 2.4.0: @astrojs/images sekarang support svg jadi tidak perlu penanganan khusus
• 2.4.1: Gunakan frontmatter yang dirender untuk postingan blog dan dokumen, memperbaiki masalah diagram yang tidak dirender.
• 2.4.2: Paket yang diperbarui
• 3.0.0: Pembaruan besar:
  • Gunakan dukungan aset baru yang dioptimalkan Astro
  • logo Astro baru
  • pemfilteran pasca draf yang dioptimalkan
  • galeri yang dibersihkan
  • memperbaiki kesalahan SEO
  • membersihkan kesalahan serat
  • memigrasikan penulis dan kategori ke koleksi dan menggunakan integritas referensial berdasarkan Astro 2.5.0
  • mengonversi tautan sosial menjadi pengumpulan data (memerlukan Astro >2.5.0)
  • favicon dan metadata header yang diperbarui
  • tingkatkan pencarian untuk menyertakan dokumentasi
• 3.1.0: Pembaruan peningkatan:
  • Manajer paket bermigrasi dari benang ke pnpm
  • Basis referensi untuk tautan kepala
  • Menambahkan eslint dan lebih cantik dengan plugin
  • Memperbaiki kesalahan atribut gambar dalam komponen seo
  • Memperbarui tsconfig agar sesuai dengan astro strict
  • Perbarui tautan Katex CSS
  • Memperbaiki penulis yang tidak muncul di kartu blog
  • Menambahkan dukungan Markdoc
• 3.1.1: Pembaruan kecil:
  • Lambat memuat gambar
  • Dukung emoji Github melalui komentar-emoji
• 3.1.2: Perbaikan kecil:
  • Periksa kategori nol
  • Halaman kontak sedikit ditingkatkan
  • Peningkatan pemrosesan selanjutnya/sebelumnya
  • Paket yang diperbarui
  • Kurangi ukuran tombol pencarian untuk mengakomodasi lebar minimum
  • Mengubah opsi gambar untuk halaman dari isi objek menjadi sampul objek
  • Memperbaiki situs.webmanifest
• 3.1.3: Perbaikan kecil:
  • Tingkatkan ke @astrojs/markdoc 0.4.x dan astro terbaru
  • Memperbaiki deklarasi Props di [slug].astro
  • menonaktifkan file contoh Markdoc karena masalah ini: withastro/astro#7520
• 3.1.4: Peningkatan kecil:
  • Pemrosesan Gambar Terpadu untuk svg dan bitmap
  • Diaktifkan ViewTransitions
• 3.1.5: Peningkatan kecil:
  • Tingkatkan ke versi paket terbaru
  • Memperbaiki kesalahan pemeriksaan astro kecil
• 3.2.0: Peningkatan besar:
  • Diperbarui ke Astro 3.x
  • Menerapkan Kebijakan Keamanan Konten yang permisif
• 3.2.1: Peningkatan kecil:
  • Paket yang diperbarui, mengatasi kesalahan pemeriksaan astro
• 3.2.2: Peningkatan kecil:
  • Paket yang diperbarui
  • Memperbaiki jenis pengembalian json.ts untuk pencarian
• 3.2.3: Pemeliharaan:
  • Memperbaiki putri duyung v9 yang tidak lagi berfungsi dengan meningkatkan ke putri duyung versi terbaru
  • Tingkatkan paket
• 3.2.4: Peningkatan kecil:
  • Tingkatkan ke Astro 4.x
• 3.2.5: Peningkatan kecil:
  • Tingkatkan paket
  • Hapus putri duyung.initialize()
• 3.2.6: Pemeliharaan:
  • Nonaktifkan ViewTransition karena tidak berfungsi dengan putri duyung
• 3.3.0: Pemeliharaan:
  • Diupgrade ke paket terbaru dan astro-icon 1.x
• 3.3.1: Pemeliharaan:
  • Ditingkatkan ke paket terbaru dan memperbaiki kesalahan pemeriksaan astro
• 3.3.2: Pemeliharaan:
  • Diupgrade ke paket terbaru
  • Memperbaiki pencarian yang tidak berfungsi karena pemeriksaan alpine yang lebih ketat
  • Bermigrasi ke astro tsconfig.json standar
  • Memperbaiki kesalahan pemeriksaan astro
• 3.4.0: Perubahan kecil:
  • Paket yang diperbarui
  • Mengganti ikon pahlawan ke v2
  • Peningkatan RSS dan indeks pencarian untuk menyertakan nama penulis dan email
  • Jadikan BlogHero menerima postingan sebagai alat peraga, bukan materi depan
  • Memindahkan halaman Markdown ke koleksi konten
  • Tipe Frontmatter dihilangkan
• 4.0.0: Perubahan besar:
  • Paket yang diperbarui
  • Menghapus @types/photoswipe dan photoswipe tsconfig
  • Dipindahkan ke skema RSS
  • fungsi getPost()
  • tag skema
  • tautan sidebar yang dibuat secara otomatis
  • peningkatan RSS dan metadata pencarian