tableless / tableless-old-wp

Website do Tableless

Tableless estático baseado em Hugo

Este é o site do Tableless estático. Nada de Wordpress, nem qualquer outro CMS back-end. Os artigos são escritos em Markdown, com um frontmatter em yaml fácil de entender.

Rodando o projeto

Para rodar o projeto você vai precisar do Hugo instalado na sua máquina. Leia o Quick Start direto do site do Hugo para iniciar.

O CSS está usando SASS como pré-processador, para tanto, você precisa ter SASS instalado na máquina. Uma vez instalado, você pode rodar o comando:

sass --watch themes/tableless/static/css/style.sass:themes/tableless/static/css/style.css --style compressed

As vezes quando tento rodar o server do Hugo, acontece de dar um erro no terminal assim: ERROR 2017/09/03 08:56:44 Error: listen tcp 127.0.0.1:1313: socket: too many open files in system

Consegui resolver, eu acho, usando as dicas desse link: https://blog.dekstroza.io/ulimit-shenanigans-on-osx-el-capitan/

Hugo

O gerador que estamos usando agora é o Hugo... um gerador de arquivos estáticos escrito em Go.

Se você quiser contribuir, por favor, clone o projeto e submeta um Pull Request. Mais do que nunca vamos precisar de ajuda agora. Para rodar o projeto, leia o Quick Start do guia do Hugo. É super rápido e não precisa de tanto setup como outros geradores de conteúdo estático.

Submetendo artigos

Se você quer ser um autor, leia nesta página as instruções e submeta seus artigos.

tableless-old-wp's Issues

Modificações no Gerenciador de Tarefas (gulpfile.js)

Oi pessoal, tudo bem? Eu dei uma breve analisada no funcionamento do gulpfile.js e percebi que existem alterações interessantes que posso fazer para agilizar e otimizar as tarefas do Tableless, segue abaixo minhas sugestões:

• Pensei em tornarmos a compilação do SASS mais inteligente alterando a seguinte task. Da qual ela procura por um arquivo .sass na raiz do tema, neste caso o arquivo style.sass.

Mas qual é o problema? Desta maneira teríamos que adicionar manualmente todo arquivo .sass criado no diretório ./wp-content/themes/tableless/assets/css/ no arquivo style.sass, isso faz com que percamos tempo dando imports demasiados no style.sass e prevenimos eventuais bugs, como esquecer de dar o @import no arquivo, por exemplo.

Eu proponho, criarmos um watcher no diretório ./wp-content/themes/tableless/assets/css/, assim, sempre quando criarmos ou alterarmos um arquivo .sass a task será executada e o @import será criado automaticamente (ignora se o arquivo já foi importado), gerando o style.css final já compilado na raiz do tema, isso é feito através do plugin gulp-concat.

• Minificação automática das imagens para diversos formatos, tais como: JPEG, PNG, GIF e SVG. Isso é feito através do plugin gulp-imagemin, de preferência, criar-mos uma rotina para que sempre que uma imagem for modificada ou criada no diretório ./wp-content/themes/tableless/images/, a minificação ocorra apenas para aquela imagem (desta maneira economizamos tempo e memória da máquina, não tendo que re-minificar todas as imagens, sempre que alguma for alterada), isto é feito através do plugin gulp-changed.
• Por mais atencioso que seja o desenvolvedor, eventualmente nós precisamos conferir os arquivos compilados ou as imagens minificadas em tal período do dia, mas como podemos consultar isso? A maneira mais prática, na minha opinião, é criando um log na linha de comando, nos informando quais arquivos foram atualizados naquela requisição, isso é feito através do plugin gulp-print.

Eu ainda não comecei a "codar", pois gostaria de saber a opinião da comunidade a respeito dessas sugestões. Qualquer dúvida ou esclarecimento não exitem em me questionar!

Abraço,
João Paulo.

RESOLVED Resultado pesquisa quebrando

#31 O layout da pesquisa esta quebrando com tem muito resultado.

Vejam: http://tableless.com.br/?s=sass

Transformar em SVG ícones da Home, em escolher CATEGORIA

Hoje está como sprites em PNG. A ideia é transformar em SVG e fazer todo esquema de hover e etc.

Problema de diagramação da listagem de últimos posts na home

Parece que é um problema com o elemento figure.

Links Dropbox

Os links para o Dropbox, como o link do banco e o da pasta upload, estão offline :/

Static Generator

Diego, tudo bem?
Já considerou usar um Static Generator (Jekyll, Octopress, Middleman, Ghost e por ai vai) ??

Bug no scroll dos resultados da busca

Efetuando uma busca pelo termo "atomic" o resultado da busca é exibido, porem não é criada barra de scroll nos resultados de busca.
Ao tentar utilizar o scroll da pagina o scroll ocorre no conteudo do fundo do site, mantendo os resultados da pagina fixados na tela.

Observei que pra outros termos como por exemplo: "js" e "css" esse bug não ocorre.

Código "vazando" de seu container

Percebi que quando um código ocupa muitas colunas, ele acaba vazando de seu container, e também gerando um scroll na tela, ao invés de quebrar na linha seguinte.
Link do post --> http://tableless.com.br/utilizando-api-bit-ly-para-gerar-links-encurtados-para-seus-posts-wordpress/

