feat: 🎸 Add new badge and images

Add new badge "Repository Size" and logo/screenshots images in template

README.md

@@ -4,7 +4,7 @@
 
 [![NPM Version](https://img.shields.io/npm/v/readme-template-generator.svg?style=flat-square)](https://www.npmjs.com/package/readme-template-generator) [![NPM Monthly Downloads](https://img.shields.io/npm/dm/readme-template-generator.svg?style=flat-square)](https://npmjs.org/package/readme-template-generator)
 
-[![License](https://img.shields.io/github/license/Mikael-R/readme-template-generator?style=flat-square)](LICENSE.md) [![Last Commit](https://img.shields.io/github/last-commit/Mikael-R/readme-template-generator?style=flat-square)](https://github.com/Mikael-R/readme-template-generator/commits/) ![Language Most Used](https://img.shields.io/github/languages/top/Mikael-R/readme-template-generator?style=flat-square) [![Implementations](https://img.shields.io/badge/%F0%9F%92%A1-implementations-8C8E93.svg?style=flat-square)](https://github.com/Mikael-R/readme-template-generator/issues)
+[![License](https://img.shields.io/github/license/Mikael-R/readme-template-generator?style=flat-square)](LICENSE.md) [![Last Commit](https://img.shields.io/github/last-commit/Mikael-R/readme-template-generator?style=flat-square)](https://github.com/Mikael-R/readme-template-generator/commits/) ![Language Most Used](https://img.shields.io/github/languages/top/Mikael-R/readme-template-generator?style=flat-square) [![Implementations](https://img.shields.io/badge/%F0%9F%92%A1-implementations-8C8E93.svg?style=flat-square)](https://github.com/Mikael-R/readme-template-generator/issues) ![Repository Size](https://img.shields.io/github/repo-size/Mikael-R/readme-template-generator?style=flat-square)
 
 [![Forks](https://img.shields.io/github/forks/Mikael-R/readme-template-generator?style=social)](https://github.com/Mikael-R/readme-template-generator/network/members) [![Stars](https://img.shields.io/github/stars/Mikael-R/readme-template-generator?style=social)](https://github.com/Mikael-R/readme-template-generator/stargazers) [![Watches](https://img.shields.io/github/watchers/Mikael-R/readme-template-generator?style=social)](https://github.com/Mikael-R/readme-template-generator/watchers)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "readme-template-generator",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "CLI to help create readme file to document your project",
   "private": false,
   "repository": {

src/commands/readme-template-generator.ts

@@ -1,6 +1,7 @@
 import { GluegunCommand } from 'gluegun'
 
 import ExtendedGluegunToolbox from 'src/interfaces/extended-gluegun-toolbox'
+import { Images } from 'src/types'
 
 const command: GluegunCommand = {
   name: 'readme-template-generator',
@@ -34,6 +35,31 @@ const command: GluegunCommand = {
       if (!overwrite) process.exit(0)
     }
 
+    const logoImage = await question({
+      message: 'Logo image URL (use empty value to skip):',
+      validate: (value: string) =>
+        isWebUrl(value) || value === ''
+          ? true
+          : 'Invalid URL'
+    })
+
+    const images: Images = {
+      logo: logoImage,
+      screenshots: []
+    }
+
+    while (1) {
+      const screenshot = await question({
+        message: 'GIF/image URL for screenshots (use empty value to skip):',
+        validate: (value: string) =>
+          isWebUrl(value) || value === ''
+            ? value === '' ? true : !!(images.screenshots.push(value) + 1)
+            : 'Invalid URL'
+      })
+
+      if (!screenshot) break
+    }
+
     const githubRepository = getGithubRepoInfo('.')
 
     const projectName = githubRepository.name || getUrlItem('.', 1)
@@ -49,7 +75,8 @@ const command: GluegunCommand = {
         'Gitpod',
         'Social Medias',
         'License',
-        'Last Commit'
+        'Last Commit',
+        'Repository Size'
       )
     }
 
@@ -78,11 +105,11 @@ const command: GluegunCommand = {
           value !== '' ? `https://${value}.repl.run` : value
       }))
 
-    const useBadges: Array<string> = await question({
+    const useBadges: string[] = await question({
       type: 'checkbox',
       message: 'Select badges for use:\n ',
       choices: badgeChoices,
-      customReturn: (value: Array<string>) =>
+      customReturn: (value: string[]) =>
         value.map((badge: string) => badge.toLowerCase().replace(/\s/g, ''))
     })
 
@@ -95,7 +122,8 @@ const command: GluegunCommand = {
         githubRepository,
         herokuUrl,
         replitUrl,
-        packageJson
+        packageJson,
+        images
       }
     })
 

src/templates/README.md.ejs

@@ -6,12 +6,21 @@
 
 <% if (props.useBadges.indexOf('npmversion') !== -1) {%><%= `[![NPM Version](https://img.shields.io/npm/v/${props.packageJson.name}.svg?style=flat-square)](https://www.npmjs.com/package/${props.packageJson.name})`%><% } %> <% if (props.useBadges.indexOf('npmmonthlydownloads') !== -1) {%><%= `[![NPM Monthly Downloads](https://img.shields.io/npm/dm/${props.packageJson.name}.svg?style=flat-square)](https://npmjs.org/package/${props.packageJson.name})`%><% } %>
 
-<% if (props.useBadges.indexOf('license') !== -1) {%><%= `[![License](https://img.shields.io/github/license/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)](LICENSE.md)`%><% } %> <% if (props.useBadges.indexOf('lastcommit') !== -1) {%><%= `[![Last Commit](https://img.shields.io/github/last-commit/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)](${props.githubRepository.url}/commits/)`%><% } %> <% if (props.useBadges.indexOf('languagemostused') !== -1) {%><%= `![Language Most Used](https://img.shields.io/github/languages/top/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)` %><% } %> <% if (props.useBadges.indexOf('implementations') !== -1) {%><%= `[![Implementations](https://img.shields.io/badge/%F0%9F%92%A1-implementations-8C8E93.svg?style=flat-square)](${props.githubRepository.url}/issues)` %><% } %>
+<% if (props.useBadges.indexOf('license') !== -1) {%><%= `[![License](https://img.shields.io/github/license/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)](LICENSE.md)`%><% } %> <% if (props.useBadges.indexOf('lastcommit') !== -1) {%><%= `[![Last Commit](https://img.shields.io/github/last-commit/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)](${props.githubRepository.url}/commits/)`%><% } %> <% if (props.useBadges.indexOf('languagemostused') !== -1) {%><%= `![Language Most Used](https://img.shields.io/github/languages/top/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)` %><% } %> <% if (props.useBadges.indexOf('implementations') !== -1) {%><%= `[![Implementations](https://img.shields.io/badge/%F0%9F%92%A1-implementations-8C8E93.svg?style=flat-square)](${props.githubRepository.url}/issues)` %><% } %> <%if (props.useBadges.indexOf('repositorysize') !== -1) {%><%= `![Repository Size](https://img.shields.io/github/repo-size/${props.githubRepository.author}/${props.githubRepository.name}?style=flat-square)`%><% } %>
 
 <% if (props.useBadges.indexOf('socialmedias') !== -1) {%><%= `[![Forks](https://img.shields.io/github/forks/${props.githubRepository.author}/${props.githubRepository.name}?style=social)](${props.githubRepository.url}/network/members) [![Stars](https://img.shields.io/github/stars/${props.githubRepository.author}/${props.githubRepository.name}?style=social)](${props.githubRepository.url}/stargazers) [![Watches](https://img.shields.io/github/watchers/${props.githubRepository.author}/${props.githubRepository.name}?style=social)](${props.githubRepository.url}/watchers)` %><% } %>
 
 <h1 align="center">Welcome to <%= props.projectName %> 👋</h1>
 
+<% if (props.images.logo) {%><%- `<p align="center">
+<img width="400" height="250" src="${props.images.logo}">
+</p>`%><% } %>
+
+<% if (props.images.screenshots.length > 0) {%><%- '<details>'%><% } %>
+<% if (props.images.screenshots.length > 0) {%><%- '<summary>Screenshots</summary>'%><% } %>
+<% for (i in props.images.screenshots) {%><%- `<img src="${props.images.screenshots[i]}">`%><% } %>
+<% if (props.images.screenshots.length > 0) {%><%- '</details>'%><% } %>
+
 ---
 
 _This README was generated with ❤️ by [readme-template-generator](https://github.com/Mikael-R/readme-template-generator)_

src/types.ts

@@ -0,0 +1,4 @@
+export interface Images {
+  logo: string,
+  screenshots: string[]
+}