gathering a building
1.0.0
Ce projet a été développé dans le cadre d'une phase précédente du Yale Digital Humanities Lab. Faisant désormais partie du département Méthodes et données informatiques de la bibliothèque de Yale, le laboratoire n'inclut plus ce projet dans son périmètre de travail. En tant que tel, il ne recevra aucune autre mise à jour. Il existe un site Web en direct qui utilise ce code. Lorsque ce site Web tombe en panne, il sera supprimé du Web.
Ce référentiel contient le code source d'une application Web qui détaille certains aspects de l'architecture de l'Université de Yale. L'application est construite sur une interface Angular 1 qui présente les données cartographiques d'un serveur CartoDB et les ressources multimédias d'un backend d'API Wordpress.
Les utilisateurs administrateurs peuvent mettre à jour les données affichées sur le site en visitant l'interface d'administration du site. Une fois connectés, les utilisateurs peuvent établir les données à afficher sur le site en créant et en modifiant des publications à l'aide des champs de métadonnées suivants :
Champ par défaut
Le titre de chaque article est défini par le champ de titre d'article traditionnel de Wordpress (exemple de champ de titre)
Champ par défaut
Le contenu du texte de chaque article est défini par le champ de contenu de texte traditionnel de Wordpress (exemple de champ de paragraphes).
Champ personnalisé
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
Le champ du contrôleur dans une publication contrôle où cette publication sera affichée dans la navigation du site : c'est-à-dire si la publication apparaîtra sous www.mydomain.com/routes/historical-geography ou www.mydomain.com/routes/people-and-places. , ou un autre itinéraire sur le site (exemple de champ de contrôleur).
Champ personnalisé
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
Le champ d'ordre dans une publication contrôle où la publication sera présentée dans un itinéraire, c'est-à-dire l'ordre dans lequel les sections apparaîtront dans la colonne de texte lorsque l'utilisateur fait défiler le contenu d'un itinéraire donné.
Étant donné toutes les publications partageant un contrôleur, on peut définir l'ordre dans lequel elles apparaîtront en attribuant à la publication qui doit apparaître en premier une valeur d'ordre de 0, à la publication suivante qui doit apparaître une valeur d'ordre de 1, et ainsi de suite. Veuillez noter que les valeurs de commande en double ne sont pas acceptées (exemple de champ de commande).
Champ personnalisé
Accepted values:
* table-of-contents
* text
Le champ sectionType dans une publication indique si la publication donnée représente la section de table des matières pour un contrôleur particulier ou une section textuelle pour ce contrôleur.
table-of-contents
Si la valeur sectionType d'un article est définie sur table des matières (exemple de champ de table des matières), la colonne de texte de cette section sera représentée sous la forme d'une série de liens suivis d'un seul paragraphe d'introduction à la section (exemple d'affichage) . Pour créer une table des matières, il faut identifier tous les articles d'un contrôleur donné, puis créer un paragraphe dans la zone de texte principale de Wordpress pour chaque section du contrôleur qui suit la table des matières (exemple de contenu des paragraphes de la table des matières ).
text
Si la valeur sectionType d'un article est définie sur texte (exemple de champ de texte), la colonne de texte de cette section sera représentée comme une série de paragraphes traditionnels (exemple d'affichage). Pour créer un article de texte, il suffit de saisir des paragraphes dans le champ de texte traditionnel de Wordpress (exemple de contenu de paragraphes de texte).
Champ personnalisé
Accepted values:
* one-div-container
* three-div-container
* four-div-container
Le champ modèle dans une publication indique le type de contenu à afficher derrière la colonne de texte. Il existe trois options :
one-div-container
Si la valeur du modèle d'une publication est définie sur one-div-container, son arrière-plan sera une image d'arrière-plan pleine page (exemple d'affichage). L'image d'arrière-plan est déterminée par l'image sélectionnée pour la publication donnée (exemple de champ one-div-container).
three-div-container
Si la valeur du modèle d'une publication est définie sur three-div-container, son arrière-plan sera composé de trois éléments représentés sur le côté droit de l'écran (exemple d'affichage). Le contenu de ces éléments est défini par les champs personnalisés suivants : topImage , bottomImage , topCaption , bottomCaption . Les champs topImage et bottomImage sont des chemins complets vers les fichiers image, tandis que les champs topCaption et bottomCaption sont des champs de légende en texte brut. (exemple de champ conteneur à trois div)
four-div-container
Si la valeur du modèle d'une publication est définie sur four-div-container, son arrière-plan sera composé de quatre images pleine hauteur liées aux sections du contrôleur donné (exemple d'affichage). Les images d'arrière-plan de ce modèle d'arrière-plan sont déterminées par le champ introImage dans les publications de ce contrôleur. Par exemple, l'exemple d'affichage lié plus haut dans ce paragraphe montre une page avec quatre images d'arrière-plan : béton, pierre, brique et verre. La première de ces images (concrète) est définie par la valeur introImage dans la publication qui a une valeur d'ordre de 1 (car il s'agit du premier message à apparaître après la table des matières). Dans la publication avec une valeur d'ordre de 1, l'image à représenter dans le conteneur quatre-div est spécifiée dans le champ personnalisé introImage (exemple de champ conteneur quatre-div)
Champ personnalisé
Accepted values:
* light
* dark
light
En définissant la valeur brandIcon sur clair, l'icône de la marque du site (par exemple DHLab) apparaît en blanc, ce qui est recommandé pour les pages avec un arrière-plan sombre (exemple de champ brandIcon clair).
dark
En définissant la valeur brandIcon sur dark, l'icône de la marque du site (par exemple DHLab) apparaît en gris foncé, ce qui est recommandé pour les pages avec un arrière-plan clair.
Champ personnalisé
Accepted values:
* light
* dark
light
Définir la valeur navigationButton sur light fait apparaître le bouton du menu de navigation du site (c'est-à-dire l'icône "hamburger") en blanc, ce qui est recommandé pour les pages avec un arrière-plan sombre (exemple de champ navigationButton clair).
dark
En définissant la valeur de navigationButton sur dark, le bouton du menu de navigation du site (c'est-à-dire l'icône "hamburger") apparaît en gris foncé, ce qui est recommandé pour les pages avec un arrière-plan clair.
Champ personnalisé
Accepted values:
* A fully-qualified url to an iframe
Les publications avec une valeur de contrôleur de parcours matériels peuvent utiliser des iframes pour remplir une représentation pleine page du domaine iframe derrière la colonne de texte (exemple d'affichage). Pour ce faire, il suffit de définir la valeur de iframe sur la page que vous souhaitez afficher (exemple de champ iframe).
La page d'accueil du site est constituée d'une série d'icônes qui se superposent à une image centrale (exemple icône de page d'accueil). Le contenu de ces icônes et la position de ces icônes sont déterminés par les publications avec les champs de métadonnées suivants :
Champ par défaut
Le titre de chaque icône de la page d'accueil est défini par le champ de titre de publication traditionnel de Wordpress (exemple de champ de titre). Après le titre avec » produit un bel affichage visuel.
Champ par défaut
Le contenu du texte de l'icône de la page d'accueil est défini par le champ de contenu de texte traditionnel de Wordpress (exemple de champ de texte).
Champ personnalisé
Accepted values:
* home
Chaque icône de la page d'accueil doit avoir sa valeur de contrôleur définie sur home (exemple de champ de contrôleur).
Champ personnalisé
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Chaque valeur de destinationController contrôle l'itinéraire vers lequel les utilisateurs doivent être dirigés lorsqu'ils cliquent sur le lien dans l'icône d'accueil donnée. Définir le destinationController d'une icône d'accueil sur Material-Journeys, par exemple, garantira que les utilisateurs seront envoyés vers l'itinéraire Material-Journeys après avoir cliqué sur le lien de l'icône d'accueil (exemple de champ DestinationController).
Champ personnalisé
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
Le destinationId indique la publication dans destinationController vers laquelle les utilisateurs doivent être redirigés après avoir cliqué sur le lien dans l'icône d'accueil donnée. Définir le destinationController d'une icône d'accueil sur Material-Journeys et destinationId sur 3, par exemple, garantira que les utilisateurs qui cliquent sur le lien de l'icône d'accueil seront envoyés au poste auquel une valeur de contrôleur de Material-Journeys et une valeur d'ordre de 3 (exemple de champ DestinationId) .
Champ personnalisé
Accepted values:
* A decimal value between 0 and 1
La valeur xOffset d'une icône d'accueil indique l'endroit où l'icône doit être positionnée sur l'image d'accueil sur l'axe X. Définir cette valeur sur 0 garantira que l'icône est positionnée le long du bord le plus à gauche de l'image, définir la valeur sur 1 garantira que l'icône est positionnée le long du bord le plus à droite de l'image et définir la valeur sur une valeur décimale entre 0 et 1 positionneront l'icône dans le spectre délimité par ces deux points (exemple champ xOffset).
Champ personnalisé
Accepted values:
* A decimal value between 0 and 1
La valeur yOffset d'une icône d'accueil indique l'endroit où l'icône doit être positionnée sur l'image d'accueil sur l'axe Y. Définir cette valeur sur 0 garantira que l'icône est positionnée le long du bord le plus haut de l'image, définir la valeur sur 1 garantira que l'icône est positionnée le long du bord le plus bas de l'image et définir la valeur sur une valeur décimale entre 0 et 1 positionneront l'icône dans le spectre délimité par ces deux points (exemple du champ yOffset).
Une instance de développement de ce référentiel peut être trouvée ici.
Cette application est construite sur un runtime Node.js, il faut donc l'installer pour utiliser ce code source. Pour vérifier si Node.js est installé sur votre machine, vous pouvez exécuter :
which node
Si vous obtenez une réponse indiquant que node n'est pas une commande reconnue, vous devrez installer Node.
Une fois Node installé, vous pouvez cloner le code source, installer des dépendances et démarrer un serveur Web local avec les commandes suivantes :
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
Si vous ouvrez ensuite un navigateur et accédez à localhost:8000, vous devriez voir l'application. Vous pouvez mettre fin à ce serveur local à tout moment en appuyant sur CTRL+C dans la fenêtre de terminal dans laquelle le serveur s'exécute.
Après avoir apporté des modifications à votre base de données Wordpress, vous pouvez prévisualiser les modifications en extrayant json du serveur Wordpress vers votre ordinateur local avec la commande suivante :
npm run build-content {{username}} {{password}}
Ici, {{username}} et {{password}} font référence aux chaînes de nom d'utilisateur et de mot de passe que vous saisiriez pour accéder à l'URL du site protégé par mot de passe.
Si les champs de la base de données Wordpress sont définis conformément au guide ci-dessus, vous devriez voir des messages de confirmation indiquant que le json de chaque contrôleur a été écrit. Si vous avez reçu un message d'erreur de validation, veuillez réviser les champs de métadonnées concernés et réexécuter la commande npm run build-content.
Après avoir écrit le nouveau json sur votre ordinateur local, vous pouvez prévisualiser les modifications en actualisant votre navigateur. Si vous accédez aux itinéraires/posts que vous avez modifiés dans la base de données Wordpress, vous devriez voir les nouvelles valeurs ou le nouveau contenu affichés.
Si d'autres membres de l'équipe ont apporté des modifications au code de l'application et ont téléchargé ces modifications sur GitHub, vous pouvez extraire et fusionner ces modifications avec les vôtres à l'aide des commandes suivantes.
Tout d'abord, vous pouvez ajouter et valider toutes les modifications que vous avez pu apporter à votre référentiel local avec la commande suivante :
git add .
git commit -m "type a message indicating the changes you made here"
Ensuite, pour extraire les dernières modifications sur la branche master sur GitHub, vous pouvez exécuter :
git pull origin master
Cela ouvrira l'éditeur de texte de ligne de commande vim, vous invitant à saisir un "message de validation" sur l'écran. Vous pouvez le faire en appuyant sur i (ce qui déplace l'éditeur de texte vim en mode Insertion), suivi de la flèche vers le bas (qui déplace le curseur d'une ligne vers le bas dans le document texte), suivi d'un message aux autres membres de votre équipe (par exemple " fusion du maître distant avec le maître local"), suivi de ESCAPE :wq ENTER .
Pour fusionner à la place une branche sur GitHub qui n'a pas été fusionnée dans la branche master sur Github, vous pouvez exécuter :
git pull origin {{branch-name}}
Une fois que vous êtes satisfait de l'apparence du contenu, vous pouvez transmettre vos modifications au serveur déployé en exécutant :
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Cela remplacera les fichiers sur le serveur distant par vos copies locales de ces fichiers.
