Fixed version plan

docs/upgrading/TimeBar.vue

@@ -5,14 +5,9 @@ import quarterOfYear from "dayjs/plugin/quarterOfYear";
 
 dayjs.extend(quarterOfYear);
 
+const LINE_HEIGHT = 48;
+
 const releases = ref([
-  {
-    title: "v0.19",
-    periods: [
-      { title: "DEAD", start: 2022, end: 2022.75 },
-      { title: "MAINTENANCE", start: 2022.75, end: 2023.25 },
-    ],
-  },
   {
     title: "v0.20",
     periods: [
@@ -31,9 +26,16 @@ const releases = ref([
     title: "v1",
     periods: [
       { title: "ACTIVE", start: 2024, end: 2026 },
-      { title: "MAINTENANCE", start: 2026, end: 2026.5 },
+      { title: "MAINTENANCE", start: 2026, end: 2027 },
     ],
   },
+  // {
+  //   title: "v2",
+  //   periods: [
+  //     { title: "ACTIVE", start: 2026, end: 2028.25 },
+  //     { title: "MAINTENANCE", start: 2028.25, end: 2029 },
+  //   ],
+  // },
 ]);
 
 const getStart = () => {
@@ -119,22 +121,22 @@ const getBGColor = (period) => {
         :key="count"
         :style="{
           left: `${(100 * count) / diff}%`,
-          height: `${releases.length * 46}px`,
+          height: `${releases.length * LINE_HEIGHT}px`,
         }"
       />
       <div
         class="TimeBar-CurrentQuarter"
         :style="{
           left: `${getReleaseLeft({ start: currentYearAndQuarter })}%`,
           width: `calc(${quarterWidth}% - 1px)`,
-          height: `calc(${releases.length * 46}px - 30px)`,
+          height: `calc(${releases.length * LINE_HEIGHT}px - 30px)`,
         }"
       />
       <div
         class="TimeBar-CurrentQuarterTitle"
         :style="{
           left: `${getReleaseLeft({ start: currentYearAndQuarter })}%`,
-          top: `calc(${releases.length * 46}px - 25px)`,
+          top: `calc(${releases.length * LINE_HEIGHT}px - 25px)`,
           width: `calc(${quarterWidth}% - 1px)`,
         }"
       >

docs/upgrading/versioning-policy.md

@@ -2,6 +2,13 @@
 import ReleasePlan from './ReleasePlan.vue'
 </script>
 
+<style>
+.release-table > table {
+  width: 100%;
+  display: inline-table;
+}
+</style>
+
 # Versioning Policy
 
 Axe API uses the semantic version system.
@@ -22,11 +29,15 @@ You can check the current release plan of Axe API.
 
 <ReleasePlan />
 
-Some important changes;
+<div class="release-table">
+
+| Version | LTS | Release Date | Maintanence | EOL        |
+| ------- | --- | ------------ | ----------- | ---------- |
+| v1      | ✓   | 2024-01-01   | 2026-01-01  | 2027-01-01 |
+| v0.30   |     | 2023-04-01   | 2023-04-01  | 2024-10-01 |
+| v0.20   |     | 2022-10-01   | 2023-06-01  | 2024-01-01 |
 
-- `0.20.0`: TypeScript support
-- `0.30.0`: Many major changes. Stable release candidate.
-- `v1`: The stable release. Long-term support.
+</div>
 
 ## Breaking changes