gathering a building
1.0.0
Proyek ini dikembangkan di bawah fase sebelumnya dari Yale Digital Humanities Lab. Sekarang menjadi bagian dari departemen Metode Komputasi dan Data Perpustakaan Yale, Lab tidak lagi memasukkan proyek ini ke dalam cakupan pekerjaannya. Oleh karena itu, ia tidak akan menerima pembaruan lebih lanjut. Ada situs web langsung yang menggunakan kode ini. Jika situs web ini rusak, maka situs tersebut akan dihapus dari web.
Repositori ini berisi kode sumber untuk aplikasi web yang merinci aspek arsitektur Universitas Yale. Aplikasi ini dibangun pada frontend Angular 1 yang menyajikan data kartografi dari server CartoDB dan aset multimedia dari backend API Wordpress.
Pengguna admin dapat memperbarui data yang ditampilkan di situs dengan mengunjungi antarmuka admin situs. Setelah masuk, pengguna dapat menetapkan data yang akan ditampilkan di situs dengan membuat dan mengedit postingan menggunakan bidang metadata berikut:
Bidang Bawaan
Judul setiap posting ditentukan oleh bidang judul posting Wordpress tradisional (contoh bidang judul)
Bidang Bawaan
Konten teks untuk setiap posting ditentukan oleh bidang konten teks Wordpress tradisional (contoh bidang paragraf).
Bidang Kustom
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
Bidang pengontrol dalam kiriman mengontrol di mana kiriman tersebut akan ditampilkan dalam navigasi situs: yaitu apakah kiriman akan muncul di www.mydomain.com/routes/historical-geography atau www.mydomain.com/routes/people-and-places , atau rute lain di situs (contoh bidang pengontrol).
Bidang Kustom
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
Bidang urutan dalam kiriman mengontrol di mana kiriman akan disajikan dalam suatu rute, yaitu urutan bagian mana yang akan muncul dalam kolom teks saat pengguna menelusuri konten untuk rute tertentu.
Mengingat semua postingan yang berbagi pengontrol, seseorang dapat mengatur urutan kemunculannya dengan memberikan nilai urutan 0 pada postingan yang akan muncul pertama, postingan berikutnya yang akan muncul dengan nilai urutan 1, dan seterusnya. Harap dicatat bahwa nilai pesanan duplikat tidak diterima (contoh kolom pesanan).
Bidang Kustom
Accepted values:
* table-of-contents
* text
Bidang sectionType dalam sebuah postingan menunjukkan apakah postingan tersebut mewakili bagian daftar isi untuk pengontrol tertentu atau bagian berbasis teks untuk pengontrol tersebut.
table-of-contents
Jika nilai sectionType postingan diatur ke daftar isi (contoh kolom daftar isi), kolom teks untuk bagian tersebut akan direpresentasikan sebagai serangkaian tautan diikuti dengan satu paragraf pengantar bagian tersebut (contoh tampilan) . Untuk membuat daftar isi, seseorang harus mengidentifikasi semua posting untuk pengontrol tertentu, kemudian membuat satu paragraf di kotak teks utama Wordpress untuk setiap bagian dalam pengontrol yang mengikuti daftar isi (contoh daftar isi paragraf konten ).
text
Jika nilai sectionType postingan diatur ke teks (contoh kolom teks), kolom teks untuk bagian tersebut akan direpresentasikan sebagai rangkaian paragraf biasa (contoh tampilan). Untuk membuat postingan teks, seseorang cukup memasukkan paragraf ke dalam bidang teks tradisional Wordpress (contoh konten paragraf teks).
Bidang Kustom
Accepted values:
* one-div-container
* three-div-container
* four-div-container
Bidang template dalam postingan menunjukkan jenis konten yang akan ditampilkan di belakang kolom teks. Ada tiga opsi:
one-div-container
Jika nilai template postingan disetel ke one-div-container, latar belakangnya akan menjadi gambar latar halaman penuh (contoh tampilan). Gambar latar belakang ditentukan oleh Gambar Unggulan untuk postingan tertentu (contoh bidang wadah satu div).
three-div-container
Jika nilai template postingan diatur ke wadah tiga div, latar belakangnya akan terdiri dari tiga elemen yang diwakili di sisi kanan layar (contoh tampilan). Konten dalam elemen ini diatur oleh kolom khusus berikut: topImage , bottomImage , topCaption , bottomCaption . Bidang topImage dan bottomImage merupakan jalur lengkap ke file gambar, sedangkan bidang topCaption dan bottomCaption merupakan bidang keterangan teks biasa. (contoh bidang wadah tiga div)
four-div-container
Jika nilai templat postingan disetel ke wadah empat div, latar belakangnya akan terdiri dari empat gambar setinggi penuh yang tertaut ke bagian dalam pengontrol yang diberikan (contoh tampilan). Gambar latar belakang untuk templat latar belakang ini ditentukan oleh bidang introImage dalam postingan untuk pengontrol ini. Misalnya, contoh tampilan yang ditautkan sebelumnya dalam paragraf ini memperlihatkan halaman dengan empat gambar latar belakang: beton, batu, bata, dan kaca. Gambar pertama (konkret) ditentukan oleh nilai introImage dalam postingan yang memiliki nilai urutan 1 (karena ini adalah postingan pertama yang muncul setelah daftar isi). Dalam postingan dengan nilai urutan 1, gambar yang akan direpresentasikan dalam wadah empat div ditentukan di bidang khusus introImage (contoh bidang wadah empat div)
Bidang Kustom
Accepted values:
* light
* dark
light
Menetapkan nilai brandIcon ke terang akan membuat ikon merek situs (misalnya DHLab) tampak putih, yang direkomendasikan untuk halaman dengan latar belakang gelap (contoh bidang brandIcon terang).
dark
Menyetel nilai brandIcon ke gelap akan membuat ikon merek situs (misalnya DHLab) tampak abu-abu gelap, yang direkomendasikan untuk halaman dengan latar belakang terang.
Bidang Kustom
Accepted values:
* light
* dark
light
Menyetel nilai NavigationButton ke terang akan membuat tombol menu navigasi situs (yaitu ikon "hamburger") tampak putih, yang direkomendasikan untuk halaman dengan latar belakang gelap (contoh bidang NavigationButton terang).
dark
Menyetel nilai NavigationButton ke gelap akan membuat tombol menu navigasi situs (yaitu ikon "hamburger") tampak abu-abu gelap, yang direkomendasikan untuk halaman dengan latar belakang terang.
Bidang Kustom
Accepted values:
* A fully-qualified url to an iframe
Postingan dengan nilai pengontrol perjalanan material dapat menggunakan iframe untuk mengisi representasi halaman penuh dari domain iframe di belakang kolom teks (contoh tampilan). Untuk melakukannya, seseorang hanya perlu menetapkan nilai iframe ke halaman yang ingin Anda tampilkan (contoh bidang iframe).
Halaman beranda situs terdiri dari serangkaian ikon yang melapisi gambar pusat (contoh ikon halaman beranda). Konten dalam ikon-ikon ini dan posisi ikon-ikon ini ditentukan oleh postingan dengan bidang metadata berikut:
Bidang Bawaan
Judul setiap ikon di halaman beranda ditentukan oleh kolom judul postingan Wordpress tradisional (contoh kolom judul). Mengikuti judul dengan » menghasilkan tampilan visual yang bagus.
Bidang Bawaan
Konten teks untuk ikon halaman beranda ditentukan oleh bidang konten teks Wordpress tradisional (contoh bidang teks).
Bidang Kustom
Accepted values:
* home
Setiap ikon di halaman beranda harus memiliki nilai pengontrol yang disetel ke beranda (contoh bidang pengontrol).
Bidang Kustom
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Setiap nilai DestinationController mengontrol rute ke mana pengguna harus diarahkan ketika mengklik link dalam ikon beranda yang diberikan. Menetapkan DestinationController ikon beranda ke perjalanan material, misalnya, akan memastikan pengguna diarahkan ke rute perjalanan material setelah mengeklik tautan ikon beranda (contoh bidang DestinationController).
Bidang Kustom
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
DestinationId menunjukkan postingan di dalam DestinationController ke mana pengguna harus dirutekan setelah mengeklik tautan di dalam ikon beranda yang diberikan. Menetapkan DestinationController ikon beranda ke material-journeys dan DestinationId ke 3, misalnya, akan memastikan pengguna yang mengeklik tautan ikon beranda dikirim ke postingan yang diberi nilai pengontrol material-journeys dan nilai pesanan 3 (contoh kolom DestinationId) .
Bidang Kustom
Accepted values:
* A decimal value between 0 and 1
Nilai xOffset ikon beranda menunjukkan di mana ikon harus diposisikan di atas gambar beranda pada sumbu x. Menetapkan nilai ini ke 0 akan memastikan ikon diposisikan di sepanjang tepi paling kiri gambar, menetapkan nilai ke 1 akan memastikan ikon diposisikan di sepanjang tepi paling kanan gambar, dan mengatur nilai ke desimal di antara 0 dan 1 akan memposisikan ikon dalam spektrum yang dibatasi oleh dua titik tersebut (contoh bidang xOffset).
Bidang Kustom
Accepted values:
* A decimal value between 0 and 1
Nilai yOffset ikon beranda menunjukkan di mana ikon harus diposisikan di atas gambar beranda pada sumbu y. Menetapkan nilai ini ke 0 akan memastikan ikon diposisikan di sepanjang tepi paling atas gambar, menetapkan nilai ke 1 akan memastikan ikon diposisikan di sepanjang tepi paling bawah gambar, dan mengatur nilai ke desimal di antara keduanya. 0 dan 1 akan menempatkan ikon dalam spektrum yang dibatasi oleh dua titik tersebut (contoh bidang yOffset).
Contoh pengembangan repositori ini dapat ditemukan di sini.
Aplikasi ini dibangun pada runtime Node.js, jadi seseorang perlu menginstalnya untuk menggunakan kode sumber ini. Untuk memeriksa apakah Anda telah menginstal Node.js di mesin Anda, Anda dapat menjalankan:
which node
Jika Anda mendapat respons yang menunjukkan node bukan perintah yang dikenali, Anda harus menginstal Node.js.
Setelah Node diinstal, Anda dapat mengkloning kode sumber, menginstal dependensi, dan memulai server web lokal dengan perintah berikut:
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
Jika Anda kemudian membuka browser dan menavigasi ke localhost:8000, Anda akan melihat aplikasi tersebut. Anda dapat mengakhiri server lokal ini kapan saja dengan menekan CTRL+C di jendela terminal tempat server sedang berjalan.
Setelah membuat perubahan pada database Wordpress Anda, Anda dapat melihat pratinjau perubahan dengan menarik json dari server Wordpress ke mesin lokal Anda dengan perintah berikut:
npm run build-content {{username}} {{password}}
Di sini {{username}} dan {{password}} mengacu pada string nama pengguna dan kata sandi yang akan Anda masukkan untuk mengakses url situs yang dilindungi kata sandi.
Jika kolom dalam database Wordpress diatur sesuai dengan panduan di atas, Anda akan melihat pesan konfirmasi bahwa json untuk setiap pengontrol telah ditulis. Jika Anda menerima pesan kesalahan validasi, harap perbaiki bidang metadata yang terpengaruh dan jalankan kembali perintah npm run build-content.
Setelah menulis json baru ke mesin lokal Anda, Anda dapat melihat pratinjau perubahannya dengan menyegarkan browser Anda. Jika Anda menavigasi ke rute/postingan yang Anda ubah di database Wordpress, Anda akan melihat nilai atau konten baru ditampilkan.
Jika anggota tim lain telah membuat perubahan pada kode aplikasi dan telah mengunggah perubahan tersebut ke GitHub, Anda dapat menarik dan menggabungkan perubahan tersebut dengan perubahan Anda sendiri menggunakan perintah berikut.
Pertama, Anda dapat menambahkan dan melakukan perubahan apa pun yang mungkin Anda buat pada repositori lokal Anda dengan perintah berikut:
git add .
git commit -m "type a message indicating the changes you made here"
Kemudian, untuk melakukan perubahan terbaru pada cabang master di GitHub, Anda dapat menjalankan:
git pull origin master
Ini akan membuka editor teks baris perintah vim, meminta Anda mengetik "pesan komit" ke layar. Anda dapat melakukannya dengan menekan i (yang memindahkan editor teks vim ke mode Sisipkan), diikuti dengan panah bawah (yang memindahkan kursor ke bawah satu baris dalam dokumen teks), diikuti dengan pesan ke sesama anggota tim (misalnya " menggabungkan master jarak jauh ke master lokal"), diikuti oleh ESCAPE :wq ENTER .
Untuk menggabungkan cabang di GitHub yang belum digabungkan ke dalam cabang master di Github, Anda dapat menjalankan:
git pull origin {{branch-name}}
Setelah Anda puas dengan tampilan kontennya, Anda dapat menerapkan perubahan ke server yang diterapkan dengan menjalankan:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Ini akan mengganti file di server jauh dengan salinan lokal dari file tersebut.
