
# Tema escuro con Nextjs

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

<GoogleAdsense />

Hai moitas formas de facer a xestión de temas de estilos en React e Nextjs, pero todas elas pasan por ter un array/obxeto con todos os estilos de cada un dos distintos temas, tamén
outra das formas é usar variables de css ou scss _estas últimas están en cada vez en máis deshuso_. Eu, en particular vou usar variables de css e fixar un tema por defecto no meu \_document . Por que aquí ?

Por que \_document execútase en servidor non como \_app que o fai en cliente e se usas un useEffect para setear o teu tema por defecto ou detectar o que ten o usuario no seu sistema operativo,
no tempo que se tarda en facer esta comprobación e engadilo, pode darse un parpadeo nos estilos da paxina. Iso pode resultar estraño.

Eu fíxeno así:

## 1 - Variables do 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 - Fixar 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 pra cambiar o 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 o 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 facer a proba en vivo, podes cambiar o tema no teu sistema operativo e verás que o meu sitio web actualízase automaticamente ou tamén podes ir ao meu pagina de configuración e cambiar o tema.

> Todo o código no meu repositorio de github, se che gusta este proxecto, ou se o contido axudouche en algo podes recompensarme cunha ⭐️, Grazas!



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

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

<GoogleAdsense />

Cada un proxecto é un mundo e as súas prioridades tamén o son, pero o que teñen en común é que todos necesitan ser despregados e probados. Esta parte sempre se pode facer de forma manual, pero acaba sendo algo repetitivo e tedioso. Por iso é conveniente automatizalo, e para iso existen as ferramentas de integración continua e despregamento continuo.

