gathering a building
1.0.0
Dieses Projekt wurde im Rahmen einer früheren Phase des Yale Digital Humanities Lab entwickelt. Das Labor ist nun Teil der Abteilung für Computermethoden und Daten der Yale Library und umfasst dieses Projekt nicht mehr in seinem Arbeitsumfang. Daher wird es keine weiteren Updates erhalten. Es gibt eine Live-Website, die diesen Code verwendet. Wenn diese Website kaputt geht, wird sie aus dem Web entfernt.
Dieses Repository enthält den Quellcode für eine Webanwendung, die Aspekte der Architektur der Yale University detailliert beschreibt. Die Anwendung basiert auf einem Angular 1-Frontend, das kartografische Daten von einem CartoDB-Server und Multimedia-Assets von einem Wordpress-API-Backend präsentiert.
Admin-Benutzer können die auf der Site angezeigten Daten aktualisieren, indem sie die Admin-Oberfläche der Site besuchen. Nach der Anmeldung können Benutzer festlegen, welche Daten auf der Website angezeigt werden sollen, indem sie Beiträge mithilfe der folgenden Metadatenfelder erstellen und bearbeiten:
Standardfeld
Der Titel jedes Beitrags wird durch das herkömmliche WordPress-Beitragstitelfeld definiert (Beispieltitelfeld).
Standardfeld
Der Textinhalt für jeden Beitrag wird durch das herkömmliche Textinhaltsfeld von Wordpress definiert (Beispielfeld „Absätze“).
Benutzerdefiniertes Feld
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
Das Controller-Feld innerhalb eines Beitrags steuert, wo dieser Beitrag in der Site-Navigation angezeigt wird: z. B. ob der Beitrag unter www.mydomain.com/routes/historical-geography oder www.mydomain.com/routes/people-and-places erscheint , oder eine andere Route auf der Site (Beispiel: Controller-Feld).
Benutzerdefiniertes Feld
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
Das Feld „Reihenfolge“ innerhalb eines Beitrags steuert, wo der Beitrag innerhalb einer Route präsentiert wird, dh die Reihenfolge, in der Abschnitte in der Textspalte erscheinen, wenn der Benutzer durch den Inhalt für eine bestimmte Route scrollt.
Da sich alle Beiträge einen Controller teilen, kann man die Reihenfolge festlegen, in der sie erscheinen sollen, indem man dem Beitrag, der zuerst erscheinen soll, einen Bestellwert von 0, dem nächsten Beitrag, der erscheinen soll, einen Bestellwert von 1 usw. gibt. Bitte beachten Sie, dass doppelte Bestellwerte nicht akzeptiert werden (Beispiel-Bestellfeld).
Benutzerdefiniertes Feld
Accepted values:
* table-of-contents
* text
Das sectionType-Feld innerhalb eines Beitrags gibt an, ob der angegebene Beitrag den Inhaltsverzeichnisabschnitt für einen bestimmten Controller oder einen textbasierten Abschnitt für diesen Controller darstellt.
table-of-contents
Wenn der sectionType-Wert eines Beitrags auf „Inhaltsverzeichnis“ (Beispiel-Inhaltsverzeichnisfeld) festgelegt ist, wird die Textspalte für diesen Abschnitt als eine Reihe von Links gefolgt von einer einzelnen Absatzeinleitung zum Abschnitt dargestellt (Beispielanzeige). . Um ein Inhaltsverzeichnis zu erstellen, sollte man alle Beiträge für einen bestimmten Controller identifizieren und dann einen Absatz im Haupttextfeld von Wordpress für jeden Abschnitt innerhalb des Controllers erstellen, der auf das Inhaltsverzeichnis folgt (Beispielinhalt für Absätze im Inhaltsverzeichnis). ).
text
Wenn der sectionType-Wert eines Beitrags auf Text gesetzt ist (Beispieltextfeld), wird die Textspalte für diesen Abschnitt als eine Reihe traditioneller Absätze dargestellt (Beispielanzeige). Um einen Textbeitrag zu erstellen, muss man einfach Absätze in das herkömmliche Textfeld von Wordpress eingeben.
Benutzerdefiniertes Feld
Accepted values:
* one-div-container
* three-div-container
* four-div-container
Das Vorlagenfeld innerhalb eines Beitrags gibt die Art des Inhalts an, der hinter der Textspalte angezeigt werden soll. Es gibt drei Möglichkeiten:
one-div-container
Wenn der Vorlagenwert eines Beitrags auf one-div-container festgelegt ist, ist sein Hintergrund ein ganzseitiges Hintergrundbild (Beispielanzeige). Das Hintergrundbild wird durch das hervorgehobene Bild für den jeweiligen Beitrag bestimmt (Beispiel: Ein-Div-Container-Feld).
three-div-container
Wenn der Vorlagenwert eines Beitrags auf „Three-Div-Container“ eingestellt ist, besteht sein Hintergrund aus drei Elementen, die auf der rechten Seite des Bildschirms dargestellt werden (Beispielanzeige). Der Inhalt dieser Elemente wird durch die folgenden benutzerdefinierten Felder festgelegt: topImage , bottomImage , topCaption , bottomCaption . Sowohl die Felder „topImage“ als auch „bottomImage“ sind vollständige Pfade zu Bilddateien, während die Felder „topCaption“ und „bottomCaption“ Klartext-Beschriftungsfelder sind. (Beispiel für ein Feld mit drei Div-Containern)
four-div-container
Wenn der Vorlagenwert eines Beitrags auf „four-div-container“ festgelegt ist, besteht sein Hintergrund aus vier Bildern voller Höhe, die mit Abschnitten innerhalb des angegebenen Controllers verknüpft sind (Beispielanzeige). Die Hintergrundbilder für diese Hintergrundvorlage werden durch das Feld introImage in Beiträgen für diesen Controller bestimmt. Die oben in diesem Absatz verlinkte Beispielanzeige zeigt beispielsweise eine Seite mit vier Hintergrundbildern: Beton, Stein, Ziegel und Glas. Das erste dieser Bilder (konkret) wird durch den introImage-Wert innerhalb des Beitrags definiert, der einen Bestellwert von 1 hat (da dies der erste Beitrag ist, der nach dem Inhaltsverzeichnis erscheint). Innerhalb des Beitrags mit einem Bestellwert von 1 wird das Bild, das im Four-Div-Container dargestellt werden soll, im benutzerdefinierten Feld „introImage“ (Beispiel „Four-Div-Container“-Feld) angegeben.
Benutzerdefiniertes Feld
Accepted values:
* light
* dark
light
Wenn Sie den brandIcon-Wert auf „hell“ setzen, wird das Markensymbol der Website (z. B. DHLab) weiß angezeigt. Dies wird für Seiten mit dunklem Hintergrund empfohlen (z. B. ein helles brandIcon-Feld).
dark
Wenn Sie den brandIcon-Wert auf „dark“ setzen, erscheint das Markensymbol der Website (z. B. DHLab) dunkelgrau, was für Seiten mit hellem Hintergrund empfohlen wird.
Benutzerdefiniertes Feld
Accepted values:
* light
* dark
light
Wenn Sie den Wert „navigationButton“ auf „hell“ setzen, erscheint die Navigationsmenüschaltfläche der Site (d. h. das „Hamburger“-Symbol) weiß, was für Seiten mit dunklem Hintergrund empfohlen wird (Beispiel: helles navigationButton-Feld).
dark
Wenn Sie den Wert „navigationButton“ auf „dunkel“ setzen, erscheint die Navigationsmenüschaltfläche der Website (d. h. das „Hamburger“-Symbol) dunkelgrau, was für Seiten mit hellem Hintergrund empfohlen wird.
Benutzerdefiniertes Feld
Accepted values:
* A fully-qualified url to an iframe
Beiträge mit einem Controller-Wert von material-journeys können Iframes verwenden, um eine ganzseitige Darstellung der Iframe-Domäne hinter der Textspalte zu füllen (Beispielanzeige). Dazu muss man lediglich den Wert von iframe auf die Seite setzen, die man anzeigen möchte (Beispiel-Iframe-Feld).
Die Homepage der Site besteht aus einer Reihe von Symbolen, die ein zentrales Bild überlagern (Beispiel: Homepage-Symbol). Der Inhalt dieser Symbole und die Position dieser Symbole werden durch Beiträge mit den folgenden Metadatenfeldern bestimmt:
Standardfeld
Der Titel jedes Symbols auf der Startseite wird durch das traditionelle WordPress-Beitragstitelfeld (Beispieltitelfeld) definiert. Nach dem Titel mit » erzeugt eine schöne visuelle Darstellung.
Standardfeld
Der Textinhalt für das Homepage-Symbol wird durch das herkömmliche Wordpress-Textinhaltsfeld (Beispieltextfeld) definiert.
Benutzerdefiniertes Feld
Accepted values:
* home
Für jedes Symbol auf der Startseite muss der Controller-Wert auf „Home“ gesetzt sein (Beispiel-Controller-Feld).
Benutzerdefiniertes Feld
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Jeder Wert von „destinationController“ steuert die Route, zu der Benutzer weitergeleitet werden sollen, wenn sie auf den Link im angegebenen Home-Symbol klicken. Wenn Sie beispielsweise den „destinationController“ eines Home-Symbols auf „material-journeys“ festlegen, wird sichergestellt, dass Benutzer zur Route „material-journeys“ weitergeleitet werden, nachdem sie auf den Link des Home-Symbols geklickt haben (Beispielfeld „destinationController“).
Benutzerdefiniertes Feld
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
Die DestinationId gibt den Beitrag innerhalb des DestinationControllers an, zu dem Benutzer weitergeleitet werden sollen, nachdem sie auf den Link im angegebenen Home-Symbol geklickt haben. Wenn Sie beispielsweise den „destinationController“ eines Home-Symbols auf „material-journeys“ und die „destinationId“ auf 3 setzen, wird sichergestellt, dass Benutzer, die auf den Link des Home-Symbols klicken, an den Beitrag weitergeleitet werden, dem ein Controller-Wert „material-journeys“ und ein Bestellwert von 3 zugewiesen werden (Beispiel „destinationId“-Feld). .
Benutzerdefiniertes Feld
Accepted values:
* A decimal value between 0 and 1
Der xOffset-Wert eines Home-Symbols gibt an, wo das Symbol über dem Home-Bild auf der x-Achse positioniert werden soll. Wenn Sie diesen Wert auf 0 setzen, wird sichergestellt, dass das Symbol am äußersten linken Rand des Bildes positioniert wird. Wenn Sie den Wert auf 1 setzen, wird sichergestellt, dass das Symbol am äußersten rechten Rand des Bildes positioniert wird, und wenn Sie den Wert auf eine Dezimalzahl dazwischen setzen 0 und 1 positionieren das Symbol innerhalb des Spektrums, das durch diese beiden Punkte begrenzt wird (Beispiel xOffset-Feld).
Benutzerdefiniertes Feld
Accepted values:
* A decimal value between 0 and 1
Der yOffset-Wert eines Home-Symbols gibt an, wo das Symbol über dem Home-Bild auf der y-Achse positioniert werden soll. Wenn Sie diesen Wert auf 0 setzen, wird sichergestellt, dass das Symbol am obersten Rand des Bildes positioniert wird. Wenn Sie den Wert auf 1 setzen, wird sichergestellt, dass das Symbol am untersten Rand des Bildes positioniert ist, und wenn Sie den Wert auf eine Dezimalzahl dazwischen setzen 0 und 1 positionieren das Symbol innerhalb des Spektrums, das durch diese beiden Punkte begrenzt wird (Beispiel: yOffset-Feld).
Eine Entwicklungsinstanz dieses Repositorys finden Sie hier.
Diese Anwendung basiert auf einer Node.js-Laufzeitumgebung. Daher muss diese installiert sein, um diesen Quellcode verwenden zu können. Um zu überprüfen, ob Node.js auf Ihrem Computer installiert ist, können Sie Folgendes ausführen:
which node
Wenn Sie eine Antwort erhalten, die darauf hinweist, dass Node kein erkannter Befehl ist, müssen Sie Node installieren.
Sobald Node installiert ist, können Sie mit den folgenden Befehlen den Quellcode klonen, Abhängigkeiten installieren und einen lokalen Webserver starten:
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
Wenn Sie dann einen Browser öffnen und zu localhost:8000 navigieren, sollte die Anwendung angezeigt werden. Sie können diesen lokalen Server jederzeit beenden, indem Sie in dem Terminalfenster, in dem der Server ausgeführt wird, STRG+C drücken.
Nachdem Sie Änderungen an Ihrer Wordpress-Datenbank vorgenommen haben, können Sie eine Vorschau der Änderungen anzeigen, indem Sie JSON mit dem folgenden Befehl vom Wordpress-Server auf Ihren lokalen Computer ziehen:
npm run build-content {{username}} {{password}}
Hier beziehen sich {{username}} und {{password}} auf die Benutzernamen- und Passwortzeichenfolgen, die Sie eingeben würden, um auf die passwortgeschützte Site-URL zuzugreifen.
Wenn die Felder in der Wordpress-Datenbank gemäß der obigen Anleitung festgelegt sind, sollten Sie Bestätigungsmeldungen sehen, dass der JSON für jeden Controller geschrieben wurde. Wenn Sie eine Validierungsfehlermeldung erhalten haben, überarbeiten Sie bitte die betroffenen Metadatenfelder und führen Sie den Befehl npm run build-content erneut aus.
Nachdem Sie den neuen JSON-Code auf Ihren lokalen Computer geschrieben haben, können Sie eine Vorschau der Änderungen anzeigen, indem Sie Ihren Browser aktualisieren. Wenn Sie zu den Routen/Beiträgen navigieren, die Sie in der Wordpress-Datenbank geändert haben, sollten die neuen Werte oder Inhalte angezeigt werden.
Wenn andere Teammitglieder Änderungen am Anwendungscode vorgenommen und diese Änderungen auf GitHub hochgeladen haben, können Sie diese Änderungen herunterziehen und mit Ihren eigenen zusammenführen, indem Sie die folgenden Befehle verwenden.
Zunächst können Sie mit dem folgenden Befehl alle Änderungen, die Sie möglicherweise an Ihrem lokalen Repository vorgenommen haben, hinzufügen und übernehmen:
git add .
git commit -m "type a message indicating the changes you made here"
Um dann die neuesten Änderungen im Master-Zweig auf GitHub herunterzuladen, können Sie Folgendes ausführen:
git pull origin master
Dadurch wird der vim-Befehlszeilentexteditor geöffnet und Sie werden aufgefordert, eine „Commit-Nachricht“ in den Bildschirm einzugeben. Sie können dies tun, indem Sie i drücken (wodurch der VIM-Texteditor in den Einfügemodus wechselt), gefolgt vom Abwärtspfeil (wodurch der Cursor eine Zeile im Textdokument nach unten bewegt) und anschließend eine Nachricht an Ihre Teamkollegen senden (z. B. „ „Remote-Master mit lokalem Master zusammenführen“), gefolgt von ESCAPE :wq ENTER .
Um stattdessen einen Zweig auf GitHub zusammenzuführen, der nicht mit dem Hauptzweig auf GitHub zusammengeführt wurde, können Sie Folgendes ausführen:
git pull origin {{branch-name}}
Sobald Sie mit dem Aussehen des Inhalts zufrieden sind, können Sie Ihre Änderungen auf den bereitgestellten Server übertragen, indem Sie Folgendes ausführen:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Dadurch werden Dateien auf dem Remote-Server durch Ihre lokalen Kopien dieser Dateien ersetzt.
