docs: add since badge

Author: vmaerten

website/docs/usage.mdx

@@ -3,6 +3,7 @@ slug: /usage/
 sidebar_position: 4
 ---
 
+import AvailableSinceBadge from '../src/components/AvailableSince';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -310,6 +311,7 @@ includes:
 ```
 
 ### Flatten includes
+<AvailableSinceBadge version="3.31.0" />
 
 You can flatten the included Taskfile tasks into the main Taskfile by using the `flatten` option.
 It means that the included Taskfile tasks will be available without the namespace.

website/package.json

@@ -27,7 +27,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-github": "^12.0.0"
+    "remark-github": "^12.0.0",
+    "react-icons" : "^5.5.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.5.2",

website/src/components/AvailableSince.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { FaCalendarCheck } from 'react-icons/fa';
+import { useColorMode } from '@docusaurus/theme-common';
+
+type Props = {
+	version: string;
+};
+
+export default function AvailableSince({ version }: Props) {
+	const { colorMode } = useColorMode();
+
+	const isDark = colorMode === 'dark';
+
+
+	// Available Since color standard
+	const style = {
+		display: 'inline-flex',
+		alignItems: 'center',
+		backgroundColor: isDark ? '#004d40' : '#e0f7fa',
+		color: isDark ? '#b2dfdb' : '#00796b',
+		padding: '0.25em 0.6em',
+		borderRadius: '6px',
+		fontSize: '0.85em',
+		fontWeight: 500,
+	};
+
+
+	//Color standard badge
+
+		const styleBadge = {
+		display: 'inline-flex',
+		alignItems: 'center',
+		border: `1px solid ${isDark ? '#66bb6a' : '#2e7d32'}`,
+		color: isDark ? '#a5d6a7' : '#2e7d32',
+		padding: '0.2em 0.6em',
+		borderRadius: '999px',
+		fontSize: '0.8em',
+		fontWeight: 500,
+		backgroundColor: isDark ? 'transparent' : '#f0fdf4',
+	};
+
+
+	// Standard task color
+
+	const styleStandardTaskColor = {
+	display: 'inline-flex',
+	alignItems: 'center',
+	backgroundColor: isDark ? 'var(--ifm-color-primary-darkest)' : '#e0f7f5',
+	color: isDark ? '#fffdf9' : 'var(--ifm-color-primary-darker)',
+	padding: '0.25em 0.6em',
+	borderRadius: '6px',
+	fontSize: '0.85em',
+	fontWeight: 500,
+};
+
+	// Badge task color
+		const styleBadgeTaskColor = {
+		display: 'inline-flex',
+		alignItems: 'center',
+		border: `1px solid var(--ifm-color-primary)`,
+		color: isDark ? '#fffdf9' : 'var(--ifm-color-primary)',
+		padding: '0.2em 0.6em',
+		borderRadius: '999px',
+		fontSize: '0.8em',
+		fontWeight: 500,
+		backgroundColor: isDark ? 'transparent' : '#f0fdfa',
+	};
+
+	const styleBadgeTaskColor2 = {
+		display: 'inline-flex',
+		alignItems: 'center',
+		border: `1px solid var(--ifm-color-primary)`,
+		color: isDark ? '#fffdf9' : 'var(--ifm-color-primary-darkest)',
+		padding: '0.2em 0.6em',
+		borderRadius: '999px',
+		fontSize: '0.8em',
+		fontWeight: 500,
+		backgroundColor: isDark ? 'var(--ifm-color-primary)' : '#f0fdfa',
+	};
+
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
+		<div>
+		<span style={style}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+		</div>
+	<div>
+			<span style={styleBadge}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+	</div>
+		<div>
+			<span style={styleStandardTaskColor}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+		</div>
+			<div>
+			<span style={styleBadgeTaskColor}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+				</div>
+
+			<div>
+			<span style={styleBadgeTaskColor2}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+			</div>
+		</div>
+	);
+}
+
+

website/yarn.lock

@@ -7441,6 +7441,11 @@ react-fast-compare@^3.2.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-icons@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
+  integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"