Merge branch 'main' into pre_commit

.github/workflows/json-yaml-validate.yml

@@ -0,0 +1,24 @@
+name: json-yaml-validate
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pull-requests: write # enable write permissions for pull request comments
+
+jobs:
+  json-yaml-validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: json-yaml-validate
+        id: json-yaml-validate
+        uses: GrantBirki/json-yaml-validate@v3.2.1 # replace with the latest version
+        with:
+          base_dir: assets/data # base directory to search for files
+          comment: "true" # enable comment mode

CONTRIBUTING.md

@@ -9,6 +9,7 @@ Neste guia vamos explicar como funcionam os processos para que você possa contr
 Existem diversas formas de contribuir com o projeto:
 
 - [📖 Contribua com o Diciotech](#-contribua-com-o-diciotech)
+  - [⚒️ Instalando ambiente de desenvolvimento para contribuir](#️-instalando-ambiente-de-desenvolvimento-para-contribuir)
   - [🤔 Como contribuir](#-como-contribuir)
     - [Adicionando um novo termo técnico no Diciotech](#adicionando-um-novo-termo-técnico-no-diciotech)
     - [Adicionando uma nova tag no Diciotech](#adicionando-uma-nova-tag-no-diciotech)
@@ -18,6 +19,25 @@ Existem diversas formas de contribuir com o projeto:
     - [Fazendo pull requests](#fazendo-pull-requests)
     - [Outras formas de contribuir](#outras-formas-de-contribuir)
 
+## ⚒️ Instalando ambiente de desenvolvimento para contribuir
+
+### 1. **Escolha um Editor de Código**
+   * **Recomendação:** Visual Studio Code (gratuito, open-source, amplamente utilizado)
+   * **Outras opções:** Sublime Text, Atom
+
+### 2. **Instale um pré-processador SASS**
+Para compilar SASS em CSS, você precisará de um compilador. Recomendo a leitura do https://sass-lang.com/guide/ 👀
+
+### 3. **Compile seu SASS**
+Para compilar seu SASS em CSS, abra o terminal na pasta do seu projeto e execute:
+```bash
+sass scss/styles.scss css/styles.css --watch
+```
+O `--watch` faz com que o SASS fique monitorando alterações no arquivo `.scss` e compile automaticamente.
+
+### 4. **Execute o Projeto**
+Para visualizar seu projeto, você pode abrir o arquivo `index.html` em um navegador. Se quiser usar um servidor local (opcional), você pode instalar uma extensão no seu editor ou usar ferramentas como o **Live Server** no Visual Studio Code.
+
 ### Adicionando um novo termo técnico no Diciotech
 
 Adicione mais conteúdo no Diciotech [abrindo um pull request](#fazendo-pull-requests) com o termo que deseja que esteja presente no site. Para adicionar um novo termo, você deve acessar o arquivo `assets/data/cards_pt-br.json` e inserir um novo item na lista, seguindo a seguinte estrutura:
@@ -75,7 +95,9 @@ Tags disponíveis:
 - `Mobile`;
 - `Paradigma`;
 - `Rede neural`;
-- `Versionamento`.
+- `Versionamento`;
+- `Web3`;
+- `Infraestrutura de Rede`.
 
 Antes de criar uma issue e abrir um PR, todas as tags devem seguir algumas boas práticas:
 

README.md

@@ -1,10 +1,19 @@
 <div align="center">
   <img src="./assets/img/brand/logo/colored.png">
-  <p>Um dicionário tech para pessoas que querem aprender mais sobre termos técnicos dentro da tecnologia.</p>
 </div>
 
 ---
 
+O Diciotech é um dicionário tech online colaborativo, construído com HTML, SASS e JavaScript, e open source. Nossa missão é ajudar pessoas de todos os níveis a entenderem termos e conceitos relacionados à tecnologia de forma clara e simples.
+
+Ao utilizar o Diciotech, você pode:
+
+* Aprender novos termos de forma rápida e fácil.
+* Contribuir para a construção de uma comunidade de aprendizado em tecnologia.
+* Aprimorar suas habilidades técnicas de forma colaborativa.
+
+Junte-se à nossa comunidade no [GitHub](https://github.com/levxyca/diciotech/discussions) para discutir sobre o projeto!
+
 ![Imagem de captura do site do Diciotech](./assets/img/diciotech-screenshot.png)
 
 ## 🤝 Contribua

ROADMAP.md

@@ -1,33 +1,57 @@
-# Roadmap 🗂️
-
-Este arquivo fornece uma visão geral da direção que este projeto está seguindo.
-
-## Legendas
-
-- ✅ Significa que essa feature está finalizada.
-- 🚧 Significa que essa feature está em construção 
-- ❌ Significa que essa feature ainda não foi iniciada.
-
-## Versão 1.0 (lançada)
-
-> [Lançamento da versão 1.0 do Diciotech 📖](https://github.com/levxyca/diciotech/releases/tag/v1.0)
-
-- ✅ Filtro: Agora você pode refinar ainda mais suas buscas com nosso novo filtro.
-- ✅ Modo Escuro: Uma experiência noturna mais agradável e confortável para seus olhos.
-- ✅ Layout Inicial: Uma interface renovada para uma navegação mais intuitiva.
-- ✅ GitHub Corner: Acesso fácil ao nosso repositório no GitHub para que você possa explorar e contribuir.
-- ✅ Favoritar Cards: Guarde seus cards favoritos para acessá-los facilmente.
-- ✅ Rolagem (scroll) nos cards: Navegue com facilidade por todo o conteúdo.
-
-Além das melhorias visuais e de usabilidade, também adicionamos novos termos.
-
-## Versão 2.0
-
-- 🚧 [Nova UI](https://github.com/levxyca/diciotech/issues/12)
-- 🚧 Template de issue
-- 🚧 Template de PR
-- 🚧 Sempre criar issue antes de um PR
-- ❌ Criar um wiki para o projeto
-- 🚧 Manter o ROADMAP vivo e atualizado
-- ❌ Adicionar um código de conduta
-- ✅ [Adicionar uma licença](https://github.com/levxyca/diciotech/issues/65)
+## **Diciotech Roadmap**
+
+### **Versão Atual: v1.1.0 (Lançada)**
+
+**Lançada em:** 19/09/2024  
+**Principais Atualizações:**
+- Novas tags e categorias adicionadas (Infraestrutura de Rede, Web3).
+- Templates de PR e issues aprimorados.
+- Inclusão de novos conceitos e termos (Gradiente, Descida do Gradiente, SOLID, etc.).
+- Correções de conteúdo e melhorias nos arquivos JSON.
+- Implementação de analytics para monitoramento da plataforma.
+
+---
+
+### **Próximo Lançamento: v1.2.0**
+
+**Objetivos Principais:**
+- **Novos Termos Técnicos**: Inclusão de novos termos
+- **Melhorias de Acessibilidade**:
+  - Adicionar *border-radius* ao *scrollbar* (PR #182).
+  - Implementar nova versão do dark-mode (PR #123).
+- **Suporte a Múltiplos Idiomas**:
+  - Finalizar a implementação da lógica para suportar várias línguas no projeto (PR #140).
+
+**Ações para Comunidade**:
+- Continuação do incentivo à contribuição com templates mais acessíveis.
+- Acompanhamento dos PRs em revisão e ajustes conforme o feedback recebido.
+
+---
+
+### **Futuro: v1.3.0**
+
+**Objetivos Principais:**
+- **Facilitar a Contribuição**:
+  - Implementar uma **Interface de Linha de Comando (CLI)** para facilitar a adição de novos conceitos ao projeto (PR #112).
+- **Expansão de Termos Técnicos**:
+  - Inclusão de mais termos técnicos importantes sobre tecnologias emergentes, como:
+    - Inteligência Artificial (IA)
+    - Principais termos de DevOps
+- **Melhorias na Experiência do Usuário**:
+  - Refinamento de funcionalidades de acessibilidade com base nos feedbacks da comunidade e dados de analytics.
+
+---
+
+### **Metas de Longo Prazo (v1.4.0 e além)**
+
+**Expansão Contínua de Conteúdo**:
+- **Termos Avançados**:
+  - Ampliar o dicionário com conceitos mais profundos e complexos sobre arquitetura de software, ciência de dados e engenharia de software.
+- **Gamificação**:
+  - Introduzir um sistema de gamificação para motivar e reconhecer contribuições significativas da comunidade.
+- **Integração com Outras Ferramentas**:
+  - Explorar integrações com plataformas externas (como GitHub, StackOverflow) para ampliar o uso do Diciotech e facilitar a adição de novos conteúdos.
+
+**Objetivo de Engajamento**:
+- Aumentar o número de contribuidores ativos em 20% até o final de 2025.
+- Expandir o reconhecimento do Diciotech como uma ferramenta educativa dentro e fora da comunidade.

assets/data/cards_pt-br.json

@@ -895,6 +895,48 @@
       "tags": [
         "Conceito"
       ]
+    },
+    {
+      "title": "Botnet",
+      "description": "Botnet é uma rede de dispositivos conectados na internet infectados por um malware (os malwares são programas maliciosos que afetam um dispositivo), possibilitando que criminosos-ciberneticos derrubem sites usando essa rede de dispositivos. Os dispositivos pedem ser desde um computador até um equipamento IoT (um aparelho IoT é um equipamento conectado à internet sem o uso de cabos, por exemplo: TVs inteligentes, lampadas inteligentes, geladeiras inteligentes e celulares).",
+      "tags": [
+        "Conceito", "Segurança cibernética"
+      ]
+    },
+    {
+      "title": "DoS",
+      "description": "DoS é um ataque de negação de serviço, neste ataque é usado apenas um computador que faz muitas consultas em um site em um espaço curto de tempo com o objetivo de tirá-lo do ár.",
+      "tags": [
+        "Conceito", "Segurança cibernética"
+      ]
+    },
+    {
+      "title": "DDoS",
+      "description": "DDoS é um ataque onde muitos dispositivos tentam se conectar ao mesmo tempo no site para sobrecarregá-lo.",
+      "tags": [
+        "Conceito", "Segurança cibernética"
+      ]
+    },
+    {
+      "title": "Laço",
+      "description": "Um laço (do inglês, loop) é uma estrutura de controle que permite executar repetidamente um bloco de código enquanto uma condição for verdadeira. Ele é usado para automatizar tarefas repetitivas e economizar tempo e esforço. Existem vários tipos de laços, como o laço 'for', o laço 'while' e o laço 'do-while'.",
+      "tags": [
+        "Conceito"
+      ]
+    },
+    {
+      "title": "XML",
+      "description": "XML (do inglês, eXtensible Markup Language) é uma linguagem de marcação que define um conjunto de regras para codificar documentos. Ela é uma linguagem de marcação assim como a HTML, porém a XML foi criada para ser mais flexível, permitindo a criação de novas tags, enquanto a HTML possui um número limitado de tags pré-definidas. É uma linguagem genérica que pode ser usada para representar qualquer tipo de dado estruturado. XML é uma linguagem muito popular, sendo usada em bancos de dados, arquivos de configurações de sistemas, transmissão de informações, entre outros.",
+      "tags": [
+        "Conceito"
+      ]
+    },
+    {
+      "title": "Tag em HTML/XML",
+      "description": "Uma tag é um elemento de marcação usado em linguagens de marcação, como HTML e XML, para definir a estrutura e o significado de um documento. Elas são usadas para definir o início e o fim de um elemento, como um parágrafo, uma tabela ou uma imagem. As tags são escritas entre os sinais de menor e maior, como <tag>, sendo a marcação do fim de um elemento definida como </tag>. Se um elemento não possui outros elementos internamente (também chamados de elementos filhos), ele pode ser definido somente como <tag /> ao invés de <tag></tag>.",
+      "tags": [
+        "Conceito"
+      ]
     }
   ]
 }

assets/sass/_variables.sass

@@ -1,6 +1,7 @@
 $black: #232226
 $white: #ffffff
 
+$gray-700: #3e3e3f
 $gray-500: #9698a0
 $gray-300: #cccccc
 $gray-100: #f2f2f2

assets/sass/dark_mode.sass

@@ -7,6 +7,35 @@
     .header
         &__subtitle
             color: $white
+
+        .github-corner
+            color: $black
+    .main
+        .cookies-content
+            background-color: $gray-700
+            .cookies-message 
+                color: $white
+            a
+                color: $primary-100
+
+        .card
+            background-color: $gray-700
+
+            &__title
+                color: $primary-100
+            &__description
+                color: $white
+
+        .search
+            .searchbar
+                background-color: $gray-700
+                color: $white
+                &__input
+                    color: $white
+
+        #tags-filter
+            background-color: $gray-700
+            color: $white
 
 .button-dark-mode
     background-color: $primary-500

index.html

@@ -9,28 +9,37 @@
   <meta name="description"
     content="Um dicionário tech para pessoas que querem aprender mais sobre termos técnicos dentro da tecnologia!" />
 
-    <!-- Favicon -->
-    <link
-      rel="shortcut icon"
-      href="/assets/img/brand/symbol/colored.ico"
-      type="image/x-icon"
-    />
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="/assets/img/brand/symbol/colored.ico" type="image/x-icon" />
 
   <!-- CSS Imports -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="assets/css/style.css" />
   <link rel="stylesheet" href="assets/css/cookies.css">
+  <link rel="stylesheet" href="assets/css/dark_mode.css">
 
   <!-- Phosphor Icons -->
   <script src="https://unpkg.com/@phosphor-icons/web"></script>
 
+  <!-- Analytics -->
+  <script data-goatcounter="https://levxyca.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+
   <title>Diciotech</title>
 </head>
 
 <body>
   <header class="header">
-    <a href="https://github.com/levxyca/diciotech" target="_blank" class="github-corner" aria-label="Visualizar projeto no GitHub"><svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+    <a href="https://github.com/levxyca/diciotech" target="_blank" class="github-corner"
+      aria-label="Visualizar projeto no GitHub"><svg viewBox="0 0 250 250" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor" class="octo-body"></path>
+      </svg></a>
     <h1 class="header__title">
       <img src="/assets/img/brand/logo/colored.png" width="480" height="148" alt="Diciotech" />
     </h1>
@@ -63,7 +72,10 @@ <h2 class="header__subtitle">
     <section class="cards" id="cards"></section>
     <div class="cookies-container">
       <div class="cookies-content">
-        <p class="cookies-message">O Diciotech usa cookies para garantir que você obtenha uma melhor experiência. Desativar os cookies do site pode prejudicar a funcionalidade de alguns recursos e ao continuar usando, você concorda com a nossa Política de Cookies. <a href="https://cookie-consent.app.forthe.top/why-websites-use-cookies/" target="_blank">Ler mais</a></p>
+        <p class="cookies-message">O Diciotech usa cookies para garantir que você obtenha uma melhor experiência.
+          Desativar os cookies do site pode prejudicar a funcionalidade de alguns recursos e ao continuar usando, você
+          concorda com a nossa Política de Cookies. <a
+            href="https://cookie-consent.app.forthe.top/why-websites-use-cookies/" target="_blank">Ler mais</a></p>
         <div class="cookies-buttons">
           <button class="cookies-accept-button">Concordar e fechar</button>
         </div>
@@ -74,4 +86,4 @@ <h2 class="header__subtitle">
   <script src="assets/js/cookies.js" type="module"></script>
 </body>
 
-</html>
+</html>