Cómo mostrar tus artículos, videos, etc. en tu README de GitHub de forma dinamica
Tags: github, español, githubactions
Published: 2023-11-25 02:18:07

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

4. 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:

```yaml
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:

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

```markdown
<!-- 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/**