elytre

elytre

Elytre adalah alat untuk membangun toko buku online tanpa server dengan mesin pencari dari file katalog.

Elytre masih dalam pengembangan awal dan tidak bijaksana untuk menggunakannya dalam produksi pada tahap tersebut. Harapkan perubahan yang dapat menyebabkan kerusakan, bug aneh, pengujian yang rusak, dan dokumentasi yang hilang hingga versi 1.0 dirilis (mudah-mudahan pada tahun 2021).

Memasang

Persyaratan:

• Simpul v14.15+

• Benang

1. Buat direktori kosong untuk proyek Anda

2. Inisialisasi benang: yarn init

3. Tambahkan Elytre: yarn add --exact elytre

4. Tambahkan skrip start dan build ke package.json Anda:

 { "skrip": {"mulai": "elytre start","build": "elytre build"
  }
}

Penggunaan

Agar situs elytre Anda berhasil dibangun, direktori proyek Anda memerlukan setidaknya tiga file:

• file site.yaml yang menentukan info dan konfigurasi situs Anda (lihat spesifikasi file konfigurasi situs di bawah)

• file catalog.yaml yang menjelaskan katalog buku Anda (lihat spesifikasi file katalog di bawah).

• stylesheet styles.css untuk menyesuaikan tampilan situs Anda (lihat spesifikasi file Stylesheet di bawah).

Secara opsional, Anda dapat menambahkan ke direktori proyek Anda:

• direktori public yang berisi aset yang akan disalin ke direktori build dan dapat direferensikan dari file styles.css atau site.yaml Anda

• direktori covers yang berisi gambar sampul. Nama file gambar harus cocok dengan pola berikut: {ean}.jpg (misalnya 9781234567890.jpg ), dan ean dalam nama file gambar harus cocok dengan ean produk yang dijelaskan dalam katalog.

• direktori pages yang berisi halaman khusus menggunakan format MDX. Nama file halaman harus sesuai dengan pola berikut: {slug}.mdx , dimana slug akan digunakan untuk url halaman kustom. File about.mdx akan tersedia di /pages/about . MDX adalah ekstensi untuk format penurunan harga yang mendukung JSX dan memungkinkan impor komponen React.

Spesifikasi file konfigurasi situs

Sesuaikan konfigurasi situs Anda dengan menambahkan file site.yaml di direktori proyek Anda.

 # Judul situs, seperti yang ditampilkan di header situs dan tabtitle browser: Les Éditions Paronymie# Url dasar situs, tanpa akhiran garis miringUrl: https://paronymie.elytre.app# Menu menu situs: # Slot menu dapat berupa header, nav atau catatan kaki
  tajuk: catatan kaki: …
  nav:# Menu berisi daftar entri dengan label (teks) dan tautan (url)- label: Tentang tautan: /pages/about- label: tautan kontak: /kontak/

Spesifikasi file katalog

Sesuaikan katalog produk Anda dengan menambahkan file catalog.yaml di direktori proyek Anda.

 global: # properti global diterapkan ke semua produk
  beliLink: https://www.librairiepartenaire.com/buy/:eanproducts: # Produk
  - ean: 9781234567890judul: Chaussons d'ourspenulis: Laetitia Manikontributor:
      - nama: Claude Monetrole: Artis sampul # atau "Penulis" atau "Penerjemah" atau "Fotografer"Tanggal rilis: 04-01-2021Jumlah halaman: 641bahasa asli: en # atau "fr" atau "de"backCoverText: | # Format penurunan harga *" Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* Vivamus pharetra dan tortor nec cursus. Proin tuduhan pelecehan seksual. Suspendise euismod dolor quis elit egestas vulputate. Maecenas et nisl nec dui ullamcorper aliquam nec di erat. Puji di nunc elite. Tanpa nama sebelumnya, ultrices sit amet lacinia non, feugiat vitae ligula. Mauris sollicitudin rutrum justo egestas bermartabat. Kelas taciti sosiosqu ad litora torquent yang tepat untuk conubia nostra, per inceptos himenaeos. Morbi euismod justo nec ipsum dapibus varius.      Praesent ac auctor velit. Phasellus metus eros, dignissim eu ex consectetur, alikuam rutrum massa. Ut pharetra tellus tortor, eu dictum felis euismod ac. Jangan sampai aku mengambil risiko, duduklah bersama Leo. Nunc tristique posuere eros, sit amet condimentum neque consequat eu.      Proin sollicitudin, lacus eleifend ullamcorper laoreet, turpis ante aliquet arcu, sit amet consectetur libero libero in dolor.      Sodales ipsum eget lectus cursus pharetra. Nama eu eleifend ipsum.    tambahan:
      - ketik: youtube # Tambahkan video youtube yang disematkan ke halaman produkhref: https://www.youtube.com/watch?v=dQw4w9WgXcQulasan:
      - teks: Un très grand talent de la littérature poire.penulis: Mélodiesumber: Librairie L'Arbre à Nèfles – ParissourceUrl: https://www.arbreanefles.com

  #Produk lain
  - ean: 9781234567811judul: Sous-solpenulis: Matt Yassenar

