Aprende a crear un blog en varios idiomas con Remix JS

Aprende a crear un blog en varios idiomas con Remix JS

Creación de un blog en varios idiomas con Remix JS

Posted by Yakub Ali Siyam on 31 de diciembre de 2021

En este artículo, aprenderemos cómo crear un blog en varios idiomas con Remix JS. Te estaré guiando a lo largo de todo el proceso paso a paso. Comencemos con Remix.

requisitos previos

Los requisitos son bastante simples:

  • Asegúrese de tener el nodo instalado
  • Comprensión básica de React
  • Conocimientos básicos de terminales

Instalación

npx create-remix@latest

Elija el nombre de la carpeta que desea instalar: Instalación de remezclas Elige la opción Remix App Server, que es el servidor integrado (puedes cambiarlo más adelante): Instalación de remezclas Elija Javascript para simplemente copiar y pegar el código de este tutorial. Instalación de remezclas Asegúrese de decirle al instalador que se ejecute

npm install

Instalación de remezclas Luego cd nombre de la carpeta Ejecutar remix npm ejecutar dev Instalación de remezclas Para obtener más información sobre Remix, visite remix.run .

Crear una página de blog:

La carpeta de la aplicación contiene nuestra lógica de aplicación principal. Todas las carpetas y archivos bajo la carpeta de rutas están expuestos al público y se puede acceder a ellos con una URL. root.jsx: es el componente principal de nuestra aplicación. Contiene nuestro diseño de página general y 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 (
    <Document>
      <Layout>
        <Outlet />
      </Layout>
    </Document>
  );
 }

 function Document({ children, title }) {
  return (
    <html>
      <head>
        <Meta />
        <Links />
        <title>Blog</title>
      </head>
      <body>
        {children}
        {process.env.NODE_ENV === 'development' ? <LiveReload /> : null}

        {/* Bootstrap JS CDN */}
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossOrigin="anonymous"
        ></script>
      </body>
    </html>
  );
 }

 function Layout({ children }) {
  return (
    <>
      {/* Navbar */}
      <nav className="navbar navbar-expand-lg navbar-light bg-info">
        <div className="container">
          <Link
            className="navbar-brand text-color fw-bold"
            to="/"
            style={{ color: 'RGBA(0,0,0,.55)' }}
          >
            Blog
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ms-auto mb-2 mb-lg-0 fw-bold">
              <li class="nav-item">
                <Link to="/en" class="nav-link">
                  English
                </Link>
              
              <li class="nav-item">
                <Link to="/es" class="nav-link">
                  Español
                </Link>
              
            
          </div>
        </div>
      </nav>

      <div className="container p-4">{children}</div>
    </>
  );
 }

 export function ErrorBoundary({ error }) {
  console.log(error);
  return (
    <Document>
      <Layout>
        <h1 className="text-center">Error
        <p className="text-center">{error.message}
      </Layout>
    </Document>
  );
 }

Página de inicio: cree un nuevo archivo aquí, app/routes/index.jsx. Es la página de inicio de nuestro sitio web 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 artículos — Instale la API de Polyblog:

npm install @polyblog/polyblog-js-client

Escribiremos nuestro código para mostrar todos los blogs que obtuvimos de la API de Polyblog y mostrarlo. Para encontrar los artículos vaya a localhost:3000/es para encontrar artículos en inglés, vaya a localhost:3000/es para encontrar artículos en español. Crea una carpeta app/routes/$locale
Cree un archivo 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 (
    <>
      <div className="row row-cols-1 row-cols-md-2 g-4">
        {article.map(
          ({
            _id,
            locale,
            slug,
            coverUrl,
            title,
            author,
            creationTime,
            description,
          }) => (
            <div key={_id} className="col-md-6 col-lg-4 col-12">
              <Link
                key={_id}
                to={`/${locale}/${slug}`}
                className="text-decoration-none"
              >
                <div className="card h-100 shadow">
                  <img src={coverUrl} className="card-img-top" alt={title} />
                  <div className="card-body">
                    <h3 className="card-title my-3 text-dark">{title}
                    <h5 className="my-3 text-dark">{description}</h5>
                    <p className="text-dark">
                      Posted by {author} on{' '}
                      {new Date(creationTime).toLocaleString(locale, {
                        dateStyle: 'long',
                      })}
                    
                  </div>
                </div>
              </Link>
            </div>
          ),
        )}
      </div>
    </>
  );
 }

Mostrando un artículo detallado: Cree un archivo app/routes/$locale/$slug.jsx Es el componente que busca un solo artículo y lo muestra en una página separada. Vaya a localhost:3000/en/:slug para encontrar un blog detallado.

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 (
    <div>
      {article && (
        <>
          <div
            style={{
              width: '100%',
              height: '400px',
              backgroundImage: `url(${article?.coverUrl})`,
              backgroundSize: 'cover',
            }}
            className="mb-5"
          >
            <h2 className="text-center pt-5">{article?.title}
            <h4 className="text-center pt-3">{article?.description}</h4>
            <p className="text-center">
              <i>
                Posted by <span>{article?.author}</span> on{' '}
                <span>
                  {new Date(article?.creationTime).toLocaleDateString()}
                </span>
              </i>
            
          </div>

          <style>
            {`article img {
                max-width: 512px;
                display: block;
                margin-left: auto;
                margin-right: auto;
              }`}
          </style>

          <article dangerouslySetInnerHTML={{ __html: article?.content }} />
        </>
      )}
    </div>
  );
 }

Regístrese en https://app.polyblog.io/signup para obtener su ID de blog para ingresar el código anterior. Después de registrarse, visite la página Configuración para encontrar la identificación de su blog (ej. 1234567890abcdef12345678) Nuestra estructura de carpetas se ve así

app
 routes
 $locale
 $slug.jsx
 index.jsx
 index.jsx
 entry.client.jsx
 entry.server.jsx
 root.jsx

Estructura de carpetas del blog Remix \

Conclusión

Aquí, en este artículo, describí cómo puede agregar artículos a cualquier sitio web de Remix utilizando la API proporcionada por Polyblog. Hemos creado con éxito nuestro blog multilingüe con la API de Polyblog y nos lo ha facilitado. Puede encontrar más información sobre los parámetros de la API admitidos en la Referencia de la API de Polyblog . ¡Gracias por seguir este tutorial! Si está atascado en algún paso, consulte este repositorio de github y encuentre su problema. ¡¡¡Feliz codificación!!!

Suscríbase a nuestro boletín

Recent articles