fix(docs): Update README Components links to new URL pattern (#84)

* fix(docs): Update `README` Components links to new URL pattern We don't use `HashRouter` anymore, so the links no longer begin with `#`. Also adds anchors to the `Forms` page for each of the components listed (radio, checkbox, and so forth). * chore(docs): Remove `Sidebar` under-construction status in `README` Also fix some other broken links.
themesberg · May 5, 2022 · 39c2d91 · 39c2d91
1 parent d832832
commit 39c2d91
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
   <h1>:construction: flowbite-react (unreleased) :construction:</h1>
   <p>
-    <a href="https://flowbite.com">
+    <a href="https://flowbite-react.com">
       <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github.png">
     </a>
   </p>
@@ -18,7 +18,7 @@
     <a href="https://badge.fury.io/js/flowbite-react">
       <img alt="Latest release" src="https://badge.fury.io/js/flowbite-react.svg">
     </a>
-    <a href="https://flowbite.com/docs/getting-started/license/">
+    <a href="https://flowbite.com/getting-started/license/">
       <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
     </a>
   </p>
@@ -50,7 +50,7 @@ Documentation for `flowbite-react` is not yet finished.
 
 If you want to browse the components, visit [flowbite-react.com](https://flowbite-react.com/).
 
-If you want to learn more about Flowbite, visit [Flowbite docs](https://flowbite.comhttps://flowbite.com/docs/getting-started/introduction/).
+If you want to learn more about Flowbite, visit [Flowbite docs](https://flowbite.com/getting-started/introduction/).
 
 ## Getting started
 
@@ -86,17 +86,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/alerts/">
+        <a href="https://flowbite-react.com/alerts/">
             <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/badges/">
+        <a href="https://flowbite-react.com/badges/">
             <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/breadcrumb/">
+        <a href="https://flowbite-react.com/breadcrumb/">
             <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
         </a>
     </td>
@@ -108,17 +108,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/buttons/">
+        <a href="https://flowbite-react.com/buttons/">
             <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/button-group/">
+        <a href="https://flowbite-react.com/button-group/">
             <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/card/">
+        <a href="https://flowbite-react.com/card/">
             <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
         </a>
     </td>
@@ -130,17 +130,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/dropdown/">
+        <a href="https://flowbite-react.com/dropdown/">
             <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/forms/">
+        <a href="https://flowbite-react.com/forms/">
             <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/list-group/">
+        <a href="https://flowbite-react.com/list-group/">
             <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
         </a>
     </td>
@@ -152,17 +152,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/typography/">
+        <a href="https://flowbite.com/typography/">
             <img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/modal/">
+        <a href="https://flowbite-react.com/modal/">
             <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/tabs/">
+        <a href="https://flowbite-react.com/tabs/">
             <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
         </a>
     </td>
@@ -174,17 +174,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/navbars/">
+        <a href="https://flowbite-react.com/navbars/">
             <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/pagination/">
+        <a href="https://flowbite-react.com/pagination/">
             <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/timeline/">
+        <a href="https://flowbite.com/timeline/">
             <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
         </a>
     </td>
@@ -196,17 +196,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/progress/">
+        <a href="https://flowbite-react.com/progress/">
             <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/tables/">
+        <a href="https://flowbite-react.com/tables/">
             <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/toast/">
+        <a href="https://flowbite-react.com/toast/">
             <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
         </a>
     </td>
@@ -218,39 +218,39 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/tooltips/">
+        <a href="https://flowbite-react.com/tooltips/">
             <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/plugins/datepicker/">
+        <a href="https://flowbite.com/plugins/datepicker/">
             <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/spinner/">
+        <a href="https://flowbite-react.com/spinners/">
             <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
         </a>
     </td>
   </tr>
   <tr>
     <td width="33.3333%">:construction: Footer</td>
     <td width="33.3333%">Accordion</td>
-    <td width="33.3333%">:construction: Sidebar</td>
+    <td width="33.3333%">Sidebar</td>
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/footer/">
+        <a href="https://flowbite.com/footer/">
             <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/accordion/">
+        <a href="https://flowbite-react.com/accordion/">
             <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/sidebar/">
+        <a href="https://flowbite-react.com/sidebar/">
             <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
         </a>
     </td>
@@ -262,17 +262,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/carousel/">
+        <a href="https://flowbite-react.com/carousel/">
             <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/avatar/">
+        <a href="https://flowbite-react.com/avatar/">
             <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/#/rating/">
+        <a href="https://flowbite-react.com/rating/">
             <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
         </a>
     </td>
@@ -284,12 +284,12 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/input-field/">
+        <a href="https://flowbite-react.com/forms">
             <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/file-input/">
+        <a href="https://flowbite-react.com/forms#fileUpload">
             <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
         </a>
     </td>
@@ -306,17 +306,17 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/select/">
+        <a href="https://flowbite-react.com/forms#select">
             <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/textarea/">
+        <a href="https://flowbite-react.com/forms#textarea">
             <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/checkbox/">
+        <a href="https://flowbite-react.com/forms#checkbox">
             <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
         </a>
     </td>
@@ -328,12 +328,12 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/radio/">
+        <a href="https://flowbite-react.com/forms#radio">
             <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite.com/docs/forms/toggle/">
+        <a href="https://flowbite-react.com/forms#toggle">
             <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
         </a>
     </td>
@@ -379,4 +379,4 @@ If you need the Figma files for the components you can check out our website for
 
 The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
 
-📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)
+📝 [Read about the licensing terms](https://flowbite.com/getting-started/license/)
diff --git a/src/docs/pages/FormsPage.tsx b/src/docs/pages/FormsPage.tsx
@@ -188,7 +188,7 @@ const FormsPage: FC = () => {
     {
       title: 'Textarea',
       code: (
-        <div>
+        <div id="textarea">
           <Label className="mb-2 block" htmlFor="comment">
             Your message
           </Label>
@@ -199,7 +199,7 @@ const FormsPage: FC = () => {
     {
       title: 'Select input',
       code: (
-        <div>
+        <div id="select">
           <Label className="mb-2 block" htmlFor="countries">
             Select your country
           </Label>
@@ -215,7 +215,7 @@ const FormsPage: FC = () => {
     {
       title: 'Checkbox',
       code: (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4" id="checkbox">
           <div className="flex items-center gap-2">
             <Checkbox id="accept" defaultChecked />
             <Label htmlFor="accept">
@@ -259,7 +259,7 @@ const FormsPage: FC = () => {
     {
       title: 'Radio',
       code: (
-        <fieldset className="flex flex-col gap-4">
+        <fieldset className="flex flex-col gap-4" id="radio">
           <div className="flex items-center gap-2">
             <Radio id="united-state" name="countries" value="USA" defaultChecked />
             <Label htmlFor="united-state">United States</Label>
@@ -288,7 +288,7 @@ const FormsPage: FC = () => {
     {
       title: 'File upload',
       code: (
-        <div>
+        <div id="fileUpload">
           <Label className="mb-2 block" htmlFor="file">
             Upload file
           </Label>
@@ -299,7 +299,7 @@ const FormsPage: FC = () => {
     {
       title: 'Toggle Switch',
       code: (
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4" id="toggle">
           <ToggleSwitch label="Toggle me" />
           <ToggleSwitch label="Toggle me (checked)" defaultChecked />
           <ToggleSwitch label="Toggle me (disabled)" disabled />