From 8470c9b315ebb7a2ba6d5ac2ddb2e39b1d2ec5be Mon Sep 17 00:00:00 2001
From: ethancrawford <ethan_jc@hotmail.com>
Date: Thu, 8 May 2025 03:08:05 +0800
Subject: [PATCH] Fix broken links in docs and improve some labels (#2337)

Co-authored-by: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>
---
 .changeset/eleven-seals-unite.md                     | 5 +++++
 docs/content/ui/components/avatars.md                | 2 +-
 docs/content/ui/components/buttons.md                | 2 +-
 docs/content/ui/components/countup.md                | 2 +-
 docs/content/ui/components/divider.md                | 2 +-
 docs/content/ui/components/icons.md                  | 4 ++--
 docs/content/ui/components/progress.md               | 2 +-
 docs/content/ui/components/range-slider.md           | 6 ++----
 docs/content/ui/components/ribbons.md                | 2 +-
 docs/content/ui/components/spinners.md               | 2 +-
 docs/content/ui/components/statuses.md               | 2 +-
 docs/content/ui/components/steps.md                  | 2 +-
 docs/content/ui/forms/form-color-check.md            | 2 +-
 docs/content/ui/forms/form-image-check.md            | 2 +-
 docs/content/ui/getting-started/how-to-contribute.md | 4 ++--
 docs/content/ui/getting-started/installation.md      | 2 +-
 16 files changed, 23 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/eleven-seals-unite.md

diff --git a/.changeset/eleven-seals-unite.md b/.changeset/eleven-seals-unite.md
new file mode 100644
index 000000000..ec2167710
--- /dev/null
+++ b/.changeset/eleven-seals-unite.md
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix broken links to other docs section and tabler.io website; improve some labels.
diff --git a/docs/content/ui/components/avatars.md b/docs/content/ui/components/avatars.md
index e13f3fa68..d443e39a4 100644
--- a/docs/content/ui/components/avatars.md
+++ b/docs/content/ui/components/avatars.md
@@ -64,7 +64,7 @@ Besides pictures and initials, you can also use icons to make the avatars more u
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](/img/ui/base/colors) to see the list of available colors.
+Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <span class="avatar bg-green-lt">AB</span>
diff --git a/docs/content/ui/components/buttons.md b/docs/content/ui/components/buttons.md
index ca8ab8eac..96a0091da 100644
--- a/docs/content/ui/components/buttons.md
+++ b/docs/content/ui/components/buttons.md
@@ -151,7 +151,7 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
 
 Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
 
-Icons can be found [**here**](/img/components/icons)
+See all icons at [tabler.io/icons]({{ site.icons.link }}).
 
 {% capture html -%}
 <button type="button" class="btn">
diff --git a/docs/content/ui/components/countup.md b/docs/content/ui/components/countup.md
index 1c0e1da7d..7886c821e 100644
--- a/docs/content/ui/components/countup.md
+++ b/docs/content/ui/components/countup.md
@@ -9,7 +9,7 @@ The countup component is used to display numbers dynamically. It is a great way
 
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
-For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+For more advanced features of countups, see the demo on the [countUp.js website](https://inorganik.github.io/countUp.js/).
 
 ## Basic usage
 
diff --git a/docs/content/ui/components/divider.md b/docs/content/ui/components/divider.md
index 62d35aad2..8a9782fe1 100644
--- a/docs/content/ui/components/divider.md
+++ b/docs/content/ui/components/divider.md
@@ -46,7 +46,7 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/img/ui/base/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <p>
diff --git a/docs/content/ui/components/icons.md b/docs/content/ui/components/icons.md
index 363db2a97..ad8713ca0 100644
--- a/docs/content/ui/components/icons.md
+++ b/docs/content/ui/components/icons.md
@@ -5,7 +5,7 @@ banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
-If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
 
 ## Base icon
 
@@ -45,7 +45,7 @@ Look at the example below to see the filled icons.
 
 ## Icon colors
 
-To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/img/ui/colors). Color classes can be used with any HTML element.
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
 
 ```html
 <span class="text-red">
diff --git a/docs/content/ui/components/progress.md b/docs/content/ui/components/progress.md
index 3a1f1f2db..0ab9513c8 100644
--- a/docs/content/ui/components/progress.md
+++ b/docs/content/ui/components/progress.md
@@ -89,7 +89,7 @@ This is how it looks:
 
 You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
 
-Full list of available colors can be found [here](/img/ui/base/colors).
+See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <div class="progress">
diff --git a/docs/content/ui/components/range-slider.md b/docs/content/ui/components/range-slider.md
index 9b5be3607..d74da15a3 100644
--- a/docs/content/ui/components/range-slider.md
+++ b/docs/content/ui/components/range-slider.md
@@ -5,9 +5,7 @@ description: Adjust values with range sliders.
 summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 ---
 
-To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
-
-All options and features can be found [**here**](https://refreshless.com/nouislider/).
+To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.
 
 ## Basic range slider
 
@@ -30,4 +28,4 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
+For more details on customizing a noUiSlider element, see the documentation on the [noUiSlider website](https://refreshless.com/nouislider/).
diff --git a/docs/content/ui/components/ribbons.md b/docs/content/ui/components/ribbons.md
index d2d6f8549..dab9bf62b 100644
--- a/docs/content/ui/components/ribbons.md
+++ b/docs/content/ui/components/ribbons.md
@@ -41,7 +41,7 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/ui/base/colors) to see the list of available colors.
+Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <div class="card">
diff --git a/docs/content/ui/components/spinners.md b/docs/content/ui/components/spinners.md
index b94a824cc..cdfebf500 100644
--- a/docs/content/ui/components/spinners.md
+++ b/docs/content/ui/components/spinners.md
@@ -23,7 +23,7 @@ Look at the example below to see how the spinner works:
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
 
 {% capture html -%}
 <div class="spinner-border text-blue" role="status"></div>
diff --git a/docs/content/ui/components/statuses.md b/docs/content/ui/components/statuses.md
index b268cb41f..66eaaccac 100644
--- a/docs/content/ui/components/statuses.md
+++ b/docs/content/ui/components/statuses.md
@@ -6,7 +6,7 @@ description: Highlight interface elements with status dots.
 
 ## Default markup
 
-Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
 
 ```html
 <span class="status status-blue">Blue</span>
