feministech · lia-dias · Mar 24, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/dist/dicas/github.md b/dist/dicas/github.md
diff --git a/dist/dicas/javascript.md b/dist/dicas/javascript.md
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="js/dicas.js" onload="onLoad()"></script>
+    <title>Document</title>
+</head>
+<body>
+    Hello
+    <section id="section-diretorios">
+
+    </section>
+</body>
+</html>
diff --git a/dist/js/dicas.js b/dist/js/dicas.js
@@ -0,0 +1,52 @@
+const DIRETORIOS_ROOT_ELEMENT_ID = '#section-diretorios';
+/**
+ * Obtém automaticamente os arquivos contidos em /dicas e os identifica como diretórios
+ */
+function obtemDiretorios() {
+    return fetch('/dicas', {
+        headers: [['Content-type', 'text/html']]
+    // extrai o texto da página
+    }).then(
+        (data) => data.text()
+    // manipula a string para obter a arvore HTML que lista os diretórios
+    ).then(
+        (text) => {
+            const dicasBodyContent = text
+                .replace(/\n/g, '')
+                .replace(/\s{2,}/g, '')
+                .replace(/^.*<body.*?>(.*?)<\/body>.*$/, '$1');
+            const virtualDOM = document.createElement('div');
+            virtualDOM.innerHTML = dicasBodyContent;
+            let files = virtualDOM.querySelectorAll('li');
+            // o primeiro filho é sempre um elemento vazio de retorno
+            [_, ...files] = files;
+            // extrai apenas o dado importante, o nome do arquivo
+            files = files.map(( file ) => file.firstChild.firstChild.innerText.replace('.md', ''))
+            return files;
+        }
+    );
+}
+
+/**
+ * Pega uma lista de diretórios e transforma em HTML para renderizar como navegação
+ * @param {Array<string>} diretorios - ex: [github.md, javascript.md]
+ * @returns 
+ */
+function renderizaDiretorios(diretorios) {
+    const navElements = diretorios.map(diretorio => {
+        const navElement = document.createElement('nav');
+        navElement.innerHTML = `<a href="/${diretorio}">Dicas de ${diretorio[0].toUpperCase()+diretorio.substring(1)}</a>`;
+        return navElement;
+    });
+    const diretorioRootElement = document.querySelector(DIRETORIOS_ROOT_ELEMENT_ID);
+    navElements.forEach((element) => diretorioRootElement.appendChild(element));
+}
+
+/**
+ * Assim que o arquivo é carregado, os diretórios são lidos e renderizados
+ */
+function onLoad() {
+    obtemDiretorios()
+        .then(renderizaDiretorios)
+    ;
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "feminisdicas",
+  "version": "0.0.1",
+  "description": "Um repositório open source contendo dicas da feministech para diversas áreas de tecnologia",
+  "main": "index.html",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/feministech/feminisdicas.git"
+  },
+  "keywords": [
+    "feministech",
+    "dicas",
+    "tecnologia",
+    "opensource"
+  ],
+  "author": "Feministech",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/feministech/feminisdicas/issues"
+  },
+  "homepage": "https://github.com/feministech/feminisdicas#readme",
+  "scripts": {
+    "serve": "npx live-server ./dist --host=localhost"
+  },
+  "devDependencies": {
+    "live-server": "^1.2.2"
+  }
+}