Página invadida

Aparentemente esse usuário foi invadido e esse artigo foi modificado:
https://tableless.com.br/por-que-utilizar-gogolang-no-seu-backend/

Organização do repositório

Tema algum motivo específico pro repositório conter todos os assets do Wordpress? Inclusive os diretórios do wp-admin e wp-include. Quer dizer, não seria mais sensato o repositório ter somente os arquivos do tema em wp-content/themes/tableless?

Isso tem me atrapalhado bastante na hora de contribuir, porque geralmente tenho um servidor Wordpress só para testes (com alguns post genéricos e afins), e como existem outros temas não posso simplesmente dar um push da pasta do tema, acaba que tenho que ficar copiando os arquivos para outro blog wordpress-tableless para mandar as alterações.

Página do Autor

Precisa mostrar todas as informações do autor e os posts que ele escreveu.

Fonte do title "forum" no mobile

Página 404

Não existe hoje. Precisa implementar uma. Pode ser simples, nada de outro mundo.

Busca de Artigos não Funciona

Em visita no site hoje, comecei a ver os artigos mais recentes e resolvi realizar uma busca por Xamarin (próxima tecnologia que estou estudando) e notei que a busca não funcionou no Chrome.

Estou utilizando Chrome v50 x64 e não gerou nenhum erro JS no console. Os únicos erros que aparecem de JS são de plugins analytics, acredito eu e um 404 de uma imagem do tema wordpress.

PS.: No Firefox Dev x64, também não funcionou.

Banco de dados com vários charset

Fiz o download do banco de dados mas tem vários charset e está ficando horrível é isso mesmos??? Será que estou cometendo algum erro?? Abri o sql no notepad++, deem uma olhada!!!

Post não carrega por completo

O post Email Marketing – O Inferno – Parte 1 só mostra até a metade, olhando no código, tem uma tag <style> no meio do texto, acredito que seja esse o problema.

Menu de Categorias não é totalmente visível

Ao acessar a página do Tableless, em alguns monitores, o menu Categorias excede a altura da tela e alguns itens não podem ser acessados (e dependendo do usuário ele até achará que não tem mais).
O usuário é forçado a reduzir o zoom no browser para poder ver as outras opções no Menu.
No meu caso, foi no Safari do MacBook Pro Retina com resolução de tela de 2560px X 1600px, mas é o mesmo comportamento em outros browsers.

Zoom padrão (100%):

Zoom reduzido (67%):

Link "sobre" no rodapé

O link "sobre", no rodapé do site, está redirecionando para o post Sobre Aaron Swartz

Colocar Google PrettyPrint para código antigo funcionar.

Tratar imagem principal do post no single.php

• Chamar imagem mais leve para mobiles (srcset/picture)

Melhorar layout - mobile

Olá pessoal, boa noite!

Notei que o layout na versão mobile do site está meio estranho, sem o menu, e na parte de podcasts, os blocos/tópicos estão passando o tamanho do container.

Animação quando o SEARCH aparece.

Markdown para escrever os posts

O Markdown está ativado na hora de escrever posts? Fiz um teste rápido mas não tenho certeza :p

Se ele não estiver ativado, eu realmente gostaria de vê-lo ativado, além de ser mais amigável pra qualquer um que queira escrever novos posts no tableless vem com uns "macetes" pra escrever código HTML mas semântico sem a chatisse de ter que ficar revisando seu texto, como por exemplo adicionar as tags p automaticamente em cada parágrafo ou facilitar a criação de links.

Inclusive o próprio Jetpack tem um módulo pra usar o Markdown Extra (que tem uns macetes melhores que o Markdown original). Link de um site que fala sobre os benefícios do Markdown e ensina como ativá-lo pelo Jetpack e por outros plugins: https://premium.wpmudev.org/blog/markdown-wordpress/

Por exemplo, recentemente eu encontrei um problema quanto a um vazamento da tag pre o que causava um erro meio esquisito ao rolar a página para a direita, descobri que a solução mais semântica seria aninhar uma tag code dentro da tag pre (que inclusive é uma recomendação da W3C) deixando a tag code com o tamanho automático e a tag pre teria a propriedade overflow: auto e uma largura limitada. Acontece que não as tags não estavam dentro da recomendação porque a única forma de inserir código nas postagens pelo que eu saiba (e pelo que li no guia para autores) é escrevendo na mão:

<pre class="lang-javascript">
  var foo = "bar";
</pre>

Enquanto em Markdown Extra o mesmo código seria (sem a barra):

~~~~ .lang-javascript
var foo = "bar";
\~~~~

E produziria o resultado recomendado (embora a classe lang-javascript esteja na tag code, o google pretiffy já é programado para entender esta estrutura perfeitamente, como é dito na página deles do github):

<pre><code class="lang-javascript">
var foo = "bar";
</code></pre>

Inserir WAI-ARIA

Inserir as Roles da WAI-ARIA para melhorar a acessibilidade das páginas, principalmente das páginas de artigos.

http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/

Fazer carousel da home com os DESTAQUES

Colocar links das redes sociais no box de AUTOR nas single post