para que ele possa configurar tudo para você:
Neste artigo, aprenderemos como criar um blog multilíngue usando o Remix JS. Estarei orientando você durante todo o processo passo a passo.
Vamos começar com Remix.
Pré-requisitos
Os requisitos são bem simples:
Instalação
npx create-remix@latest
Escolha o nome da pasta que deseja instalar:
Escolha a opção Remix App Server, que é o servidor integrado (você pode alterar isso mais tarde):
Escolha Javascript para simplesmente copiar e colar o código deste tutorial.
Certifique-se de dizer ao instalador para executar
npm install
Em seguida, cd nome da pasta
Executar remix npm executar dev
Para obter mais informações sobre o Remix, visite remix.run !
Criar uma página de blog:
A pasta do aplicativo contém nossa lógica principal do aplicativo. Todas as pastas e arquivos na pasta de rotas são expostos ao público e podem ser acessados com um URL.
root.jsx — É o componente principal do nosso aplicativo. Ele contém nosso layout de página geral e Bootstrap CDN.
import { Outlet, LiveReload, Link, Links, Meta } from '@remix-run/react';
export const links = () => [
// Bootstrap CSS CDN
{
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css',
},
];
export const meta = () => {
return {
description: 'A multi-language blog built with Remix',
};
};
export default function App() {
return (
);
}
function Document({ children, title }) {
return (
Blog
{children}
{process.env.NODE_ENV === 'development' ? : null}
{/* Bootstrap JS CDN */}
);
}
function Layout({ children }) {
return (
<>
{/* Navbar */}
{children}
>
);
}
export function ErrorBoundary({ error }) {
console.log(error);
return (
Error
{error.message}
);
}
Home Page : Crie um novo arquivo aqui, app/routes/index.jsx. É a página inicial do nosso blog.
import { redirect } from '@remix-run/server-runtime';
export function loader({ request }) {
let languageHeader = request.headers.get('accept-language');
let locale = languageHeader?.split(',')[0] || 'en';
let language = locale.split('-')[0];
if (!['en', 'es'].includes(language)) {
language = 'en';
}
return redirect(`/${language}`);
}
Componente de artigos —
Instale a API do Polyblog:
npm install @polyblog/polyblog-js-client
Escreveremos nosso código para exibir todos os blogs que buscamos na API do Polyblog e exibi-los. Para encontrar os artigos, vá para localhost:3000/en encontre artigos em inglês, vá para localhost:3000/es encontre artigos em espanhol.
Crie uma pasta app/routes/$locale
Crie um arquivo app/routes/$locale/index.jsx
import { getArticles } from '@polyblog/polyblog-js-client';
import { useLoaderData, Link } from '@remix-run/react';
export const loader = async ({ params }) => {
const locale = params.locale;
let articles = await getArticles({
// signup at https://www.polyblog.io/signup to get your blogId
blogId: '4217f90b8eaa86551e7f7d55',
published: true,
locale,
});
return articles;
};
export default function BlogPage() {
const article = useLoaderData();
return (
<>
{article.map(
({
_id,
locale,
slug,
coverUrl,
title,
author,
creationTime,
subtitle,
}) => (
{title}
{subtitle}
Posted by {author} on{' '}
{new Date(creationTime).toLocaleString(locale, {
dateStyle: 'long',
})}
),
)}
>
);
}
Exibindo um artigo detalhado:
Crie um arquivo app/routes/$locale/$slug.jsx
É o componente que busca um único artigo e o exibe em uma página separada. Acesse localhost:3000/en/:slug para encontrar um blog detalhado.
import { getArticles } from '@polyblog/polyblog-js-client';
import { useLoaderData } from '@remix-run/react';
export const loader = async ({ params }) => {
const { locale, slug } = params;
const articles = await getArticles({
// signup at https://www.polyblog.io/signup to get your blogId
blogId: '4217f90b8eaa86551e7f7d55',
locale,
slug,
});
const article = articles?.[0];
return article;
};
export default function ArticlePage() {
const article = useLoaderData();
return (
{article && (
<>
{article?.title}
{article?.subtitle}
Posted by {article?.author} on{' '}
{new Date(article?.creationTime).toLocaleDateString()}
>
)}
);
}
Inscreva-se em https://app.polyblog.io/signup para obter o seu blogId para inserir o código acima.
Depois de se inscrever visite a página Configurações para encontrar o id do seu blog (ex. 1234567890abcdef12345678)
Nossa estrutura de pastas fica assim
app
routes
$locale
$slug.jsx
index.jsx
index.jsx
entry.client.jsx
entry.server.jsx
root.jsx

Conclusão
Aqui neste artigo, descrevi como você pode adicionar artigos a qualquer site Remix usando a API fornecida pelo Polyblog. Criamos com sucesso nosso blog multilíngue com a API Polyblog e isso facilitou para nós. Você pode encontrar mais informações sobre os parâmetros de API suportados no Polyblog API Reference .
Obrigado por passar por este tutorial! Se você estiver preso em alguma etapa, consulte este repositório do github e encontre seu problema.
Codificação feliz!!!