Move to client pattern in Social/Mastodon

Author: webstackdev

.vscode/settings.json

@@ -43,6 +43,7 @@
     "jdbc",
     "Joomla",
     "jscoverage",
+    "Karamov",
     "KHTML",
     "koko",
     "labelledby",

src/components/Social/Mastodon/__tests__/config.spec.ts

@@ -8,7 +8,7 @@
  */
 
 import { describe, it, expect } from 'vitest'
-import { mastodonConfig, buildShareUrl } from '@components/Social/Mastodon/config'
+import { mastodonConfig, buildShareUrl } from '@components/Social/Mastodon/client/config'
 
 describe('Mastodon Configuration', () => {
   describe('mastodonConfig', () => {

src/components/Social/Mastodon/__tests__/detector.spec.ts

@@ -9,7 +9,7 @@
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { normalizeURL, getUrlDomain, getSoftwareName, isMastodonInstance } from '@components/Social/Mastodon/detector'
+import { normalizeURL, getUrlDomain, getSoftwareName, isMastodonInstance } from '@components/Social/Mastodon/client/detector'
 
 // Type alias for mocked fetch function
 type MockedFetch = ReturnType<typeof vi.fn>

src/components/Social/Mastodon/config.ts …ponents/Social/Mastodon/client/config.tssrc/components/Social/Mastodon/config.ts renamed to src/components/Social/Mastodon/client/config.ts src/components/Social/Mastodon/config.ts renamed to src/components/Social/Mastodon/client/config.ts

@@ -15,21 +15,21 @@ const { id = 'mastodon-modal' } = Astro.props
 
 <div
   id={id}
-  class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+  class="fixed inset-0 z-9999 flex items-center justify-center p-4"
   role="dialog"
   aria-modal="true"
   aria-labelledby="modal-title"
   hidden
 >
   <div class="modal-backdrop absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
   <div
-    class="modal-content relative w-full max-w-2xl max-h-[90vh] overflow-auto bg-[var(--color-bg)] rounded-lg shadow-2xl"
+    class="modal-content relative w-full max-w-2xl max-h-[90vh] overflow-auto bg-bg rounded-lg shadow-2xl"
   >
-    <div class="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
+    <div class="flex items-center justify-between p-6 border-b border-border">
       <h2 id="modal-title" class="m-0 text-xl font-semibold">Share to Mastodon</h2>
       <button
         type="button"
-        class="modal-close flex items-center justify-center w-8 h-8 p-0 border-0 bg-transparent rounded text-[var(--color-text-muted)] cursor-pointer transition-all duration-150 hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text)]"
+        class="modal-close flex items-center justify-center w-8 h-8 p-0 border-0 bg-transparent rounded text-text-muted cursor-pointer transition-all duration-150 hover:bg-bg-muted hover:text-text"
         aria-label="Close modal"
       >
         <svg
@@ -54,7 +54,7 @@ const { id = 'mastodon-modal' } = Astro.props
           name="text"
           rows="4"
           readonly
-          class="w-full p-3 border border-[var(--color-border)] rounded-md bg-[var(--color-bg-muted)] font-[inherit] text-sm leading-6 resize-y focus:outline-2 focus:outline-[var(--color-primary)] focus:outline-offset-2"
+          class="w-full p-3 border border-border rounded-md bg-bg-muted font-[inherit] text-sm leading-6 resize-y focus:outline-2 focus:outline-primary focus:outline-offset-2"
         ></textarea>
       </div>
 
@@ -63,10 +63,10 @@ const { id = 'mastodon-modal' } = Astro.props
         <label for="mastodon-instance" class="flex flex-col gap-2 font-medium">
           <span>Mastodon Instance</span>
           <div
-            class="flex items-stretch border border-[var(--color-border)] rounded-md overflow-hidden bg-[var(--color-bg-input)] focus-within:outline-2 focus-within:outline-[var(--color-primary)] focus-within:outline-offset-2"
+            class="flex items-stretch border border-border rounded-md overflow-hidden bg-bg-input focus-within:outline-2 focus-within:outline-primary focus-within:outline-offset-2"
           >
             <span
-              class="flex items-center px-3 py-2 bg-[var(--color-bg-muted)] text-[var(--color-text-muted)] text-sm select-none"
+              class="flex items-center px-3 py-2 bg-bg-muted text-text-muted text-sm select-none"
               aria-label="https prefix"
               id="instance-prefix"
             >
@@ -79,14 +79,14 @@ const { id = 'mastodon-modal' } = Astro.props
               placeholder="mastodon.social"
               required
               aria-describedby="instance-prefix"
-              class="flex-1 min-w-0 px-3 py-2 border-0 bg-transparent text-base text-[var(--color-text)] focus:outline-none"
+              class="flex-1 min-w-0 px-3 py-2 border-0 bg-transparent text-base text-text focus:outline-none"
             />
           </div>
         </label>
 
         <!-- Saved Instances -->
         <div id="saved-instances" class="flex flex-col gap-2" style="display: none;">
-          <p class="m-0 text-sm font-medium text-[var(--color-text-muted)]">Previously used:</p>
+          <p class="m-0 text-sm font-medium text-text-muted">Previously used:</p>
           <div class="saved-list flex flex-wrap gap-2"></div>
         </div>
 
@@ -101,13 +101,13 @@ const { id = 'mastodon-modal' } = Astro.props
       <div class="flex gap-3 justify-end">
         <button
           type="button"
-          class="btn-secondary modal-cancel px-4 py-2 border border-[var(--color-border)] rounded-md font-medium cursor-pointer transition-all duration-150 bg-transparent text-[var(--color-text)] hover:bg-[var(--color-bg-muted)]"
+          class="btn-secondary modal-cancel px-4 py-2 border border-border rounded-md font-medium cursor-pointer transition-all duration-150 bg-transparent text-text hover:bg-bg-muted"
         >
           Cancel
         </button>
         <button
           type="submit"
-          class="btn-primary px-4 py-2 border-0 rounded-md font-medium cursor-pointer transition-all duration-150 bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn-primary px-4 py-2 border-0 rounded-md font-medium cursor-pointer transition-all duration-150 bg-primary text-white hover:bg-primary-dark disabled:opacity-50 disabled:cursor-not-allowed"
         >
           Share
         </button>

…c/components/Social/Mastodon/detector.ts …nents/Social/Mastodon/client/detector.tssrc/components/Social/Mastodon/detector.ts renamed to src/components/Social/Mastodon/client/detector.ts src/components/Social/Mastodon/detector.ts renamed to src/components/Social/Mastodon/client/detector.ts

@@ -17,8 +17,8 @@ import Featured from '@components/CallToAction/Featured/index.astro'
 import Newsletter from '@components/CallToAction/Newsletter/index.astro'
 import Carousel from '@components/Carousel/index.astro'
 import Embed from '@components/Social/Embed/index.astro'
-import Highlighter from '@components/Social/Highlighter/Highlighter.astro'
-import MastodonModal from '@components/Social/Mastodon/Modal.astro'
+import Highlighter from '@components/Social/Highlighter/index.astro'
+import MastodonModal from '@components/Social/Mastodon/index.astro'
 import Shares from '@components/Social/Shares/Shares.astro'
 import Icon from '@components/Icon/index.astro'
 import Testimonials from '@components/Testimonials/index.astro'
@@ -136,8 +136,4 @@ const baseLayoutProps = {
 
   <!-- Mastodon sharing modal for Highlighter -->
   <MastodonModal />
-  <script>
-    import { registerShareHighlightWebComponent } from '@components/Social/Highlighter/share-highlight'
-    registerShareHighlightWebComponent()
-  </script>
 </BaseLayout>