diff --git a/documentation/blog/2021-11-12-issue-tracker-refine.md b/documentation/blog/2021-11-12-issue-tracker-refine.md index 55601aa826e7e..324b1f6f00cbe 100644 --- a/documentation/blog/2021-11-12-issue-tracker-refine.md +++ b/documentation/blog/2021-11-12-issue-tracker-refine.md @@ -127,7 +127,7 @@ Now let's go to the Supabase Table editor and create our constant values. Let's create a test task to better understand key relation. -overview +overview
As you can see, since we have defined the ids of our label, status, priority and users tables as references to our tasks table, we can now use their values. @@ -490,7 +490,7 @@ export default App; Here we define our login and signup pages. We then use the Refine's [router-provider](https://refine.dev/core/docs/packages/documentation/routers/) and [useNavigaton](https://refine.dev/core/docs/core/hooks/navigation/useNavigation/) hooks to switch between login and signup. -overview +overview
We can now create supabase users and log in from our Refine interface. @@ -992,7 +992,7 @@ export const TaskCreate = () => { }; ``` -overview +overview
## Edit Task @@ -1333,17 +1333,17 @@ Our project is done. Lets see how its look like. `Overview` -overview +overview
`Task Filter` -overview +overview
`Dashboard Page` -overview +overview
As you can see, we made a simple and short task manager application using Refine on our front end and using its data-provider. diff --git a/documentation/blog/2021-11-26-refine-vs-react-admin.md b/documentation/blog/2021-11-26-refine-vs-react-admin.md index 32225fd3ad5d1..4592a5350c497 100644 --- a/documentation/blog/2021-11-26-refine-vs-react-admin.md +++ b/documentation/blog/2021-11-26-refine-vs-react-admin.md @@ -264,7 +264,7 @@ Although **Refine** is a newer framework, it is successful in identifying defici npm create refine-app@latest demo-refine-project -- -b v3 ``` -setup +setup ### Features diff --git a/documentation/blog/2021-11-29-refine-vs-admin-bro.md b/documentation/blog/2021-11-29-refine-vs-admin-bro.md index 3f2a011f3f350..6b1a648ab8bb5 100644 --- a/documentation/blog/2021-11-29-refine-vs-admin-bro.md +++ b/documentation/blog/2021-11-29-refine-vs-admin-bro.md @@ -51,7 +51,7 @@ Although **Refine** is a newer framework, it is successful in identifying defici npm create refine-app@latest demo-refine-project -- -b v3 ``` -setup +setup ### Features diff --git a/documentation/blog/2021-12-27-multipart-upload.md b/documentation/blog/2021-12-27-multipart-upload.md index 00c496b98b35b..0d4b93386c1bb 100644 --- a/documentation/blog/2021-12-27-multipart-upload.md +++ b/documentation/blog/2021-12-27-multipart-upload.md @@ -114,7 +114,7 @@ As you can see, we have created our multer structure and a simple server to run The requests we created to send files by JavaScript will now be sent to our local server. -upload overview +upload overview
## How to Multipart Upload with Refine? diff --git a/documentation/blog/2022-01-18-csv-import.md b/documentation/blog/2022-01-18-csv-import.md index b06ffcde46e60..59e93070e0dc3 100644 --- a/documentation/blog/2022-01-18-csv-import.md +++ b/documentation/blog/2022-01-18-csv-import.md @@ -94,7 +94,7 @@ function App() { Here, once the user-selected file has been successfully uploaded, we can process and display the file. Now let's load a sample CSV file and see it output on our console. -console_csv_output +console_csv_output
As you can see, we can now read a selected CSV file. We can convert this file, which we read as a plain text type, into an Array of Object with JavaScript and place it inside a Table element. @@ -191,7 +191,7 @@ function App() { .... ``` -overview_csv +overview_csv
We formatted the CSV file that came in plain text format, using Javascript [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) and [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) methods, and created two separate array. Then we converted Header and Rows arrays to Array of Object format as Key, Value. @@ -215,7 +215,7 @@ The CSV import with **Refine** is very simple and out-of-the-box feature. How to ## Refine CSV Import Usage -importing_csv +importing_csv
Importing CSV files is simple and fast using the [`useImport`](https://refine.dev/core/docs/core/hooks/import-export/useImport/) hook and [`ImportButton`](https://refine.dev/core/docs/ui-frameworks/antd/components/buttons/import-button/) provided by **Refine**. diff --git a/documentation/blog/2022-02-21-react-antd-admin.md b/documentation/blog/2022-02-21-react-antd-admin.md index 6f184d263cedc..4c57df00cf56f 100644 --- a/documentation/blog/2022-02-21-react-antd-admin.md +++ b/documentation/blog/2022-02-21-react-antd-admin.md @@ -84,7 +84,7 @@ cd refine-advanced-tutorial npm run dev ``` -Refine Tutorial +Refine Tutorial
As you have seen, our example project is ready. Now let's examine how the features offered by **Refine** are included in a project and how they are used. @@ -337,7 +337,7 @@ return ( Now our i18n Provider is ready to use, let's test it together. -Refine i18n Provider +Refine i18n Provider
### Use the translation with Table Content @@ -418,7 +418,7 @@ export const PostList: React.FC = () => { }; ``` -Refine i18n Provider +Refine i18n Provider
You can add the translation you want and organize your content according to different languages ​​together with the **Refine** i18n Provider. @@ -808,7 +808,7 @@ export const PostList = () => { Here, if the selected role is Admin, the 'Hit' section will appear in our Table. We have stated that the Editor role cannot display this section. -Refine Access Control Provider +Refine Access Control Provider
Check out [**Refine** Access Control](https://refine.dev/core/docs/guides-and-concepts/access-control/) Provider for more detailed information and step-by-step guide diff --git a/documentation/blog/2022-02-22-refine-invoice-generator.md b/documentation/blog/2022-02-22-refine-invoice-generator.md index ad8c9acae16fc..4b6aae5878579 100644 --- a/documentation/blog/2022-02-22-refine-invoice-generator.md +++ b/documentation/blog/2022-02-22-refine-invoice-generator.md @@ -856,7 +856,7 @@ export const ClientList = () => { We created our `Client` and `Contact` pages. Now, let's create a Client with **Refine** and define contacts for our clients. -Refine Clients Overview +Refine Clients Overview
## Example diff --git a/documentation/blog/2022-03-01-refine-invoice-generator-p2.md b/documentation/blog/2022-03-01-refine-invoice-generator-p2.md index 5f7c9d43ed4f2..7ce004f66f1b8 100644 --- a/documentation/blog/2022-03-01-refine-invoice-generator-p2.md +++ b/documentation/blog/2022-03-01-refine-invoice-generator-p2.md @@ -914,7 +914,7 @@ const styles = StyleSheet.create({

-Refine Invoice PDF Export +Refine Invoice PDF Export
## Example diff --git a/documentation/blog/2022-03-22-refine-with-react95.md b/documentation/blog/2022-03-22-refine-with-react95.md index d5f7ea7d5a13c..6b807969b5a77 100644 --- a/documentation/blog/2022-03-22-refine-with-react95.md +++ b/documentation/blog/2022-03-22-refine-with-react95.md @@ -909,7 +909,7 @@ export default App; -Refine95 Menu +Refine95 Menu ## Create Post CRUD Pages @@ -1178,7 +1178,7 @@ We used the `useTable` hook to fetch the data for the table. It makes a request After fetching the data, we used the React95 table components to render the data. We also added delete button and edit button to each row. When the user clicks the delete button, we call the `deletePost` function with the `resource` and `id` parameters. The `deletePost` function is provided by the [`useDelete`](/core/docs/data/hooks/use-delete/) hook. When the user clicks the edit button, we call the `edit` function with the "posts" resource and the post id to navigate to the edit page. -Refine List Page +Refine List Page ### Create Page and Edit Page @@ -1282,7 +1282,7 @@ export const PostCreate: React.FC = () => { -Refine Create Page +Refine Create Page Now, let's update a `` component in `src/pages/posts/edit.tsx` directory with the following code: @@ -1377,11 +1377,11 @@ export const PostEdit: React.FC = () => { Edit and create pages almost look the same. We can use the same form for both pages. [`useForm`](/core/docs/packages/list-of-packages/) hook knows which action we are performing. For example, if we are on the edit page, it will automatically fetch the post data and fill the form with it. -Refine Edit Page +Refine Edit Page ## Project Overview -Refine Project Overview +Refine Project Overview ## Live CodeSandbox Example diff --git a/documentation/blog/2022-03-29-react-hook-form-upload.md b/documentation/blog/2022-03-29-react-hook-form-upload.md index ba32b0a33bc08..d29a3fd05baa7 100644 --- a/documentation/blog/2022-03-29-react-hook-form-upload.md +++ b/documentation/blog/2022-03-29-react-hook-form-upload.md @@ -202,7 +202,7 @@ export default App; Our project is ready! With React Hook Form, we can now send the selected file to our server in `multipart/form-data` type. Let's test it! -multipart/form-data file upload +multipart/form-data file upload

diff --git a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md index aad82d916d5de..64eb2a3f4c451 100644 --- a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md +++ b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md @@ -832,7 +832,7 @@ export const PostList: React.FC = () => { Now we are able to delete record by clicking delete button and confirmation. -Create record action +Create record action

diff --git a/documentation/blog/2022-08-23-mui-usedatagrid.md b/documentation/blog/2022-08-23-mui-usedatagrid.md index d83632bad2de9..85775d54de361 100644 --- a/documentation/blog/2022-08-23-mui-usedatagrid.md +++ b/documentation/blog/2022-08-23-mui-usedatagrid.md @@ -545,7 +545,7 @@ export default EmployeeList; Here's a GIF showing the result of the above example.
- employees Gif + employees Gif
You can refer to MU X DataGrid [documentation](https://mui.com/x/react-data-grid/sorting/) for more information on the sorting feature. diff --git a/documentation/blog/2022-09-01-framer-text-animations.md b/documentation/blog/2022-09-01-framer-text-animations.md index 15c9514662398..4d3210454da20 100644 --- a/documentation/blog/2022-09-01-framer-text-animations.md +++ b/documentation/blog/2022-09-01-framer-text-animations.md @@ -99,7 +99,7 @@ Finally, we use the Framer Motion `transition` prop because every effective anim The easing shows the scale at which the text animation enters before going to its original scale. -Scale for text +Scale for text
@@ -234,7 +234,7 @@ The inner carousel will perform the spinning and sliding effects. The framer mot This will give it a unique spinning effect, as you can see below: -Scale for photo +Scale for photo
@@ -269,7 +269,7 @@ function App() { } ``` -Scale for photo +Scale for photo
@@ -305,7 +305,7 @@ function App() { } ``` -Scale for photo +Scale for photo
diff --git a/documentation/blog/2022-09-27-react-hook-form-validation.md b/documentation/blog/2022-09-27-react-hook-form-validation.md index fdeddd6bd56f9..04cff4031d2dc 100644 --- a/documentation/blog/2022-09-27-react-hook-form-validation.md +++ b/documentation/blog/2022-09-27-react-hook-form-validation.md @@ -1068,7 +1068,7 @@ export default Create; Now, if you save your progress and go to the browser, the company and role fields should only display when the Employed option is selected. -react Hook Form error handling +react Hook Form error handling
@@ -1109,7 +1109,7 @@ Lastly, add an `onSubmit` event handler to the form and pass the `handleSubmit` Now, if you save your progress and head over to the browser, you should get a logged object of the form’s data in your console when you fill in the fields and submit the form. -React Hook Form error handling +React Hook Form error handling
diff --git a/documentation/blog/2022-10-31-next-getInitial.md b/documentation/blog/2022-10-31-next-getInitial.md index 7e01d75e82c0c..bee0d792e4c80 100644 --- a/documentation/blog/2022-10-31-next-getInitial.md +++ b/documentation/blog/2022-10-31-next-getInitial.md @@ -180,7 +180,7 @@ We'll go through some examples to see how both functions work in real-world appl The GIF below shows how `getInitialProps` behaves when it's used to fetch data for server-side rendering. -getinitialprops +getinitialprops
@@ -239,7 +239,7 @@ However, when we make client-side navigation to the home page `localhost:3000` u The GIF below shows the same example from the previous section using `getServerSideProps` to fetch a list of users from the [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API for server-side rendering. -getserversideprops +getserversideprops
diff --git a/documentation/blog/2022-11-29-mui-tooltip.md b/documentation/blog/2022-11-29-mui-tooltip.md index 883401cc8ed5d..ed02fdd697a3f 100644 --- a/documentation/blog/2022-11-29-mui-tooltip.md +++ b/documentation/blog/2022-11-29-mui-tooltip.md @@ -153,7 +153,7 @@ export default function PositionedTooltips() {
- Material UI tooltip + Material UI tooltip
**Note**: Tooltip positioning is critical when using them in a web application. A poorly placed Tooltip may detract from the overall UX of the app. @@ -243,7 +243,7 @@ export default function VariableWidth() { ```
- Material UI tooltip + Material UI tooltip
### Material UI Tooltip Transitions @@ -287,7 +287,7 @@ In the code above, three tooltips have been set to display with varying transiti Here’s the result:
- Material UI tooltip + Material UI tooltip
### Virtual element placement @@ -496,7 +496,7 @@ The code above illustrates a simple login form UI with instructions provided to Here’s the result:
- Material UI tooltip + Material UI tooltip
## Conclusion diff --git a/documentation/blog/2022-12-23-dynamic-hook-form.md b/documentation/blog/2022-12-23-dynamic-hook-form.md index 749a3eb8ab0fe..7f7201592162b 100644 --- a/documentation/blog/2022-12-23-dynamic-hook-form.md +++ b/documentation/blog/2022-12-23-dynamic-hook-form.md @@ -501,7 +501,7 @@ Next, declare the button component with an event handler below the dynamic field That's all it takes to use `useFieldArray` actions in a form. If you save your progress and return to the browser, you should be able to perform the actions shown in the gif below: -react hook form dynamic forms +react hook form dynamic forms
@@ -595,7 +595,7 @@ Refer to the documentation to learn more about the [`onFinish`](https://refine.d Now, if you save your progress and go back to the browser, everything should work as expected. -react hook form dynamic forms +react hook form dynamic forms
@@ -623,7 +623,7 @@ To use this method, we'll add a button inside the callback function, below the ` That's it. Now we can remove appended fields by clicking the delete button rendered alongside them. -react hook form dynamic forms +react hook form dynamic forms
@@ -707,7 +707,7 @@ Then remove the `delete` button and add the icon in its place: ``` -react hook form dynamic forms +react hook form dynamic forms
@@ -736,7 +736,7 @@ Now, if you try to submit the form without appending at least one field, you'll The form composition is complete. Next, we'll look at how to set up the Edit page for updating records. -react hook form dynamic forms +react hook form dynamic forms
@@ -928,7 +928,7 @@ Here, we added a `renderCell` property to the fourth object and passed it a func This way, when the edit icon is clicked, Refine will know to redirect users to the Edit page of the corresponding record on the same row as the icon. -react hook form dynamic forms +react hook form dynamic forms
diff --git a/documentation/blog/2023-01-17-airtable-crud-app.md b/documentation/blog/2023-01-17-airtable-crud-app.md index 66f4a0a2401e4..92058c86b50e2 100644 --- a/documentation/blog/2023-01-17-airtable-crud-app.md +++ b/documentation/blog/2023-01-17-airtable-crud-app.md @@ -1409,7 +1409,7 @@ export const PostList: React.FC = () => { }; ``` -react crud app airtable +react crud app airtable
diff --git a/documentation/blog/2023-02-17-refine-pixels-4.md b/documentation/blog/2023-02-17-refine-pixels-4.md index fba8d1c0d542f..2659b77047e42 100644 --- a/documentation/blog/2023-02-17-refine-pixels-4.md +++ b/documentation/blog/2023-02-17-refine-pixels-4.md @@ -85,7 +85,7 @@ And that's it! The channel for `pixels` resource that was specified above in **S Now, let's try opening the app in two browsers, one with Google account and one with GitHub. Navigate to a canvas page, the same one in both and try adding some `pixels` from each. We'll see that `pixel`s created in one are displayed in the other in real time: -supabase realtime +supabase realtime
diff --git a/documentation/blog/2023-03-03-ra-chakra-tutorial.md b/documentation/blog/2023-03-03-ra-chakra-tutorial.md index 356030e439dbe..0588267e26e58 100644 --- a/documentation/blog/2023-03-03-ra-chakra-tutorial.md +++ b/documentation/blog/2023-03-03-ra-chakra-tutorial.md @@ -956,7 +956,7 @@ function App() { export default App; ``` -react admin tutorial +react admin tutorial ### Modifying/Editing records @@ -1176,7 +1176,7 @@ function App() { export default App; ``` -react admin tutorial +react admin tutorial ### Deleting post record @@ -1246,7 +1246,7 @@ function App() { export default App; ``` -react admin tutorial +react admin tutorial ### Implement sorting of listed records @@ -1360,7 +1360,7 @@ You can set the `enableSorting` property of the column to false in the column de }, ``` -react admin tutorial +react admin tutorial ### Implement filters on listed records @@ -1569,7 +1569,7 @@ We can also disable filtering for the `actions` column by setting the column's e }, ``` -react admin tutorial +react admin tutorial ### Implementing mutation mode. @@ -1603,7 +1603,7 @@ function App() { export default App; ``` -react admin tutorial +react admin tutorial ## Conclusion diff --git a/documentation/blog/2023-04-11-refine-invoicer-2.md b/documentation/blog/2023-04-11-refine-invoicer-2.md index 7e1f04a73ff6c..a500cb1b8be37 100644 --- a/documentation/blog/2023-04-11-refine-invoicer-2.md +++ b/documentation/blog/2023-04-11-refine-invoicer-2.md @@ -48,7 +48,7 @@ For this tutorial, we'll be select the following options: **Backend**: Strapi **Authentication Provider**: Strapi -react invoice generator +react invoice generator
diff --git a/documentation/blog/2023-04-14-refine-invoicer-5.md b/documentation/blog/2023-04-14-refine-invoicer-5.md index f30e0083f82be..5e44dbf407bd9 100644 --- a/documentation/blog/2023-04-14-refine-invoicer-5.md +++ b/documentation/blog/2023-04-14-refine-invoicer-5.md @@ -463,7 +463,7 @@ Do take note of the `meta.populate` property of the `useTable()` hook's argument OK. With this done, we can now go ahead and test our app and should be able to view the pdf document by clicking on the pdf document icon. -react invoice generator +react invoice generator
diff --git a/documentation/blog/2023-07-26-refine-primereact-dashboard.md b/documentation/blog/2023-07-26-refine-primereact-dashboard.md index 1df459280972a..fd75376c5a493 100644 --- a/documentation/blog/2023-07-26-refine-primereact-dashboard.md +++ b/documentation/blog/2023-07-26-refine-primereact-dashboard.md @@ -54,7 +54,7 @@ For this tutorial, we'll be select the following options: **Authentication Provider**: No Auth
- React admin panel + React admin panel
Once you've completed the steps, you'll have the ability to download your project. From there, proceed to the project directory and run your app with: @@ -769,7 +769,7 @@ export const Dashboard: React.FC = () => { After these changes, our dashboard looks like below:
- React admin panel + React admin panel
### Create `RecentSales` component @@ -2678,7 +2678,7 @@ export default App; After these changes, you should be able to navigate to the category CRUD pages as the below:
- React admin panel + React admin panel
## Update the Layout diff --git a/documentation/blog/2023-09-06-daisy-ui-panel.md b/documentation/blog/2023-09-06-daisy-ui-panel.md index 8a6dad0900db7..fd6150c17627e 100644 --- a/documentation/blog/2023-09-06-daisy-ui-panel.md +++ b/documentation/blog/2023-09-06-daisy-ui-panel.md @@ -3428,7 +3428,7 @@ export const CategoryShow = () => { After all these changes for the `category` resource, we should be able to navigate across the category pages as below:
- react admin panel daisy ui + react admin panel daisy ui

@@ -3698,7 +3698,7 @@ With these changes, we should now see a sticky top navbar with items that give a Here's the walkthrough of all the resource list pages:
- react admin panel daisy ui + react admin panel daisy ui

diff --git a/documentation/blog/2023-09-20-next-ui-panel.md b/documentation/blog/2023-09-20-next-ui-panel.md index 9902d53960287..d8ed9a3780f31 100644 --- a/documentation/blog/2023-09-20-next-ui-panel.md +++ b/documentation/blog/2023-09-20-next-ui-panel.md @@ -58,7 +58,7 @@ For this tutorial, we'll be select the following options: **Authentication Provider**: No Auth
- React admin panel next ui + React admin panel next ui
Once you've completed the steps, you'll have the ability to download your project diff --git a/documentation/blog/2023-10-02-refine-crm-overview.md b/documentation/blog/2023-10-02-refine-crm-overview.md index 1040c967ad5d3..53184e8e8ffa5 100644 --- a/documentation/blog/2023-10-02-refine-crm-overview.md +++ b/documentation/blog/2023-10-02-refine-crm-overview.md @@ -8,7 +8,7 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-10-02-refine-crm hide_table_of_contents: false --- -![Image description](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/crm-general.gif) +![Image description](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/crm-general.avif) I want to introduce our newest example app – a full-fledged React CRM (Customer Relationship Management) application built using Refine, Ant Design, and GraphQL. @@ -138,7 +138,7 @@ We used [GraphQL](https://graphql.org/) for effective data retrieval and updatin For instance, on the Project Kanban page, tasks get updated automatically when cards are dragged and dropped between sections. -![Image](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/real-time.gif) +![Image](https://refine.ams3.cdn.digitaloceanspaces.com/CRM-app/real-time.avif) GraphQL's efficient data-fetching capabilities made working with large datasets a breeze. It's flexibility allowed us to tailor our queries to our exact requirements. diff --git a/documentation/blog/2024-05-22-mui-grid.md b/documentation/blog/2024-05-22-mui-grid.md index 0b33c2f2d80ce..4fa704a7940fc 100644 --- a/documentation/blog/2024-05-22-mui-grid.md +++ b/documentation/blog/2024-05-22-mui-grid.md @@ -192,7 +192,7 @@ export default MUIspacing; The code above showcases a dynamic change of the `spacing` prop value. There are three grid elements(camera icons), each interactively spaced with every click of a radio button that corresponds with the `spacing` value. Here’s the result: -spacing1 +spacing1
@@ -255,7 +255,7 @@ export default BasicGrid; Here’s the result; -fluid +fluid
@@ -301,7 +301,7 @@ The code above is a simple Material UI Grid system with four grid children eleme Here’s the result: -fluidGrid +fluidGrid
@@ -352,7 +352,7 @@ export default AutoGrid; The code above depicts three grid elements. The middle element is set to take half the screen's width while the other two dynamically take the space remaining on either side. -autoLayout +autoLayout
@@ -418,7 +418,7 @@ export default function NestedGridGroup() { The code above showcases a nested Material UI Grid system. The `` component is a grid setup called inside another `` component multiple times to produce a result like this: -nestedGrid +nestedGrid
@@ -641,7 +641,7 @@ export default function Blog() { We have a simple Blog Layout created with React and Material UI. -featuredPost +featuredPost
diff --git a/documentation/blog/2024-05-29-next-link.md b/documentation/blog/2024-05-29-next-link.md index 95026ac2d1d6d..906388624cbc5 100644 --- a/documentation/blog/2024-05-29-next-link.md +++ b/documentation/blog/2024-05-29-next-link.md @@ -189,7 +189,7 @@ If you navigate to `localhost:3000/products` you should see the page rendered li Now, if you click on any of the products, you'll be taken to the details page of each product which is a dynamic route. -demo +demo
@@ -308,7 +308,7 @@ The page should look like below: If you click on the `Go to products page` link, watch how the application navigation works when we click on the back navigation button without the `replace` prop in the GIF below. -noreplace +noreplace
@@ -335,7 +335,7 @@ Next, find the part that contains the code below in `pages/products/index.js` an Now let's go back to the browser and see how the navigation works with `replace` prop. -withreplace +withreplace
diff --git a/documentation/blog/2024-06-20-framer-motion.md b/documentation/blog/2024-06-20-framer-motion.md index 87232e04d2797..44846add855b8 100644 --- a/documentation/blog/2024-06-20-framer-motion.md +++ b/documentation/blog/2024-06-20-framer-motion.md @@ -501,7 +501,7 @@ Let's look at an example of how we can use motion values to construct the classi **View:**
-typescript zod +typescript zod
The `useScroll` motion values can be combined with other motion value hooks, such as `useTransform` and `useSpring`, to create sophisticated animations like the one shown below. @@ -568,7 +568,7 @@ function App() { **View:**
-typescript zod +typescript zod
### useTransform diff --git a/documentation/blog/2024-06-24-react-content-filtering.md b/documentation/blog/2024-06-24-react-content-filtering.md index 801671cf8bea7..2bac3eb23ff80 100644 --- a/documentation/blog/2024-06-24-react-content-filtering.md +++ b/documentation/blog/2024-06-24-react-content-filtering.md @@ -561,13 +561,13 @@ Check if your development server is still running in the terminal. If it is not First, we will test the functionality of the filter buttons. -filters +filters If the filter button is pressed, only the corresponding cards of that category is filtered. If the filter is already active and is pressed again, the filter is disabled and all the records are shown. Now type in some search queries in the search bar. -search +search Search results are fully dynamic, meaning the filtering is updated each time you add a new character to the query. diff --git a/documentation/blog/2024-07-03-mui-autocomplete.md b/documentation/blog/2024-07-03-mui-autocomplete.md index 283b65af7d01a..bd9283c7a447e 100644 --- a/documentation/blog/2024-07-03-mui-autocomplete.md +++ b/documentation/blog/2024-07-03-mui-autocomplete.md @@ -266,7 +266,7 @@ The code above illustrates the use of the `groupBy` prop in the ` Here’s the result:
- Material UI useAutoComplete groupby + Material UI useAutoComplete groupby
## Material UI Autocomplete features @@ -322,7 +322,7 @@ export default function ManageableStates() { The code showcases how the values of the `AutoComplete` component can be controlled and altered in state.
- Material UI useAutoComplete statemanagement + Material UI useAutoComplete statemanagement
### The useAutocomplete Hook @@ -423,7 +423,7 @@ The code above showcases a simple use case for the `useAutocomplete` hook. It he Here’s the result:
- Material UI useAutoComplete + Material UI useAutoComplete
### Asynchronous Requests @@ -644,7 +644,7 @@ The code above illustrates how you can set a fixed default value on the ` - Material UI useAutoComplete fixedoptions + Material UI useAutoComplete fixedoptions ### Checkboxes @@ -697,7 +697,7 @@ export default function CheckboxesTags() { ```
- Material UI useAutoComplete checkbox + Material UI useAutoComplete checkbox
## Accessibility Features @@ -940,7 +940,7 @@ export default Home; Here’s the result:
- Material UI useAutoComplete google + Material UI useAutoComplete google

diff --git a/documentation/blog/2024-07-03-next-api-routes.md b/documentation/blog/2024-07-03-next-api-routes.md index f254cfa942b4d..cabe64ee2f3a0 100644 --- a/documentation/blog/2024-07-03-next-api-routes.md +++ b/documentation/blog/2024-07-03-next-api-routes.md @@ -198,7 +198,7 @@ Now if you navigate to `http://localhost:3000/api/trivia/34` or any other random Here's a GIF showing an example:
- dynamic API routes + dynamic API routes

diff --git a/documentation/blog/2024-07-17-css-grid.md b/documentation/blog/2024-07-17-css-grid.md index 841d555208ee0..48ce02ebcce56 100644 --- a/documentation/blog/2024-07-17-css-grid.md +++ b/documentation/blog/2024-07-17-css-grid.md @@ -485,7 +485,7 @@ With `auto-fit` and with a combination of `minmax()`, we can create arbitrary nu This is actually what we'd want starting from the Flexbox example. And on top of everything, CSS Grid now makes it permanently responsive. Thanks to CSS Grid, that's just with one line of CSS. And without using any media queries:
-css grid +css grid
We can now place infinite number of rows into this grid. They'll occupy the entire row. And the number of columns will change according to the screen size. diff --git a/documentation/blog/2024-07-19-use-swr.md b/documentation/blog/2024-07-19-use-swr.md index f31f6a176ed55..cb277157cd4b6 100644 --- a/documentation/blog/2024-07-19-use-swr.md +++ b/documentation/blog/2024-07-19-use-swr.md @@ -243,7 +243,7 @@ Notice how the list isn't updated with the new user when we navigate back to `ht The GIF below shows this even better: -useswr +useswr
@@ -312,7 +312,7 @@ Go to `http://localhost:3000` in the browser and note how the users list is auto The GIF below shows this in action. -useswr +useswr
@@ -431,7 +431,7 @@ Basically, what we're doing is commenting out the previous Home component and th Navigate to `http://localhost:3000` and you should see the characters rendered as shown in the GIF below, with pagination enabled: -useswr +useswr
diff --git a/documentation/blog/2024-07-23-react-dashboard-libraries.md b/documentation/blog/2024-07-23-react-dashboard-libraries.md index e6257eb9145d8..e42cd1dfad16f 100644 --- a/documentation/blog/2024-07-23-react-dashboard-libraries.md +++ b/documentation/blog/2024-07-23-react-dashboard-libraries.md @@ -26,7 +26,7 @@ At the top of the list is [Refine](https://github.com/refinedev/refine), a compr diff --git a/documentation/blog/2024-07-25-refine-new-part-1.md b/documentation/blog/2024-07-25-refine-new-part-1.md index 15e30805ae68a..c961acdd9c35b 100644 --- a/documentation/blog/2024-07-25-refine-new-part-1.md +++ b/documentation/blog/2024-07-25-refine-new-part-1.md @@ -95,7 +95,7 @@ npm create refine-app@latest
- refine new + refine new

diff --git a/documentation/blog/2024-08-04-react-tooltip.md b/documentation/blog/2024-08-04-react-tooltip.md index 7181e4b8a5182..39943fd1aee52 100644 --- a/documentation/blog/2024-08-04-react-tooltip.md +++ b/documentation/blog/2024-08-04-react-tooltip.md @@ -18,7 +18,7 @@ Typically, a tooltip is displayed as a small box or pop-up and is commonly used You can see a tooltip in action through the following GIF example: -react tooltip +react tooltip
@@ -497,7 +497,7 @@ react-tooltip also provides a feature that allows you to create clickable toolti ```
- react tooltip + react tooltip

diff --git a/documentation/blog/2024-08-09-react-toastify.md b/documentation/blog/2024-08-09-react-toastify.md index abd8b7e32f045..c25bc52c46562 100644 --- a/documentation/blog/2024-08-09-react-toastify.md +++ b/documentation/blog/2024-08-09-react-toastify.md @@ -20,7 +20,7 @@ Any Refine project that uses a supported design system or component libraries, s In the react ecosystem, there are several notification packages to choose from. React-toastify is one of the popular toast packages you can use to integrate a custom notification system in a React or Refine project. In this article, you will create a custom notification provider in a Refine application using react-toastify. -react toastify +react toastify
diff --git a/documentation/blog/2024-08-16-react-markdown.md b/documentation/blog/2024-08-16-react-markdown.md index 7e1a0a10dcdd9..90b470bf353b8 100644 --- a/documentation/blog/2024-08-16-react-markdown.md +++ b/documentation/blog/2024-08-16-react-markdown.md @@ -106,7 +106,7 @@ import MDEditor from "@uiw/react-md-editor"; This will render a native `Textarea` element with support for markdown editing and a preview pane on the form.
- docker exec + docker exec

@@ -240,7 +240,7 @@ Then, we pass it to the `commands` array on the `MDEditor` component: ```
- docker exec + docker exec

@@ -401,7 +401,7 @@ The code above is specifying how the `code` component should behave when it enco Now, if we input KaTeX expressions into the editor, they will be previewed as mathematical expressions.
- docker exec + docker exec

@@ -540,7 +540,7 @@ Now, if you try to parse malicious codes into the editor, the rehype-sanitize pl Before integrating rehype-sanitize:
- docker exec + docker exec

@@ -548,7 +548,7 @@ Before integrating rehype-sanitize: After integrating rehype-sanitize:
- docker exec + docker exec

diff --git a/documentation/blog/2024-08-19-heroicons.md b/documentation/blog/2024-08-19-heroicons.md index 71566f730f80e..de39acad73e37 100644 --- a/documentation/blog/2024-08-19-heroicons.md +++ b/documentation/blog/2024-08-19-heroicons.md @@ -247,7 +247,7 @@ body { The navbar now looks like this:
- tailwind flex + tailwind flex

@@ -406,7 +406,7 @@ For the ``, we are applying a `glow` class that animates the icon wi With the above changes Heroicons and their styles, the navbar looks like this:
- tailwind flex + tailwind flex

@@ -426,7 +426,7 @@ Native `` properties passed to Heroicons also get relayed to the `` el Okay. Now, we'll consider the case for responsive use of Heroicons. We want each nav item to have its own icon left of its text. Like this:
- tailwind flex + tailwind flex

diff --git a/documentation/blog/2024-08-19-tailwind-flex.md b/documentation/blog/2024-08-19-tailwind-flex.md index d5ed39572ba1b..b34e53779de68 100644 --- a/documentation/blog/2024-08-19-tailwind-flex.md +++ b/documentation/blog/2024-08-19-tailwind-flex.md @@ -395,7 +395,7 @@ npm run start You can see a vertical menu and a toggle button at a screen size less than `md`. And the toggle button is functioning properly:
- tailwind flex + tailwind flex

@@ -526,7 +526,7 @@ Notice we are applying flex order again with Tailwind Flex `order` classes. With So, with these changes, we have been able to achieve a good shape for the vertical navbar. The navbar looks almost complete, and it can now strongly flex its muscles back and forth in the horizontal position:
- tailwind flex + tailwind flex

@@ -627,7 +627,7 @@ With `flex flex-col justify-start md:flex-row md:justify-between md:items-start` So, with this Tailwind Flex power, we have a pretty neat React responsive navbar we can use on any webpage:
- tailwind flex + tailwind flex

diff --git a/documentation/blog/2024-08-20-react-hot-toast.md b/documentation/blog/2024-08-20-react-hot-toast.md index 802caaa11a826..797d5b714bf36 100644 --- a/documentation/blog/2024-08-20-react-hot-toast.md +++ b/documentation/blog/2024-08-20-react-hot-toast.md @@ -406,7 +406,7 @@ Congratulations! You have successfully created a custom notification provider fo **Success notification**
- react-hot-toast + react-hot-toast

@@ -466,7 +466,7 @@ toast.success("Successfully logged in", { ```
- react-hot-toast + react-hot-toast

diff --git a/documentation/blog/2024-09-06-react-table.md b/documentation/blog/2024-09-06-react-table.md index 06889c63a9cce..96d74dfbaf156 100644 --- a/documentation/blog/2024-09-06-react-table.md +++ b/documentation/blog/2024-09-06-react-table.md @@ -718,7 +718,7 @@ You will now see a search field that you can use to search for an entry in the t
- react slick + react slick There are several features of React Table that we haven't explored in this section. Check out the documentation. diff --git a/documentation/blog/2024-09-09-mantine-ui.md b/documentation/blog/2024-09-09-mantine-ui.md index 1dc8153c1905d..f6fc7488ccc90 100644 --- a/documentation/blog/2024-09-09-mantine-ui.md +++ b/documentation/blog/2024-09-09-mantine-ui.md @@ -186,7 +186,7 @@ export default App; let's take a look at what it looks like:
- mojo framework + mojo framework

@@ -269,7 +269,7 @@ export default function App() { let's take a look at what it looks like:
- mojo framework + mojo framework

@@ -500,7 +500,7 @@ export default function App() { ```
- mojo framework + mojo framework

@@ -660,7 +660,7 @@ export default function App() { ```
- mojo framework + mojo framework

diff --git a/documentation/blog/2024-09-17-chakra-ui.md b/documentation/blog/2024-09-17-chakra-ui.md index 0f1dc8a2c96a7..18cb0be448262 100644 --- a/documentation/blog/2024-09-17-chakra-ui.md +++ b/documentation/blog/2024-09-17-chakra-ui.md @@ -117,7 +117,7 @@ This calls the `SliderComp` and displays it on the browser. The output can be seen below.
-chakra ui +chakra ui

@@ -277,7 +277,7 @@ steps: This variable stores each `Stepper`'s data and is dynamically rendered ba The output can be seen below.
-chakra ui +chakra ui

@@ -392,7 +392,7 @@ The `Editable` component previews what was copied from the clipboard. The output can be seen below.
-chakra ui +chakra ui

@@ -677,7 +677,7 @@ The `useColorMode` hook makes it simple to control the light or dark color mode The output can be seen below.
-chakra ui +chakra ui

diff --git a/documentation/blog/2024-10-16-react-useref.md b/documentation/blog/2024-10-16-react-useref.md index ad59f116f6799..5968506eb4c14 100644 --- a/documentation/blog/2024-10-16-react-useref.md +++ b/documentation/blog/2024-10-16-react-useref.md @@ -250,7 +250,7 @@ In the code above, we we invoked the `useClickAway` custom hook in the `Storefro Now let’s see the output: -useRef +useRef
diff --git a/documentation/blog/2024-11-21-hr-app .md b/documentation/blog/2024-11-21-hr-app .md index c7ed713407242..f2df333f8e072 100644 --- a/documentation/blog/2024-11-21-hr-app .md +++ b/documentation/blog/2024-11-21-hr-app .md @@ -64,7 +64,7 @@ Managers can customize various HR aspects: - **Expense Types**: Define categories like Travel, Meals, and Training. - **Policy Customization**: Configure time-off policies, assets, and custom fields. -![Settings](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/settings.gif) +![Settings](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/settings.avif) ### Calendar @@ -79,7 +79,7 @@ A visual org chart displays the company’s structure with features like: - **Edit Employee**: Update department or title. - **Add Department**: Create new departments with clear hierarchies. -![Org Chart](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/organizational.gif) +![Org Chart](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/organizational.avif) ### Expense Management @@ -97,7 +97,7 @@ Track company assets like laptops and monitors, ensuring accountability and prop ### Employee Directory -![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/employee.gif) +![Employee](https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-11-18-hr-app/employee.avif) A searchable employee list helps managers quickly access contact details and manage records. New employees can be added with comprehensive details. diff --git a/documentation/blog/2024-12-18-tailwind-grid.md b/documentation/blog/2024-12-18-tailwind-grid.md index 0981403a35eae..60777427130b8 100644 --- a/documentation/blog/2024-12-18-tailwind-grid.md +++ b/documentation/blog/2024-12-18-tailwind-grid.md @@ -156,7 +156,7 @@ We can add columns at larger breakpoints: Here, we're using Tailwind's default breakpoints at `md: 768px` and `lg: 1024px`. We can see the number of columns increasing at `768px` and `1024px`: -tailwind grid 4 +tailwind grid 4
@@ -176,7 +176,7 @@ Below, we place the first `div` as a navbar. We are doing this with `col-span-{n ``` -tailwind grid 5 +tailwind grid 5
@@ -263,7 +263,7 @@ Now, we can go ahead and set the last `div` to become a footer. This footer will Here, `row-start-5` tells the footer to be placed to the bottom row. It looks like this: -tailwind grid 7 +tailwind grid 7
@@ -281,7 +281,7 @@ We can go further and make it more structured. Let's make the second `div` span We have it shaping into a better website layout: -tailwind grid 8 +tailwind grid 8
@@ -299,7 +299,7 @@ We can change the order of a region by altering the value of `n` in `row-start-{ We have something looking like this: -tailwind grid 4 +tailwind grid 4
diff --git a/documentation/blog/2024-12-20-antd-dynamic-form.md b/documentation/blog/2024-12-20-antd-dynamic-form.md index a441b3718f885..36939898df915 100644 --- a/documentation/blog/2024-12-20-antd-dynamic-form.md +++ b/documentation/blog/2024-12-20-antd-dynamic-form.md @@ -609,7 +609,7 @@ What we can do first is destructure the `add()` and `remove()` functions from th Now, the `Add a skill` button is functional. If you save your progress and test it out, you should be able to add dynamic fields to the form. -dynamic form antd +dynamic form antd
@@ -705,7 +705,7 @@ export default function UserCreate() { Unlike the former, we're passing the field name as an argument to the `remove()` function. Since each name is unique to its respective component, the function will only delete the field whose button is clicked. -dynamic form antd +dynamic form antd
@@ -958,7 +958,7 @@ All we need to do is add a `hasFeedback` prop to each `` like so: ``` -dynamic form antd +dynamic form antd
@@ -966,7 +966,7 @@ There you have it, an adequately validated **dynamic form** without the help of Now, our form is ready to validate input values and perform `POST` requests to our fake API endpoint. -dynamic form antd +dynamic form antd
@@ -1030,7 +1030,7 @@ Refer to the `` [documentation](https://refine.dev/core/docs/api-ref In the example above, we're using the `render` prop to choose the appropriate record on the table, and passing its `id` to the `recordItemId` prop on the `` component. This way, the button will only redirect us to the edit page of the record being clicked on. -dynamic form antd +dynamic form antd
diff --git a/documentation/blog/2024-12-20-mui-select.md b/documentation/blog/2024-12-20-mui-select.md index 313468bc5d869..5cf21c1c6367b 100644 --- a/documentation/blog/2024-12-20-mui-select.md +++ b/documentation/blog/2024-12-20-mui-select.md @@ -167,7 +167,7 @@ The code above showcases a list of car brands as `