astrolicious / i18n

Yet another i18n integration for Astro with server and client utilities, type safety and translations built-in.
https://astro-i18n.netlify.app/
MIT License
48 stars 3 forks source link

Problems with getSwitcherData in the Content Collection Article #30

Closed marekbrze closed 3 months ago

marekbrze commented 3 months ago

Hi,

I am trying to make my blog to work the same as the Demo site. I have "en" as my default locale and "pl" as the secondary one. I can't getSwitcherData to work properly on the /blog/[slug].astro page.

It should produce:

[
  {
    locale: 'en',
    href: 'blog/review-of-customer-journey-mapping-handbook'
  },
  {
    locale: 'pl',
    href: '/pl/blog/recenzja-instrukcji-obslugi-sciezek-klienta'
  }
]

but I get:

[
  {
    locale: 'en',
    href: '/review-of-customer-journey-mapping-handbook'
  },
  {
    locale: 'pl',
    href: '/pl/recenzja-instrukcji-obslugi-sciezek-klienta'
  }
]

I use Astro 4.10.3. Below is my code for the /blog/[slug].astro which is almost 1:1 copy of the same page from the Demo. The only thing not here is sitemap. Is Sitemap necessary for the switcher to work? I couldn't find the information in the docs. I am really lost here.:

---
import { getCollection } from "astro:content";
import {
  getDefaultLocalePlaceholder,
  getLocalePlaceholder,
  setDynamicParams,
  t,
} from "i18n:astro";

import ArticleLayout from "src/layouts/ArticleLayout.astro";

import {
  collectionFilters,
  handleI18nSlug,
} from "@astrolicious/i18n/content-collections";
import type { GetStaticPaths } from "astro";

export const getStaticPaths = (async () => {
  const locale = getLocalePlaceholder();
  const defaultLocale = getDefaultLocalePlaceholder();

  const posts = await getCollection("posts", (post) =>
    collectionFilters.byLocale(post, { locale })
  );

  return await Promise.all(
    posts.map(async (post) => {
      const equivalentPosts = await getCollection("posts", (p) =>
        collectionFilters.matchingEntries(p, {
          currentEntry: post,
          key: "defaultLocaleVersion",
          locale,
          defaultLocale,
        })
      );

      const dynamicParams = equivalentPosts.map((entry) => {
        const { locale, slug } = handleI18nSlug(entry.slug);

        return {
          locale,
          params: {
            slug,
          },
        };
      });

      return {
        params: {
          slug: handleI18nSlug(post.slug).slug,
        },
        props: {
          post,
          dynamicParams,
        },
      };
    })
  );
}) satisfies GetStaticPaths;

const { post, dynamicParams } = Astro.props;
const { Content } = await post.render();

setDynamicParams(dynamicParams);

---

<ArticleLayout
  frontmatter={post.data}
  imgSource="blog"
>
  <Content />
</ArticleLayout>
marekbrze commented 3 months ago

Ok, nevermind.

The problem was the structure of the project. I had /blog/[slug].astro and also just /[slug].astro for other info pages and the routing went crazy. After changing /[slug].astro to /[infoPage].astro everything works

florian-lefebvre commented 3 months ago

There are a few issues with routing unfortunately, glad you found a way!