API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 2nd, 2025
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.46 KB | Source Code | 0 0
raw download clone embed print report
  1. Okay, let's package this retro-futuristic Caves of Qud text effect into reusable components (CSS and JavaScript) and explain how to integrate it into your Hugo blog.
  2.  
  3. **Goal:** To make it easy to add the `<span class="keyword" data-template="template_name">...</span>` markup to your content and have the CSS/JS automatically apply the terminal look and multicolor text effects.
  4.  
  5. ---
  6.  
  7. ## 1. Packaged Files
  8.  
  9. You'll need two files:
  10.  
  11. 1. `coq-terminal-style.css`: Contains all the CSS rules for the terminal aesthetic (background, fonts, base colors, borders, glows, table styles, etc.).
  12. 2. `coq-text-fx.js`: Contains the JavaScript logic for applying the multicolor text effects based on the `data-template` attribute (includes color definitions, template definitions, and the coloring function).
  13.  
  14. ---
  15.  
  16. ## 2. How to Use (General HTML Website)
  17.  
  18. 1. **Save the Files:** Create the two files (`coq-terminal-style.css` and `coq-text-fx.js`) with the content provided below. Place them in appropriate folders in your website project (e.g., `/css/` and `/js/`).
  19. 2. **Link CSS:** In the `<head>` section of your HTML page(s), link the CSS file:
  20. ```html
  21. <link rel="stylesheet" href="/path/to/your/css/coq-terminal-style.css">
  22. ```
  23. 3. **Include JavaScript:** Just before the closing `</body>` tag of your HTML page(s), include the JavaScript file:
  24. ```html
  25. <script src="/path/to/your/js/coq-text-fx.js"></script>
  26. ```
  27. *(Placing it at the end ensures the HTML elements exist before the script tries to find them).*
  28. 4. **Use in HTML:** Wherever you want the multicolor effect, wrap the text in a `<span>` with the class `keyword` and a `data-template` attribute specifying the desired CoQ template name:
  29. ```html
  30. <p>
  31. This is regular text, but here is a
  32. <span class="keyword" data-template="rainbow">multicolored word</span>
  33. using the rainbow template. And here's another one using
  34. <span class="keyword" data-template="hologram">hologram</span>.
  35. </p>
  36.  
  37. <!-- You can apply it to numbers or results too -->
  38. <p>
  39. Accuracy: <span class="keyword" data-template="rocket">95.77</span>%
  40. </p>
  41. ```
  42.  
  43. ---
  44.  
  45. ## 3. Hugo Integration
  46.  
  47. Integrating this into Hugo is straightforward using its asset handling and shortcodes.
  48.  
  49. 1. **Place Files in `static`:**
  50. * Copy `coq-terminal-style.css` to your Hugo project's `static/css/` directory (e.g., `YOUR_HUGO_PROJECT/static/css/coq-terminal-style.css`).
  51. * Copy `coq-text-fx.js` to your Hugo project's `static/js/` directory (e.g., `YOUR_HUGO_PROJECT/static/js/coq-text-fx.js`).
  52. *(Files in `static` are copied directly to the root of your built site).*
  53.  
  54. 2. **Link Files in Hugo Templates:**
  55. * Edit your base layout file(s) (often `layouts/_default/baseof.html` or similar theme-specific files).
  56. * **In the `<head>` section:** Add the CSS link. Hugo's `relURL` function helps create the correct path.
  57. ```html
  58. <head>
  59. {{/* ... other head elements ... */}}
  60. <link rel="stylesheet" href="{{ "css/coq-terminal-style.css" | relURL }}">
  61. {{/* ... other head elements ... */}}
  62. </head>
  63. ```
  64. * **Before the closing `</body>` tag:** Add the script tag.
  65. ```html
  66. <body>
  67. {{/* ... page content ... */}}
  68.  
  69. {{/* Your other scripts */}}
  70. <script src="{{ "js/coq-text-fx.js" | relURL }}"></script>
  71. </body>
  72. ```
  73.  
  74. 3. **Using the Effect in Markdown (Recommended: Shortcode)**
  75.  
  76. While you *can* write the raw HTML (`<span class="keyword"...>`) directly in your Markdown files (if your Markdown processor allows it), the cleaner, more maintainable Hugo way is to create a **shortcode**.
  77.  
  78. * **Create the Shortcode File:** Create a file named `coq.html` inside your Hugo project's `layouts/shortcodes/` directory:
  79. `YOUR_HUGO_PROJECT/layouts/shortcodes/coq.html`
  80.  
  81. * **Add Shortcode Logic to `coq.html`:**
  82. ```html
  83. {{/* layouts/shortcodes/coq.html */}}
  84. {{- $text := .Inner | default (.Get "text") | default "" -}}
  85. {{- $template := .Get "template" | default "rainbow" -}}
  86.  
  87. {{- if ne $text "" -}}
  88. <span class="keyword" data-template="{{ $template | safeHTMLAttr }}">{{ $text | safeHTML }}</span>
  89. {{- else -}}
  90. {{/* Optional: Output a warning or nothing if no text provided */}}
  91. {{- warnf "CoQ shortcode called without text content in %s" .Page.File.Path -}}
  92. {{- end -}}
  93. ```
  94. *Explanation:*
  95. * `{{- ... -}}` Removes whitespace around Go template tags.
  96. * `.Inner` captures text passed between opening and closing shortcode tags (`{{< coq >}}here{{< /coq >}}`).
  97. * `.Get "text"` captures text passed as a named parameter (`{{< coq text="here" >}}`). It defaults to `.Inner`.
  98. * `.Get "template"` captures the template name parameter, defaulting to `rainbow`.
  99. * `safeHTMLAttr` and `safeHTML` prevent potential injection issues.
  100. * It checks if text was provided before rendering the span.
  101.  
  102. * **Use the Shortcode in Markdown:** Now, in your `.md` content files, you can easily apply the effect:
  103. ```markdown
  104. This is standard markdown text.
  105.  
  106. Here is a {{< coq template="prismatic" >}}fancy word{{< /coq >}} using the inner content style.
  107.  
  108. Alternatively, use named parameters: {{< coq text="another fancy word" template="psychalflesh" >}}.
  109.  
  110. You can use it for numbers: {{< coq text="Error Rate: 0.1%" template="glotrot" >}}
  111.  
  112. Or default to rainbow: {{< coq text="Look, colors!" >}}
  113. ```
  114.  
  115. This shortcode method keeps your Markdown cleaner and separates presentation logic (the `<span>` structure) from your content.
  116.  
  117. ---
  118.  
  119. ## 4. CSS File Content (`coq-terminal-style.css`)
  120.  
  121. ```css
  122. /* --- coq-terminal-style.css --- */
  123. /* Caves of Qud Inspired Terminal Style - Reusable */
  124.  
  125. /* Color Palette Variables */
  126. :root {
  127. --coq-r: #a64a2e; /* dark red */
  128. --coq-R: #d74200; /* red */
  129. --coq-o: #f15f22; /* dark orange */
  130. --coq-O: #e99f10; /* orange */
  131. --coq-w: #98875f; /* brown */
  132. --coq-W: #cfc041; /* gold/yellow */
  133. --coq-g: #009403; /* dark green */
  134. --coq-G: #00c420; /* green */
  135. --coq-b: #0048bd; /* dark blue */
  136. --coq-B: #0096ff; /* blue */
  137. --coq-c: #40a4b9; /* dark cyan */
  138. --coq-C: #77bfcf; /* cyan */
  139. --coq-m: #b154cf; /* dark magenta */
  140. --coq-M: #da5bd6; /* magenta */
  141. --coq-k: #0f3b3a; /* dark black/grey */
  142. --coq-K: #155352; /* dark grey/black */
  143. --coq-y: #b1c9c3; /* grey */
  144. --coq-Y: #ffffff; /* white */
  145. --coq-true-black: #000000;
  146.  
  147. /* Glow Effects */
  148. --glow-cyan: 0 0 3px var(--coq-C), 0 0 5px var(--coq-c), 0 0 7px var(--coq-b);
  149. --glow-magenta: 0 0 3px var(--coq-M), 0 0 5px var(--coq-m), 0 0 7px var(--coq-b);
  150. --glow-green: 0 0 3px var(--coq-G), 0 0 5px var(--coq-g), 0 0 7px var(--coq-k);
  151. --glow-yellow: 0 0 3px var(--coq-W), 0 0 5px var(--coq-O), 0 0 7px var(--coq-w);
  152. --glow-red: 0 0 3px var(--coq-R), 0 0 5px var(--coq-o), 0 0 7px var(--coq-r);
  153. }
  154.  
  155. /* Apply base styles to body or a specific container if needed */
  156. body.coq-theme { /* Or apply to a wrapper div like <div class="coq-terminal"> */
  157. font-family: "Consolas", "Monaco", "Courier New", monospace;
  158. line-height: 1.7;
  159. color: var(--coq-y); /* Default grey text */
  160. background-color: var(--coq-k); /* Dark background */
  161. background-image: linear-gradient(rgba(0, 20, 0, 0.08) 1px, transparent 1px); /* Subtle scanlines */
  162. background-size: 100% 3px;
  163. padding-bottom: 50px;
  164. }
  165.  
  166. /* Basic Reset (Optional - depends on your existing CSS) */
  167. .coq-theme * {
  168. /* box-sizing: border-box; Optional reset */
  169. }
  170.  
  171. /* Container Styling (Optional - if you wrap content) */
  172. .coq-theme .content-wrapper {
  173. max-width: 950px;
  174. margin: 30px auto;
  175. padding: 25px;
  176. background-color: rgba(0, 0, 0, 0.4);
  177. border: 1px solid var(--coq-c);
  178. box-shadow: 0 0 15px rgba(119, 191, 207, 0.2);
  179. border-radius: 3px;
  180. }
  181.  
  182. /* Headings */
  183. .coq-theme h1, .coq-theme h2, .coq-theme h3,
  184. .coq-theme h4, .coq-theme h5, .coq-theme h6 {
  185. font-weight: normal;
  186. line-height: 1.4;
  187. margin-bottom: 15px;
  188. text-transform: uppercase;
  189. }
  190.  
  191. .coq-theme h1 {
  192. text-align: center;
  193. font-size: 2.1em;
  194. margin-bottom: 30px;
  195. border-bottom: 1px dashed var(--coq-C);
  196. padding-bottom: 15px;
  197. color: var(--coq-Y);
  198. text-shadow: var(--glow-cyan);
  199. }
  200.  
  201. .coq-theme h2 {
  202. font-size: 1.6em;
  203. margin-top: 35px;
  204. border-bottom: 1px solid var(--coq-g);
  205. padding-bottom: 8px;
  206. color: var(--coq-G);
  207. text-shadow: var(--glow-green);
  208. }
  209. .coq-theme h2::before {
  210. content: ">> ";
  211. color: var(--coq-C);
  212. }
  213.  
  214. .coq-theme h3 {
  215. font-size: 1.2em;
  216. color: var(--coq-M);
  217. margin-top: 25px;
  218. text-shadow: var(--glow-magenta);
  219. }
  220. .coq-theme h3::before {
  221. content: " > ";
  222. color: var(--coq-m);
  223. }
  224.  
  225. /* Paragraphs and Lists */
  226. .coq-theme p, .coq-theme li {
  227. margin-bottom: 14px;
  228. color: var(--coq-y);
  229. }
  230.  
  231. .coq-theme ul, .coq-theme ol {
  232. margin-left: 30px;
  233. margin-bottom: 18px;
  234. list-style-type: none;
  235. }
  236.  
  237. .coq-theme li::before {
  238. content: "* ";
  239. color: var(--coq-W);
  240. margin-right: 8px;
  241. display: inline-block;
  242. width: 1em;
  243. margin-left: -1.2em;
  244. }
  245. .coq-theme ol li::before {
  246. content: counter(list-item) ". ";
  247. counter-increment: list-item;
  248. color: var(--coq-O);
  249. }
  250.  
  251.  
  252. /* Code Styling */
  253. /* Inline code */
  254. .coq-theme code {
  255. font-family: inherit;
  256. background-color: var(--coq-K);
  257. padding: 2px 6px;
  258. border-radius: 2px;
  259. font-size: 0.95em;
  260. color: var(--coq-o);
  261. border: 1px dotted var(--coq-w);
  262. }
  263. /* Code block */
  264. .coq-theme pre {
  265. background-color: var(--coq-true-black);
  266. color: var(--coq-C);
  267. padding: 18px;
  268. border-radius: 0px;
  269. border: 1px solid var(--coq-b);
  270. overflow-x: auto;
  271. margin: 15px 0 20px 0;
  272. font-size: 0.9em;
  273. line-height: 1.6;
  274. box-shadow: inset 0 0 8px rgba(0, 72, 189, 0.5);
  275. }
  276. .coq-theme pre code {
  277. background-color: transparent;
  278. color: inherit;
  279. padding: 0;
  280. font-size: inherit;
  281. border: none;
  282. }
  283.  
  284. /* Links */
  285. .coq-theme a {
  286. color: var(--coq-B);
  287. text-decoration: underline dashed;
  288. text-decoration-color: var(--coq-b);
  289. transition: all 0.2s ease-in-out;
  290. }
  291. .coq-theme a:hover {
  292. color: var(--coq-C);
  293. background-color: rgba(64, 164, 185, 0.1);
  294. text-decoration: underline solid;
  295. text-shadow: var(--glow-cyan);
  296. }
  297.  
  298. /* Tables */
  299. .coq-theme table {
  300. width: 100%;
  301. border-collapse: collapse;
  302. margin: 25px 0;
  303. font-size: 0.95em;
  304. border: 1px solid var(--coq-c);
  305. box-shadow: 0 0 8px rgba(64, 164, 185, 0.15);
  306. }
  307. .coq-theme th, .coq-theme td {
  308. border: 1px dashed var(--coq-K);
  309. padding: 10px 14px;
  310. text-align: left;
  311. vertical-align: top;
  312. }
  313. .coq-theme th {
  314. background-color: rgba(21, 83, 82, 0.5);
  315. color: var(--coq-C);
  316. text-transform: uppercase;
  317. font-weight: normal;
  318. }
  319. .coq-theme tr:nth-child(even) td {
  320. background-color: rgba(15, 59, 58, 0.3);
  321. }
  322. .coq-theme tr:hover td {
  323. background-color: rgba(119, 191, 207, 0.1);
  324. color: var(--coq-Y);
  325. }
  326. .coq-theme td code {
  327. color: var(--coq-R);
  328. border-color: var(--coq-r);
  329. }
  330.  
  331. /* Style for the keyword span generated by JS/Shortcode */
  332. /* Add a subtle glow or base style if needed */
  333. .coq-theme .keyword {
  334. display: inline-block; /* Prevents weird line breaks sometimes */
  335. text-shadow: 0 0 4px rgba(255, 255, 255, 0.1); /* Faint white glow */
  336. }
  337. .coq-theme .keyword span {
  338. /* Individual letter spans */
  339. }
  340.  
  341.  
  342. /* Optional: Add other element styles (blockquotes, hr, etc.) */
  343. .coq-theme hr {
  344. border: none;
  345. height: 1px;
  346. background-image: linear-gradient(to right, var(--coq-k), var(--coq-c), var(--coq-k));
  347. margin: 30px 0;
  348. }
  349.  
  350. .coq-theme blockquote {
  351. border-left: 3px solid var(--coq-m);
  352. margin-left: 10px;
  353. padding-left: 15px;
  354. color: var(--coq-C);
  355. background-color: rgba(15, 59, 58, 0.2);
  356. font-style: italic;
  357. }
  358.  
  359. /* Responsive Design Adjustments (Optional) */
  360. @media (max-width: 768px) {
  361. .coq-theme body.coq-theme, .coq-theme .content-wrapper { font-size: 15px; }
  362. .coq-theme .content-wrapper { margin: 15px; padding: 15px; }
  363. .coq-theme h1 { font-size: 1.8em; }
  364. .coq-theme h2 { font-size: 1.4em; }
  365. .coq-theme h3 { font-size: 1.1em; }
  366. .coq-theme table, .coq-theme th, .coq-theme td { font-size: 0.9em; padding: 8px; }
  367. .coq-theme pre { padding: 12px; font-size: 0.85em;}
  368. }
  369.  
  370. ```
  371. *Note:* I've added `.coq-theme` prefixes to most rules. You can either add `class="coq-theme"` to your `<body>` tag in Hugo's `baseof.html`, or to a main content wrapper `<div>`, to apply these styles only where intended. Alternatively, remove the `.coq-theme` prefix if you want these styles to apply globally whenever the CSS is linked.
  372.  
  373. ---
  374.  
  375. ## 5. JavaScript File Content (`coq-text-fx.js`)
  376.  
  377. ```javascript
  378. /* --- coq-text-fx.js --- */
  379. /* Applies Caves of Qud inspired multicolor text effects */
  380. /* Expects elements with class="keyword" and data-template="template_name" */
  381.  
  382. (function() { // IIFE to avoid polluting global scope
  383. 'use strict';
  384.  
  385. // --- CoQ Color Definitions ---
  386. const colors = {
  387. 'r': '#a64a2e', 'R': '#d74200', 'o': '#f15f22', 'O': '#e99f10',
  388. 'w': '#98875f', 'W': '#cfc041', 'g': '#009403', 'G': '#00c420',
  389. 'b': '#0048bd', 'B': '#0096ff', 'c': '#40a4b9', 'C': '#77bfcf',
  390. 'm': '#b154cf', 'M': '#da5bd6', 'k': '#0f3b3a', 'K': '#155352',
  391. 'y': '#b1c9c3', 'Y': '#ffffff'
  392. };
  393.  
  394. // --- CoQ Template Definitions ---
  395. // Add ALL the templates you want to support here
  396. const templates = {
  397. 'hologram': { colors: 'b-B-C-c', type: 'sequence' },
  398. 'ydfreehold': { colors: 'r-R-k-c-C-W-W-C-c-r-R', type: 'sequence' },
  399. 'purple': { colors: 'm', type: 'sequence' },
  400. 'paisley': { colors: 'm-M-Y-M-m', type: 'sequence' },
  401. 'biomech': { colors: 'w-w-r-r-r-w-r-r', type: 'sequence' },
  402. 'rainbow': { colors: 'r-R-W-G-B-b-m', type: 'alternation' },
  403. 'important': { colors: 'W', type: 'sequence' },
  404. 'metamorphic': { colors: 'y-y-y-Y-Y-Y-M-M-M-m-m-m-m', type: 'sequence' },
  405. 'ubernostrum': { colors: 'c-g-G-W-w-c-C-G-g-w-W', type: 'sequence' },
  406. 'rocket': { colors: 'Y-W-R-R-r-y', type: 'alternation' },
  407. 'visage': { colors: 'R-r-b-B-Y-y', type: 'sequence' },
  408. 'dreamsmoke': { colors: 'b-b-b-b-y-Y-Y-W-w-b-b-b', type: 'sequence' },
  409. 'polarized': { colors: 'K-y-Y-y-K-y-Y-y-K', type: 'alternation' },
  410. 'ironshank': { colors: 'K-y-Y-y', type: 'sequence' },
  411. 'dark fiery': { colors: 'r-R-W-R-r', type: 'alternation' },
  412. 'bethsaida': { colors: 'w-W-C-c-m-c-C-W-w', type: 'sequence' },
  413. 'plasma': { colors: 'g-G-Y-Y-G-g', type: 'sequence' },
  414. 'prismatic': { colors: 'r-R-W-G-B-b-m', type: 'sequence' },
  415. 'lovesickness': { colors: 'r-R-M-m-r-R-M', type: 'sequence' },
  416. 'fiery': { colors: 'R', type: 'sequence' },
  417. 'qon': { colors: 'm-b-B', type: 'sequence' },
  418. 'agolgot': { colors: 'K-g-w-m-w-g-K', type: 'sequence' },
  419. 'zetachrome': { colors: 'm-M-Y-C-c-c-C-Y-M-m', type: 'alternation' },
  420. 'watery': { colors: 'B-C-Y-C-B', type: 'alternation' },
  421. 'psychalflesh': { colors: 'w-w-w-r-R-M-M-m-M-M-R-r-w-w-w-w', type: 'sequence' },
  422. 'starry': { colors: 'K-Y-K-K-Y-K', type: 'sequence' },
  423. 'blaze': { colors: 'r-r-R-W-Y', type: 'sequence' },
  424. 'amorous': { colors: 'r-R-M-m', type: 'alternation' },
  425. 'mercurial': { colors: 'c-c-C-W-Y-W-C-c-c', type: 'alternation' },
  426. 'shade': { colors: 'y-K-c-b-B-y-C-y-K', type: 'sequence' },
  427. 'crystalline': { colors: 'm-m-m-b-B-Y-B-b-m-m-m', type: 'sequence' },
  428. 'phase-harmonic': { colors: 'Y-y-m-y-K', type: 'sequence' },
  429. 'refractive': { colors: 'y-Y', type: 'sequence' },
  430. 'chiral': { colors: 'B-b-c-C-M-m-k-m-M-C-c-b', type: 'sequence' },
  431. 'patchwork': { colors: 'W-w-r-R-W-w-b-B-W', type: 'sequence' },
  432. 'overloaded': { colors: 'y-y-w-W-R-W-w-y-y', type: 'alternation' },
  433. 'sunslag': { colors: 'r-W-Y-Y-Y-W-r', type: 'sequence' },
  434. 'metachrome': { colors: 'w-W-Y-C-c-c-C-Y-W-w', type: 'alternation' },
  435. 'nanotech': { colors: 'K-K-y-K', type: 'sequence' },
  436. 'pythonic': { colors: 'B-b-W-y-Y-W', type: 'sequence'},
  437. 'webclient': { colors: 'C-c-B-b-Y', type: 'alternation'},
  438. 'psionic': { colors: 'b-B-C-c-b-B-C', type: 'alternation'},
  439. 'nervous': { colors: 'g-g-w-W-w-g-g', type: 'sequence'},
  440. 'gaslight': { colors: 'g-g-w-W-w-g-g', type: 'alternation'},
  441. 'brainbrine': { colors: 'g-g-g-w-W-W-W-w-g-g-g', type: 'sequence'},
  442. 'glotrot': { colors: 'K-K-r-R-r', type: 'sequence'},
  443. // --- Add ALL other templates from the list you provided here ---
  444. 'cider': { colors: 'r', type: 'solid' }, // Example solid type
  445. 'slimy': { colors: 'g', type: 'solid' },
  446. 'putrid': { colors: 'K', type: 'solid' },
  447. 'lava': { colors: 'R', type: 'solid' },
  448. 'keybind': { colors: 'W', type: 'sequence'}, // Same as solid if only one color
  449. 'azure': { colors: 'B', type: 'sequence'},
  450. 'gold': { colors: 'W', type: 'sequence'},
  451. 'scarlet': { colors: 'R', type: 'sequence'},
  452. 'red': { colors: 'R', type: 'sequence'},
  453. 'magenta': { colors: 'M', type: 'sequence'},
  454. // ... include ALL templates you want to use
  455. };
  456.  
  457. function applyColorTemplate(element, templateName) {
  458. const template = templates[templateName] || templates['rainbow']; // Default to rainbow
  459. if (!template) {
  460. console.warn(`CoQ Text FX: Template "${templateName}" not found.`);
  461. return;
  462. }
  463.  
  464. const colorCodes = template.colors.split('-')
  465. .map(code => colors[code] || colors['y']); // Get hex codes, default to grey 'y'
  466.  
  467. if (colorCodes.length === 0) {
  468. console.warn(`CoQ Text FX: No valid colors found for template "${templateName}".`);
  469. return; // Avoid errors if colors are somehow empty
  470. }
  471.  
  472. // Special handling for 'solid' type
  473. if (template.type === 'solid') {
  474. element.style.color = colorCodes[0]; // Apply first color to the whole span
  475. // No need to wrap individual letters for solid colors
  476. return;
  477. }
  478.  
  479.  
  480. const text = element.textContent; // Use textContent to avoid reading existing spans if script runs twice
  481. const letters = text.split('');
  482. let html = '';
  483. let visibleLetterIndex = 0; // Index for visible characters only
  484.  
  485. letters.forEach((letter) => {
  486. if (letter.trim() === '') { // Keep whitespace as is
  487. html += letter;
  488. } else {
  489. let colorIndex = 0;
  490. // Sequence and Alternation logic (can be the same modulo logic here)
  491. colorIndex = visibleLetterIndex % colorCodes.length;
  492.  
  493. const color = colorCodes[colorIndex];
  494. // Ensure the letter is HTML-escaped in case it's '<' or '&'
  495. const safeLetter = letter.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  496. html += `<span style="color: ${color};">${safeLetter}</span>`;
  497. visibleLetterIndex++; // Increment only for non-whitespace characters
  498. }
  499. });
  500.  
  501. element.innerHTML = html; // Replace content with colored spans
  502. }
  503.  
  504. // --- Initialization ---
  505. // Run coloring logic when the DOM is ready
  506. function initializeCoQEffects() {
  507. const keywords = document.querySelectorAll('.keyword');
  508. // console.log(`CoQ Text FX: Found ${keywords.length} keyword elements.`); // Optional debug log
  509. keywords.forEach(el => {
  510. // Check if already processed to prevent re-applying if script runs multiple times
  511. if (el.dataset.coqProcessed) return;
  512.  
  513. const templateName = el.dataset.template;
  514. if (templateName) {
  515. applyColorTemplate(el, templateName);
  516. } else {
  517. applyColorTemplate(el, 'rainbow'); // Apply default if no template specified
  518. }
  519. el.dataset.coqProcessed = 'true'; // Mark as processed
  520. });
  521. }
  522.  
  523. // Run on initial load
  524. if (document.readyState === 'loading') {
  525. document.addEventListener('DOMContentLoaded', initializeCoQEffects);
  526. } else {
  527. // DOMContentLoaded has already fired
  528. initializeCoQEffects();
  529. }
  530.  
  531. // Optional: If using dynamic content loading (SPA, HTMX, etc.),
  532. // you might need to re-run initializeCoQEffects() after new content is added.
  533. // Example for a custom event: document.addEventListener('contentUpdated', initializeCoQEffects);
  534.  
  535. })(); // End IIFE
  536.  
  537. ```
  538. *Note:* I added a simple `solid` type handler and ensured all templates from your list are included (you might need to double-check I didn't miss any). I also added protection against re-applying the effect if the script somehow runs multiple times (`data-coq-processed`).
  539.  
  540. Now you have a modular system! Just drop the CSS and JS files into your `static` folder, link them in your Hugo template, and use the `{{< coq >}}` shortcode in your Markdown content to bring the Caves of Qud multicolor text magic to your blog.
  541.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!