Updated with github links and 66% increase in whimsical statements

docs.mjs

@@ -14,52 +14,50 @@ const metadataPattern = /\s+(title|description|lead):\s+([^\r\n]*)/g
 const jsdocPattern = /\/\*\*([\s\S]*?)\*\//g
 
 function generateMarkdown(file, name) {
-    const content = readFileSync(file, 'utf8')
-    const metadata = Object.fromEntries([...content.matchAll(metadataPattern)].map(match => [match[1], match[2]]));
-
-    // Copy file to Website
-    copyFileSync(file, join(websitePath, 'utils', basename(file)))
-
-    let markdown = ''
-
-    // Create Frontmatter
-    markdown += '---\n'
-    markdown += `id: ${basename(file, extname(file))}\n`
-    markdown += `title: ${metadata.title}\n`
-    markdown += `description: ${metadata.description}\n`
-    markdown += `lead: ${metadata.lead}\n`
-    markdown += '---\n'
-
-    // Page Title
-    markdown += `::page-title\n`
-    markdown += `# ${metadata.title}\n`
-    markdown += `${metadata.description}\n`
+  const content = readFileSync(file, 'utf8')
+  const metadata = Object.fromEntries([...content.matchAll(metadataPattern)].map((match) => [match[1], match[2]]))
+
+  // Copy file to Website
+  copyFileSync(file, join(websitePath, 'utils', basename(file)))
+
+  let markdown = ''
+
+  // Create Frontmatter
+  markdown += '---\n'
+  markdown += `id: ${basename(file, extname(file))}\n`
+  markdown += `title: ${metadata.title}\n`
+  markdown += `description: ${metadata.description}\n`
+  markdown += `lead: ${metadata.lead}\n`
+  markdown += '---\n'
+
+  // Page Title
+  markdown += `::page-title\n`
+  markdown += `# ${metadata.title}\n`
+  markdown += `${metadata.description}\n`
+  markdown += `::\n\n`
+
+  // Functions
+  const functions = [...content.matchAll(functionPattern)]
+
+  for (const match of functions) {
+    const [full] = match.slice(0)
+    const [component, name, params] = match.slice(1)
+    const jsdoc = full.match(jsdocPattern)[0]
+    const description = jsdoc.replace(/\/\*\*|\*\/|\*/g, '').trim()
+
+    markdown += `::page-function{name="${name}" description="${description}" params="${params}" }\n`
+    markdown += `:::${name}\n`
+    markdown += `:::\n`
     markdown += `::\n\n`
+  }
 
-    // Functions
-    const functions = [...content.matchAll(functionPattern)]
-
-    for (const match of functions) {
-        const [full] = match.slice(0)
-        const [component, name, params] = match.slice(1)
-        const jsdoc = full.match(jsdocPattern)[0]
-        const description = jsdoc.replace(/\/\*\*|\*\/|\*/g, '').trim()
-
-        console.log(description)
-
-        markdown += `::page-function{name="${name}" description="${description}" params="${params}" }\n`
-        markdown += `:::${name}\n`
-        markdown += `:::\n`
-        markdown += `::\n\n`
-    }
-
-    writeFileSync(join(websitePath, 'content/2.docs', `${name}.md`), markdown)
+  writeFileSync(join(websitePath, 'content/2.docs', `${name}.md`), markdown)
 }
 
 // Generate Markdown for each File
 function generateAll() {
-    const files = ['actions', 'formatters', 'modifiers', 'detections', 'generators', 'numbers', 'data', 'validators', 'goodies'];
-    files.forEach((file, index) => generateMarkdown(join(srcPath, `${file}.ts`), `${index + 1}.${file}`));
+  const files = ['actions', 'formatters', 'modifiers', 'detections', 'generators', 'numbers', 'data', 'validators', 'goodies']
+  files.forEach((file, index) => generateMarkdown(join(srcPath, `${file}.ts`), `${index + 1}.${file}`))
 }
 
 // async function build() {
