Garrafas ao mar

Como publicar microposts no Bear

Acabei de ver que a Garota de 30 anos criou uma página de microblog. Fiquei feliz pois adoro ler os pensamentos soltos das pessoas que acompanho, só que na mesma hora notei que essas atualizações não estão no feed RSS dela. Não sei se a intenção era ocultar do feed mesmo - espero que não, adoraria receber 😆. De toda forma, decidi compartilhar aqui como montei o meu fluxo de postagem para quem quiser reproduzir (já conheço um possível interessado!).

Os meus status são todos posts normais que eu marco para ficarem ocultos, de modo a não poluir a página Discovery de vocês. Isso significa que eles ficam invisíveis na descoberta do Bear, mas seguem presentes no meu feed RSS. Além disso, uso a tag #status para filtrar os posts da página de blog, excluindo-os dela, e para criar a página de status, exibindo-os exclusivamente.

O que eu faço é definir no post template o seguinte:

title:
link: 
tags: status
make_discoverable: false
___

Assim todos os posts por padrão estarão configurados como status, a não ser que eu remova a tag e altere para make_discoverable: true. E aí, pronto, vira um post normal e "descobrível". Acho mais prático, pois geralmente busco agilidade na publicação dos status, enquanto tomo mais tempo e cuidado para um post longo.

Para exibir apenas posts longos na sua página de blog, basta definir:

{{ posts | tag:-status }}

Na página de status, a lógica é contrária. Também prefiro exibir o conteúdo, ao invés da lista com os links. Isso ocorre da seguinte maneira:

{{ posts | tag:status | content:True }}

Já a minha página inicial, que mistura os dois tipos de lista, só que exibindo apenas o último status, está assim:

<section class="status">
{{ posts | tag:status | content:True | limit:1 }}
</section>

### Posts
{{ posts | tag:-status }}

A linguagem markdown é uma coisa linda né? Foi implementada de forma impecável pelo Herman. Simples e limpo.

O último passo é adicionar algumas coisinhas extras para a exibição dos status ficar chique que nem a minha. Dentro de uma caixa, sem título, apenas com a data e hora da postagem.

Atenção: Copie e salve o código original do seu blog antes de acrescentar o que disponibilizei aqui. Se acontecer qualquer problema, é só colar e tudo volta a funcionar normalmente. Parte desse script eu encontrei em um blog gringo por aí (não lembro qual), outra parte foi ajudinha do Gemini. Não sou dev, me tira dessa responsa!

Adicione na sua footer directive:

<script>
  (function() {
    'use strict';

    // PROCESSAMENTO E FORMATAÇÃO DAS PÁGINAS DE STATUS / POSTS
    function processStatusContent() {
      const path = window.location.pathname.toLowerCase();
      const isStatusListUrl = path === "/status" || path === "/status/";
      
      // Captura listagens de status (seja na página interna ou o bloco customizado da home)
      const listTimes = document.querySelectorAll(".status ul.blog-posts > li time");
      const hasStatusList = listTimes.length > 0;

      // Se estamos na listagem de status (Home ou URL /status)
      if (hasStatusList || isStatusListUrl) {
        if (isStatusListUrl) {
          const siteTitle = document.querySelector("h1");
          if (siteTitle) {
            siteTitle.style.setProperty("display", "inline-block", "important");
            siteTitle.style.setProperty("visibility", "visible", "important");
          }
        }
        listTimes.forEach(timeEl => formatStatusTime(timeEl));
        return; 
      }

      // CASO INTERNO: Post Individual (Geral ou Status)
      const postTimeElement = document.querySelector("main time, article time, h1 + p time");
      const isList = document.querySelectorAll("ul.blog-posts").length > 0;

      if (postTimeElement && !isList) {
        let isStatusPage = false;
        
        // Mira cirurgicamente apenas nas tags vinculadas ao artigo principal
        // Ignora menus globais, rodapés e barras de navegação do site
        const articleContainer = document.querySelector("main, article, .post");
        if (articleContainer) {
          // Busca os links de tags dentro do artigo (Bear Blog costuma usar caminhos com /tags/ ou /tag/)
          const tagLinks = articleContainer.querySelectorAll("a[href*='/tags/'], a[href*='/tag/'], .post-tags a, .tags a");
          isStatusPage = Array.from(tagLinks).some(link => {
            const href = link.href.toLowerCase();
            const text = link.innerText.toLowerCase().trim();
            return href.endsWith("/status") || href.endsWith("/status/") || text === "status" || text === "#status";
          });
        }

        // Fallback secundário seguro via URL estrutural se for o caso
        if (path.includes('/status/')) {
          isStatusPage = true;
        }

        if (isStatusPage) {
          // Post de Status: data curta ("Hoje às 00:00")
          formatStatusTime(postTimeElement);

          // Oculta elementos visuais do status na web
          const postHeading = document.querySelector("main h1, article h1, #content h1");
          if (postHeading) postHeading.style.setProperty("display", "none", "important");

          postTimeElement.style.setProperty("display", "block", "important");
          postTimeElement.style.setProperty("margin-bottom", "1.5rem", "important");

          const commentBox = document.querySelector(".post-comments-box");
          if (commentBox) commentBox.style.setProperty("display", "none", "important");
        }
      }
    }

    // Função para tratar o formato curto de data e hora dos status
    function formatStatusTime(el) {
      if (!el.dateTime) return;
      const postDate = new Date(el.dateTime);
      const now = new Date();

      const postMidnight = new Date(postDate.getFullYear(), postDate.getMonth(), postDate.getDate());
      const nowMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const diffDays = Math.floor((nowMidnight - postMidnight) / 86400000);

      const timeStr = `${postDate.getHours().toString().padStart(2, "0")}:${postDate.getMinutes().toString().padStart(2, "0")}`;

      // Formato Curto para Status (Hoje/Ontem/Data + às + Horário)
      if (diffDays === 0) {
        el.innerText = `Hoje às ${timeStr}`;
      } else if (diffDays === 1) {
        el.innerText = `Ontem às ${timeStr}`;
      } else {
        const formatter = new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short' });
        el.innerText = `${formatter.format(postDate)} às ${timeStr}`;
      }
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", processStatusContent);
    } else {
      setTimeout(processStatusContent, 150);
    }
  })();
