Files
webawesome/docs/assets/scripts/util/string.js

43 lines
1.1 KiB
JavaScript
Raw Normal View History

Themer first slice (#857) * Basic scaffolding * Generate theme & palette data.js that other JS can import * Make it possible to include page-card without links * WIP * Add `appearance` to details, closes #569 Except `accent` as that's a) far less useful and b) trickier due to the icon color * Fix broken link * WIP * WIP * Icons icon * Unify styles for interactive cards * Prevent focusing inside theme icons * Fixes * Action page cards * Panel scrollables * scrollable * Scroll shadows * Add renaming UI * UI * Move styling of heading icons to `ui.css` * Support permalinks & CRUD * Make clickable cards more accessible * Style cards a little better * Default to styles panel if theme is selected * Update theme-icons.css * Custom themes should be saved under Custom * Get theme code * Bigger title * Fixes * Use theme Vue app for remixing too * Fix preview jank and make preview script more flexible * Make radio groups scrollable * Add affordance to button cards * Sticky * `<color-select>` * Fix theme remixing * Improve previewing logic * Fix preview * Move `domChange()` to separate module `theme-picker.js` includes side-effects, which may not always be desirable everywhere we may want to import `domChange()` * Update preview.js * Panel animation * Hide Save button if no changes and not saved * Do not show blank code when no selection has been made * Use theme slug in filename * Remove unused component * Better UI for editing title (and any other text) * Tweak UI of renaming * Better indicate default selection * Fix preview reverting bug * Fill out app preview with more examples * Remove `zoom` from theme showcase (yields unexpected/painful results Safari), improve display in wider viewports * Pending delete * Make styles panel cards scrollable * Fix some of the Safari issues * Update search.css * Update panel.css * Select preview UI * Fix typo * Frame colors setting as color contrast * Show dark mode in color mappings * Brand color * Swatch styling * Fix caret icon * Move Starting theme to the same level as other controls * Rename typography to Fonts * Fix bug: Swatch select should show swatches from the selected palette * Move capitalize to shared utils * Add utils for handling nested objects * Icons panel * Update code.js * Move utils around * Add fit and finish to sidebar panels * Theme card: Move icons to separate data structure * Move data to dedicated folder since we now have a lot more of it * Add default icon families and variants to themes * Data * Add `deepEntries()` * Add Duotone * Spruce up icons preview * Use theme's icon family in showcase * Font cards * Font cards * Add `max-inline-size` to preview container * Remove alternate preview options * Remove theme subtitle * Support FA kit codes * Remove Pro badges from theme cards * Use panagram preview for Fonts * Consistent heading and label capitalization * Classes for different icons-card types * Update data.js.njk * Variable style on icon family cards * Fix Sharp Duotone * Clean up FA kit code hint * Hide non-functional Icon Library field * Fix theme icon heights * icon variant -> style in theme metadata * Fix bug with icons defaults not being shown * More convenient theme defaults * Fix bug with non updating URL * Fix bug * Fix multiplying badges * Custom docs pages * Add Duotone icons to Mellow theme * Fix 404 * Remove "Create" from sidebar * Fix bug * Move vue components to `/assets/`, move their CSS with them * Safari/FF compatibility * Make panels scrollable again * Fix extra spacing --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
2025-05-09 17:04:06 -04:00
/**
* Make the first letter of a string uppercase
* @param {*} str
* @returns
*/
export function capitalize(str) {
str += '';
return str[0].toUpperCase() + str.slice(1);
}
/**
* Convert a readable string to a slug.
* @param {*} str - Input string. If argument is not a string, it will be stringified.
* @returns {string} - The slugified string
*/
export function slugify(str) {
return (str + '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII
.replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters
.trim()
.replace(/\s+/g, '-') // Convert whitespace to hyphens
.toLowerCase();
}
Themer 2nd slice: Look & Feel (#920) * Exclude Create link from sidebar, for reals this time * Fix bug * Very rough prototype of look & feel * a11y * Clean up data files * Automatically generate theme metadata * Read look & feel params straight from theme * First stab at dimensionality icons * Fix rounding 0 bug * Add border width slider * [Image-comparer] Expose wrapper as part * [Comparer] `pointer-events: none` while dragging * Dark mode slider * Adjust increments and ranges for look + feel sliders * Fix preview * Fix bug where dark mode was not inverted * Ability to select panel from URL * Create mixin for Vue form controls and use it in `<swatch-select>` * Prototype of slider min/max icon buttons * Nx tooltip * Icons * Prevent failed request * info-tip: Support passing text as prop * Clearable * [Brutalist] Match `--wa-shadow-offset-x-scale` to `--wa-shadow-offset-y-scale` * Add 'Blocky' dimension (derived from Awesome theme) * Only show Reset button when `clearable` is set * Remove `clearable` from Look & Feel sliders * Add tooltips to min/max buttons * Remove superfluous `aria-label` * Do not assume that all hyphens in URLs mean nesting, make it explicit * Formatting * Fix bug where styles were not applied on page load * Update Subtle dimension to maximize compatibility * `<wa-scoped>`: Do not allow non-template children * Workaround for card not updating * Update Glossy dimension to maximize compatibility * Sync scrolling between regular and inverted preview * Fix bug * Make changing the base theme reset customizations * Fix palette page * Remove cancel button from editable text * Don't error in theme pages * Update Playful dimension to maximize compatibility * Rename 'Look and Feel' to 'Elements' for better parallel structure * Hide dimensionality controls * Make back icon motion more subtle * Expand spacing slider bounds * Add `tabindex="-1"` where missing in theme showcase * Remove extraneous gap from theme headers * fix edit button bug * rename comparer => comparison; fix aria-controls * Always save theme name on blur * Add changelog for themer and new patterns category --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
2025-05-20 10:16:49 -04:00
/**
* Convert a string to camel case.
* @param {string} str - The string to convert.
* @returns {string} The camel case string.
*/
export function camelCase(str) {
return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
}
/**
* Convert a string to kebab case.
* @param {string} str - The string to convert.
* @returns {string} The kebab case string.
*/
export function kebabCase(str) {
return str.replace(/([A-Z])/g, '-$1').toLowerCase();
}