BP Strat Website

Índice

  1. Visão Geral do Fluxo (Docs as Code)
  2. Componentes do Ecossistema
    1. Edição e Modelagem (Obsidian)
    2. Processamento e Build (Jekyll + Just the Docs)
    3. Diagramação como Código (Mermaid & C4)
  3. Princípios e Padrões Adotados
  4. Estrutura do Repositório
  5. Avaliação do Sistema
  6. Tipografia
    1. Fonts
    2. Font Weight
    3. Line
    4. Layout
    5. Inline block
  7. Colors
  8. Code
    1. Mermaid
    2. Python
    3. Js
    4. Ruby
  9. Licença

Website da BP Strat construído com Jekyll e o tema Just the Docs.

Visão Geral do Fluxo (Docs as Code)

  • Metodologia de documentação técnica onde o Markdown é a fonte única de verdade (Single Source of Truth).
  • Ciclo de vida: Edição (Obsidian) → Versionamento (Git) → Build (Jekyll) → Publicação (Site Estático).
  • Foco em engenharia de produto, suportando diagramas Mermaid e C4 Model.

Componentes do Ecossistema

Edição e Modelagem (Obsidian)

  • Uso de links bidirecionais e estrutura de Vault organizada por domínios.
  • Suporte nativo a Mermaid para diagramas e plugins de grafo para visualização de conhecimento.

Processamento e Build (Jekyll + Just the Docs)

  • Jekyll: Motor que converte Markdown em HTML estático.
  • Just the Docs: Tema responsável pela UI/UX, oferecendo sidebar hierárquica e tipografia escalável (fs-8, fs-6).
  • Front Matter: Controle de navegação via parâmetros YAML (title, parent, nav_order).

Diagramação como Código (Mermaid & C4)

  • Diagramas embutidos diretamente no Markdown.
  • Utilização de C4 Model (Context, Container, Component) para arquitetura de sistemas.
  • Renderização dinâmica via JavaScript no navegador ou preview no Obsidian.

Princípios e Padrões Adotados

  • Docs as Code: Documentação tratada como software (versionada, revisada via Pull Request, auditável).
  • Spec-Driven Development: O Markdown serve como contrato para especificações de API, domínio e eventos.
  • Single Source of Truth: Redução de duplicidade; a especificação alimenta a implementação.
  • Tipografia Consistente: Uso de fontes específicas (Genos, Inter) e sistema de cores semânticas.

Estrutura do Repositório

  • /docs/: Conteúdo principal (engenharia, produto, arquitetura).
  • /assets/: Recursos estáticos (CSS customizado, imagens).
  • _config.yml: Configurações globais do site e do Jekyll.

Avaliação do Sistema

  • Benefícios: Baixa fricção para escrita, alta portabilidade e integração direta com o fluxo de trabalho de desenvolvedores.
  • Limitações: Hierarquia de menus rígida no tema Just the Docs e potencial lentidão no build em repositórios massivos.
  • Casos de Uso: Bases de conhecimento internas, documentação de arquitetura e especificações de produto.

Tipografia

Texto diferenciado

1

#....

A paragraph

A paragraph

My note title

A paragraph with a custom title callout

A paragraph

Another paragraph

The last paragraph

My important title

A paragraph

Another paragraph

The last paragraph

A paragraph

A paragraph

Another paragraph

The last paragraph

A paragraph

A paragraph

I’m a label

blue

green

purple

yellow

red

fk-orange

fk-red

Fonts

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Font size 8

Font size 9

Font size 10

Font Weight

Font weight 300

Font weight 400

Font weight 500

Font weight 700

Line

No Line height No Line height

Tight line height Tight line height

Default line height Default line height

Layout

This paragraph will have a margin bottom of 1rem/16px on large screens.

This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.

This button will be hidden until medium screen sizes:

A button

These headings will be inline-block:

Inline block

  • hello, this is a todo item
  • hello, this is another todo item
  • goodbye, this item is done

Colors

grey-lt

Color value Font color utility Background color utility
Aa Aa grey-lt-000 .text-grey-lt-000 .bg-grey-lt-000
Aa Aa grey-lt-100 .text-grey-lt-100 .bg-grey-lt-100
Aa Aa grey-lt-200 .text-grey-lt-200 .bg-grey-lt-200
Aa Aa grey-lt-300 .text-grey-lt-300 .bg-grey-lt-300

grey-dk

Color value Font color utility Background color utility
Aa Aa grey-dk-000 .text-grey-dk-000 .bg-grey-dk-000
Aa Aa grey-dk-100 .text-grey-dk-100 .bg-grey-dk-100
Aa Aa grey-dk-200 .text-grey-dk-200 .bg-grey-dk-200
Aa Aa grey-dk-250 .text-grey-dk-250 .bg-grey-dk-250
Aa Aa grey-dk-300 .text-grey-dk-300 .bg-grey-dk-300

purple

Color value Font color utility Background color utility
Aa Aa purple-000 .text-purple-000 .bg-purple-000
Aa Aa purple-100 .text-purple-100 .bg-purple-100
Aa Aa purple-200 .text-purple-200 .bg-purple-200
Aa Aa purple-300 .text-purple-300 .bg-purple-300

blue

Color value Font color utility Background color utility
Aa Aa blue-000 .text-blue-000 .bg-blue-000
Aa Aa blue-100 .text-blue-100 .bg-blue-100
Aa Aa blue-200 .text-blue-200 .bg-blue-200
Aa Aa blue-300 .text-blue-300 .bg-blue-300

green

