
# Tema oscuro con Nextjs

<Date date="02-03-2023" />

<GoogleAdsense />

Hay muchas formas de hacer la gestión de temas de estilos en React y Nextjs, pero todas ellas pasan por tener un array/objecto con todos los estilos de cada uno de los distintos temas, también
otra de las formas es usar variables de css o scss _estas últimas están en cada vez en más deshuso_. Yo, en particular voy a usar variables de css y fijar un tema por defecto en mi \_document . ¿ Por qué aquí ?

Por que \_document se ejecuta en servidor no como \_app que lo hace en cliente y si usas un useEffect para setear tu tema por defecto o detectar el que tiene el usuario en su sistema operativo,
en el tiempo que se tarda en hacer esta comprobación y añadirlo, puede darse un parpadeo en los estilos de la pagina. Eso puede resultar extraño.

Yo lo hice así:

## 1 - Variables de css

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```css globals.css
:root {
    /* commons */
    --white-color: 255, 255, 255;
    --color-available-arrow: 95, 91 98;
    ...;
}

[data-theme='dark'] {
    --blog-nav: 48, 41, 51;
    --blog-header: 53, 45, 55;
    ...;
}

[data-theme='light'] {
    --blog-nav: 204, 202, 219;
    --blog-header: 255, 255, 255;
    ...;
}
```

</CH.Code>

## 2 - Fijar tema por defecto

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx _document.tsx mark=4

const Document = (props: Props) => {
    return (
        <Html lang={props.__NEXT_DATA__.locale} data-theme="light">
    )
}

```

</CH.Code>

## 3 - Custom hook para cambiar el tema

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts useDarkMode.ts
import React from 'react';

const scheme = {
    light: 'light' as const,
    dark: 'dark' as const,
};

const useDarkMode = (): { theme: null | 'dark' | 'light'; toggleTheme: () => void; scheme: typeof scheme } => {
    const [theme, setTheme] = React.useState<null | 'dark' | 'light'>(null);

    React.useEffect(() => {
        if (typeof window !== 'undefined' && window.matchMedia) {
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            const handler = (event: MediaQueryListEvent) => {
                setTheme(event.matches ? scheme.dark : scheme.light);
            };
            mediaQuery.addEventListener('change', handler);
            return () => mediaQuery.removeEventListener('change', handler);
        }
    }, []);

    React.useEffect(() => {
        if (typeof window !== 'undefined' && theme) {
            document.documentElement.setAttribute('data-theme', theme);
        }
    }, [theme]);

    const toggleTheme = () => {
        setTheme(theme === scheme.dark ? scheme.light : scheme.dark);
    };

    return { theme, scheme, toggleTheme };
};

export default useDarkMode;
```

</CH.Code>