Spesifikasi file lembar gaya

Sesuaikan tampilan situs Anda dengan menambahkan file styles.css di direktori proyek Anda.

 .ElytreSite { /* Ini adalah pembungkus global untuk seluruh situs Anda. Di sini Anda dapat mengatur lebar halaman, margin, dll. */}

.Header { /* Cara header situs ditampilkan */}

.Header .Menu { /* Cara menu header ditampilkan */}

.Header .Menu .MenuEntry { /* Cara satu entri ditampilkan di menu header */}

.Produk { /* Cara produk ditampilkan */}

.Product .Product-cover-image { /* Cara gambar sampul produk ditampilkan */}

.Product .Product-infos { /* Bagaimana info produk (judul, penulis, bagian) ditampilkan */}

.Product .Product-title { /* Bagaimana judul produk ditampilkan */}

.ProductList { /* Cara daftar produk ditampilkan */}

.ProductList .Product { /* Bagaimana produk ditampilkan saat berada dalam daftar produk */}

.HomeView .ProductList .Product { /* Bagaimana produk muncul saat ada dalam daftar di halaman beranda */}

.ProductView .Product { /* Cara produk ditampilkan saat berada di satu halaman produk */}

.Error404View .Error404View-title { /* Bagaimana judul muncul di halaman error 404 */}

.Error404View .Error404View-reason { /* Bagaimana alasan muncul jika diberikan pada halaman error 404 */}

.Footer { /* Cara footer situs ditampilkan */}

.Footer-power-by { /* Teks "Powered by Elytre" di footer dapat disembunyikan (mohon jangan!) atau dibuat lebih tersembunyi di sini */}

Setelah Anda membuat file-file ini, Anda dapat:

Bangun situs elytre Anda untuk produksi

 $ pembuatan benang

Ini akan membangun situs web Anda untuk produksi di direktori build , siap untuk diterapkan. Anda dapat melayani direktori ini menggunakan server web atau host situs web statis apa pun.

Mulai elytre dalam mode pengembangan:

 $ benang mulai

Ini akan memutar server web lokal untuk pengembangan. Buka http://localhost:1854/ untuk melihatnya di browser Anda. Halaman akan dimuat ulang secara otomatis jika Anda mengedit file di direktori proyek Anda.

Tes

Kode lint di dalam repositori ini dengan:

 $ serat benang

Jalankan pengujian di dalam repositori ini dengan:

 $ tes benang

Perkembangan

Elytre terbuat dari dua bagian utama:

• template/src : templat situs React yang digabungkan dengan file penyesuaian pengguna untuk membangun situs elytre akhir

• build/src : alat simpul yang membangun situs elytre akhir menggunakan templat React dan file penyesuaian pengguna

Keduanya ditulis dalam TypeScript dan perlu ditranspilasi sebelum dapat digunakan.

 $ pembuatan benang

File dilinting, diuji, dan ditranspilasi sebelum paket dipublikasikan ke npm.

Selama pengembangan, file templat dapat dilihat dan ditranspilasi saat diubah:

 $ pengembangan benang