forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<script>
2 function loadXCards() {
3 const xCards = document.querySelectorAll('.twitter-tweet')
4 if (xCards.length === 0) return
5
6 if (document.querySelector('script[src*="platform.twitter.com/widgets.js"]')) {
7 return
8 }
9
10 const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
11 xCards.forEach((element) => {
12 element.setAttribute('data-theme', isDark ? 'dark' : 'light')
13 })
14
15 // Defer loading of Twitter script to avoid blocking main thread
16 const loadTwitterScript = () => {
17 const script = document.createElement('script')
18 script.src = 'https://platform.twitter.com/widgets.js'
19 script.async = true
20 document.head.appendChild(script)
21 }
22
23 // Use requestIdleCallback if available, otherwise use setTimeout
24 if ('requestIdleCallback' in window) {
25 requestIdleCallback(loadTwitterScript, { timeout: 2000 })
26 } else {
27 setTimeout(loadTwitterScript, 100)
28 }
29 }
30
31 // Use only astro:page-load as it fires on initial load and navigation
32 document.addEventListener('astro:page-load', loadXCards)
33</script>
34
35<style is:inline>
36 .prose .x-card {
37 width: 100%;
38 margin: 1em auto;
39 text-align: center;
40 }
41
42 .prose .x-card > * {
43 display: inline-block;
44 max-width: 100%;
45 margin: 0 auto;
46 }
47
48 .prose .x-card iframe {
49 max-width: 100%;
50 width: auto;
51 }
52</style>