## 4 - Usar el hook

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx settings.tsx mark=3,4,5,6,15,16
const Content = () => {
    const { formatMessage: f } = useIntl();
    const {
        theme,
        scheme: { dark },
        toggleTheme,
    } = useDarkMode();

    return (
        <div className={styles.container}>
            <section className={styles.confg}>
                <IconWithName
                    icon="/theme.png"
                    alt={f({ id: 'settings.langAlt' })}
                    name={f({ id: theme === dark ? 'settings.dark' : 'settings.light' })}
                    onClick={toggleTheme}
                />
            </section>
            <section className={styles.confg}></section>
        </div>
    );
};
```

</CH.Code>

Para hacer la prueba en vivo, puedes cambiar el tema en tu sistema operativo y verás que mi sitio web se actualiza automáticamente o también puedes ir a mi pagina de configuración y cambiar el tema.

> Todo el código en mi repositorio de github, si te gusta este proyecto, o si el contenido te ha ayudado en algo puedes recompensarme con una ⭐️, Gracias!



# Integración continua con Github Actions workflow para este Proyecto

<Date date="05-09-2023" />

<GoogleAdsense />

Cada un proyecto es un mundo y sus prioridades también lo son, pero lo que tienen en común es que todos necesitan ser desplegados y probados. Esta parte siempre se puede hacer de forma manual, pero acaba siendo algo repetitivo y tedioso. Por eso es conveniente automatizarlo, y para eso existen las herramientas de integración continua y despliegue continuo.

En este caso vamos a usar las [Github Actions](https://docs.github.com/en/actions/using-workflows 'Enlace a documentacion de github Actions') para automatizar el despliegue de este proyecto en [Vercel](https://vercel.com/ 'Enlace a vercel'), pero también hacer una serie de tareas previas como son los testing, el formateo del código y la generación de la documentación.

## Diseño

Lo que más tiempo puede llevar es, planificar como va ser tu pipeline, osea que tareas vas a ejecutar y en que orden. En mi caso me puse a dibujar en escalidraw como podría ser mi flujo de tareas y tras varios intentos uno fue el que más me convenció. Una vez tienes esta parte mas o menos pensada lo que tienes que hacer es ir a tu proyecto y crear una carpeta en la siguiente ruta .github/workflows una vez dentro puedes crear el archivo con el nombre que desees con el formato .yml en mi caso tengo dos pre-deploy.yml y post-deploy.yml, aquí no voy a entrar en detalle de como funciona el formato .yml, pero si que voy a explicar que hace cada uno de los jobs que tengo en cada uno de los workflows.

Primero ejecuto los jobs de cancel redundacy, code checking, testing y documentation en paralelo y si todo va bien, versionado y despliegue en pre-producción. Después de ver que todo fue bien y se desplegó correctamente en pre-producción, hago mis pruebas manuales sobre el featuring desarrollado o sobre el bugfixing y tras revisar que todo esta correctamente y no hay ningún problema, puedo tomar la decisión de desplegar o no en producción. Para ello solo sería necesario crear una pull request para mergear la rama de develop en master y mergearla pero, en mi workflow no acaban aquí los jobs. Después de todo esto y una vez mergeado en producción se ejecuta un último test de performance usando lighthouse y generando un reporte pagina por pagina que publico una vez el job ha finalizado.

Aquí se puede ver de una forma más gráfica:

<Image
    src="/continuos-integration.svg"
    alt="Coincidencia"
    width="1024"
    height="726"
    layout="responsive"
    style={{ margin: '20px 0 20px 0' }}
/>

Este es un fragmento del aspecto que tiene mi workflow de pre-deploy:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```yaml pre-deploy.yml
name: Workflow Pre-Deploy
on:
    push:
        branches: [dev]
jobs:
    cancel_redundancy:
        name: Cancel Redundant Workflow Runs
        runs-on: ubuntu-latest
        steps:
            - name: Cancel previous redundant workflow runs
              uses: styfle/cancel-workflow-action@0.11.0
              with:
                  access_token: ${{ secrets.TOKEN_GITHUB }}
    code_checking:
        name: Linting
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 18
                  cache: yarn
            - name: Install dependencies
              run: |
                  echo "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
                  echo "@xabierlameiro:registry=https://npm.pkg.github.com/" >> ~/.npmrc
                  yarn install --frozen-lockfile
            - name: Linter
              run: yarn run lint