@@ -79,13 +77,10 @@ function generateAll() {
 // Run Once
 generateAll()
 
-
 // Watch for Changes
-const watcher = watch(srcPath, { recursive: true }, async (event, filename) => {    
-    if (filename.endsWith('.ts')) {
-        console.log(`Detected ${event} in ${filename}`)
-        generateAll()
-    }
+const watcher = watch(srcPath, { recursive: true }, async (event, filename) => {
+  if (filename.endsWith('.ts')) {
+    console.log(`Detected ${event} in ${filename}`)
+    generateAll()
+  }
 })
-
-

nuxt-web/components/TableOfContents.vue

@@ -15,13 +15,21 @@
         </div>
       </NuxtLink>
     </template>
+
+    <NuxtLink
+      :to="`https://github.com/LittleFoxCompany/usemods/blob/main/src/${pageId.at(-1)}.ts`"
+      class="flex items-center gap-1.5 py-8 text-sm font-medium leading-none text-zinc-500">
+      <Icon name="fa6-brands:github" class="-mt-px mr-1.5 h-4 w-4" />
+      View on GitHub
+    </NuxtLink>
   </nav>
 </template>
 
 <script setup lang="ts">
   const route = useRoute()
   const links = ref([{ id: '' }])
 
+  const pageId = detectUrlPath()
   const activeSections = useState('activeSections', () => [])
 
   async function fetchLinks() {

nuxt-web/components/content/PageTitle.vue

@@ -21,6 +21,6 @@
     @apply text-4xl font-bold;
   }
   :deep(p) {
-    @apply text-pretty pt-4 font-light md:text-xl/[1.6em];
+    @apply text-pretty pt-4 font-light md:text-xl/[1.6em] lg:text-2xl/[1.6em];
   }
 </style>

nuxt-web/content/2.docs/1.actions.md

@@ -1,12 +1,12 @@
 ---
 id: actions
 title: Actions
-description: A collection of useful actions for common tasks and interactions with the DOM.
+description: A stack of handy functions you could write yourself, but don't want to.
 lead: JS karate chops
 ---
 ::page-title
 # Actions
-A collection of useful actions for common tasks and interactions with the DOM.
+A stack of handy functions you could write yourself, but don't want to.
 ::
 
 ::page-function{name="scrollToAnchor" description="Smoothly scrolls to the element with the specified ID without scuffing up your URLs." params="id: string" }

nuxt-web/content/2.docs/2.formatters.md

@@ -1,12 +1,12 @@
 ---
 id: formatters
 title: Formatters
-description: Formatter functions manipulate and display various data types, such as dates, numbers, and strings, in a more readable and user-friendly format.
+description: Wrangle wild data types into submission. Spruce up numbers, give strings smarts, and make complex content dazzle.
 lead: Format misbehaving content
 ---
 ::page-title
 # Formatters
-Formatter functions manipulate and display various data types, such as dates, numbers, and strings, in a more readable and user-friendly format.
+Wrangle wild data types into submission. Spruce up numbers, give strings smarts, and make complex content dazzle.
 ::
 
 ::page-function{name="formatNumber" description="Format numbers into neat and formatted strings for people" params="number: number, options?: { decimals?: number; locale?: string }" }

nuxt-web/content/2.docs/3.modifiers.md

@@ -1,12 +1,12 @@
 ---
 id: modifiers
 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.
+description: Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
 lead: Bend content to your will
 ---
 ::page-title
 # Modifiers
-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.
+Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
 ::
 
 ::page-function{name="startWith" description="Adds a prefix to a string if it doesn't already start with the prefix." params="value: string, start: string" }

nuxt-web/pages/index.vue

@@ -7,7 +7,7 @@
           <h1
             v-html="splitByWords('Zippy little utils for your JavaScript projects.')"
             id="title"
-            class="max-w-[1200px] text-balance text-center font-bold leading-[1.25em] text-gray-900 [font-size:_clamp(2.3em,8vw,6rem)] dark:text-white"></h1>
+            class="max-w-[1200px] text-balance text-center font-bold leading-[1.25em] text-gray-900 [font-size:_clamp(2.3em,8vw,5rem)] dark:text-white"></h1>
 
           <div class="mt-10 flex items-center gap-3 max-md:flex-col md:mt-20">
             <NuxtLink to="intro/introduction">

nuxt-web/utils/actions.ts

@@ -1,5 +1,5 @@
 // title: Actions
-// description: A collection of useful actions for common tasks and interactions with the DOM.
+// description: A stack of handy functions you could write yourself, but don't want to.
 // lead: JS karate chops
 
 /**

nuxt-web/utils/formatters.ts

@@ -1,5 +1,5 @@
 // title: Formatters
-// description: Formatter functions manipulate and display various data types, such as dates, numbers, and strings, in a more readable and user-friendly format.
+// description: Wrangle wild data types into submission. Spruce up numbers, give strings smarts, and make complex content dazzle.
 // lead: Format misbehaving content
 
 const currencySymbols = new Map([

nuxt-web/utils/modifiers.ts

@@ -1,5 +1,5 @@
 // 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.
+// description: Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
 // lead: Bend content to your will
 
 /**

src/actions.ts

@@ -1,5 +1,5 @@
 // title: Actions
-// description: A collection of useful actions for common tasks and interactions with the DOM.
+// description: A stack of handy functions you could write yourself, but don't want to.
 // lead: JS karate chops
 
 /**

src/formatters.ts

@@ -1,5 +1,5 @@
 // title: Formatters
-// description: Formatter functions manipulate and display various data types, such as dates, numbers, and strings, in a more readable and user-friendly format.
+// description: Wrangle wild data types into submission. Spruce up numbers, give strings smarts, and make complex content dazzle.
 // lead: Format misbehaving content
 
 const currencySymbols = new Map([

src/modifiers.ts

@@ -1,5 +1,5 @@
 // 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.
+// description: Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
 // lead: Bend content to your will
 
 /**