initial commit

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 devsChile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,147 @@
+<div align="center">
+  <h1>Mampara</h1>
+  <p>Clon de Glassdoor criollo. Pero más humilde y honesto. Por DevsChile. 💪</p>
+
+<!-- Badges -->
+<p>
+  <a href="https://github.com/devschile/mampara/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/devschile/mampara" alt="contributors" />
+  </a>
+  <a href="">
+    <img src="https://img.shields.io/github/last-commit/devschile/mampara" alt="last update" />
+  </a>
+  <a href="https://github.com/devschile/mampara/network/members">
+    <img src="https://img.shields.io/github/forks/devschile/mampara" alt="forks" />
+  </a>
+  <a href="https://github.com/devschile/mampara/stargazers">
+    <img src="https://img.shields.io/github/stars/devschile/mampara" alt="stars" />
+  </a>
+  <a href="https://github.com/devschile/mampara/issues/">
+    <img src="https://img.shields.io/github/issues/devschile/mampara" alt="open issues" />
+  </a>
+  <a href="https://github.com/devschile/mampara/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/devschile/mampara.svg" alt="license" />
+  </a>
+</p>
+
+<h4>
+    <a href="https://github.com/devschile/mampara/">Ver proyecto</a>
+  <span> · </span>
+    <a href="https://github.com/devschile/mampara/issues/">Reportar un error o una mejora</a>
+  </h4>
+</div>
+
+<br />
+
+<!-- About the Project -->
+## :star2: Sobre el proyecto
+
+<div align="center"> 
+  <img src="https://i.imgur.com/n0GmWPU.jpg" alt="screenshot" />
+</div>
+
+
+<!-- TechStack -->
+### :space_invader: Tech Stack
+
+<p><b>Front-end:</b></p>
+<ul>
+  <li><a href="https://picocss.com/">Pico.css</a></li>
+  <li><a href="https://github.com/mutable-tools/MutableJS">MutableJS</a></li>
+  <li><a href="https://vitejs.dev/">Vite</a></li>
+</ul>
+
+<p><b>Servicios serverless:</b></p>
+<ul>
+  <li><a href="https://airtable.com/">Airtable</a></li>
+  <li><a href="https://auth0.com/">Auth0</a></li>
+  <li><a href="https://logrocket.com/">LogRocket</a></li>
+</ul>
+
+<!-- Env Variables -->
+### :key: Variables de entorno
+
+Se utilizan las siguientes variables de entorno a un archivo `.env` en la raíz del proyecto:
+
+```bash
+VITE_AIRTABLE_KEY   = ''
+VITE_AIRTABLE_NAME  =  ''
+VITE_AIRTABLE_TABLE =  ''
+VITE_AUTH0_CLIENTID =  ''
+VITE_AUTH0_DOMAIN   =  ''
+VITE_LOGROCKET      =  ''
+```
+
+<!-- Getting Started -->
+## 	:toolbox: Desarrollando
+
+<!-- Prerequisites -->
+### :bangbang: Pre-requisitos
+
+Mampara utiliza Yarn como gestor de paquetes:
+
+```bash
+ npm install -g yarn
+```
+
+(Asegúrate de tener instalado al menos Node v16.16.0).
+
+<!-- Installation -->
+### :gear: Instalación
+
+Fork y clona este repositorio e instala las dependencias:
+
+```bash
+  git clone git@github.com:devschile/mampara.git
+  cd mampara && yarn
+```
+
+
+<!-- Run Locally -->
+### :running: Correr localmente
+
+Fork y clona este repositorio
+
+```bash
+  git clone git@github.com:devschile/mampara.git
+  cd mampara
+```
+
+Instala las dependencias
+
+```bash
+  yarn install
+```
+
+Inicia el servidor
+
+```bash
+  yarn dev
+```
+
+<!-- Roadmap -->
+## :compass: Roadmap
+
+Puedes revisar el [tablero de pendientes y avances para Mampara](https://github.com/orgs/devschile/projects/1) y contribuir :clap:.
+
+<!-- Contributing -->
+## :wave: Contribuir
+
+<a href="https://github.com/devschile/mampara/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=devschile/mampara" />
+</a>
+
+¡Toda ayuda es bienvenida! Revisa el _roadmap_ y cualquier aporte no olvides utilizar el [estándar Angular para GIT](https://gist.github.com/brianclements/841ea7bffdb01346392c).
+
+<!-- License -->
+## :warning: Licencia
+
+Distribuído bajo la [licencia MIT](https://github.com/devschile/mampara/blob/master/LICENSE).
+
+
+<!-- Contact -->
+## :handshake: Contacto
+
+Jorge Epuñan - [@jorgeepunan](https://twitter.com/jorgeepunan) - jqizdcen@duck.com
+
+Código fuente: [https://github.com/devschile/mampara](https://github.com/devschile/mampara)

css/style.css

@@ -0,0 +1,93 @@
+.hidden {
+  display: none;
+}
+
+.alert {
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid #b71c1c;
+  border-radius: 0.25rem;
+  background-color: #11191f;
+}
+
+@media (min-width: 992px) {
+  .review {
+    grid-template-columns: 350px 1fr;
+  }
+
+  .home {
+    grid-template-columns: .5fr;
+    justify-content: center;
+  }
+
+  .average-data {
+    text-align: right;
+  }
+}
+
+@media (max-width: 991px) {
+  .review article {
+    margin: 1rem 0;
+  }
+}
+
+.review details {
+  border-bottom: none;
+}
+
+.review-range th,
+.review-range td {
+  text-align: center;
+}
+
+.review-range td progress {
+  margin-bottom: 0;
+}
+
+.review-addons > div:not(:last-child) {
+  border-bottom: 1px solid #1f2d38;
+}
+
+.review-addons > div h5 {
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+
+.review-addons > div pre {
+  padding: .5rem;
+  font-size: 16px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  background: none;
+  border-radius: 0;
+}
+
+.container + hr {
+  margin-top: 0;
+}
+
+nav h1 {
+  margin-bottom: 0;
+  font-size: 1.4rem;
+}
+
+footer p {
+  font-size: 8px;
+  text-align: center;
+}
+
+select {
+  margin-bottom: 2rem;
+}
+
+section {
+  margin-bottom: 0;
+}
+
+details:last-child {
+  margin-bottom: 0;
+}
+
+body > main {
+  padding-bottom: 0;
+}

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="es" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mampara - por DevsChile</title>
+    <meta name="title" content="Mampara - por DevsChile">
+    <meta name="description" content="Clon de Glassdoor criollo, pero más humilde y honesto 💪">
+    <meta property="og:image" content="/social.jpg">
+    <meta property="twitter:image" content="/social.jpg">
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <style>[m-mask]{display:none}</style>
+    <link rel="stylesheet" href="node_modules/@picocss/pico/css/pico.min.css">
+  </head>
+  <body id="app" m-mask>
+    <div class="container">
+      <menu title="{{ site.title }}" />
+    </div>
+    <hr>
+    <main class="container">
+      <hgroup>
+        <h2><small>{{ site.description }}</small></h2>
+        <h3>{{ site.copyright }}</h3>
+      </hgroup>
+      <home auth="{{ is_auth }}" m-literal:auth="is_auth" username="{{ user.name }}" useremail="{{ user.email }}" />
+    </main>
+    <foot />
+
+    <script src="https://tally.so/widgets/embed.js"></script>
+    <script src="js/Mutable.min.js"></script>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,63 @@
+import './css/style.css'
+import './src/Log'
+
+import createAuth0Client from '@auth0/auth0-spa-js'
+
+import Footer from './src/components/Footer'
+import Menu from './src/components/Menu'
+import Home from './src/components/Home'
+
+Mutable.component('menu', Menu)
+Mutable.component('foot', Footer)
+Mutable.component('home', Home)
+
+const auth0 = await createAuth0Client({
+  domain: import.meta.env.VITE_AUTH0_DOMAIN,
+  client_id: import.meta.env.VITE_AUTH0_CLIENTID,
+  redirect_uri: window.location.origin,
+})
+
+new Mutable({
+  el: '#app',
+  data: {
+    is_auth: false,
+    site: {
+      title: 'Mampara',
+      description: 'Clon de Glassdoor criollo',
+      copyright: 'Pero más humilde y honesto. Por DevsChile. 💪',
+    },
+    user: {
+      name: '',
+      email: '',
+    },
+  },
+  methods: {
+    getParams: async function() {
+      const query = window.location.search
+      const shouldParseResult = query.includes("code=") && query.includes("state=")
+
+      if (shouldParseResult) {
+        await auth0.handleRedirectCallback()
+        window.history.replaceState({}, document.title, '/')
+        this.callMethod('isAuth', [])
+      }
+    },
+    isAuth: async function() {
+      const isAuthenticated = await auth0.isAuthenticated()
+      this.callMethod('getParams', [])
+
+      if (isAuthenticated) {
+        const userProfile = await auth0.getUser()
+        // set data
+        this.set('is_auth', true)
+        this.set('user.name', userProfile.name)
+        this.set('user.email', userProfile.email)
+      }
+    },
+  },
+  hooks: {
+    mounted() {
+      this.callMethod('isAuth', [])
+    }
+  }
+})