Mementos do GitHub

(porque recordar é viver 😅)

Mementos significa "lembranças", "recordações". Esse repositório é para arquivamento de comandos do GitHub que vou usando durante o aprendizado. A ideia é organizar num único local para que eu possa acessá-los com facilidade.

Sumário

• Colocando Imagem Inicial no README
• Botões Estilizados (Badges)
• Alinhamento e Dimensionamento de Imagem
  • Em Markdown
  • Em Html
  • Imagens por caminhos absolutos
• Escrevendo em LaTeX
• Criando Árvore de Diretórios para o GitHub
• Usando o .gitignore
• Linha horizontal em Html
• Visualizando pdf
  • Com nbviewer
  • Com GitHub Pages
• Comentários em códigos
  • Um simples comentário
  • Comentar várias linhas
• Texlo colapsado

---

Colocando Imagem Inicial no README

Para colocar a imagem na página inicial de cada reposotório, no README.md, usa-se html:

<p align = "center">
   <img 
        width = "200px"
        align = "center"
        src   = "https://github.com/icaro-freire/mementos_GitHub/blob/master/figs/fig-github.png"
        alt   = "Mementos GitHub" 
  >
  <h2 align = "center">
      Mementos GitHub
  </h2>
  <p align="center">
      (Recordar é viver :sweat_smile:)
  </p>
</p>

Botões Estilizados (Badges)

• Para colocar os vários botões estilizados, pode ser usado o site shields.io;
• Tal site pode sugerir os badges ou podemos criar um;
  • Caso criemos um, uma imagem é gerada sem um link. Então, precisamos colocar ![url-da-imagem-gerada](link-desejado);
• Tenho percebido que o Html facilita na hora da centralização dos objetos. Um repositório que contém muitas informações sobre customização de badges é esse daqui.

Alinhamento e Dimensionamento de Imagem

Em Markdown

Para inserir uma imagem em markdown, basta fazer ![](caminho-da-imagem).

Em Html

Para inserir e dimensionar, usamos:

<img 
     align = "center" 
     src   = "caminho-da-imagem" 
     alt   = "nome-alternativo" 
     width = "n"
>

Obsservações

• align centraliza a imagem inline;
• src é o local onde inserimos a url onde está hospedada a imagem (numa pasta do repositório, por exemplo);
• alt é um nome que irá substituir (nome alternativo) a imagem, caso esta não seja carregada por algum motivo;
• width é a largura da imagem e n é um número inteiro.
• Além disso, todos esses comandos podem ser digitados na mesma linha, ou seja, caso ideal quanda a imagem (ou equação) estiver inline.

Pra deixar centralizada em relação à largura da margem do texto, usamos os comandos em html:

<p align="center">
  <img 
       align = "center" 
       src   = "caminho-da-imagem" 
       alt   = "nome-alternativo" 
       width = "n"
  >
</p>

Imagens por caminhos absolutos

• É possível colocar as imagens, usando os diretórios do próprio GitHub.
  • isso evita quebra de link quando pegamos de alguma url. Para o gif a segui, o código foi:

![gato-felix](/figs/gato-felix.gif)

Caso precise centralizar, é melhor usar html:

<p align="center">
   <img 
        align = "center" 
        src   = "/figs/gato-felix.gif
   >
</p>

Escrevendo em LaTeX

Não consegui escrever diretamente no README usando o Para fazer isso, é preciso gerar um html num editor online de LaTeX. Particularmente, uso o codecogs.

Por exemplo, se quero gerar a equação:

Usamos os comandos

<p align="center">
  <img 
      src   = "https://latex.codecogs.com/gif.latex?f(z_0)&space;=&space;\frac{1}{2\pi&space;i}\oint_\Gamma&space;\frac{f(z)}{z&space;-&space;z_0}\,\textrm{d}z"
      title = "f(z_0) = \frac{1}{2\pi i}\oint_\Gamma \frac{f(z)}{z - z_0}\,\textrm{d}z"
  >
</p>

Mas, para gerar esses comandos, precisamos:

1. digitar a equação no site codecogs;
2. verificar o tamanho adequado;
3. copiar o link htlm gerado.

Como mostra a figura a seguir:

Criando Árvore de Diretórios para o GitHub

• Uso o site tree para digitar meus diretórios de maneira bem simples.
• Depois copio o texto gerado pelo site;
• Por fim, colo aqui no README do GitHub.

Por exemplo, a árvore de diretórios desse repositório aqui mesmo, é dada por:

mementos_GitHub/
  .
  ├── figs/
  │   ├── codecogs.png
  │   └── fig-github.png
  └── README.md

Uma outra opção é usar o uma extensão para o editor Vs Code, denominada file-tree-generator . Com ela, a mesma árvore acima é dada por:

📦mementos_GitHub 
 ┣ 📂figs 
 ┃ ┣ 📜codecogs.png 
 ┃ ┣ 📜fig-github.png 
 ┗ 📜README.md 

Obs.: o resultado deve estar dentro da tag <pre> ... </pre>, para que seja mantido o alinhamento vertical.

Usando o .gitignore

• Para ignorar uma pasta, basta digitar no arquivo .gitignore: nome-da-pasta/
• para ignorar arquivos: *.extensao-do-arquivo

Linha horizontal em Html

Para fazer uma linha horizontal, em html usamos: <hr width="X%"> ou <hr width="X"> ou <hr width="X px">.

Visualizando pdf

Com nbviewer

• Abrir o site https://nbviewer.jupyter.org/;
• Digitar o url (que está no GitHub) do pdf.

Com GitHub Pages

Para usar a visualização direta do .pdf no próprio GitHub, precisamos ativar a GitHub Pages.

• Ir em Settings;
• Rolar até GitHub Pages;
  • Em Source, escolher o Branch adequado;
  • Escolher uma pasta adequada: pode ser a raiz (root) ou criar uma (geralmente docs);
  • Salvar;
  • Atualizar algumas vezes a página do seu projeto;
  • O link para o .pdf é: https://seu-usuario.github.io/nome-do-projeto/nome-do-arquivo.pdf

Comentários em códigos

Um simples comentário

Para um simples comentário, usamos a sintax:

"aqui deve conter uma linhas vazia"
[comentário]: # (escreva aqui seu comentário)

• Perceba que há um espaço entre #
• Seu comentário deve estar entre parênteses;
• Deve conter uma linha vazia antes do comentário.
• Entre o colchete, pode vir qualquer texto (geralmente com o nome "comentário", para o identidicar)

Comentar várias linhas

Para comentar várias linhas, usamos a sintax:

<!--
Escreva aqui
seu
Comentário
-->

Texto colapsado

A tag <details> ... </details> colapsa um texto longo dentro de um tópico destacado (fazemos esse destaque no tópico com a tag <summary> ... </summary>).

Tópico 01

Texto longo sobre o tótico 01 ...

Tópico 02

Texto longo sobre o tótico 02 ...

Subtópico 2.1

Pode fazer subtópicos também!

A ideia acima foi gerada com:

<details>
  <summary>
    Tópico 01
  </summary>
    Texto longo sobre o tótico 01 ...
</details>
<details>
  <summary>
    Tópico 02
  </summary>
    Texto longo sobre o tótico 02 ...
    <details>
      <summary>
        Subtópico 2.1
      </summary>
        Pode fazer subtópicos também!
    </details>
</details>