Conditional rendering embedding depending upon theme.

[iamwatchdogs]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I have created a repo from chirpy-starter template and I have added my custom twitter/x embedding template (not so optimal but it does the job) and can be accessible as follows...

{% 
  include embed/twitter.html
  id="<id>"
  theme="<light | dark>"               <!-- default: dark -->
  align="<left | center | right>"      <!-- default: center-->
  width="[width]"                      <!-- optional -->
  cards="[hidden]"                     <!-- optional -->
  conversation="[none]"                <!-- optional -->
%}

Now, I wanted to perform a conditional rendering using liquid templating, but I was unable to access the site.theme_mode value. I knew using {: .light} and {: .dark} won't help me much in this case, but I still tried it anyways, but it wasn't that helpful.

Operations you have already tried

Initial I have tried to use site.theme_mode after coming across these lines. So, I came up with the following logic...

{% if site.theme_mode == "light" %}
  {% include embed/twitter.html id="<id>"  theme="light"%}
{% else %}
   {% include embed/twitter.html id="<id>" %}
{% endif %}

But somehow that didn't work. Then I tried using {: .light} and {: .dark} class specifiers and modify the template to render the tweet based on input from classes. But as soon as I tried to implement that, it got a bit more complex and had to change the original logic more than I thought.

Is there any possible way I could implement conditional rendering just like the one above?

Anything else?

No response

[lotusk08]

Try this:
X (Twitter) embed function - supports multiple tweets and dark/light themes:

1. First, create the X embed template file at _includes/embed/x.html like:

<div class="tweet-wrapper" data-tweet-id="{{ include.id }}">
  <blockquote 
	class="twitter-tweet" 
	data-theme="light" 
	data-dnt="true">
	<a href="https://twitter.com/x/status/{{ include.id }}">View tweet on Twitter</a>
  </blockquote>
  <script>
	if (document.querySelector('.tweet-wrapper') && !window.twttrScriptInitialized) {
	  window.twttrScriptInitialized = true;

	  function getCurrentTheme() {
		const htmlElement = document.documentElement;
		const mode = htmlElement.getAttribute('data-mode');
		if (mode) {
		  return mode === 'dark' ? 'dark' : 'light';
		}
		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
		  return 'dark';
		}
		return 'light';
	  }

	  function debounce(func, wait) {
		let timeout;
		return function(...args) {
		  clearTimeout(timeout);
		  timeout = setTimeout(() => func.apply(this, args), wait);
		};
	  }

	  function renderTweets() {
		const theme = getCurrentTheme();
		document.querySelectorAll('.tweet-wrapper').forEach(wrapper => {
		  const tweetId = wrapper.getAttribute('data-tweet-id');
		  wrapper.innerHTML = '';
		  const tweet = document.createElement('blockquote');
		  tweet.className = 'twitter-tweet';
		  tweet.setAttribute('data-theme', theme);
		  tweet.setAttribute('data-dnt', 'true');
		  tweet.innerHTML = `<a href="https://twitter.com/x/status/${tweetId}">View tweet on Twitter</a>`;
		  wrapper.appendChild(tweet);
		  if (!document.querySelector('script[src="https://platform.twitter.com/widgets.js"]')) {
			const script = document.createElement('script');
			script.src = 'https://platform.twitter.com/widgets.js';
			script.async = true;
			script.charset = 'utf-8';
			script.onerror = () => console.error('Failed to load Twitter widgets.js');
			wrapper.appendChild(script);
		  } else if (typeof twttr !== 'undefined' && twttr.widgets) {
			twttr.widgets.load(wrapper);
		  }
		});
	  }

	  const debouncedRenderTweets = debounce(renderTweets, 300);

	  renderTweets();

	  window.addEventListener('message', function(event) {
		if (event.data && event.data.id === 'theme-mode') {
		  debouncedRenderTweets();
		}
	  });

	  const htmlElement = document.documentElement;
	  const observer = new MutationObserver(mutations => {
		mutations.forEach(mutation => {
		  if (mutation.attributeName === 'data-mode') {
			debouncedRenderTweets();
		  }
		});
	  });
	  observer.observe(htmlElement, { attributes: true });
	}
  </script>
</div>

<style>
  .tweet-wrapper {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
  }
  
  .twitter-tweet {
	border-radius: var(--border-radius, 12px) !important;
	overflow: hidden;
  }

  .twitter-tweet iframe {
	border: none !important;
	border-radius: var(--border-radius, 12px) !important;
  }
</style>

2. Now you can use the twitter embed in your markdown files like this:

Here's a tweet:

{% include embed/x.html id="19081880733909859181" %}

Goodluck!