Usando hygen para generar templates

Lo que quería implementar era una funcionalidad que extrañaba cuando usaba Contentz para éste blog, en el cual usando contentz write me generaba el archivo listo para empezar a escribir. Así fue como decidí usar hygen para obtener ésta misma funcionalidad ahora que mi blog migró a NextJS.

hygen es un generador de código que permite automatizar la creación de varios archivos desde el terminal.

Así que sin más preámbulo, éstos fueron los pasos que seguí para generar lo que quería.

Añadiendo hygen a las dependencias de desarrollo

yarn add -D hygen

Ahora empecémos a crear nuestro template, hygen por defecto usa la carpeta _templates pero decidí cambiarla por .hygen para tenerlo más claro.

Para realizar ese cambio primero creamos un archivo de configuración de hygen llamado .hygen.js.

module.exports = {
  templates: `${__dirname}/.hygen`,
};

Ahora si creamos la carpeta .hygen y dentro de ella la carpeta new y dentro de ésta nuestro archivo template article.ejs.t.

.hygen

---
to: <%= absPath %>/<%= h.changeCase.paramCase(article_name) %>.mdx
---
import Article from "../../components/Article";

export const meta = {
  title: "<%= article_name %>",
  description: "<%= description %>",
  date: "<%= date %>",
  published: false,
};

export default ({ children }) => <Article meta={meta}>{children}</Article>;

Start writting ... 📝

hygen usa el frontmatter para determinar algunas propiedades del template, en éste caso con to le decimos la ruta donde queremos que se cree el archivo.

Algo adicional que podemos notar es que hygen tiene algunas funciones que ayudan a formatear textos(en éste caso usamos h.changeCase.paramCase)

Todas las variables que están dentro de los símbolos <%= %> son los que recibiremos al momento de crear usando el template (más adelante veremos como los vamos a enviar).

El resto del archivo es la estructura que queremos para nuestro archivo.

Ahora vamos a configurarlo para que la creación sea interactiva en el terminal. Para ésto creamos un archivo index.js al lado de nuestro template article.ejs.t

module.exports = {
  prompt: ({ inquirer }) => {
    const questions = [
      {
        type: "input",
        name: "article_name",
        message: "What is the article name?",
      },
      {
        type: "input",
        name: "description",
        message: "What is the description?",
      },
    ];
    return inquirer.prompt(questions).then((answers) => {
      const { article_name, description } = answers;
      const absPath = "pages/articles";
      const date = new Date().toJSON();
      return { article_name, description, absPath, date };
    });
  },
};

Siguiendo un poco la documentación creamos este archivo que nos va a preguntar por el article_name y description al usar el generador.

Tanto absPath como date ya están definidos ahí.

Ahora tenemos que llamar el comando que generará nuestro template, para ésto hygen sigue la estructura de carpetas que hemos creado anteriormente hygen new article.

Finalmente, lo añadimos a nuestros scripts en package.json.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",

    "new:article": "hygen new article"
},

Ahora cada vez que queremos generarlo simplemente usamos

yarn new:article

Y nos preguntará por el nombre y descripción del artículo