</script>

Adicione no seu CSS:

/* Caixa que contém o conteúdo do micropost */
.status ul.embedded.blog-posts > li {
  border: 1px dotted #495e63; /* Altere para combinar com o seu design */
  background-color: ; /* Altere para combinar com o seu design */
  margin-top: 1.25em;
  padding: 1.25em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: baseline; /* Importante quando os tamanhos de fonte da data e do link são diferentes */
  position: relative;
}
/* Cor da caixa ao passar o mouse (hover) */
.status ul.embedded.blog-posts > li:hover {
  background-color: color-mix(in srgb, CanvasText 20%, transparent); /* Altere "CanvasText" para outra cor se preferir */
}
/* Remove espaço extra acima do conteúdo */
.status ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
/* Remove espaço extra à esquerda da listagem */
.status ul.embedded.blog-posts {
  padding: unset;
}
/* Oculta o título visível, mantendo o link funcional */
.status ul.embedded.blog-posts > li > a {
  visibility: hidden;
  font-size: 0px;
  text-decoration: none;
}
/* Conteúdo que transformará toda a caixa em um link clicável */
.status ul.embedded.blog-posts > li > a::after {
  visibility: visible;
  content: ""; /* Deixe vazio */
  inset: 0; /* Faz com que o link preencha toda a caixa */
  position: absolute;
}
/* Estilização da Data */
.status ul.embedded.blog-posts > li span:has(> i time),
.status ul.embedded.blog-posts > li span time,
.status ul.embedded.blog-posts > li span i {
  color: #495e63; /* Tom mais escuro (combina com a borda atual) */
  font-weight: 500; /* Dá um leve destaque para melhorar a legibilidade */  
}
/* Corpo do post (texto principal) */
.status ul.embedded.blog-posts > li > div {
  flex-basis: 100%;
}
.status ul.embedded.blog-posts > li > div a {
  position: relative;
  pointer-events: auto; /* Garante que links internos nos posts continuem clicáveis */
}

/* Estilos de listas — inclua abaixo apenas se planeja usar listas nos status */
/* Adiciona espaçamento após a lista */
ul.embedded.blog-posts > li div > ul,
ul.embedded.blog-posts > li div > ol {
  margin-bottom: 1em;
}
/* Exibe como itens de lista (aplicado à maioria dos temas padrão do Bear Blog) */
ul.embedded.blog-posts > li div > ul li,
ul.embedded.blog-posts > li div > ol li {
  display: list-item;
}
/* Ajusta os estilos dos marcadores (bullets) */
ul.embedded.blog-posts > li div > ul li {
  list-style-type: disc;
}
ul.embedded.blog-posts > li div > ul li ul li {
  list-style-type: circle;
}

Feito! Após todos esses passos, você deve ter um microblog igual ao meu.

Espero que tenha ficado claro, mas qualquer dúvida é só perguntar!

Beijos e aguardo seus microposts ❤

Quer comentar algo?

Envie uma mensagem no livro de visitas ou, melhor ainda, me escreva um e-mail. Será um prazer ler o que você tem a dizer!