Neste caso imos usar as [Github Actions](https://docs.github.com/en/actions/using-workflows 'Ligazón as github Actions') para automatizar o despregamento deste proxecto en [Vercel](https://vercel.com/ 'Ligazón a Vercel'), pero tamén facer unha serie de tarefas previas como son os testing, o formato do código e a xeración da documentación.

## Deseño

O que máis tempo pode levar é, planificar como vai ser o teu pipeline, osea que tarefas vas executar e en que orde. No meu caso púxenme a debuxar en escalidraw como podería ser o meu fluxo de tarefas e tras varios intentos uno foi o que máis me convenceu. Unha vez tes esta parte mais ou menos pensada o que tes que facer é ir ao teu proxecto e crear un cartafol no seguinte roteiro .github/workflows unha vez dentro podes crear o arquivo co nome que desexes co formato .yml no meu caso teño dous pre-deploy.yml e post-deploy.yml, aquí non vou entrar en detalle de como funciona o formato .yml, pero se que vou explicar que fai cada un dos jobs que teño en cada un dos workflows.

Primeiro executo os jobs de cancel redundacy, code checking, testing e documentation en paralelo e se todo vai ben, feito unha versión e despregamento en pre-produción. Despois de ver que todo foi ben e despregouse correctamente en pre-produción, fago as miñas probas manuais sobre o featuring desenvolvido ou sobre o bugfixing e tras revisar que todo esta correctamente e non hai ningún problema, podo tomar a decisión de despregar ou non en produción. Para iso só sería necesario crear unha pull request para mergear a rama de develop en master e mergearla pero, no meu workflow non acaban aquí os jobs. Despois de todo isto e unha vez mergeado en produción execútase un último test de performance usando lighthouse e xerando un reporte pagina por pagina que publico unha vez o job ha finalizado.

Aquí pódese ver dunha forma máis gráfica:

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

Este é un fragmento do aspecto que ten o meu 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 [no meu github](https://github.com/xabierlameiro/the-last-dance/actions/workflows/pre-deploy.yml 'no meu github')

## Resultados

Cada un destes reportes dispón do seu propio repositorio en github e é aí onde se publican os resultados de cada un dos test.

Aquí podo ver o resultado dos meus jobs cada vez que fago cambios no meu proxecto:

-   [Reporte de testing unitario](https://coverage.xabierlameiro.com/ 'Ligazón a Reporte de testing unitario')
-   [Reporte de testing end to end](https://e2e.xabierlameiro.com/ 'Ligazón a Reporte de testing end to end')
-   [Reporte de performance](https://performance.xabierlameiro.com/ 'Ligazón a Reporte de performance')
-   [Documentación](https://docs.xabierlameiro.com/ 'Ligazón a Documentación')
-   [Biblioteca de compoñentes](https://storybook.xabierlameiro.com/ 'Ligazón a Biblioteca de compoñentes')

## Conclusións

Cada vez que desenvolvo un novo compoñente en React, ou creo unha páxina nova con Nextjs teño a seguridade de que unha batería de probas comproba a fondo que o que engadín ao meu proxecto non rompeu nada do traballo anterior. Isto é así en parte, xa que o teu es o que ten que crear os test nas partes máis delicadas e criticas da túa aplicativo.

> Podes atopar todo este código no meu repositorio de github e se che gustou este contido podes axudarme cunha [⭐️](https://github.com/xabierlameiro/the-last-dance 'Ligazón a O meu github') Grazas !



# Contador de estrelas dun respotiorio de github

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

<GoogleAdsense />

Este é un contador de estrelas para a túa respositorio de Github. Podes usalo no teu sitio web ou blogue.

Como usalo? Simplemente usa a API e obterás a cantidade de estrelas.

## 1. Crea un token de github

> Utilice a variable de contorna para almacenar o 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. Escribe o método GET

<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. Úseo no seu compoñente

Non é necesario usar o gancho `useEffect` para obter información. Pode usar os ganchos `getStaticProps` ou `getServerSideProps`.
No meu caso, uso esta ligazón porque o blogue é un sitio estático e o punto final non está dispoñible no tempo 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>

Agora mesmo só tes que mirar cara arriba para ver o resultado, o contador está resaltado cunha estrela amarela.

Por favor, se crees que este contido axudouche ou che gusta, dáme a túa estrela. <span className="emoji">🤩</span>



# Fai un contador de visitas con google analytics

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

<GoogleAdsense />

Non é necesario facer un sistema complexo para contar as vistas do teu blogue. Pode usar Google Analytics para facelo, non necesita conservar os datos nunha base de datos.

Aquí non explicamos como crear unha conta de Google analytics, podes seguir este [titorial](https://support.google.com/analytics/answer/1008015?hl=en 'Google analytics Link') para facelo.

## 1. Crea un endpoint para obter os datos usando a 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: Object) {
        res.status(500).json({ error: err });
    }
}
```

</CH.Code>

Non é necesario facer un sistema complexo para contar as vistas do teu blogue. Pode usar Google Analytics para facelo, non necesita conservar os datos nunha base de datos, pode usar a API de Google Analytics para obter os datos.

Aquí non explicamos como crear unha conta de Google Analytics, podes seguir este [titorial](https://support.google.com/analytics/answer/1008015?hl=en) para facelo.

## 1. Cre un punto final para obter os datos usando a clase BetaAnalyticsDataClient

<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. Inclúe o teu compoñente onde queiras mostralo

Para ver o resultado do código anterior, só mire a parte superior da páxina e verá un ícono de libro cun contador no lado dereito.

Podes ver o código completo no meu repositorio se o necesitas, e se che parece útil ou che gusta podes darme unha estrela



# Como traducir os slugs nas miñas páxinas web

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

<GoogleAdsense />

Quería facer un blogue e preguntábame como internacionalizar o meu sitio incluíndo os seus urls.
O desafío é facer que as páxinas que se crean no momento da compilación asígnense a cada un dos seus slugs traducidos.

Esta é a miña solución:

## 1. Cre un arquivo mdx para cada idioma, por exemplo:

-   `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 arquivo mdx, as cousas 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 as páxinas para cada idioma:

No meu caso creo páxinas diferentes para cada etiqueta e categoría, pero ti podes crear as páxinas que queiras.

<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 obtemos os datos do arquivo mdx:

Cando se executa getStaticPaths, pasa o locale a getStaticProps, neste momento temos a categoría, o slug e o locale, polo que podemos obter os datos do arquivo 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. Obteña os datos do arquivo mdx coa axuda de gray-matter e fs:

Necesitamos crear funcións que nos axuden a obter os datos do arquivo 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 o arquivo mdx coa axuda 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. Obteña os datos finalmente no seu compoñente para a 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>

Pode ver o resultado mirando a URL desta publicación e cambiando o idioma na configuración e mirando a mesma publicación novamente.
