Better logic for including dynamic colors

[gouravkhunger]

Whenever one hovers on a post there's a visible border color that is specific to the category of the post. For example, the category for this post is android, so wherever there's a link to this post, there's a green hover color.

This color is achieved by templating the classes for the link with these classes: hover:border-{{ category }} and an !important field for dark:hover:!border-{{ category }} (notice !) where {{ category }} denotes the category of the current post that Jekyll is rendering:

theme-files/_includes/postbox.html

Line 6 in abf9722

<a class="postbox mt-4 mb-6 px-6 pt-2 pb-6 bg-white dark:bg-background rounded-2xl shadow-xl shadow-slate-200 dark:shadow-none border-4 hover:border-{{ category }} dark:hover:border-slate-200 dark:hover:!border-{{ category }} dark:border-slate-600 transition underline-none"

The possible combinations for the categories are defined in the tailwind.config.js file's safelist section:

theme-files/tailwind.config.js

Lines 6 to 22 in a6b973e

	safelist: [
	'!bg-android',
	'!bg-jekyll',
	'!bg-web',
	'!bg-web3',
	'!bg-node-js',
	'!bg-backend',
	'!bg-api',
	'hover:border-android', 'dark:hover:!border-android',
	'hover:border-web', 'dark:hover:!border-web',
	'hover:border-web3', 'dark:hover:!border-web3',
	'hover:border-jekyll', 'dark:hover:!border-jekyll',
	'hover:border-node-js', 'dark:hover:!border-node-js',
	'hover:border-backend', 'dark:hover:!border-backend',
	'hover:border-api', 'dark:hover:!border-api',
	'mt-16'
	],

And the colors are there in the section:

theme-files/tailwind.config.js

Lines 23 to 37 in a6b973e

	theme: {
	extend: {
	colors: {
	'background': '#16161f',
	'primary': '#2564eb',
	'web': '#F06529',
	'web3': '#6cdcc4',
	'android': '#3ddc84',
	'jekyll': '#c83c3c',
	'node-js': '#68a063',
	'backend': '#1494fc',
	'api': '#fceccc'
	}
	},
	},

There are two classes in a single element: dark:hover:border-slate-200 dark:hover:!border-{{ category }}, and the second one is marked important with ! to force apply category color and fallback to default color if it isn't present.

This is done because if there is no specific color assigned in the tailwind.config.js file, It falls back to the default black color in light mode and white border in dark mode.

There needs to be such hard-coding because tailwind can't automatically include dynamic CSS classes, at least up to the point I have tested it with Jekyll.

There is a need to find a better solution than manually having to hardcode the safelist every time...

[gouravkhunger]

The recently merged PR removes the need to manually update safelist for each new color added:

theme-files/tailwind.config.js

Lines 1 to 33 in 8fd4eed

	const extendedColors = {
	'background': '#16161f',
	'primary': '#2564eb',
	'web': '#F06529',
	'web3': '#6cdcc4',
	'android': '#3ddc84',
	'jekyll': '#c83c3c',
	'node-js': '#68a063',
	'backend': '#1494fc',
	'api': '#fceccc'
	}
	const safelist = [];
	Object.keys(extendedColors).filter(
	item => item !== 'background' || item !== 'primary'
	).forEach((item) => {
	safelist.push(`!bg-${item}`);
	safelist.push(`hover:border-${item}`);
	safelist.push(`dark:hover:!border-${item}`);
	});
	module.exports = {
	darkMode: 'class',
	content: [
	'./**/*.html',
	],
	safelist: safelist,
	theme: {
	extend: {
	colors: extendedColors
	},
	},

This is not an intended solution but gets the work done for the time being. This issue is kept open for further discussion.