```

</CH.Code>

Workflow completo [en mi github](https://github.com/xabierlameiro/the-last-dance/actions/workflows/pre-deploy.yml 'en mi github')

## Resultados

Cada uno de estos reportes dispone de su propio repositorio en github y es ahí donde se publican los resultados de cada uno de los test.

Aquí puedo ver el resultado de mis jobs cada vez que hago cambios en mi proyecto:

-   [Reporte de testing unitario](https://coverage.xabierlameiro.com/ 'Enlace a reporte de testing unitario')
-   [Reporte de testing end to end](https://e2e.xabierlameiro.com/ 'Enlace a reporte de testing end to end')
-   [Reporte de performance](https://performance.xabierlameiro.com/ 'Enlace a reporte de performance')
-   [Documentación](https://docs.xabierlameiro.com/ 'Enlace a documentación')
-   [Biblioteca de componentes](https://storybook.xabierlameiro.com/ 'Enlace a biblioteca de componentes')

## Conclusiones

Cada vez que desarrollo un nuevo componente en React, o creo una página nueva con Nextjs tengo la seguridad de que una batería de pruebas comprueba a fondo que lo que he añadido a mi proyecto no ha roto nada del trabajo anterior. Esto es así en parte, ya que tu eres el que tiene que crear los test en las partes más delicadas y criticas de tu aplicativo.

> Puedes encontrar todo este código en mi repositorio de github y si te ha gustado este contenido puedes ayudarme con una [⭐️](https://github.com/xabierlameiro/the-last-dance 'Enlace a mi github') ¡ Gracias !



# Contador de estrellas de un respotiorio de github

<Date date="01-11-2023" />

<GoogleAdsense />

Este es un contador de estrellas para tu respositorio de Github. Puedes usarlo en tu sitio web o blog.

¿Cómo usarlo? Simplemente usa la API y obtendrás la cantidad de estrellas.

## 1. Crea un token de github

> Utilice la variable de entorno para almacenar el token.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts github.ts
const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
```

</CH.Code>

## 2. Write the GET method

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts github.ts
const REPOSITORY = {
    owner: 'xabierlameiro',
    repo: 'the-last-dance',
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    try {
        const {
            data: { stargazers_count },
        } = await octokit.rest.repos.get(REPOSITORY);
        res.status(200).json(stargazers_count);
    } catch (err: Error) {
        res.status(500).json({ statusCode: 500, message: err.message });
    }
}
```

</CH.Code>

## 3. Úselo en su componente

No es necesario usar el gancho `useEffect` para obtener información. Puede usar los ganchos `getStaticProps` o `getServerSideProps`.
En mi caso, uso este enlace porque el blog es un sitio estático y el punto final no está disponible en el tiempo de compilación.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx StarCounter.tsx
const StarCounter = () => {
    const [stars, setStars] = React.useState(0);

    React.useEffect(() => {
        (async () => {
            try {
                const stars = await fetch('/api/github').then((res) => res.json());
                setStars(stars);
            } catch (e) {
                setStars(-1);
            }
        })();
    }, []);

    if (stars === -2)
        return (
            <Container>
                <AiFillStar className={styles.starred} title="Starred" />
            </Container>
        );

    if (stars === -1)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error endpoint" />
            </Container>
        );

    if (stars === 0)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading stars" />
            </Container>
        );

    return (
        <Container>
            <span>{stars}</span>
        </Container>
    );
};

export default StarCounter;
```

</CH.Code>

Ahora mismo solo tienes que mirar hacia arriba para ver el resultado, el contador está resaltado con una estrella amarilla.

Por favor, si crees que este contenido te ha ayudado o te gusta, dame tu estrella. <span className="emoji">🤩</span>



# Haz un contador de visitas con google analytics

<Date date="01-10-2023" />

<GoogleAdsense />

No es necesario hacer un sistema complejo para contar las vistas de tu blog. Puede usar Google Analytics para hacerlo, no necesita conservar los datos en una base de datos.

