🚧 simple shitty search

Mortaro · Mortaro · commit a762bbd00ea8 · 2022-05-07T20:51:04.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,6 @@ node_modules
 package-lock.json
 yarn.lock
 .development
-.production
+.production
+public/pt-BR.json
+public/en-US.json
diff --git a/i18n/en-US/articles/full-stack-lifecycle.md b/i18n/en-US/articles/full-stack-lifecycle.md
@@ -1,5 +1,5 @@
 ---
-title: Full-Stack Lifecycle
+title: Full Stack Lifecycle
 description: Lifecycle methods are special named functions that you can declare in the class.
 ---
 
diff --git a/i18n/en-US/articles/getting-started.md b/i18n/en-US/articles/getting-started.md
@@ -1,11 +1,11 @@
 ---
 title: Getting Started
-description: Create full-stack JavaScript applications within seconds 
+description: Create full stack JavaScript applications within seconds 
 ---
 
 > 📌 You can watch a video tutorial on our [Youtube Channel](https://www.youtube.com/watch?v=l23z00GEar8&list=PL5ylYELQy1hyFbguVaShp3XujjdVXLpId).
 
-Create full-stack JavaScript applications within seconds using `npx` to generate your project files from the latest template.
+Create full stack JavaScript applications within seconds using `npx` to generate your project files from the latest template.
 
 > 🔥 The minimum required [node.js](https://nodejs.org) version for development mode is *12.20.0*.
 
diff --git a/i18n/en-US/articles/stateful-components.md b/i18n/en-US/articles/stateful-components.md
@@ -1,11 +1,11 @@
 ---
 title: Stateful Components
-description: A productive full-stack web framework should not force you to think about framework details
+description: A productive full stack web framework should not force you to think about framework details
 ---
 
 Stateful components are classes that extend nullstack and are able to hold state that reflects in the ui.
 
-A productive full-stack web framework should not force you to think about framework details.
+A productive full stack web framework should not force you to think about framework details.
 
 Nullstack takes control of its subclasses and generates a proxy for each instance.
 
diff --git a/i18n/en-US/components/Contributors.yml b/i18n/en-US/components/Contributors.yml
@@ -13,7 +13,7 @@ roadmap:
 core:
   title: "The Core Team"
   paragraphs:
-    - "Nullstack was developed by full-stack neuro-atypical ex-freelancers."
+    - "Nullstack was developed by full stack neuro-atypical ex-freelancers."
     - "With a heavy background in Rails, Ember.js, React.js and the Vue.js philosophy the inspirations took from those projects might be obvious."
   team:
     - name: "Christian Mortaro"
@@ -27,7 +27,7 @@ core:
       github: "AnnyFigueira"
       description: "Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything."
       contribution: "An early adopter of the framework that developed real production applications to validate how the parts fit together."
-      work: "Fullstack developer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 12 years of experience in web development"
+      work: "Full stack developer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 12 years of experience in web development"
     - name: "Dayson Marx" 
       role: "Distracted Designer" 
       github: "daysonmarx"
@@ -61,7 +61,7 @@ contentCreators:
     - name: "Alisson Suassuna"
       role: "TipsCode instructor"
       github: "alissonsuassuna"
-      description: "Full-stack JavaScript developer, passionate about technology. Reader of bibles and documentations."
+      description: "Full stack JavaScript developer, passionate about technology. Reader of bibles and documentations."
       contribution: "Creates <a href='https://www.youtube.com/playlist?list=PLw608KLEKJz_W3P6hRayh6fz9BL13soI1' class='text-pink-600' target='_blank' rel='noopener'>tutorials about Nullstack explaining step-by-step</a>. Focused in making Nullstack easy to use." 
       work: "Founder and instructor at  <a href='https://tipscode.com.br/' class='text-pink-600' target='_blank' rel='noopener'>TipsCode</a> with over 8 years of experience in computer science"
 
diff --git a/i18n/en-US/components/Documentation.yml b/i18n/en-US/components/Documentation.yml
@@ -9,7 +9,7 @@ topics:
         href: "/stateless-components"
       - title: "Stateful components"
         href: "/stateful-components"
-      - title: "Full-stack lifecycle"
+      - title: "Full stack lifecycle"
         href: "/full-stack-lifecycle"
       - title: "Server functions"
         href: "/server-functions"
diff --git a/i18n/en-US/components/Header.yml b/i18n/en-US/components/Header.yml
@@ -13,6 +13,8 @@ links:
 action:
   title: "Get Started"
   href: "/getting-started"
+search:
+  title: "Search"
 language: 
   title: "Português"
   href: "/pt-br"
diff --git a/i18n/en-US/components/Home.yml b/i18n/en-US/components/Home.yml
@@ -1,8 +1,8 @@
-title: "Feature-Driven Fullstack JavaScript Components"
-description: "Nullstack is a Feature-Driven fullstack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production"
+title: "Feature-Driven Full Stack JavaScript Components"
+description: "Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production"
 hero:
   heading: "Feature-Driven"
-  subHeading: "Fullstack JavaScript Components"
+  subHeading: "Full Stack JavaScript Components"
   descriptions:
     - "Write the backend and frontend of a feature in a single
       component and let the framework decide where the code should run."
@@ -37,7 +37,7 @@ features:
     snippet: "GlueCode"
     image: "/illustrations/nulla-glue.webp"
     text:
-      "A full-stack Lifecycle combined with a feature-driven mindset allows
+      "A full stack lifecycle combined with a feature-driven mindset allows
       you to write clean and reusable code without the need to create APIs
       manually."
   - title: "Become a programmer less dependent on gimmicks"
diff --git a/i18n/en-US/components/Search.yml b/i18n/en-US/components/Search.yml
@@ -0,0 +1,4 @@
+title: "Search in the documentation"
+close: "close"
+empty: "No results found for the term"
+placeholder: "What are you looking for?"
diff --git a/i18n/pt-BR/articles/ciclo-de-vida-full-stack.md b/i18n/pt-BR/articles/ciclo-de-vida-full-stack.md
@@ -1,5 +1,5 @@
 ---
-title: Ciclo de Vida Full-Stack
+title: Ciclo de Vida Full Stack
 description: Métodos de ciclo de vida são funções nomeadas de forma especial que você pode declarar na classe
 ---
 
diff --git a/i18n/pt-BR/articles/comecando.md b/i18n/pt-BR/articles/comecando.md
@@ -1,11 +1,11 @@
 ---
 title: Começando
-description: Crie aplicações full-stack em JavaScript em meros segundos
+description: Crie aplicações full stack em JavaScript em meros segundos
 ---
 
 > 📌 Você pode assistir um tutorial no nosso [Canal do Youtube](https://www.youtube.com/watch?v=ieLVXZGXUkI&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe).
 
-Crie aplicações JavaScript full-stack em segundos usando `npx` para gerar os arquivos do seu projeto usando o template mais recente.
+Crie aplicações JavaScript full stack em segundos usando `npx` para gerar os arquivos do seu projeto usando o template mais recente.
 
 > 🔥 A versão mínima necessária do [node.js](https://nodejs.org/pt-br/) para o modo de desenvovimento é *12.20.0*.
 
diff --git a/i18n/pt-BR/articles/componentes-com-estado.md b/i18n/pt-BR/articles/componentes-com-estado.md
@@ -1,9 +1,9 @@
 ---
 title: Componentes com estado
-description: Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura
+description: Um framework web full stack produtivo não deve forçar você a pensar sobre detalhes de estrutura
 ---
 
-Um framework web full-stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
+Um framework web full stack produtivo não deve forçar você a pensar sobre detalhes de estrutura.
 
 Nullstack assume o controle de suas subclasses e gera um proxy para cada instância.
 
diff --git a/i18n/pt-BR/components/Contributors.yml b/i18n/pt-BR/components/Contributors.yml
@@ -13,7 +13,7 @@ roadmap:
 core:
   title: "A Equipe Principal"
   paragraphs:
-    - "O Nullstack foi desenvolvido por ex-freelancers full-stacks neuroatípicos."
+    - "O Nullstack foi desenvolvido por ex-freelancers full stack neuroatípicos."
     - "Com um histórico pesado em Rails, Ember.js, React.js e filosofia Vue.js as inspirações tiradas desses projetos podem ser óbvias."
   team:
     - name: "Christian Mortaro"
@@ -27,7 +27,7 @@ core:
       github: "AnnyFigueira"
       description: "Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo."
       contribution: "Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam."
-      work: "Fullstack developer na <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 12 anos de experiência em desenvolvimento web"
+      work: "Full stack developer na <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 12 anos de experiência em desenvolvimento web"
     - name: "Dayson Marx"
       role: "Designer Distraído"
       github: "daysonmarx"
@@ -61,7 +61,7 @@ contentCreators:
     - name: "Alisson Suassuna"
       role: "Instrutor da TipsCode"
       github: "alissonsuassuna"
-      description: "Desenvolvedor Full-stack JavaScript, apaixonado por tecnologia. Leitor de biblias e documentações."
+      description: "Desenvolvedor full stack JavaScript, apaixonado por tecnologia. Leitor de biblias e documentações."
       contribution: "Criando <a href='https://www.youtube.com/playlist?list=PLw608KLEKJz_W3P6hRayh6fz9BL13soI1' class='text-pink-600' target='_blank' rel='noopener'>tutoriais passo-a-passo sobre Nullstack</a>. Com objetivo de tornar o Nullstack fácil de usar."
       work: "Fundador e instrutor na <a href='https://tipscode.com.br/' class='text-pink-600' target='_blank' rel='noopener'>TipsCode</a> com ais de 8 anos de experiência em ciências da computação"
 
diff --git a/i18n/pt-BR/components/Documentation.yml b/i18n/pt-BR/components/Documentation.yml
@@ -1,7 +1,7 @@
 title: "Documentação"
-description: "Siga esses passos e se torne um desenvolvedor full-stack javascript!"
+description: "Siga esses passos e se torne um desenvolvedor full stack javascript!"
 heading: "Documentação do Nullstack"
-tagline: "Siga esses passos e se torne um desenvolvedor full-stack javascript!"
+tagline: "Siga esses passos e se torne um desenvolvedor full stack javascript!"
 topics:
   - title: "Principais conceitos"
     links:
@@ -13,7 +13,7 @@ topics:
         href: "/pt-br/componentes-renderizaveis"
       - title: "Componentes com estado"
         href: "/pt-br/componentes-com-estado"
-      - title: "Ciclo de vida full-stack"
+      - title: "Ciclo de vida full stack"
         href: "/pt-br/ciclo-de-vida-full-stack"
       - title: "Funções de servidor"
         href: "/pt-br/funcoes-de-servidor"
diff --git a/i18n/pt-BR/components/Header.yml b/i18n/pt-BR/components/Header.yml
@@ -13,6 +13,8 @@ links:
 action:
   title: "Começar"
   href: "/pt-br/comecando"
+search:
+  title: "Buscar"
 language: 
   title: "English"
   href: "/"
diff --git a/i18n/pt-BR/components/Home.yml b/i18n/pt-BR/components/Home.yml
@@ -1,7 +1,7 @@
-title: "Componentes JavaScript Fullstack Orientados a Recursos"
-description: "Nullstack é um framework JavaScript fullstack orientado a recursos que ajuda você a construir aplicações isomórficas e focar em botar produtos em produção"
+title: "Componentes JavaScript Full Stack Orientados a Recursos"
+description: "Nullstack é um framework JavaScript full stack orientado a recursos que ajuda você a construir aplicações isomórficas e focar em botar produtos em produção"
 hero:
-  heading: "Componentes JavaScript Fullstack"
+  heading: "Componentes JavaScript Full Stack"
   subHeading: "Orientados a Recursos"
   descriptions:
     - "Escreva o backend e frontend de um recurso em um único
@@ -31,7 +31,7 @@ features:
     snippet: "GlueCode"
     image: "/illustrations/nulla-glue.webp"
     text:
-      "Um ciclo de vida full-stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente."
+      "Um ciclo de vida full stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente."
   - title: "Torne-se um programador menos dependente de maneirismos"
     snippet: "Vanilla"
     image: "/illustrations/nulla-scrolls.webp"
@@ -57,7 +57,7 @@ playlist:
   slang: "Dweebs"
   realWord: " Especialistas"
   videos:
-    - title: "Full-stack com Nullstack"
+    - title: "Full Stack com Nullstack"
       link: "https://www.youtube.com/watch?v=ieLVXZGXUkI&list=PL5ylYELQy1hz1tcnZcP44xRxETpH9bTUe"
       thumbnail: "/thumbnails/pt-br-pokepoll.webp"
     - title: "Open Source no Brasil - Ajude a traduzir o Nullstack"
diff --git a/i18n/pt-BR/components/Search.yml b/i18n/pt-BR/components/Search.yml
@@ -0,0 +1,4 @@
+title: "Busque na documentação"
+close: "fechar"
+empty: "Nenhum resultado encontrado para o termo"
+placeholder: "O que você está procurando?"
diff --git a/icons/Search.njs b/icons/Search.njs
@@ -0,0 +1,8 @@
+export default function Search({ size }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  )
+}
diff --git a/server.js b/server.js
@@ -1,26 +1,110 @@
-import { readdirSync } from 'fs';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
 import Nullstack from "nullstack";
 import path from 'path';
 import Application from "./src/Application";
+import prismjs from 'prismjs';
+import { Remarkable } from 'remarkable';
+import meta from 'remarkable-meta';
+import 'prismjs/components/prism-jsx.min';
 
 const context = Nullstack.start(Application);
 
-const { worker, project } = context;
-
-const articles = readdirSync(path.join(__dirname, '../i18n/en-US', 'articles'));
-const illustrations = readdirSync(path.join(__dirname, '../public', 'illustrations'));
-
-worker.preload = [
-  ...articles.map((article) => '/' + article.replace('.md', '')).filter((article) => article.indexOf('404') === -1),
-  ...illustrations.map((illustration) => '/illustrations/' + illustration),
-  '/arrow.webp',
-  '/stars.webp',
-  '/footer.webp',
-  '/contributors',
-  '/roboto-v20-latin-300.woff2',
-  '/roboto-v20-latin-500.woff2',
-  '/crete-round-v9-latin-regular.woff2',
-]
+const { worker, project, environment } = context;
+
+function slugify(string) {
+  return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z ]/g, "").toLowerCase()
+}
+
+const locales = ['en-US', 'pt-BR']
+context.articles = {}
+
+for (const locale of locales) {
+  context.articles[locale] = {}
+  const articles = readdirSync(path.join(__dirname, `../i18n/${locale}`, 'articles'));
+  // preload files for workers
+  if (locale === 'en-US') {
+    const illustrations = readdirSync(path.join(__dirname, '../public', 'illustrations'));
+    worker.preload = [
+      ...articles.map((article) => '/' + article.replace('.md', '')).filter((article) => article.indexOf('404') === -1),
+      ...illustrations.map((illustration) => '/illustrations/' + illustration),
+      '/en-US.json',
+      '/arrow.webp',
+      '/stars.webp',
+      '/footer.webp',
+      '/contributors',
+      '/roboto-v20-latin-300.woff2',
+      '/roboto-v20-latin-500.woff2',
+      '/crete-round-v9-latin-regular.woff2',
+    ]
+  }
+  const map = {}
+  for (const article of articles) {
+    const content = readFileSync(path.join(__dirname, `../i18n/${locale}`, 'articles', article), 'utf-8')
+    // preload articles markdown
+    const md = new Remarkable({
+      highlight: (code) => Prism.highlight(code, prismjs.languages.jsx, 'javascript')
+    });
+    md.use(meta);
+    md.use((md) => {
+      const originalRender = md.renderer.rules.link_open;
+      md.renderer.rules.link_open = function () {
+        let result = originalRender.apply(null, arguments);
+        const regexp = /href="([^"]*)"/;
+        const href = regexp.exec(result)[1];
+        if (!href.startsWith('/')) {
+          result = result.replace('>', ' target="_blank" rel="noopener">');
+        }
+        return result;
+      };
+    });
+    md.use((md) => {
+      md.renderer.rules.heading_open = function (tokens, i) {
+        const { content } = tokens[i + 1];
+        const { hLevel } = tokens[i];
+        const id = content.toLowerCase().split(/[^a-z]/).join('-');
+        return `<h${hLevel} id="${id}"><a href="#${id}">`;
+      }
+      md.renderer.rules.heading_close = function (tokens, i) {
+        const { hLevel } = tokens[i];
+        return `</a></h${hLevel}>`;
+      }
+    });
+    context.articles[locale][article] = {
+      html: md.render(content),
+      ...md.meta,
+    }
+    // generate word map for search
+    const lines = []
+    let shouldSkip = false
+    for (const line of content.split("\n")) {
+      if (line.startsWith('```')) {
+        shouldSkip = !shouldSkip
+      } else if (!shouldSkip && !(line.includes('[') && line.includes(']'))) {
+        lines.push(line)
+      }
+    }
+    const words = lines.join(" ").split(" ")
+    const wordMap = {}
+    for (const word of words) {
+      const slug = slugify(word)
+      if (!slug) continue
+      if (!wordMap[slug]) {
+        wordMap[slug] = 1
+      } else {
+        wordMap[slug]++
+      }
+    }
+    const key = article.replace('.md', '')
+    map[key] = {
+      ...md.meta,
+      href: locale === 'en-US' ? `/${key}` : `/${locale.toLowerCase()}/${key}`,
+      words: wordMap
+    }
+  }
+  const json = environment.development ? JSON.stringify(map, null, 2) : JSON.stringify(map)
+  writeFileSync(`public/${locale}.json`, json)
+}
+
 
 project.name = 'Nullstack';
 project.domain = 'nullstack.app';
diff --git a/src/Application.njs b/src/Application.njs
@@ -9,6 +9,7 @@ import Footer from './Footer';
 import Header from './Header';
 import Home from './Home';
 import Loader from './Loader';
+import Search from './Search.njs';
 import "./tailwind.css";
 import Waifu from './Waifu';
 
@@ -58,6 +59,8 @@ class Application extends Nullstack {
           <Header locale={locale} />
           <HiringBanner />
 
+          <Search locale={locale} persistent key="search" />
+
           <Home route="/" locale="en-US" persistent />
           <Home route="/pt-br" locale="pt-BR" persistent />
 
diff --git a/src/Article.njs b/src/Article.njs
diff --git a/src/Footer.njs b/src/Footer.njs
diff --git a/src/Header.njs b/src/Header.njs
diff --git a/src/Search.njs b/src/Search.njs
