diff --git a/.gitignore b/.gitignore index 69f6b69d..b377c352 100755 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ dist sw.* .env .output +content/2.functions/ diff --git a/content/2.functions/actions.md b/content/2.functions/actions.md deleted file mode 100644 index d67bba1d..00000000 --- a/content/2.functions/actions.md +++ /dev/null @@ -1,88 +0,0 @@ -# Actions - -A collection of useful actions - -Scrolls to the element with the specified ID. - -```js [js] -scrollToAnchor('#my-anchor') -``` - -Smoothly scroll to the top of the page - -```js [js] -scrollToTop() -``` - -Smoothly scroll to the bottom of the page - -```js [js] -scrollToBottom() -``` - -Toggles the body scroll with the specified class name - -```js [js] -toggleBodyScroll('overflow-hidden') -``` - -Toggles the element scroll - -```js [js] -toggleElementScroll(document.querySelector('#my-element')) -``` - -Copies a text to the clipboard - -```js [js] -copyToClipboard() -``` - -Toggles the fullscreen mode - -```js [js] -toggleFullScreen() -``` - -Toggles the dark mode - -```js [js] -toggleDarkMode() -``` - -Redirects to a new URL - -```js [js] -redirect('https://example.com') -``` - -Resets a form - -```js [js] -resetForm(document.querySelector('form')) -``` - -Focuses on an element - -```js [js] -focusOn(document.querySelector('#my-element')) -``` - -Focuses on the first element - -```js [js] -focusOnFirst(document.querySelector('#my-element')) -``` - -Focuses on the last element - -```js [js] -focusOnLast(document.querySelector('#my-element')) -``` - -Sets up a keyboard trap within an HTML element, allowing the focus to cycle between the first and last focusable elements when the Tab key is pressed. - -```js [js] -focusTrap(document.querySelector('#my-element')) -``` - diff --git a/content/2.functions/detections.md b/content/2.functions/detections.md deleted file mode 100644 index 0a67d783..00000000 --- a/content/2.functions/detections.md +++ /dev/null @@ -1,300 +0,0 @@ -# Detections - -A collection of detections for common data types - -### detectDevice - -Detect the current device type (Mobile or Desktop) - -```js [js] -detectDevice() -``` - -**Returns:** `Mobile` or `Desktop` - -### detectOS - -Detect the current operating system - -```js [js] -detectOS() -``` - -**Returns:** `Windows`, `Mac`, `Linux`, `UNIX`, or `Unknown` - -### detectBrowser - -Detects the user's browser based on the user agent string. - -```js [js] -detectBrowser() -``` - -**Returns:** `Chrome`, `Firefox`, `Safari`, `Opera`, `Edge`, `IE`, or `Unknown` - -### detectActiveBrowser - -Detect if the browser window is currently active or hidden. - -```js [js] -detectActiveBrowser() -``` - -### detectColorScheme - -Detect the current color scheme (Light or Dark) - -```js [js] -detectColorScheme() -``` - -**Returns:** `Light` or `Dark` - -### detectBrowserLanguage - -Detect the current browser language - -```js [js] -detectBrowserLanguage() -``` - -### detectGeolocation - -Detect the current user's location - -```js [js] -detectUserLocation() -``` - -**Returns:** `US`, `UK`, `CA`, `AU`, `NZ`, `EU`, `Unknown` - -### detectUserTimezone - -Detect the current user's Timezone - -```js [js] -detectUserTimezone() -``` - -### detectDeviceOrientation - -Detect the currect device orientation - -```js [js] -detectDeviceOrientation() -``` - -### detectDeviceMotion - -Detect the current device motion - -```js [js] -detectDeviceMotion() -``` - -Detect the browser's window size - -```js [js] -detectWindowSize() -``` - -Detect the screen or monitor size - -```js [js] -detectScreenSize() -``` - -Detect the container size via ID - -```js [js] -detectContainerSize('container') -``` - -### detectTailwindBreakpoint - -Detect the current breakpoint based on Tailwind CSS breakpoints - -```js [js] -detectTailwindBreakpoint() -``` - -### detectTailwindContainerBreakpoint - -Detect the current container breakpoint based on Tailwind CSS breakpoints - -```js [js] -detectTailwindContainerBreakpoint('container') -``` - -Detect the current scroll position of the window - -```js [js] -detectScrollPosition() -``` - -Detect the current mouse position within the window - -```js [js] -detectMousePosition(event) -``` - -Detect the current mouse position within a container via ID - -```js [js] -detectRelativeMousePosition('container', event) -``` - -### detectNetworkStatus - -Detect the current network status of the user (Online or Offline) - -```js [js] -detectNetworkStatus() -``` - -Detect the current memory status of the user (RAM) - -```js [js] -detectMemoryStatus() -``` - -### detectPerformance - -Detect the current performance status of the user (CPU, RAM, etc.) - -```js [js] -detectPerformance() -``` - -// Detect the current storage status of the user (Local Storage, Session Storage) - -```js [js] -detectStorage() -``` - -Returns a cookie value by name - -```js [js] -detectCookie('name') -``` - -### detectLocalStorage - -Returns a local storage value by name and parses it into JSON - -```js [js] -detectLocalStorage('name') -``` - -Returns a session storage value by name and parses it into JSON - -```js [js] -detectSessionStorage('name') -``` - -Returns a value from the URL by name - -```js [js] -detectURLParameters('http://url.com/page?name=Adam&surname=Smith') -``` - -Returns a value from the URL hash by name - -```js [js] -detectURLHashParameters() -``` - -Retrieves and returns the parameters from the URL search query string - -```js [js] -detectURLSearchParameters() -``` - -### detectURL - -Returns the current URL - -```js [js] -detectURL() -``` - -### detectDomain - -Returns the current domain - -```js [js] -detectDomain() -``` - -### detectIP - -Returns the current IP address - -```js [js] -detectIP() -``` - -### detectPort - -Returns the current port - -```js [js] -detectPort() -``` - -Returns the current protocol (HTTP or HTTPS) - -```js [js] -detectProtocol() -``` - -Returns the URL of the referring page (the page that linked to the current page) - -```js [js] -detectReferrer() -``` - -### detectCachedData - -Retrieves cached entries and optionally filters the entries based on a provided key - -```js [js] -detectCachedData('abc') -``` - -Detects if the element is currently in the viewport - -```js [js] -detectInViewport(element) -``` - -Detects if the element is currently in the container via ID - -```js [js] -detectInContainer(element, 'container') -``` - -Detects if the element is overflowing vertically - -```js [js] -detectOverflowingY(element) -``` - -Detects if the element is overflowing horizontally - -```js [js] -detectOverflowingX(element) -``` - -Detects if the element is scrollable (overflowing vertically or horizontally) - -```js [js] -detectScrollable(element) -``` - -Detects if the elements is an HTML element - -```js [js] -detectElement() -``` - diff --git a/content/2.functions/formatters.md b/content/2.functions/formatters.md deleted file mode 100644 index 2831dfc7..00000000 --- a/content/2.functions/formatters.md +++ /dev/null @@ -1,64 +0,0 @@ -# Formatters - -A collection of formatters for common data types - -### formatCurrency - -Format numbers into local currency - -```js [js] -formatCurrency(1234.56) -``` - -**Returns:** $1,234.56 - -### formatValuation - -Format numbers into valuations displayed in thounsands, millions or billions - -```js [js] -formatValuation(1234567890) -``` - -**Returns:** $1.23B - -### formatTime - -Format time into hours, minutes, and seconds - -```js [js] -formatTime(3723) -``` - -**Returns:** 1hr 2min 3s - -### formatDatetime - -Format Unix timestamp into a datetime string - -```js [js] -formatDatetime(1619097600) -``` - -**Returns:** 2021-04-22 00:00:00 - -### formatPercentage - -Format a number into a percentage - -```js [js] -formatPercentage(0.1234) -``` - -**Returns:** 12.34% - -### formatList - -Create a string of comma-separated values from an array of strings with an optional conjunction. - -```js [js] -commaList(['one', 'two', 'three']) -``` - -**Returns:** one, two and three - diff --git a/content/2.functions/generators.md b/content/2.functions/generators.md deleted file mode 100644 index 1c3bc453..00000000 --- a/content/2.functions/generators.md +++ /dev/null @@ -1,24 +0,0 @@ -# Generators - -A collection of generators - -### generateShortId - -Generate a unique short ID based on the current timestamp - -```js [js] -generateShortId(36) -``` - -**Returns:** 1HR2MIN3S - -### generateInitials - -Generate initials from any string - -```js [js] -generateInitials('John Doe') -``` - -**Returns:** JD - diff --git a/content/2.functions/modifiers.md b/content/2.functions/modifiers.md deleted file mode 100644 index 5fccd602..00000000 --- a/content/2.functions/modifiers.md +++ /dev/null @@ -1,514 +0,0 @@ -# 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. - -### widont - -Adds a space between the last two words in a string. - -```js [js] -widont('Cool cool cool') -``` - -**Returns:** cool cool cool - -### stripHtml - -Strip HTML tags from a string. - -```js [js] -stripHtml('
Hello World
') -``` - -**Returns:** Hello World - -### escapeHtml - -Escape HTML entities in a string. - -```js [js] -escapeHtml('Hello World
') -``` - -**Returns:** <p>Hello World</p> - -### unescapeHtml - -Unescape HTML entities in a string. - -```js [js] -unescapeHtml('<p>Hello World</p>') -``` - -**Returns:**Hello World
- -### stripTags - -Strip HTML tags from a string. - -```js [js] -stripTags('Hello World
') -``` - -**Returns:** Hello World - -### slugify - -Converts a string to-a-slug. - -```js [js] -slugify('Hello World') -``` - -**Returns:** hello-world - -### deslugify - -Converts a slug to a string. - -```js [js] -deslugify('hello-world') -``` - -**Returns:** hello world - -### truncate - -Truncates a string to a specified length of characters. - -```js [js] -truncate('Hello World', 5) -``` - -**Returns:** Hello... - -### truncateWords - -Truncates a string by a number of words - -```js [js] -truncateWords('Hello World', 1) -``` - -**Returns:** Hello... - -### countWords - -Counts the number of words in a string. - -```js [js] -countWords('Hello World') -``` - -**Returns:** 2 - -### countCharacters - -Counts the number of characters in a string. - -```js [js] -countCharacters('Hello World') -``` - -**Returns:** 11 - -### countLines - -Counts the number of lines in a string. - -```js [js] -countLines('Hello World') -``` - -**Returns:** 1 - -### stripWhitespace - -Strips whitespace from a string. - -```js [js] -stripWhitespace('Hello World') -``` - -**Returns:** HelloWorld - -### stripNumbers - -Strips numbers from a string. - -```js [js] -stripNumbers('Hello World 123') -``` - -**Returns:** Hello World - -### stripPunctuation - -Strips punctuation from a string. - -```js [js] -stripPunctuation('Hello World!') -``` - -**Returns:** Hello World - -### stripSymbols - -Strips symbols from a string. - -```js [js] -stripSymbols('Hello World!') -``` - -**Returns:** Hello World - -### stripEmojis - -Strips emojis from a string (requires ES6 Unicode support) 🦊. - -```js [js] -stripEmojis('Hello World! 🦊') -``` - -**Returns:** Hello World! - -### readingTime - -Returns the reading time of a string in Hours, Minutes, and Seconds. - -```js [js] -readingTime('Once, in a vibrant online forum, lived Mod Max, guardian of digital harmony. Max cherished his old scooter, Swift, a symbol of freedom. Navigating both virtual and real worlds, they became legends. Trolls quivered, posts flourished, and lanes whizzed by. Swift’s wheels spun tales, and Max’s keys kept peace. Together, they discovered uncharted threads and hidden lanes. Their journey, an endless adventure, painted pixels and pavements with stories of unity and exhilaration, leaving a trail for all in the intertwined realms of screens and streets.') -``` - -**Returns:** 1 minute - -### pluralize - -Adds plurals to a string. - -```js [js] -pluralize('scooter', 10) -``` - -**Returns:** scooters - -### singularize - -Removes plurals from a string. - -```js [js] -singularize('scooters') -``` - -**Returns:** scooter - -### ordinalize - -Converts a number to a string with ordinal suffix. - -```js [js] -ordinalize(1) -``` - -**Returns:** 1st - -### humanize - -Replaces underscores with spaces and capitalizes the first letter of each word. - -```js [js] -humanize('hello_world') -``` - -**Returns:** Hello World - -### camelCase - -Removes spaces and capitalizes the first letter of each word except for the first word. - -```js [js] -camelCase('hello world') -``` - -**Returns:** helloWorld - -### pascalCase - -Removes spaces and capitalizes the first letter of each word. - -```js [js] -pascalCase('hello world') -``` - -**Returns:** HelloWorld - -### snakeCase - -Replaces spaces with underscores and converts to lowercase. - -```js [js] -snakeCase('hello world') -``` - -**Returns:** hello_world - -### kebabCase - -Replaces spaces with hyphens and converts to lowercase. - -```js [js] -titleize('Hello World') -``` - -**Returns:** hello-world - -### titleCase - -Converts to title case by capitalizing the first letter of each word. - -```js [js] -titleCase('hello world') -``` - -**Returns:** Hello World - -### sentenceCase - -Converts to sentence case by capitalizing the first letter of the first word. - -```js [js] -sentenceCase('hello world') -``` - -**Returns:** Hello world - -### startWith - -Adds a prefix to a string if it doesn't already start with the prefix. - -```js [js] -startWith('usemods.com', 'https://') -``` - -**Returns:** https://usemods.com - -### startWithout - -Removes a prefix from a string if it starts with the prefix. - -```js [js] -startWithout('https://usemods.com', 'https://') -``` - -**Returns:** usemods.com - -### endWith - -Adds a suffix to a string if it doesn't already end with the suffix. - -```js [js] -endWith('https://usemods', '.com') -``` - -**Returns:** https://usemods.com - -### endWithout - -Removes a suffix from a string if it ends with the suffix. - -```js [js] -endWithout('https://usemods.com.au', '.au') -``` - -**Returns:** https://usemods.com - -### surround - -Adds a prefix and suffix to a string if it doesn't already start and end with them. - -```js [js] -surround('https://', 'usemods', '.com') -``` - -**Returns:** https://usemods.com - -### title - -Converts a string to title case following the Chicago Manual of Style rules. - -```js [js] -title('the quick brown fox jumps over the lazy dog') -``` - -**Returns:** The Quick Brown Fox Jumps over the Lazy Dog - -### splitByWords - -Wraps each word in a string with a span tag. - -```js [js] -splitByWords('Hello World. How are you?') -``` - -**Returns:** Hello world. How are you? - -### list - -Creates an array of list items (`