Document toolboxDocument toolbox

Custom script para o novo Help Center

Owned by Paulo Henrique Paixão
nov. 26, 2024
5 min read

Este artigo pretende ajudar o administrador do Help Center realizar as alterações necessárias no custom script para integração com o novo Help Center.

Antes de iniciar

Certifique-se que o Help Center já foi configurado com as novas definições.

Criar a pasta como nome do produto na pasta src
Criar o arquivo principal app-hc-ndd[produto].js e app-hc-ndd[produto].css dentro da pasta do produto
Importar as estilizações para o arquivo app-hc-ndd[produto].css e alterar a linha 8 para o nome do produto
/* --- IMPORTS --- */ /* BASE */ @import url("../css/base/_base.css"); @import url("../css/base/_typography.css"); /* TEMA */ @import url("../css/theme/_nddorbix.css"); /* LAYOUT */ @import url("../css/layout/_banner.css"); @import url("../css/layout/_breadcrumbs.css"); @import url("../css/layout/_code.css"); @import url("../css/layout/_expand.css"); @import url("../css/layout/_header.css"); @import url("../css/layout/_images.css"); @import url("../css/layout/_lists.css"); @import url("../css/layout/_main-content.css"); @import url("../css/layout/_panels.css"); @import url("../css/layout/_tiles.css"); /* COMPONENTS */ @import url("../css/components/_header-bar.css"); @import url("../css/components/_layout.css"); @import url("../css/components/_article-feedback.css"); /* --- IMPORTS --- */
Importar as funções desejadas para o arquivo app-hc-ndd[produto].js
// Importação das funções uteis para as rotinas import { getCurrentLanguage } from '../js/utils/getLanguage' import { getCurrentProduct } from '../js/utils/getProduct'; import { redirectLinks } from '../js/utils/redirect'; import { handleRoute } from '../js/utils/route' import { removeOldComponent } from '../js/utils/removeOldComponent' // Funções de tradução dos textos do Help Center import { translateTiles } from '../js/components/translation/tiles'; import { translateCategories } from '../js/components/translation/categories'; import { translateHeaderLinks } from '../js/components/translation/headerLinks'; import { translatePlaceholderSearchBar } from '../js/utils/placeholder'; import { formatBreadcrumbs } from '../js/utils/breadcrumbs'; import { createTimeToReadComponent } from '../js/components/header-bar/time-to-read'; import { renderArticleFeedbackComponent } from '../js/components/article-feedback/article-feedback'; // Parâmetros para execução das funções const languagePicked = getCurrentLanguage(); const currentProduct = getCurrentProduct(); const commonParams = { product: currentProduct, language: languagePicked }; handleRoute({ functions: { removeOldComponent, renderArticleFeedbackComponent, translateTiles, translateCategories, translateHeaderLinks, translatePlaceholderSearchBar, redirectLinks, formatBreadcrumbs, createTimeToReadComponent }, params: { renderArticleFeedbackComponentParams: { language: languagePicked }, translateTilesParams: commonParams, translateCategoriesParams: commonParams, translateHeaderLinksParams: commonParams, redirectLinksParams: commonParams, translatePlaceholderSearchBarParams: { language: languagePicked }, createTimeToReadComponentParams: { language: languagePicked } } });

As funções translateTiles, translateCategories e translateHeaderLinks, podem ser utilziadas sempre que o Help Center necessitar ser traduzido para outros idiomas.

Atualizar o arquivo route.js com a URL do novo Help Center. O arquivo se encontra em src/js/utils
const baseUrls = [     'https://helpcenter-testes.ndd.tech',     'https://helpcenter-nddorbix.ndd.tech',     'https://helpcenter-nddprint.ndd.tech',     'https://helpcenter-kubo.ndd.tech',     'https://helpcenter-nddmove.ndd.tech', 'NOVA URL', ];

Traduções

Para os Help Centers que necessitam ter seu conteúdo traduzido, são necessárias algumas atualizações.

Atualizar o novo idioma no arquivo route.js O arquivo se encontra em src/js/utils
const languages = ['', '?l=pt', '?l=en', '?l=es', '?l=it', '?l=NOVOIDIOMA'];
Atualizar o arquivo categoriesResources.json com as traduções das categorias do Help Center. O arquivo se encontra em src/js/components/resources
"nddprint": {     "pt": {       "Preciso de ajuda": {         "text": "Preciso de ajuda"       }     },     "en": {       "Preciso de ajuda": {         "text": "I need some help"       }     },     "es": {       "Preciso de ajuda": {         "text": "Busco ayuda"       }     }   },
Atualizar o arquivo headerLinksResources.json com as traduções dos links do Help Center. O arquivo se encontra em src/js/components/resources
"nddprint": {     "pt": {       "Suporte": {         "text": "Suporte"       }     },     "en": {       "Suporte": {         "text": "Support"       }     },     "es": {       "Suporte": {         "text": "Soporte"       }     }   },
Atualizar o arquivo tilesResources.json com as traduções do título e da descrição (se houver) dos documentos do Help Center. O arquivo se encontra em src/js/components/resources
"nddprint": {     "pt": {       "Comece aqui": {         "headline": "Comece aqui",         "description": "Entenda o conceito dos módulos, funcionalidades e cenários do NDD Print."       }     },     "en": {       "Comece aqui": {         "headline": "Getting started",         "description": "Understand the concept of NDD Print modules, functionalities and scenarios."       }     },     "es": {       "Comece aqui": {         "headline": "Empieza aqui",         "description": "Comprender el principio de los módulos, funcionalidades y escenarios de NDD Print."       }     }   },
Atualizar o arquivo linksDocumentsMapResources.json com os redirecionamentos de links dos documentos (se houver). O arquivo se encontra em src/js/utils/resources
"kubo": {     "pt": {       "https://helpcenter-kubo.ndd.tech/pt/falar-com-suporte/Current/": "https://suporte.ndd.tech/"     },     "en": {       "https://helpcenter-kubo.ndd.tech/en/falar-com-suporte/Current/": "https://suporte.ndd.tech/"     },     "es": {       "https://helpcenter-kubo.ndd.tech/es/falar-com-suporte/Current/": "https://suporte.ndd.tech/"     }   }
asd
asd
as

