Cómo mostrar tus artículos, videos, etc. en tu README de GitHub de forma dinamica

Introducción:

En este tutorial, te mostraré cómo mostrar tus artículos, videos, etc. en tu README de GitHub. Esto es posible siempre que el contenido que deseas mostrar esté disponible a través de una API.

Pasos a seguir:

1. Crea un repositorio en tu perfil de GitHub.

2. Crea un proyecto en Node.js.

3. Crea los archivos necesarios.

4. Configura el flujo de trabajo de GitHub Actions.

Creación del repositorio:

Para crear un repositorio en tu perfil de GitHub, sigue estos pasos:

1. Ve a la página de tu perfil de GitHub.
2. Haz clic en el botón Nuevo repositorio.
3. Escribe un nombre para tu repositorio.
4. Elige el tipo de repositorio. En este caso, elige Repositorio vacío.
5. Haz clic en el botón Crear repositorio.

Creación del proyecto Node.js:

Para crear un proyecto Node.js, sigue estos pasos:

1. Abre una terminal en tu computadora.
2. Navega a la carpeta donde deseas crear el proyecto.
3. Escribe el siguiente comando:


mkdir <nombre-del-proyecto> && cd <nombre-del-proyecto>


1. Escribe el siguiente comando para inicializar el proyecto:


pnpm init


Creación de los archivos necesarios:

Los archivos necesarios para este tutorial son los siguientes:

• index.js: Este archivo contiene el código que se ejecutará para actualizar el README.
• README.md: Este archivo es el README que se actualizará.
• template.md.tpl: Este archivo contiene el código que se utilizará para formatear los artículos.

Configuración del flujo de trabajo de GitHub Actions:

El flujo de trabajo de GitHub Actions se utiliza para actualizar el README automáticamente cada vez que se publiquen nuevos artículos. Para configurar el flujo de trabajo, sigue estos pasos:

1. Crea una carpeta .github en la raíz del proyecto.
2. Crea una carpeta workflows dentro de la carpeta .github.
3. Crea un archivo post.yml dentro de la carpeta workflows.

El contenido del archivo post.yml debe ser el siguiente:

name: PostReadme

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
      - run: npm install -g pnpm
      - run: pnpm install
      - run: pnpm run generate
      - run: |
        git config user.name DannielNavas
        git config user.email dannielnavas@gmail.com
        git add README.md
        git diff --quiet && git diff --staged --quiet || git commit -m "[bot] Update README with latest info"
        git push origin master

El código de index.js es el siguiente:

import fs from "fs";
import fetch from "node-fetch";

(async () => {
  const template = await fs.promises.readFile("./template.md", "utf8");

  const response = await fetch("https://dev.to/api/articles?username=dannieldev");
  const posts = await response.json();

  let HTMLPosts = [];
  HTMLPosts = posts
    .slice(0, 3)
    .map((post) => `<li><a href="${post.url}">${post.title}<a/></li>`)
    .join("");

  const newMarkdown = (await template).replace(
    "%{{latest_Article}}%",
    `<ul>${HTMLPosts}</ul>`
  );

  await fs.promises.writeFile("./README.md", newMarkdown);
})();

El código de template.md.tpl es el siguiente:

template.md.tpl

<!-- Proudly created with GPRM ( https://gprm.itsvg.in ) -->
# Articulos

%{{article}}%

Explicación del código:

Este código es un script de Node.js que utiliza los módulos fs (sistema de archivos) y node-fetch para leer un archivo de plantilla, obtener datos de una API, y luego escribir esos datos en un archivo README.md.

Primero, importa los módulos fs y node-fetch. fs es un módulo incorporado en Node.js para trabajar con el sistema de archivos, mientras que node-fetch es un módulo que permite hacer solicitudes HTTP en Node.js, similar a cómo fetch funciona en el navegador.

Luego, el código define una función asíncrona autoinvocada. Esta función se ejecuta inmediatamente después de su definición.

Dentro de esta función, primero se lee un archivo llamado template.md en el directorio actual. Se utiliza fs.promises.readFile para leer el archivo de forma asíncrona y se espera hasta que se complete la lectura del archivo.

A continuación, se realiza una solicitud HTTP GET a la API de dev.to para obtener los artículos de un usuario. Se espera hasta que la respuesta esté disponible y luego se convierte la respuesta en JSON.

Después de obtener los datos de la API, se seleccionan los primeros tres artículos, se convierten en elementos de lista HTML y se unen en una sola cadena.

Luego, se reemplaza un marcador de posición en la plantilla leída anteriormente (%{{latest_Article}}%) con la lista de artículos HTML generada.

Finalmente, se escribe el contenido modificado en un archivo llamado README.md. Se utiliza fs.promises.writeFile para escribir en el archivo de forma asíncrona y se espera hasta que se complete la escritura del archivo.

**Gracias por leer. Espero que esta información te sea útil y te ayude a mejorar tu perfil.

Actualmente estoy trabajando en un proyecto personal que espero que aporte a la comunidad hispanohablante. Puedes encontrar más información sobre él en la siguiente URL: devtospanish: https://devtospanish.danniel.dev/**