Color value Font color utility Background color utility
Aa Aa green-000 .text-green-000 .bg-green-000
Aa Aa green-100 .text-green-100 .bg-green-100
Aa Aa green-200 .text-green-200 .bg-green-200
Aa Aa green-300 .text-green-300 .bg-green-300

yellow

Color value Font color utility Background color utility
Aa Aa yellow-000 .text-yellow-000 .bg-yellow-000
Aa Aa yellow-100 .text-yellow-100 .bg-yellow-100
Aa Aa yellow-200 .text-yellow-200 .bg-yellow-200
Aa Aa yellow-300 .text-yellow-300 .bg-yellow-300

red

Color value Font color utility Background color utility
Aa Aa red-000 .text-red-000 .bg-red-000
Aa Aa red-100 .text-red-100 .bg-red-100
Aa Aa red-200 .text-red-200 .bg-red-200
Aa Aa red-300 .text-red-300 .bg-red-300

fk-orange

Color value Font color utility Background color utility
Aa Aa fk-orange-000 .text-fk-orange-000 .bg-fk-orange-000
Aa Aa fk-orange-100 .text-fk-orange-100 .bg-fk-orange-100
Aa Aa fk-orange-200 .text-fk-orange-200 .bg-fk-orange-200
Aa Aa fk-orange-300 .text-fk-orange-300 .bg-fk-orange-300

fk-red

Color value Font color utility Background color utility
Aa Aa fk-red-000 .text-fk-red-000 .bg-fk-red-000
Aa Aa fk-red-100 .text-fk-red-100 .bg-fk-red-100
Aa Aa fk-red-200 .text-fk-red-200 .bg-fk-red-200
Aa Aa fk-red-300 .text-fk-red-300 .bg-fk-red-300

fk-yellow

Color value Font color utility Background color utility
Aa Aa fk-yellow-000 .text-fk-yellow-000 .bg-fk-yellow-000
Aa Aa fk-yellow-100 .text-fk-yellow-100 .bg-fk-yellow-100
Aa Aa fk-yellow-200 .text-fk-yellow-200 .bg-fk-yellow-200
Aa Aa fk-yellow-300 .text-fk-yellow-300 .bg-fk-yellow-300

fk-green

Color value Font color utility Background color utility
Aa Aa fk-green-000 .text-fk-green-000 .bg-fk-green-000
Aa Aa fk-green-100 .text-fk-green-100 .bg-fk-green-100
Aa Aa fk-green-200 .text-fk-green-200 .bg-fk-green-200
Aa Aa fk-green-300 .text-fk-green-300 .bg-fk-green-300

fk-cyan

Color value Font color utility Background color utility
Aa Aa fk-cyan-000 .text-fk-cyan-000 .bg-fk-cyan-000
Aa Aa fk-cyan-100 .text-fk-cyan-100 .bg-fk-cyan-100
Aa Aa fk-cyan-200 .text-fk-cyan-200 .bg-fk-cyan-200
Aa Aa fk-cyan-300 .text-fk-cyan-300 .bg-fk-cyan-300

fk-blue

Color value Font color utility Background color utility
Aa Aa fk-blue-000 .text-fk-blue-000 .bg-fk-blue-000
Aa Aa fk-blue-100 .text-fk-blue-100 .bg-fk-blue-100
Aa Aa fk-blue-200 .text-fk-blue-200 .bg-fk-blue-200
Aa Aa fk-blue-300 .text-fk-blue-300 .bg-fk-blue-300

fk-purple

Color value Font color utility Background color utility
Aa Aa fk-purple-000 .text-fk-purple-000 .bg-fk-purple-000
Aa Aa fk-purple-100 .text-fk-purple-100 .bg-fk-purple-100
Aa Aa fk-purple-200 .text-fk-purple-200 .bg-fk-purple-200
Aa Aa fk-purple-300 .text-fk-purple-300 .bg-fk-purple-300

fk-magenta

Color value Font color utility Background color utility
Aa Aa fk-magenta-000 .text-fk-magenta-000 .bg-fk-magenta-000
Aa Aa fk-magenta-100 .text-fk-magenta-100 .bg-fk-magenta-100
Aa Aa fk-magenta-200 .text-fk-magenta-200 .bg-fk-magenta-200
Aa Aa fk-magenta-300 .text-fk-magenta-300 .bg-fk-magenta-300

Code

Mermaid 

graph TD;
    accTitle: the diamond pattern
    accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Python 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

def dump_args(func):
    "This decorator dumps out the arguments passed to a function before calling it"
    argnames = func.func_code.co_varnames[:func.func_code.co_argcount]
    fname = func.func_name
    def echo_func(*args,**kwargs):
        print fname, ":", ', '.join(
            '%s=%r' % entry
            for entry in zip(argnames,args) + kwargs.items())
        return func(*args, **kwargs)
    return echo_func

@dump_args
def f1(a,b,c):
    print a + b + c

f1(1, 2, 3)

def precondition(precondition, use_conditions=DEFAULT_ON):
    return conditions(precondition, None, use_conditions)

def postcondition(postcondition, use_conditions=DEFAULT_ON):
    return conditions(None, postcondition, use_conditions)

class conditions(object):
    __slots__ = ('__precondition', '__postcondition')

    def __init__(self, pre, post, use_conditions=DEFAULT_ON):
        if not use_conditions:
            pre, post = None, None

        self.__precondition  = pre
        self.__postcondition = post

Js 

1
2
3
4
5

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

Ruby 

1
2
3
4

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Licença

Conteúdo © BP Strat. Tema Just the Docs licenciado sob MIT.

© BP STRAT. Todos os direitos reservados. readme