feat: 🎸 Make it possible to add literals via attribute

src/features/pin/index.ts

@@ -23,6 +23,7 @@ export { createPinElement } from './utils/create-pin-element';
 // eslint-disable-next-line import/no-unused-modules
 export { pinElement } from './utils/pin-element';
 
+import { SPECCER_LITERALS } from '../../utils/constants';
 import { isElementHidden } from '../../utils/node';
 
 import { getCharacterToUse } from './utils/get-character-to-use';
@@ -51,6 +52,8 @@ export const pinElements = async (
 
   if (!_els_to_be_pinned || _els_to_be_pinned.length === 0) return;
 
+  const _literals_to_use = sectionElement.getAttribute('data-speccer-literals') as string|null || window.SPECCER_LITERALS || SPECCER_LITERALS;
+
   [..._els_to_be_pinned]
     .filter(
       async (targetElement: HTMLElement) => !isElementHidden(targetElement)
@@ -60,7 +63,7 @@ export const pinElements = async (
         targetElement: HTMLElement,
         targetIndex: number
       ): Promise<void> => {
-        const _character_to_use = getCharacterToUse(targetIndex);
+        const _character_to_use = getCharacterToUse(targetIndex,_literals_to_use);
 
         await pinElement(targetElement, _character_to_use, sectionElement);
       }

src/features/pin/utils/get-character-to-use.ts

@@ -1,12 +1,11 @@
-import { SPECCER_LITERALS } from '../../../utils/constants';
-
 let _index_to_use = 0;
 
 /**
  * Returns the character to use at the specified target index.
  * If the index exceeds the available characters, it generates a new character by pairing uppercase and lowercase letters.
  *
  * @param {number} targetIndex - The index of the character to retrieve.
+ * @param {string|string[]} literalsToUse - Literals to use
  * @returns {string} The character to use at the specified index.
  *
  * @example
@@ -15,10 +14,8 @@ let _index_to_use = 0;
  * const nextCharacter = getCharacterToUse(25); // Returns next character or a generated pair if index exceeds literals length
  * ```
  */
-export const getCharacterToUse = (targetIndex: number): string => {
-  const _literals_to_use = window.SPECCER_LITERALS || SPECCER_LITERALS;
-
-  let _character_to_use = _literals_to_use[targetIndex];
+export const getCharacterToUse = (targetIndex: number, literalsToUse: string|string[]): string => {
+  let _character_to_use = literalsToUse[targetIndex];
 
   // Reset index to use when we start new elements
   if (targetIndex === 0) _index_to_use = 0;
@@ -28,7 +25,7 @@ export const getCharacterToUse = (targetIndex: number): string => {
    * make a new one with uppercase and lowercase pairs
    */
   if (!_character_to_use) {
-    _character_to_use = `${_literals_to_use[_index_to_use]}${_literals_to_use[
+    _character_to_use = `${literalsToUse[_index_to_use]}${literalsToUse[
       _index_to_use
     ].toLowerCase()}`;
     _index_to_use++;

src/features/spacing/index.ts

@@ -29,7 +29,7 @@ export const create = (
   tag = 'span'
 ): HTMLElement => {
   const _el = document.createElement(tag);
-  const _text_content = document.createTextNode(String(text));
+  const _text_content = document.createTextNode(`${text}px`);
 
   _el.appendChild(_text_content);
   _el.setAttribute('title', `${text}px`);