feat: add emoji prompt (#9)

Author: HiDeoo

.changeset/bright-bobcats-clap.md

@@ -0,0 +1,7 @@
+---
+'@hideoo/generator-starlight-plugin': minor
+---
+
+Adds a new prompt asking for a single emoji representing the generated Starlight plugin.
+
+The emoji will be used in the generated documentation and README files.

src/index.ts

@@ -4,7 +4,7 @@ import Generator, { type BaseOptions } from 'yeoman-generator'
 
 import { copy, copyTpl } from './libs/fs.js'
 import { fetchDependencyVersions } from './libs/npm.js'
-import { promptForName, promptForText } from './libs/prompt.js'
+import { promptForEmoji, promptForName, promptForText } from './libs/prompt.js'
 
 export default class StarlightPluginGenerator extends Generator<BaseOptions & Configuration> {
   configuration: Configuration
@@ -21,6 +21,10 @@ export default class StarlightPluginGenerator extends Generator<BaseOptions & Co
 
     this.option('name', { type: String, description: 'Name of the Starlight plugin' })
     this.option('description', { type: String, description: 'Description of the Starlight plugin' })
+    this.option('emoji', {
+      type: String,
+      description: 'Single emoji representing the Starlight plugin (used in the documentation)',
+    })
     this.option('ghUsername', { type: String, description: 'GitHub username' })
   }
 
@@ -36,6 +40,7 @@ export default class StarlightPluginGenerator extends Generator<BaseOptions & Co
       'What is the description of your Starlight plugin?',
       'My awesome Starlight plugin',
     )
+    await promptForEmoji(this)
     await promptForText(this, 'ghUsername', 'What is your GitHub username?', 'ghost')
   }
 
@@ -82,6 +87,7 @@ export default class StarlightPluginGenerator extends Generator<BaseOptions & Co
 export interface Configuration {
   name?: string
   description?: string
+  emoji?: string
   ghUsername?: string
   year: string
 }

src/libs/prompt.ts

@@ -1,7 +1,7 @@
 import type StarlightPluginGenerator from '../index.js'
 import type { Configuration } from '../index.js'
 
-import { validateName, validateNonEmptyString } from './validator.js'
+import { validateEmoji, validateName, validateNonEmptyString } from './validator.js'
 
 export async function promptForName(generator: StarlightPluginGenerator) {
   const name = generator.options.name
@@ -45,3 +45,23 @@ export async function promptForText(
 
   generator.configuration[key] = answers[key]
 }
+
+export async function promptForEmoji(generator: StarlightPluginGenerator) {
+  const emoji = generator.options.emoji
+
+  if (emoji && validateEmoji(emoji) === true) {
+    generator.configuration.emoji = emoji
+    return
+  }
+
+  const answers = await generator.prompt<{ emoji: string }>({
+    type: 'input',
+    name: 'emoji',
+    message: 'What single emoji represents your Starlight plugin?',
+    default: '🔋',
+    suffix: '(used in the documentation)',
+    validate: validateEmoji,
+  })
+
+  generator.configuration.emoji = answers.emoji
+}

src/libs/validator.ts

@@ -1,4 +1,5 @@
 const nameValidationRegex = /^(?:@[\da-z~-][\d._a-z~-]*\/)?[\da-z~-][\d._a-z~-]*$/
+const emojiValidationRegex = /^\p{Emoji_Presentation}\p{Emoji_Modifier}*$/u
 
 export function validateName(name: string) {
   return nameValidationRegex.test(name) ? true : 'Invalid plugin name'
@@ -7,3 +8,7 @@ export function validateName(name: string) {
 export function validateNonEmptyString(value: string) {
   return value.trim().length > 0 ? true : 'Value cannot be empty'
 }
+
+export function validateEmoji(emoji: string) {
+  return emojiValidationRegex.test(emoji) ? true : 'Invalid emoji'
+}

templates/README.md

@@ -1,4 +1,4 @@
-# `<%= name %>`
+# `<%= name %>` <%= emoji %>
 
 <%= description %>
 

templates/docs/public/favicon.svg

@@ -4,12 +4,20 @@ description: <%= description %>
 head:
   - tag: title
     content: <%= name %>
+  - tag: style
+    content: |
+      .hero-html {
+        --size: 12rem;
+        font-size: var(--size);
+        justify-content: center;
+        line-height: var(--size);
+      }
 template: splash
 editUrl: false
 hero:
   tagline: <%= description %>
   image:
-    file: ../../assets/houston.webp
+    html: '<%= emoji %>'
   actions:
     - text: Get Started
       link: /getting-started/