Add new components and detections

nuxt-module/docs/components/content/modifiers/EndWith.vue

@@ -0,0 +1,16 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormInput label="End" type="text" v-model="start" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ endWith(value, start) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('https://usemods')
+  const start = ref('.com')
+</script>

nuxt-module/docs/components/content/modifiers/EndWithout.vue

@@ -0,0 +1,16 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormInput label="End" type="text" v-model="start" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ endWithout(value, start) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('https://usemods.com/rocks')
+  const start = ref('rocks')
+</script>

nuxt-module/docs/components/content/modifiers/EscapeHtml.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ escapeHtml(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('<p>Hello World</p>')
+</script>

nuxt-module/docs/components/content/modifiers/Ordinalize.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormNumber label="Value" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ ordinalize(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref(1)
+</script>

nuxt-module/docs/components/content/modifiers/Pluralize.vue

@@ -0,0 +1,16 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormNumber label="Count" v-model.number="count" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ pluralize(value, count) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('scooter')
+  const count = ref(1)
+</script>

nuxt-module/docs/components/content/modifiers/SplitByWords.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ splitByWords(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('Scooters are the future')
+</script>

nuxt-module/docs/components/content/modifiers/StartWith.vue

@@ -0,0 +1,16 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormInput label="Start" type="text" v-model="start" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ startWith(value, start) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('usemods.com')
+  const start = ref('https://')
+</script>

nuxt-module/docs/components/content/modifiers/StartWithout.vue

@@ -0,0 +1,16 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormInput label="Start" type="text" v-model="start" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ startWithout(value, start) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('https://usemods.com')
+  const start = ref('https://')
+</script>

nuxt-module/docs/components/content/modifiers/UnescapeHtml.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ unescapeHtml(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('&lt;p&gt;Hello World&lt;/p&gt;')
+</script>

nuxt-module/docs/components/content/modifiers/deslugify.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ deslugify(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('scooters-are-the-future')
+</script>

nuxt-module/docs/components/content/modifiers/slugify.vue

@@ -0,0 +1,14 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ slugify(value) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('Scooters are the future')
+</script>

nuxt-module/docs/components/content/modifiers/surroundWith.vue

@@ -0,0 +1,18 @@
+<template>
+  <Example>
+    <ExampleInputs>
+      <FormInput label="Value" type="text" v-model="value" />
+      <FormInput label="Start" type="text" v-model="start" />
+      <FormInput label="End" type="text" v-model="end" />
+    </ExampleInputs>
+    <ExampleResult>
+      {{ surroundWith(value, start, end) }}
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+  const value = ref('usemods')
+  const start = ref('https://')
+  const end = ref('.com')
+</script>

nuxt-module/docs/components/example/Result.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="p-5 flex bg-white/[3%] justify-between items-center gap-6">
+  <div class="py-4 px-5 flex bg-white/[3%] justify-between items-center gap-6">
     <div class="flex gap-3 items-start">
-      <Icon name="ph:equals-bold" class="text-white/20 shrink-0 w-3 mt-1.5" />
-
+      <div class="h-5 w-5 shrink-0 rounded-full mt-1 bg-white/5 items-center justify-center flex">
+        <Icon name="ph:equals-bold" class="text-white/50 shrink-0 w-3" />
+      </div>
       <div class="text-xl font-semibold">
         <slot />
       </div>

src/3.modifiers.ts

@@ -1,8 +1,6 @@
 // title: Modifiers
 // description: Modifiers are a key feature of Mods that allow you to easily modify and enhance your content. They are small pieces of code that can be applied to your JS to add functionality, validation or style.
 
-import { formatDurationLabels } from './2.formatters'
-
 /**
  * Adds a space between the last two words in a string.
  */
@@ -92,37 +90,66 @@ export function unescapeHtml(text: string): string {
 }
 
 /**
- * Returns the reading time of a string in Hours, Minutes, and Seconds.
- */
-export function readingTime(text: string, wordsPerMinute = 200): string {
-  const words = text.split(' ').length
-  const minutes = words / wordsPerMinute
-  return formatDurationLabels(Math.ceil(minutes))
-}
-
-/**
- * Adds plurals to a string.
+ * Adds plurals to a string except for excluded words.
  */
 export function pluralize(text: string, count: number): string {
+  text = text.trim().toLowerCase()
+
+  const excludedWords = new Set(['sheep', 'fish', 'deer', 'hay', 'moose', 'series', 'species', 'aircraft', 'bison', 'buffalo', 'cod', 'elk', 'halibut', 'hovercraft'])
+
+  const irregularPlurals = new Map([
+    ['child', 'children'],
+    ['person', 'people'],
+    ['man', 'men'],
+    ['woman', 'women'],
+    ['tooth', 'teeth'],
+    ['foot', 'feet'],
+    ['mouse', 'mice'],
+    ['goose', 'geese'],
+    ['ox', 'oxen'],
+    ['leaf', 'leaves'],
+    ['life', 'lives'],
+    ['knife', 'knives'],
+    ['wife', 'wives'],
+    ['half', 'halves'],
+    ['elf', 'elves'],
+    ['loaf', 'loaves'],
+    ['potato', 'potatoes'],
+    ['tomato', 'tomatoes'],
+    ['cactus', 'cacti'],
+    ['focus', 'foci'],
+    ['fungus', 'fungi']
+    // TODO: Add more irregular plurals
+  ])
+
   if (count === 1) return text
+  if (excludedWords.has(text)) return text
+  if (irregularPlurals.has(text)) return irregularPlurals.get(text) || text
+
+  if (text.endsWith('y')) return text.slice(0, -1) + 'ies'
+  if (text.endsWith('s')) return text
+  if (text.endsWith('x')) return text + 'es'
+  if (text.endsWith('ch')) return text + 'es'
+  if (text.endsWith('sh')) return text + 'es'
+
   return text + 's'
 }
 
 /**
  * Removes plurals from a string.
  */
-export function singularize(text: string): string {
-  if (text.endsWith('s')) return text.substring(0, text.length - 1)
-  return text
+export function singularize(value: string): string {
+  if (value.endsWith('s')) return value.substring(0, value.length - 1)
+  return value
 }
 
 /**
  * Converts a number to a string with ordinal suffix.
  */
-export function ordinalize(number: number): string {
+export function ordinalize(value: number): string {
   const suffixes = ['th', 'st', 'nd', 'rd']
-  const remainder = number % 100
-  return number + (suffixes[(remainder - 20) % 10] || suffixes[remainder] || suffixes[0])
+  const remainder = value % 100
+  return value + (suffixes[(remainder - 20) % 10] || suffixes[remainder] || suffixes[0])
 }
 
 /**
@@ -190,32 +217,20 @@ export function titleCase(text: string): string {
     .replace(/\s+/g, ' ')
 }
 
-/**
- * Converts to sentence case by capitalizing the first letter of the first word.
- */
-export function sentenceCase(text: string): string {
-  return text
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
-      return index === 0 ? word.toUpperCase() : word.toLowerCase()
-    })
-    .replace(/\s+/g, ' ')
-}
-
 /**
  * Adds a prefix to a string if it doesn't already start with the prefix.
  */
-export function startWith(text: string, start: string): string {
-  if (text.startsWith(start)) return text
-  return start + text
+export function startWith(value: string, start: string): string {
+  if (value.startsWith(start)) return value
+  return start + value
 }
 
 /**
  * Removes a prefix from a string if it starts with the prefix.
  */
-
-export function startWithout(start: string, text: string): string {
-  if (text.startsWith(start)) return text.substring(start.length)
-  return text
+export function startWithout(value: string, start: string): string {
+  if (value.startsWith(start)) return value.substring(start.length)
+  return value
 }
 
 /**
@@ -236,9 +251,6 @@ export function endWithout(text: string, end: string): string {
 
 /**
  * Adds a prefix and suffix to a string if it doesn't already start and end with them.
- * @param text - The string to surround.
- * @param prefix - The prefix to add.
- * @param suffix - The suffix to add.
  */
 export function surroundWith(text: string, start: string, end: string): string {
   if (text.startsWith(start) && text.endsWith(end)) return text
@@ -248,7 +260,7 @@ export function surroundWith(text: string, start: string, end: string): string {
 }
 
 /**
- * Wraps each word in a string with a span tag.
+ * Wraps each word, sentence or paragraph in a string with a tag.
  */
 export function splitByWords(text: string): string {
   const sentences = text.split(/([\.\?\!])\s*/)
@@ -297,7 +309,7 @@ export function list(items: any[], listType: string = 'ul'): string {
 /**
  * Shuffles an array.
  */
-export function shuffle(items: any[]): any[] {
+export function shuffle(items: any[]): any {
   return items.sort(() => Math.random() - 0.5)
 }
 

src/4.detections.ts

@@ -1,6 +1,8 @@
 // title: Detections
 // description: A collection of detections for common data types
 
+import { formatDurationLabels } from './2.formatters'
+
 /**
  * Detect the current device type (Mobile or Desktop)
  */
@@ -369,3 +371,12 @@ export function detectScrollable(element: HTMLElement) {
 export function detectElement(element: HTMLElement) {
   return element instanceof HTMLElement
 }
+
+/**
+ * Returns the reading time of a string in Hours, Minutes, and Seconds.
+ */
+export function detectReadingTime(text: string, wordsPerMinute = 200): string {
+  const words = text.split(' ').length
+  const minutes = words / wordsPerMinute
+  return formatDurationLabels(Math.ceil(minutes))
+}