gathering a building
1.0.0
Este projeto foi desenvolvido no âmbito de uma fase anterior do Yale Digital Humanities Lab. Agora parte do departamento de Métodos e Dados Computacionais da Biblioteca de Yale, o Laboratório não inclui mais este projeto em seu escopo de trabalho. Como tal, não receberá mais atualizações. Existe um site ativo que usa esse código. Quando este site quebrar, ele será removido da web.
Este repositório contém o código-fonte de uma aplicação web que detalha aspectos da arquitetura da Universidade de Yale. O aplicativo é construído em um frontend Angular 1 que apresenta dados cartográficos de um servidor CartoDB e ativos multimídia de um backend de API Wordpress.
Os usuários administradores podem atualizar os dados exibidos no site visitando a interface administrativa do site. Após o login, os usuários podem estabelecer os dados a serem exibidos no site, criando e editando postagens utilizando os seguintes campos de metadados:
Campo padrão
O título de cada postagem é definido pelo tradicional campo de título da postagem do Wordpress (exemplo de campo de título)
Campo padrão
O conteúdo de texto de cada postagem é definido pelo campo de conteúdo de texto tradicional do Wordpress (campo de parágrafos de exemplo).
Campo personalizado
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
O campo controlador dentro de uma postagem controla onde essa postagem será exibida na navegação do site: ou seja, se a postagem aparecerá em www.mydomain.com/routes/historical-geography ou www.mydomain.com/routes/people-and-places , ou alguma outra rota no site (exemplo de campo do controlador).
Campo personalizado
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
O campo de ordem dentro de uma postagem controla onde a postagem será apresentada dentro de uma rota, ou seja, a ordem em que as seções aparecerão na coluna de texto conforme o usuário percorre o conteúdo de uma determinada rota.
Dadas todas as postagens que compartilham um controlador, pode-se definir a ordem em que elas aparecerão, atribuindo à postagem que deve aparecer primeiro um valor de ordem 0, à próxima postagem que deve aparecer um valor de ordem 1 e assim por diante. Observe que valores de pedidos duplicados não são aceitos (exemplo de campo de pedido).
Campo personalizado
Accepted values:
* table-of-contents
* text
O campo sectionType em uma postagem indica se a postagem fornecida representa a seção do índice de um controlador específico ou uma seção baseada em texto para esse controlador.
table-of-contents
Se o valor sectionType de uma postagem for definido como índice (campo de índice de exemplo), a coluna de texto dessa seção será representada como uma série de links seguidos por uma introdução de parágrafo único para a seção (exemplo de exibição) . Para criar um índice, deve-se identificar todas as postagens para um determinado controlador e, em seguida, criar um parágrafo na caixa de texto principal do Wordpress para cada seção dentro do controlador que segue o índice (exemplo de parágrafos de índice conteúdo ).
text
Se o valor sectionType de uma postagem for definido como texto (campo de texto de exemplo), a coluna de texto dessa seção será representada como uma série de parágrafos tradicionais (exibição de exemplo). Para criar uma postagem de texto, basta inserir parágrafos no campo de texto tradicional do Wordpress (exemplo de conteúdo de parágrafos de texto).
Campo personalizado
Accepted values:
* one-div-container
* three-div-container
* four-div-container
O campo de modelo em uma postagem indica o tipo de conteúdo a ser exibido atrás da coluna de texto. Existem três opções:
one-div-container
Se o valor do modelo de uma postagem for definido como one-div-container, seu plano de fundo será uma imagem de plano de fundo de página inteira (exemplo de exibição). A imagem de fundo é determinada pela imagem em destaque para a postagem específica (exemplo: campo one-div-container).
three-div-container
Se o valor do modelo de uma postagem for definido como three-div-container, seu plano de fundo consistirá em três elementos representados no lado direito da tela (exemplo de exibição). O conteúdo desses elementos é definido pelos seguintes campos personalizados: topImage , bottomImage , topCaption , bottomCaption . Os campos topImage e bottomImage são caminhos completos para arquivos de imagem, enquanto os campos topCaption e bottomCaption são campos de legenda em texto simples. (exemplo de campo de contêiner de três div)
four-div-container
Se o valor do modelo de uma postagem for definido como four-div-container, seu plano de fundo consistirá em quatro imagens de altura total vinculadas a seções dentro do controlador fornecido (exemplo de exibição). As imagens de fundo para este modelo de fundo são determinadas pelo campo introImage nas postagens deste controlador. Por exemplo, o exemplo de exibição vinculado anteriormente neste parágrafo mostra uma página com quatro imagens de fundo: concreto, pedra, tijolo e vidro. A primeira dessas imagens (concreta) é definida pelo valor introImage dentro da postagem que tem um valor de ordem 1 (pois esta é a primeira postagem a aparecer após o índice). Dentro da postagem com valor de pedido 1, a imagem a ser representada no four-div-container é especificada no campo personalizado introImage (exemplo de campo four-div-container)
Campo personalizado
Accepted values:
* light
* dark
light
Definir o valor brandIcon como light faz com que o ícone da marca do site (por exemplo, DHLab) apareça em branco, o que é recomendado para páginas com fundos escuros (exemplo: campo brandIcon claro).
dark
Definir o valor brandIcon como escuro faz com que o ícone da marca do site (por exemplo, DHLab) apareça em cinza escuro, o que é recomendado para páginas com fundos claros.
Campo personalizado
Accepted values:
* light
* dark
light
Definir o valor navigationButton como light faz com que o botão do menu de navegação do site (ou seja, o ícone "hambúrguer") apareça em branco, o que é recomendado para páginas com fundos escuros (exemplo, campo light navigationButton).
dark
Definir o valor de navigationButton como escuro faz com que o botão do menu de navegação do site (ou seja, o ícone "hambúrguer") apareça em cinza escuro, o que é recomendado para páginas com fundos claros.
Campo personalizado
Accepted values:
* A fully-qualified url to an iframe
Postagens com um valor de controlador de jornadas materiais podem usar iframes para preencher uma representação de página inteira do domínio iframed atrás da coluna de texto (exemplo de exibição). Para fazer isso, basta definir o valor do iframe para a página que deseja exibir (exemplo de campo iframe).
A página inicial do site consiste em uma série de ícones que se sobrepõem a uma imagem central (exemplo: ícone da página inicial). O conteúdo desses ícones e a posição deles são determinados por postagens com os seguintes campos de metadados:
Campo padrão
O título de cada ícone na página inicial é definido pelo tradicional campo de título de postagem do Wordpress (exemplo de campo de título). Seguindo o título com » produz uma bela exibição visual.
Campo padrão
O conteúdo de texto do ícone da página inicial é definido pelo campo de conteúdo de texto tradicional do Wordpress (campo de texto de exemplo).
Campo personalizado
Accepted values:
* home
Cada ícone na página inicial deve ter seu valor de controlador definido como home (exemplo de campo de controlador).
Campo personalizado
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Cada valor de destinationController controla a rota para a qual os usuários devem ser direcionados ao clicar no link dentro do ícone inicial fornecido. Definir o destinationController de um ícone inicial para jornadas de material, por exemplo, garantirá que os usuários sejam enviados para a rota de jornadas de material após clicar no link do ícone inicial (exemplo de campo destinationController).
Campo personalizado
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
O destinationId indica a postagem dentro do destinationController para a qual os usuários devem ser roteados após clicar no link dentro do ícone inicial fornecido. Definir o destinationController de um ícone de casa como material-journeys e destinationId como 3, por exemplo, garantirá que os usuários que clicarem no link do ícone de casa sejam enviados para a postagem com um valor de controlador de jornadas de material e um valor de pedido de 3 (exemplo de campo destinationId) .
Campo personalizado
Accepted values:
* A decimal value between 0 and 1
O valor xOffset de um ícone inicial indica onde o ícone deve ser posicionado sobre a imagem inicial no eixo x. Definir este valor como 0 garantirá que o ícone seja posicionado ao longo da borda mais à esquerda da imagem, definir o valor como 1 garantirá que o ícone seja posicionado ao longo da borda mais à direita da imagem e definir o valor como um decimal entre 0 e 1 posicionarão o ícone dentro do espectro delimitado por esses dois pontos (exemplo de campo xOffset).
Campo personalizado
Accepted values:
* A decimal value between 0 and 1
O valor yOffset de um ícone inicial indica onde o ícone deve ser posicionado sobre a imagem inicial no eixo y. Definir este valor como 0 garantirá que o ícone seja posicionado ao longo da borda superior da imagem, definir o valor como 1 garantirá que o ícone seja posicionado ao longo da borda inferior da imagem e definir o valor como um decimal entre 0 e 1 posicionarão o ícone dentro do espectro delimitado por esses dois pontos (exemplo, campo yOffset).
Uma instância de desenvolvimento deste repositório pode ser encontrada aqui.
Este aplicativo é construído em um tempo de execução Node.js, portanto, é necessário tê-lo instalado para usar este código-fonte. Para verificar se você possui o Node.js instalado em sua máquina, você pode executar:
which node
Se você receber uma resposta indicando que o node não é um comando reconhecido, você precisará instalar o Node.
Depois que o Node estiver instalado, você pode clonar o código-fonte, instalar dependências e iniciar um servidor web local com os seguintes comandos:
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
Se você abrir um navegador e navegar até localhost:8000, deverá ver o aplicativo. Você pode encerrar este servidor local a qualquer momento pressionando CTRL+C na janela do terminal em que o servidor está sendo executado.
Depois de fazer alterações em seu banco de dados Wordpress, você pode visualizar as alterações puxando o json do servidor Wordpress para sua máquina local com o seguinte comando:
npm run build-content {{username}} {{password}}
Aqui, {{username}} e {{password}} referem-se às strings de nome de usuário e senha que você inseriria para acessar o URL do site protegido por senha.
Se os campos no banco de dados Wordpress estiverem configurados de acordo com o guia acima, você deverá ver mensagens de confirmação de que o json de cada controlador foi escrito. Se você recebeu uma mensagem de erro de validação, revise os campos de metadados afetados e execute o comando npm run build-content novamente.
Depois de gravar o novo json em sua máquina local, você poderá visualizar as alterações atualizando seu navegador. Se você navegar até as rotas/postagens que você alterou no banco de dados Wordpress, deverá ver os novos valores ou conteúdo exibidos.
Se outros membros da equipe fizeram alterações no código do aplicativo e carregaram essas alterações no GitHub, você pode baixar e mesclar essas alterações com as suas usando os comandos a seguir.
Primeiro, você pode adicionar e confirmar quaisquer alterações feitas em seu repositório local com o seguinte comando:
git add .
git commit -m "type a message indicating the changes you made here"
Então, para obter as alterações mais recentes no branch master no GitHub, você pode executar:
git pull origin master
Isso abrirá o editor de texto da linha de comando do vim, solicitando que você digite uma “mensagem de confirmação” na tela. Você pode fazer isso pressionando i (que move o editor de texto vim para o modo Inserir), seguido pela seta para baixo (que move o cursor uma linha para baixo no documento de texto), seguido por uma mensagem para seus colegas membros da equipe (por exemplo, " mesclando o mestre remoto com o mestre local"), seguido por ESCAPE :wq ENTER .
Para mesclar um branch no GitHub que não foi mesclado no branch master no Github, você pode executar:
git pull origin {{branch-name}}
Quando estiver satisfeito com a aparência do conteúdo, você poderá enviar suas alterações para o servidor implantado executando:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Isso substituirá os arquivos no servidor remoto pelas cópias locais desses arquivos.
