Labweb (CeWeb.br)

Descrição do site (...)

Dependências

• Ruby (1.9.3 ou maior)
• Git
• Bundler

O W3C-LabWeb utiliza a ferramenta Jekyll para gerar conteúdo estático. O Jekyll é uma rubygem e sua instalação necessita que o Ruby esteja instalado e configurado na máquina local. Também é utilizado o Bundler para gerenciar as dependências do Ruby. O Git é utilizado para clonar o projeto na máquina local e para o deploy.

Instalação

Com as ferramentas instaladas, faça o clone do projeto:

$ git clone https://github.com/W3CBrasil/labweb.git

Acesse a pasta do clone (labweb caso você tenha usado o comando acima) e rode o comando bundle para instalar as dependências:

$ cd labweb
$ bundle

Após a instalação das dependências é hora de iniciar o Jekyll. Ainda dentro da mesma pasta, rode o comando:

$ jekyll serve -w

Isto irá iniciar um servidor local na porta 4000. Para acessar site, basta abrir o seu navegador de preferência e ir até o endereço: http://localhost:4000.

Criando projetos

O Jekyll funciona como uma espécie de blog, em que você pode escrever novos posts utilizando Markdown. Uma vez que um post foi escrito, ele fica disponível no site e pode ser acessado. A atual estrutura faz com que cada post escrito seja um projeto, com autores, categoria e outras configurações.

Para criar um novo projeto, primeiramente é necessário criar um arquivo novo dentro da pasta _posts. Este arquivo deve, preferencialmente, conter o seguinte estrutura no seu nome: ano-mes-dia-titulo-do-projeto.markdown. Por exemplo:

2014-05-08-projeto-exemplo.markdown

Com o arquivo do projeto criado, é necessário definir quais são as suas propriedades. Para isso, deve-se preencher os atributos do projeto:

• layout: project (layout da página de projeto, deixar "project")
• title: Projeto exemplo (título do projeto)
• subtitle: Subtítulo do projeto (subtítulo do projeto)
• date: 2014-09-05 17:49:49 (data de criação do projeto no formato aaaa-mm-dd hh:mm:ss)
• categories: app (categoria do projeto, podendo ser app, experiment ou visualization)
• description: Descrição do projeto que será exibida na listagem de projetos e no cabeçalho de detalhamento do projeto. Aqui, caso necessário, é permitido usar markdown
• authors: ["matias", "lucas", "vinicius"] (lista com os autores envolvidos no projeto, mais informações na seção abaixo, é necessário deixar a listagem na mesma estrutura apresentada neste exemplo)
• thumb: projecto-exemplo.png (imagem da listagem do projeto, o sistema irá procurar uma imagem com este nome dentro de images/project-thumbs/)
• technologies: Ruby, Rails, Javascript (tecnologias utilizadas no projeto)
• authors_tolltip: Kent <br> Martin <br> Robert (nome dos autores que serão exibidos quando o mouse passar por cima do ícone de autores na listagem, separar os autores com a tag <br> para quebra de linha)
• github: https://www.github.com/W3CBrasil/labweb (endereço github do projeto)
• final_version: https://www.google.com (endereço da versão final do projeto)
• status: Lançado em 08/05/2014 (status do projeto)
• raw_data: http://dados.rs.gov.br/ (endereço dos dados utilizados pelo projeto)
• background: "bg-highlight.jpg" (imagem de background que é exibida na página do projeto. a imagem deve ficar em '/images/projects/backgrounds/bg-highlight.jpg')

Estas variáveis precisam ser definidas dentro do escopo do Front Matter, no cabeçalho do arquivo de projeto:

---
variavel: valor
---

Exemplo de arquivo de projeto:

---
layout: project
title: Projeto Exemplo
subtitle: Subtítulo do projeto
date: 2014-09-05 17:49:49
categories: app
description: Descrição do projeto no thumbnail (...)
authors: ["lionelmessi", "cristianoronaldo", "frankribery"]
thumb: project-1.png
technologies: Ruby, Rails, Javascript
authors_tolltip: Kent <br> Martin <br> Robert
github: https://www.github.com/W3CBrasil/labweb
final_version: https://www.google.com
status: Lançado em 08/05/2014
raw_data: http://dados.rs.gov.br/
background: "bg-highlight.jpg"
---

## Projecto Exemplo

O escritório do W3C no Brasil, em parceria com o Governo do Estado do Rio Grande do Sul (...)

Autores

Os autores de cada projeto precisam ser lançados dentro do arquivo _data/authors.yml. Uma vez que eles estiverem cadastrados neste arquivo, suas referências podem ser utilizadas dentro dos projetos.

Este arquivo possui uma estrutura específica que precisa ser respeitada para que funcione corretamente. Segue um exemplo contendo dois autores:

matiasleidemer:
  name: Matias Leidemer
  email: matiasleidemer@servidor.com
  site: http://leidemer.com
  avatar: https://avatars1.githubusercontent.com/u/10559?v=2&s=460
lucasrenan:
  name: Lucas Renan
  email: lucasrenan@servidor.com
  site: http://lucasrenan.com
  avatar: https://avatars3.githubusercontent.com/u/114986?v=2&s=460

As configurações são as seguintes:

• name: Matias Leidemer (nome do autor)
• email: matiasleidemer@servidor.com (email de contato do autor)
• site: http://leidemer.com (site do autor)
• avatar: https://avatars1.githubusercontent.com/u/10559?v=2&s=460 (endereço da foto do autor)

É importante observar a indentação do arquivo. Ela deverá ser respeitada para que o arquivo funcione corretamente.

Uma vez cadastrados, os autores poderão ser referenciados dentro dos projetos através das suas identificações (neste exemplo matiasleidemer e lucasrenan):

---
authors: ["matiasleidemer", "lucasrenan"]
---

Gerador de projetos

É possível utilizar um gerador de projetos para agilizar o processo. Para isso, basta rodar o seguinte comando dentro da pasta do projeto:

$ thor project:generate "Projeto de exemplo"

O comando irá gerar um arquivo dentro da pasta _posts com o título e a data automaticamente preenchidos. O exemplo acima geraria o arquivo _posts/2014-09-23-projeto-de-exemplo.markdown.

Este gerator possui, ainda, outra opções. Para uma lista completa das opções, basta rodar thor --help project:generate.

Outro exemplo com o gerador, agora utilizando algumas opções disponíveis:

$ thor project:generate "Projeto Teste" --category="app" --technologies="Ruby, C, Obj-C"

Aqui será gerado o arquivo de Projeto Teste com a categoria setada para app e com as tecnologias setadas para Ruby, C, Obj-C.

Staging

http://mighty-lake-7649.herokuapp.com/

Staging deploy

git push heroku master (or the remote name you created.) If you need access to the heroku repo, ping @matiasleidemer