@actsis/docusaurus-theme NPM

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)

Crea un nuevo proyecto de Docusaurus (with the classic theme!): npx create-docusaurus@latest my-website classic
Instale el paquete del tema Actsis Docusaurus: npm i @actsis/docusaurus-theme

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,
 },

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} />
         );
      }
    ```