docs: add since badge

.editorconfig

@@ -8,6 +8,6 @@ charset = utf-8
 trim_trailing_whitespace = true
 indent_style = tab
 
-[*.{md,mdx,yml,yaml,json,toml,htm,html,js,ts,css,svg,sh,bash,fish}]
+[*.{md,mdx,yml,yaml,json,toml,htm,html,js,ts,css,svg,sh,bash,fish,tsx}]
 indent_style = space
 indent_size = 2

website/docs/experiments/env_precedence.mdx

@@ -2,8 +2,10 @@
 slug: '/experiments/env-precedence'
 ---
 
-# Env Precedence (#1038)
+import AvailableSinceBadge from '~/components/AvailableSince';
 
+# Env Precedence (#1038)
+<AvailableSinceBadge version="v3.39.0" />
 :::caution
 
 All experimental features are subject to breaking changes and/or removal _at any

website/docs/getting_started.mdx

@@ -3,6 +3,8 @@ slug: /getting-started/
 sidebar_position: 3
 ---
 
+import AvailableSinceBadge from '~/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

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
 

website/docs/taskfile_versions.mdx

@@ -3,6 +3,8 @@ slug: /taskfile-versions/
 sidebar_position: 6
 ---
 
+import AvailableSinceBadge from '~/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.

website/docs/usage.mdx

@@ -3,6 +3,7 @@ slug: /usage/
 sidebar_position: 4
 ---
 
+import AvailableSinceBadge from '~/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'
 

website/docusaurus.config.ts

@@ -1,4 +1,4 @@
-import type {Config} from '@docusaurus/types';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import { EnumChangefreq } from 'sitemap';
 
@@ -40,6 +40,7 @@ const config: Config = {
       }
     }
   },
+  plugins: [require.resolve('./plugins/webpack-alias-plugin')],
 
   presets: [
     [
@@ -67,10 +68,7 @@ const config: Config = {
           blogSidebarCount: 'ALL'
         },
         theme: {
-          customCss: [
-            './src/css/custom.css',
-            './src/css/carbon.css',
-          ]
+          customCss: ['./src/css/custom.css', './src/css/carbon.css']
         },
         gtag: {
           trackingID: 'G-4RT25NXQ7N',
@@ -81,7 +79,7 @@ const config: Config = {
           priority: 0.5,
           ignorePatterns: ['/tags/**']
         }
-      } satisfies Preset.Options,
+      } satisfies Preset.Options
     ]
   ],
 
@@ -92,7 +90,7 @@ const config: Config = {
     }
   ],
 
-  themeConfig:{
+  themeConfig: {
     metadata: [
       {
         name: 'og:image',
@@ -125,38 +123,38 @@ const config: Config = {
         {
           type: 'docsVersionDropdown',
           position: 'right',
-          dropdownActiveClassDisabled: true,
+          dropdownActiveClassDisabled: true
         },
         {
           href: GITHUB_URL,
           title: 'GitHub',
           position: 'right',
-          className: "header-icon-link icon-github",
+          className: 'header-icon-link icon-github'
         },
         {
           href: DISCORD_URL,
           title: 'Discord',
           position: 'right',
-          className: "header-icon-link icon-discord",
+          className: 'header-icon-link icon-discord'
         },
         {
           href: TWITTER_URL,
           title: 'X (Twitter)',
           position: 'right',
-          className: "header-icon-link icon-twitter",
+          className: 'header-icon-link icon-twitter'
         },
         {
           href: BLUESKY_URL,
           title: 'Bluesky',
           position: 'right',
-          className: "header-icon-link icon-bluesky",
+          className: 'header-icon-link icon-bluesky'
         },
         {
           href: MASTODON_URL,
           title: 'Mastodon',
           rel: 'me',
           position: 'right',
-          className: "header-icon-link icon-mastodon",
+          className: 'header-icon-link icon-mastodon'
         }
       ]
     },
@@ -232,9 +230,9 @@ const config: Config = {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
       additionalLanguages: [
-        "bash", // aka. shell
-        "json",
-        "powershell"
+        'bash', // aka. shell
+        'json',
+        'powershell'
       ]
     },
     // NOTE(@andreynering): Don't worry, these keys are meant to be public =)
@@ -243,7 +241,7 @@ const config: Config = {
       apiKey: '34b64ae4fc8d9da43d9a13d9710aaddc',
       indexName: 'taskfile'
     }
-  } satisfies Preset.ThemeConfig,
+  } satisfies Preset.ThemeConfig
 };
 
 export default config;

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/plugins/webpack-alias-plugin/index.js

@@ -0,0 +1,16 @@
+const path = require('path');
+
+module.exports = function webpackAliasPlugin(context, options) {
+  return {
+    name: 'webpack-alias-plugin',
+    configureWebpack(config, isServer, utils) {
+      return {
+        resolve: {
+          alias: {
+            '~': path.resolve(__dirname, '../../src'),
+          },
+        },
+      };
+    },
+  };
+};

website/src/components/AvailableSince.tsx

@@ -0,0 +1,34 @@
+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>
+  );
+}

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;
+}

website/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
   }
 }

website/versioned_docs/version-latest/experiments/env_precedence.mdx

@@ -2,8 +2,10 @@
 slug: '/experiments/env-precedence'
 ---
 
-# Env Precedence (#1038)
+import AvailableSinceBadge from '~/components/AvailableSince';
 
+# Env Precedence (#1038)
+<AvailableSinceBadge version="v3.39.0" />
 :::caution
 
 All experimental features are subject to breaking changes and/or removal _at any

website/versioned_docs/version-latest/getting_started.mdx

@@ -3,6 +3,8 @@ slug: /getting-started/
 sidebar_position: 3
 ---
 
+import AvailableSinceBadge from '~/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