Aquí no explicamos cómo crear una cuenta de Google analytics, puedes seguir este [tutorial](https://support.google.com/analytics/answer/1008015?hl=en 'Google analytics Link') para hacerlo.

## 1. Crea tu api para obtener los datos usando la clase BetaAnalyticsDataClient

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts .analytics.ts
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
    const { query } = req;
    const { slug = '/' } = query;

    const analyticsDataClient = new BetaAnalyticsDataClient({
        credentials: {
            client_email: process.env.ANALYTICS_CLIENT_EMAIL,
            private_key: process.env.ANALYTICS_PRIVATE_KEY?.replace(/\\n/g, '\n'),
        },
        projectId: process.env.ANALYTICS_PROJECT_ID,
    });

    const [response] = await analyticsDataClient.runReport({
        property: `properties/348472560`,
        dateRanges: [
            {
                startDate: '2023-01-01',
                endDate: 'today',
            },
        ],
        dimensions: [
            {
                name: 'date',
            },
            {
                name: 'pagePath',
            },
        ],
        metrics: [
            {
                name: 'screenPageViews',
            },
        ],
        dimensionFilter: {
            filter: {
                fieldName: 'pagePath',
                stringFilter: {
                    matchType: 'EXACT',
                    value: slug.toString(),
                },
            },
        },
        orderBys: [
            {
                dimension: {
                    dimensionName: 'date',
                },
            },
        ],
    });

    if (!response || !response.rows) {
        res.status(500).json({ error: 'Error while parsing analytics data' });
        return;
    }

    let total = response.rows.reduce((prev: Object, curr: Object) => {
        return prev + parseInt(curr.metricValues[0].value, 0);
    }, 0);

    try {
        res.status(200).json({ total });
    } catch (err: Error) {
        res.status(500).json({ error: err });
    }
}
```

</CH.Code>

## 2. Crea un componente para mostrar los datos

> Puede crear un componente para consumir la API del cliente usando useEffect o desde una página que recupera los datos del servidor. Es tu elección

En mi caso voy a hacer 3 renders distintos, uno para cuando se está cargando, otro para el error y el último para la información.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx ViewCounter.tsx mark=29,36,43
type Props = {
    children?: React.ReactNode;
};

const Container = ({ children }: Props) => {
    return (
        <div className={styles.views} title="Number of views in this post from Google analytics">
            <BsBook />
            {children}
        </div>
    );
};

const StarCounter = () => {
    const [views, setViews] = React.useState(-1);
    const { asPath } = useRouter();

    React.useEffect(() => {
        (async () => {
            try {
                const { total } = await fetch(`/api/analytics?slug=${asPath}`).then((res) => res.json());
                setViews(total);
            } catch (e) {
                setViews(-2);
            }
        })();
    }, [asPath]);

    if (views === -2)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error on endpoint" />
            </Container>
        );

    if (views === -1)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading views" />
            </Container>
        );

    return (
        <Container>
            <span>{views}</span>
        </Container>
    );
};

export default StarCounter;
```

</CH.Code>

## 3. Incluye tu componente donde quieras mostrarlo

Para ver el resultado del código anterior, solo mire la parte superior de la página y verá un ícono de libro con un contador en el lado derecho.

Puedes ver el código completo en mi repositorio si lo necesitas, y si te parece útil o te gusta puedes darme una estrella



# Cómo traducir los slugs en mis páginas web

<Date date="01-12-2023" />

<GoogleAdsense />

Quería hacer un blog y me preguntaba cómo internacionalizar mi sitio incluyendo sus urls.
El desafío es hacer que las páginas que se crean en el momento de la compilación se asignen a cada uno de sus slugs traducidos.

Esta es mi solución:

## 1. Crea un archivo mdx para cada idioma, por ejemplo:

-   `data/blog/translate-the-slugs/translate-the-slugs.en.mdx`
-   `data/blog/translate-the-slugs/translate-the-slugs.es.mdx`
-   `data/blog/translate-the-slugs/translate-the-slugs.gl.mdx`

## 2. Dentro de cada archivo mdx, las cosas importantes son:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```mdx translate-the-slugs.en.mdx mark=3,7,11
---
title: 'How translate the slugs in my web pages?'
slug: 'translate-slugs-web-pages'
author: 'Xabier Lameiro'
category: 'Nextjs'
tags: ['intl']
locale: 'en'
excerpt: 'Translate the urls of my website, to have a 100% internationalised site using nextjs and static pages with mdxjs files.'
description: 'Translate the urls of my website, to have a 100% internationalised site using nextjs and static pages with mdxjs files.'
image: '/posts/translate-slugs-web-pages.png'
alternate: [{ lang: 'es', url: 'como-traducir-las-urls' }, { lang: 'gl', url: 'como-traducir-as-urls' }]
---

# How translate the slugs in my web pages?

