docs: add since badge

vmaerten · vmaerten · commit 31fc45dc7d0d · 2025-04-22T13:59:07.000+02:00
wip

wip

wip
diff --git a/website/docs/experiments/env_precedence.mdx b/website/docs/experiments/env_precedence.mdx
@@ -2,8 +2,10 @@
 slug: '/experiments/env-precedence'
 ---
 
-# Env Precedence (#1038)
+import AvailableSinceBadge from '../../src/components/AvailableSince';
 
+# Env Precedence (#1038)
+<AvailableSinceBadge version="v3.39.0" />
 :::caution
 
 All experimental features are subject to breaking changes and/or removal _at any
diff --git a/website/docs/getting_started.mdx b/website/docs/getting_started.mdx
@@ -3,6 +3,8 @@ slug: /getting-started/
 sidebar_position: 3
 ---
 
+import AvailableSinceBadge from '../src/components/AvailableSince';
+
 # Getting Started
 
 The following guide will help introduce you to the basics of Task. We'll cover
@@ -18,8 +20,13 @@ Once Task is installed, you can create your first Taskfile by running:
 task --init
 ```
 
-This will create a file called `Taskfile.yml` in the current directory. If you
-want to create the file in another directory, you can pass an absolute or
+This will create a file called `Taskfile.yml` in the current directory.
+
+---
+
+<AvailableSinceBadge version="v3.42.0" />
+
+If you want to create the file in another directory, you can pass an absolute or
 relative path to the directory into the command:
 
 ```shell
@@ -33,6 +40,9 @@ the file:
 task --init Custom.yml
 ```
 
+---
+
+
 This will create a Taskfile that looks something like this:
 
 ```yaml
diff --git a/website/docs/reference/cli.mdx b/website/docs/reference/cli.mdx
@@ -21,7 +21,7 @@ If `--` is given, all remaining arguments will be assigned to a special
 ## Flags
 
 | Short | Flag                        | Type     | Default                                      | Description                                                                                                                                                                                  |
-| ----- | --------------------------- | -------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|-------|-----------------------------|----------|----------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `-c`  | `--color`                   | `bool`   | `true`                                       | Colored output. Enabled by default. Set flag to `false` or use `NO_COLOR=1` to disable.                                                                                                      |
 | `-C`  | `--concurrency`             | `int`    | `0`                                          | Limit number tasks to run concurrently. Zero means unlimited.                                                                                                                                |
 | `-d`  | `--dir`                     | `string` | Working directory                            | Sets the directory in which Task will execute and look for a Taskfile.                                                                                                                       |
@@ -45,10 +45,10 @@ If `--` is given, all remaining arguments will be assigned to a special
 | `-y`  | `--yes`                     | `bool`   | `false`                                      | Assume "yes" as answer to all prompts.                                                                                                                                                       |
 |       | `--status`                  | `bool`   | `false`                                      | Exits with non-zero exit code if any of the given tasks is not up-to-date.                                                                                                                   |
 |       | `--summary`                 | `bool`   | `false`                                      | Show summary about a task.                                                                                                                                                                   |
-| `-t`  | `--taskfile`                | `string` |                                              | Taskfile path to run.<br />Check the list of default filenames [here](../usage/#supported-file-names).                                                                                        |
+| `-t`  | `--taskfile`                | `string` |                                              | Taskfile path to run.<br />Check the list of default filenames [here](../usage/#supported-file-names).                                                                                       |
 | `-v`  | `--verbose`                 | `bool`   | `false`                                      | Enables verbose mode.                                                                                                                                                                        |
 |       | `--version`                 | `bool`   | `false`                                      | Show Task version.                                                                                                                                                                           |
-| `-w`  | `--watch`                   | `bool`   | `false`                                      | Enables watch of the given task.
+| `-w`  | `--watch`                   | `bool`   | `false`                                      | Enables watch of the given task.                                                                                                                                                             |
 
 ## Exit Codes
 
diff --git a/website/docs/taskfile_versions.mdx b/website/docs/taskfile_versions.mdx
@@ -3,6 +3,8 @@ slug: /taskfile-versions/
 sidebar_position: 6
 ---
 
+import AvailableSinceBadge from '../src/components/AvailableSince';
+
 # Taskfile Versions
 
 The Taskfile schema slowly changes as new features are added and old ones are
@@ -56,6 +58,8 @@ Instead, we should start the file like this:
 version: '3.17'
 ```
 
+<AvailableSinceBadge version="v3.34.0" />
+
 Now when someone tries to run the Taskfile with an older version of Task, they
 will receive an error prompting them to upgrade their version of Task to
 `v3.17.0` or greater.
diff --git a/website/docs/usage.mdx b/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';
 
@@ -311,6 +312,8 @@ includes:
 
 ### Flatten includes
 
+<AvailableSinceBadge version="v3.39.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.
 
@@ -1100,7 +1103,7 @@ variable types are supported:
 - `int`
 - `float`
 - `array`
-- `map`
+- `map` <AvailableSinceBadge version="v3.43.1" />
 
 :::note
 
@@ -1373,6 +1376,7 @@ tasks:
 ```
 
 ### Looping over a matrix
+<AvailableSinceBadge version="v3.39.0" />
 
 If you need to loop over all permutations of multiple lists, you can use the
 `matrix` property. This should be familiar to anyone who has used a matrix in a
@@ -1447,7 +1451,7 @@ tasks:
 
 </TabItem>
 <TabItem value="2" label="Generates">
-
+<AvailableSinceBadge version="v3.43.1" />
 ```yaml
 version: '3'
 
@@ -1495,7 +1499,7 @@ tasks:
 
 </TabItem>
 <TabItem value="2" label="Generates">
-
+<AvailableSinceBadge version="v3.43.1" />
 ```yaml
 version: '3'
 
diff --git a/website/package.json b/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",
diff --git a/website/src/components/AvailableSince.tsx b/website/src/components/AvailableSince.tsx
@@ -0,0 +1,36 @@
+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';
+
+	const style = {
+		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 ? 'var(--ifm-color-primary)' : '#f0fdfa',
+		marginBottom:  'calc(var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading))',
+	};
+
+
+	return (
+		<span className="available-since-badge" style={style}>
+      <FaCalendarCheck style={{ marginRight: '0.4em' }} />
+      Since {version}
+    </span>
+	);
+}
+
+
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -121,3 +121,7 @@
 .icon-bluesky::before {
   mask-image: url('/img/icon-bluesky.svg');
 }
+
+h3:has(+ .available-since-badge) {
+  margin-bottom: 0.5rem;
+}
diff --git a/website/yarn.lock b/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"

Original file line number	Diff line number	Diff line change
`@@ -121,3 +121,7 @@`
`121`	`121`	`.icon-bluesky::before {`
`122`	`122`	`mask-image: url('/img/icon-bluesky.svg');`
`123`	`123`	`}`
	`124`	`+`
	`125`	`+h3:has(+ .available-since-badge) {`
	`126`	`+ margin-bottom: 0.5rem;`
	`127`	`+}`