Tema CSS

Para que o Help Center seja customizado, é necessário que alteremos algumas informações no tema.

Criar o tema (css) do Help Center na pasta src/css/theme com o nome _[produto].css
Atualizar o arquivo do tema com o conteúdo personalizado
:root { --ndd-cargo-primary-color: #cc0000; --ndd-cargo-secondary-color: #071f36; --ndd-cargo-third-color: #224180; --ndd-cargo-link-color: rgba(0,0,0,0.2); --ndd-cargo-link-hover-color: rgba(0,0,0,0.4); --ndd-cargo-link-highlight-color: var(--ndd-cargo-primary-color); --ndd-cargo-link-highlight-hover-color: #b80000; } /* --- LINKS --- */ li.render-links--link { background-color: var(--ndd-cargo-link-color); } li.render-links--link:hover { background-color: var(--ndd-cargo-link-hover-color); -webkit-transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } /* --- LINK DESTACADO --- li.render-links--link:nth-child(4) { background-color: var(--ndd-cargo-link-highlight-color); } li.render-links--link:nth-child(4):hover { background-color: var(--ndd-cargo-link-highlight-hover-color); -webkit-transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }*/ /* ---------------------- HEADER ---------------------- */ /* ---------------------- TILES ---------------------- */ /* --- TILES HELP CATEGORY --- */ /* @media (min-width: 768px) { ul[aria-labelledby="Precisodeajuda"] > li.tile { grid-column: span 3 / span 3; } } */ ul[aria-labelledby="Precisodeajuda"] > li { align-items: center; color: var(--ndd-text-color); } ul[aria-labelledby="Precisodeajuda"] h3.tile__headline { color: var(--ndd-text-color); } /* --- TILES HELP CATEGORY --- */ /* ---------------------- TILES ---------------------- */ /* ---------------------- CONTENT ---------------------- */ /*strong > span[data-colorid] { color: var(--ndd-cargo-primary-color); }*/ /* ---------------------- CONTENT ---------------------- */
Alterar o nome das variáveis do css com o nome do produto

  • --ndd-[produto]-primary-color - Cor primária do produto

  • --ndd-[produto]-secondary-color- Cor secundária do produto

  • --ndd-[produto]-third-color - Cor terciária do produto

  • --ndd-[produto]-link-color - Cor dos links

  • --ndd-[produto]-link-hover-color - Cor quando o mouse é passado sobre o links

  • --ndd-[produto]-link-highlight-color: var(--ndd-[produto]-primary-color) - Cor do link de destaque

  • --ndd-[produto]-link-highlight-hover-color - Cor quando o mouse é passado sobre o link de destaque

:root {   --ndd-[produto]-primary-color: #cc0000; }
Alterar as cores do produto

  • --ndd-[produto]-primary-color: #cc0000;

  • --ndd-[produto]-secondary-color: #071f36;

  • --ndd-[produto]-third-color: #224180;

  • --ndd-[produto]-link-highlight-hover-color: #b80000;

A cor --ndd-[produto]-link-highlight-hover-color pode ser obtida através da sombra do personagem do Banner:

image-20241126-190243.png
:root { --ndd-[produto]-primary-color: #cc0000; --ndd-[produto]-secondary-color: #071f36; --ndd-[produto]-third-color: #224180; --ndd-[produto]-link-color: rgba(0,0,0,0.2); --ndd-[produto]-link-hover-color: rgba(0,0,0,0.4); --ndd-[produto]-link-highlight-color: var(--ndd-[produto]-primary-color); --ndd-[produto]-link-highlight-hover-color: #b80000; }
Criar o script de geração dos arquivos finais no package.json. O arquivo se encontra na pasta raiz do projeto
"nddmove-build": "parcel build src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir public/ --no-source-maps --no-cache", "nddmove-dev": "parcel watch src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir dev/nddmove",
Gerar o build dos arquivos através do comando
npm run ndd[produto]-build
Realizar o commit das alterações para o Git
Realizar o push das alterações para o Git