<Date date="01-12-2023" />
```

</CH.Code>

## 3. Con getStaticPaths creamos las páginas para cada idioma:

En mi caso creo páginas diferentes para cada etiqueta y categoría, pero tú puedes crear las páginas que quieras.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```mdx translate-the-slugs.en.mdx mark=4,17
export const getStaticPaths = async ({ locales }: { locales: string[] }) => {
    const posts = await getAllPosts();

    const tags = posts.reduce((...code) => {
            const paths = post.meta.tags.map((tag: string) => ({
                params: {
                    category: tag.toLowerCase(),
                    slug: post.meta.slug,
                },
                locale: post.meta.locale,
            }));
            return [...acc, ...paths];
        },
        []
    );

    const categories = posts.map((...code) => ({
            params: {
                category: post.meta.category.toLowerCase(),
                slug: post.meta.slug,
            },
            locale: post.meta.locale,
        })
    );

    return {
        paths: [...tags, ...categories],
        fallback: 'blocking',
    };

};
```

</CH.Code>

## 4. Con getStaticProps obtenemos los datos del archivo mdx:

Cuando se ejecuta getStaticPaths, pasa el locale a getStaticProps, en este momento tenemos la categoría, el slug y el locale, por lo que podemos obtener los datos del archivo mdx.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```mdx translate-the-slugs.en.mdx mark=12,13,14,15
export const getStaticProps = async (data: {
    params: {
        category: string;
        slug: string;
    };
    locale: string;
}) => {
    const {
        params: { category },
        locale,
    } = data;
    const post = await getPostBySlug(data);
    const mdxSource = await serialize(post.content);
    const { categories, tags } = await getAllCategories(locale);
    const posts = await getPostsByLocaleAndCategory(locale, category);

    return {
        props: {
            tags,
            categories,
            posts,
            post: {
                ...post,
                content: mdxSource,
            },
        },
    };

};
```

</CH.Code>

### 4.1. Obtenga los datos del archivo mdx con la ayuda de gray-matter y fs:

Necesitamos crear funciones que nos ayuden a obtener los datos del archivo mdx.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts findPostBySlug
const findPostBySlug = (slug: string | { params: { slug: string } }) => {
    let paths = glob.sync(`${POST_PATH}/**/*.mdx`);

    if (typeof slug === 'object') {
        slug = slug.params.slug;
    } else {
        slug = slug.split('/')[slug.split('/').length - 1];
    }
    const [route] = paths.filter((path) => {
        const document = fs.readFileSync(path, 'utf8');
        const { data } = matter(document);
        const fileName = path.split('/').pop();
        if (data.slug === slug || fileName == `${slug}.mdx`) {
            return true;
        }
    });
    return matter(fs.readFileSync(route, 'utf8'));
};
```

```ts getPostBySlug
export const getPostBySlug = (slug: string | { params: { slug: string } }) => {
    const { data, content } = findPostBySlug(slug);
    const readTime = readingTime(content);
    const numberOfWords = countWords(content);
    return {
        content,
        meta: {...},
    };
};
```

</CH.Code>

### 4.2. Serialice el archivo mdx con la ayuda de @next-mdx-remote/serialize:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts
import { serialize as sz } from 'next-mdx-remote/serialize';

/**
 * @description Serialize MDX file with Code Hike.
 *
 * @example
 *     serialize('# Hello World');
 *     returns { content: '...', meta: {...} }
 *
 * @param {string} mdx - MDX file.
 * @returns {Object} - Object with MDX content and meta data.
 */
export const serialize = (mdx: string) =>
    sz(mdx, {
        mdxOptions: {
            remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
            useDynamicImport: true,
        },
    });
```

</CH.Code>

### 4.3. Obtenga los datos finalmente en su componente para la capa de presentación.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx [slug].tsx
    const PostPage = ({ post, tags, categories, posts }: Props) => {
        ...print your magic here...
    };
```

</CH.Code>

Puede ver el resultado mirando la URL de esta publicación y cambiando el idioma en la configuración y mirando la misma publicación nuevamente.