diff --git a/docs/content/ui/components/steps.md b/docs/content/ui/components/steps.md
index 036e61c47..151ee571b 100644
--- a/docs/content/ui/components/steps.md
+++ b/docs/content/ui/components/steps.md
@@ -95,7 +95,7 @@ The example below demonstrates a progress tracker with tooltips for each step.
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/img/ui/base/colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.
 
 ```html
 <div class="steps steps-green">...</div>
diff --git a/docs/content/ui/forms/form-color-check.md b/docs/content/ui/forms/form-color-check.md
index 62e4aff53..9ffa71bc7 100644
--- a/docs/content/ui/forms/form-color-check.md
+++ b/docs/content/ui/forms/form-color-check.md
@@ -4,7 +4,7 @@ summary: The color check is a great way to make your form more user-friendly and
 description: Enhance forms with color checks.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/img/ui/base/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
 
 ```html
 <label class="form-colorinput">
diff --git a/docs/content/ui/forms/form-image-check.md b/docs/content/ui/forms/form-image-check.md
index 6dcb05951..11b827285 100644
--- a/docs/content/ui/forms/form-image-check.md
+++ b/docs/content/ui/forms/form-image-check.md
@@ -144,7 +144,7 @@ If you want to use the image check as a radio button, you can change the input t
 
 ## Avatars
 
-If you want to use the image check with avatars, you can use an [avatar component](/img/ui/components/avatars) instead of an image.
+If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
 
 {% capture html -%}
 <div class="mb-3">
diff --git a/docs/content/ui/getting-started/how-to-contribute.md b/docs/content/ui/getting-started/how-to-contribute.md
index ac547e53b..e8e19bf80 100644
--- a/docs/content/ui/getting-started/how-to-contribute.md
+++ b/docs/content/ui/getting-started/how-to-contribute.md
@@ -4,7 +4,7 @@ summary: This guide explains how to contribute to Tabler, from setting up a deve
 description: Guide to contributing to Tabler and setting up for development.
 ---
 
-Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
 
 ## Contribution Requirements
 
@@ -13,7 +13,7 @@ When contributing to Tabler, please adhere to the following guidelines:
 1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
 2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
 3. Contributions must be submitted via GitHub pull requests.
-4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/img/ui/getting-started/browser-support)).
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/ui/getting-started/browser-support)).
 
 ## Installation
 
diff --git a/docs/content/ui/getting-started/installation.md b/docs/content/ui/getting-started/installation.md
index 30b48a87a..911f15142 100644
--- a/docs/content/ui/getting-started/installation.md
+++ b/docs/content/ui/getting-started/installation.md
@@ -56,7 +56,7 @@ Update your HTML file to include these resources:
 
 This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
 
-You can also download the files and include them locally in your project. For more information, see the [Download](/img/ui/getting-started/download) page.
+You can also download the files and include them locally in your project. For more information, see the [Download](/ui/getting-started/download) page.
 
 ### Open in Your Browser