Add docs for nullstack/logo in EN/BR

GuiDevloper · GuiDevloper · commit 7e47095fb480 · 2021-04-15T02:35:19.000-03:00
diff --git a/i18n/en-US/articles/nullstack-logo.md b/i18n/en-US/articles/nullstack-logo.md
@@ -0,0 +1,35 @@
+---
+title: Nullstack Logo
+description: Nullstack comes with it's set of logos built-in
+---
+
+Nullstack comes with it's set of logos built-in to be used as components:
+
+```jsx
+import Nullstack from 'nullstack';
+import Logo from 'nullstack/logo';
+
+class Application extends Nullstack {
+
+  render() {
+    return (
+      <main>
+        <Logo height={30} light />
+        <Logo height={30} monotone />
+        <Logo height={30} light monotone />
+        <Logo height={30} duotone />
+        <Logo height={30} light duotone />
+      </main>
+    )
+  }
+
+}
+
+export default Application;
+```
+
+The above components and it's attributes generates the following logos:
+
+![Nullstack Logos](/nullstack-logos.png)
+
+The Logo uses full width and has color `duotone` by default.
diff --git a/i18n/en-US/components/Components.yml b/i18n/en-US/components/Components.yml
@@ -31,3 +31,7 @@ topics:
         repository: "https://github.com/Mortaro/nullstack-cep-input"
       - title: "Phone Input"
         repository: "https://github.com/Mortaro/nullstack-phone-input"
+  - title: "Assets"
+    projects:
+      - title: "Nullstack Logo"
+        repository: "/nullstack-logo"
diff --git a/i18n/pt-BR/articles/nullstack-logo.md b/i18n/pt-BR/articles/nullstack-logo.md
@@ -0,0 +1,35 @@
+---
+title: Logo Nullstack
+description: Nullstack vem com seu conjunto de logotipos prontos pra uso
+---
+
+O Nullstack vem com seu conjunto de logotipos prontos para serem usados ​​como componentes:
+
+```jsx
+import Nullstack from 'nullstack';
+import Logo from 'nullstack/logo';
+
+class Application extends Nullstack {
+
+  render() {
+    return (
+      <main>
+        <Logo height={30} light />
+        <Logo height={30} monotone />
+        <Logo height={30} light monotone />
+        <Logo height={30} duotone />
+        <Logo height={30} light duotone />
+      </main>
+    )
+  }
+
+}
+
+export default Application;
+```
+
+Os componentes acima e seus atributos geram os seguintes logotipos:
+
+![Nullstack Logos](/nullstack-logos.png)
+
+O logotipo usa largura total e cores de `duotone` por padrão.
diff --git a/i18n/pt-BR/components/Components.yml b/i18n/pt-BR/components/Components.yml
@@ -31,3 +31,7 @@ topics:
         repository: "https://github.com/Mortaro/nullstack-cep-input"
       - title: "Input para Telefone"
         repository: "https://github.com/Mortaro/nullstack-phone-input"
+  - title: "Assets"
+    projects:
+      - title: "Logo Nullstack"
+        repository: "/pt-br/nullstack-logo"
diff --git a/public/nullstack-logos.png b/public/nullstack-logos.png
diff --git a/src/Components.njs b/src/Components.njs
@@ -8,7 +8,11 @@ class Components extends Translatable {
 
   renderProject({title, repository}) {
     return (
-      <a href={repository} target="_blank" rel="noopener" class="xl x12 p3y bcm2t ci1">
+      <a
+        href={repository}
+        target={repository.indexOf('http') === 0 && "_blank"}
+        rel="noopener" class="xl x12 p3y bcm2t ci1"
+      >
         {title}
       </a>
     )
