Actsis Docusaurus theme

Este tema agrega anulaciones de estilo y nuevos componentes para crear páginas de proyecto basadas en Docusaurus.

To get started (WIP)

1. Crea un nuevo proyecto de Docusaurus (with the classic theme!): npx create-docusaurus@latest my-website classic

2. Instale el paquete del tema Actsis Docusaurus: npm i @actsis/docusaurus-theme

3. Configurar Docusaurus:

   • Abra el archivo de configuración (docusaurus.config.js)

   • Edita tu title, tagline y favicon

   • Edita la barra de navegación:

     • Eliminar title del objeto navbar
     • Configure el logo y los items del menú (evite el anidamiento de varios niveles si es posible)

   • Editar el pie de página

     footer: {
             links: [
                 {
                     title: 'Community',
                     items: [
                         {
                             label: '',
                             href: 'https://...',
                             icon: '',
                         },
                         ...
                     ],
                 },
             ],
     }

     Nota: busque el icono en el componente Icono del paquete (también incluirá una lista en algún momento)

   • Editar el copyright

   • En la parte superior del archivo agregue:

     const darkCodeTheme = require('prism-react-renderer/themes/dracula');

   • Agregue estos al final de la configuración, justo después de copyright:

      prism: {
         theme: darkCodeTheme,
      },
      colorMode: {
         defaultMode: 'light',
         disableSwitch: true,
         respectPrefersColorScheme: false,
      },

4. Anular algunos de los componentes predeterminados

   • Reemplazar el pie de página

     • Vaya a src/theme y cree una carpeta Footer en él

     • Cree un archivo index.js con los siguientes contenidos:

        import React from 'react';
        import { useThemeConfig } from '@docusaurus/theme-common';
       
        import { Footer as ActsisFooter } from '@actsis/docusaurus-theme';
       
        function Footer() {
           const { footer } = useThemeConfig();
       
           return (
              <ActsisFooter footer={footer} />
           );
        }
       
        export default React.memo(Footer);

   • Reemplazar el contenido de la página de listado del blog.

     • Vaya a src/theme y cree una carpeta BlogListPage en ella

     • Cree un archivo index.js con los siguientes contenidos:

         import React from 'react';
         import clsx from 'clsx';
         import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
         import {
            PageMetadata,
            HtmlClassNameProvider,
            ThemeClassNames,
         } from '@docusaurus/theme-common';
         import BlogLayout from '@theme/BlogLayout';
         import BlogListPaginator from '@theme/BlogListPaginator';
         import SearchMetadata from '@theme/SearchMetadata';
         import BlogPostItems from '@theme/BlogPostItems';
         import { EsOpenSource } from '../sections/os-projects';
         import { EsOsFreebies } from '../sections/os-freebies';
       
         function BlogListPageMetadata(props) {
            const { metadata } = props;
            const {
               siteConfig: { title: siteTitle },
            } = useDocusaurusContext();
            const { blogDescription, blogTitle, permalink } = metadata;
            const isBlogOnlyMode = permalink === '/';
            const title = isBlogOnlyMode ? siteTitle : blogTitle;
            return (
               <>
                  <PageMetadata title={title} description={blogDescription} />
                  <SearchMetadata tag='blog_posts_list' />
               </>
            );
         }
       
         function BlogListPageContent(props) {
            const { metadata, items } = props;
       
            return (
               <BlogLayout>
                  <h1 className='es-big-title'>Typing as <wbr /> we code</h1>
       
                  <div className='es-blog-grid'>
                     <BlogPostItems items={items} />
                  </div>
       
                  <BlogListPaginator metadata={metadata} />
                  <EsOpenSource gray />
                  <EsOsFreebies gray />
               </BlogLayout>
            );
         }
       
         export default function BlogListPage(props) {
            return (
               <HtmlClassNameProvider
                  className={clsx(
                     ThemeClassNames.wrapper.blogPages,
                     ThemeClassNames.page.blogListPage,
                  )}>
                  <BlogListPageMetadata {...props} />
                  <BlogListPageContent {...props} />
               </HtmlClassNameProvider>
            );
         }

       (asegúrese de reemplazar cualquier contenido genérico aquí, como IconLinkCards)

• Reemplace las tarjetas de Admonition - Vaya a src/theme y cree una carpeta Admonition en él - Cree un archivo index.js con los siguientes contenidos: jsx import React from 'react'; import { AdmonitionCard } from '@actsis/docusaurus-theme'; export default function Admonition(props) { return ( <AdmonitionCard {...props} /> ); }

5. Cree su sitio npm start y verifique todo

Componentes incorporados

Descripción más detallada próximamente

• CtaCards
• CtaImageButton
• FeatureShowcase
• Hero
• IconLinkCards
• ImageAndText
• ActsisLogo
• ShowcaseCard
• TextCards
• icons