
# Dark theme with Nextjs

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

<GoogleAdsense />

There are many ways to manage style themes in React and Nextjs, but all of them involve having an array/object with all the styles of each of the different themes.
another way is to use css or scss variables _these last ones are in more and more disuse_. I, in particular, am going to use css variables and set a default theme in my \_document. Why here ?

Because \_document runs on server not like \_app which runs on client and if you use a useEffect to set your default theme or detect the one the user has on their operating system,
in the time it takes to do this check and add it, there can be a flicker in the page styles. That can be strange.

I did it like this:

## 1 - css variables

<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 - Set default theme

<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 to change theme

<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 - Using the 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>

To do the live test, you can change the theme on your operating system and you will see that my website updates automatically or you can also go to my settings page and change the theme.

> All the code in my github repository, if you like this project, or if the content has helped you in any way you can reward me with a ⭐️, Thanks!



# Continuous Integration with Github Actions workflow

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

<GoogleAdsense />

Each project is different and so are its priorities, but what they have in common is that they all need to be deployed and tested. This part can always be done manually, but it ends up being repetitive and tedious. That's why it's convenient to automate it, and that's why continuous integration and continuous deployment tools exist.

In this case we are going to use [Github Actions](https://docs.github.com/en/actions/using-workflows 'Link to github Actions') to automate the deployment of this project in [Vercel](https://vercel.com/ 'Link to vercel'), but also to do a series of previous tasks such as testing, code formatting and documentation generation.

## Design

The most time-consuming thing is to plan what your pipeline is going to look like, i.e. what tasks you are going to execute and in what order. In my case I started to draw in escalidraw how my task flow could look like and after several attempts one was the one that convinced me the most. Once you have this part more or less thought what you have to do is to go to your project and create a folder in the following route .github/workflows once inside you can create the file with the name you want with the format .yml in my case I have two pre-deploy.yml and post-deploy.yml, here I am not going to go into detail of how the format .yml works, but I am going to explain what does each of the jobs that I have in each of the workflows.

First I run the cancel redundancy, code checking, testing and documentation jobs in parallel and if everything goes well, versioning and deployment in pre-production. After checking that everything went well and was deployed correctly in pre-production, I do my manual tests on the featuring developed or on the bugfixing and after checking that everything is correct and there is no problem, I can make the decision to deploy or not in production. For this it would only be necessary to create a pull request to merge the develop branch in master and merge it but, in my workflow the jobs don't end here. After all this and once merged in production a last performance test is executed using lighthouse and generating a page by page report that I publish once the job is finished.

Here you can see it in a more graphical way:

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

This is a snippet of what my pre-deploy workflow looks like:

<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 complete [in my github](https://github.com/xabierlameiro/the-last-dance/actions/workflows/pre-deploy.yml 'in my github')

## Results

Each of these reports has its own repository on github and that's where the results of each of the tests are published.

Here I can see the results of my jobs every time I make changes to my project:

-   [Unit test report](https://coverage.xabierlameiro.com/ 'Link to Unit test report')
-   [End to end testing report](https://e2e.xabierlameiro.com/ 'Link to End to end testing report')
-   [Performance report](https://performance.xabierlameiro.com/ 'Link to Performance report')
-   [Documentation](https://docs.xabierlameiro.com/ 'Link to Documentation')
-   [Component Library](https://storybook.xabierlameiro.com/ 'Link to Component Library')

## Conclusions

Every time I develop a new component in React, or create a new page with Nextjs I'm assured that a battery of tests thoroughly checks that what I've added to my project hasn't broken any of the previous work. This is partly because you are the one who has to create the tests in the most delicate and critical parts of your application.

> You can find all this code in my github repository and if you liked this content you can help me with a [⭐️](https://github.com/xabierlameiro/the-last-dance 'Link to my github') Thanks !



# Counter for github stars repository

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

<GoogleAdsense />

This is a simple counter for github stars repository. You can use it in your website or blog.

How to use it? Just fetch the api and you will get the number of stars.

## 1. Create a github token

> Please use the environment variable to store the 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. Use it in your component

Not is necessary to use the `useEffect` hook for fetch information. You can use the `getStaticProps` or `getServerSideProps` hooks.
In my case, I use this hook because the blog is a static site and the endpoint is not available in the build time.

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

Right now you only have to look up to see the result, the counter is highlighted with a yellow star.

Please if you think this content has helped you or you like it, please give me your star. <span className="emoji">🤩</span>



# Make a views counter with google analytics

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

<GoogleAdsense />

Is not necessary make a complex system to count the views of your blog. You can use google analytics to do it, you dont need persiste the data in a database.

Here we dont explain how to create a Google analytics account, you can follow this [tutorial](https://support.google.com/analytics/answer/1008015?hl=en 'Google analytics link') to do it.

## 1. Create a endpoint to get the data using the class 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. Create a component to show the data

> You can create a component to consume the api from the client using useEffect or from a page retrieving the data from the server. It is your choice

In my case I am going to make 3 different renderings, one for when it is loading, one for the error and the last one for the information.

<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. Include your component wherever you want to display it

To see the result of the above code just look at the top of the page and you will see a book icon with a counter on the right hand side.

You can see the complete code in my repository if you need it, and if you find it useful or like it you can give me a star



# How translate the slugs in my web pages?

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

<GoogleAdsense />

I wanted to make a blog and I was wondering how to internationalise my site including its urls.
The challenge is to make the pages are created at build time are assigned to each of its translated slugs.

This is my solution:

## 1. Create a mdx file for each language, for example:

-   `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. Inside each mdx file, the important thigs are:

<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. With getStaticPaths we created the pages for each language:

In my case I create different pages for each tag and category, but you can create the pages you want.

<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. With getStaticProps we get the data of the mdx file:

When getStaticPaths is executed, it passes the locale to getStaticProps, in this moment we have the category, slug and locale, so we can get the data of the mdx file.

<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. Get the data of the mdx file with help from gray-matter and fs:

We need create functions to help us to get the data of the mdx file.

<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. Serialize the mdx file with help from @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. Get the data finally into your component for the presentation layer.

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

You can see the result by looking at the url of this post and changing the language in settings and looking at the same post again.
