Merge branch 'main' into last-updated-for-blog

Author: DoguhanOzgurAkca

documentation/blog/2021-10-4-admin-panel-with-nestjs.md

@@ -80,7 +80,7 @@ _Since the steps to create Entities Controllers, and services are very long, I d
 
 It created these end-points automatically with nestjsx/crud.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/api.png" alt="API response example" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-10-4-admin-panel-with-nestjs/api.png" alt="API response example" />
 <br />
 
 ## Refine Admin Panel
@@ -114,7 +114,7 @@ npm run dev
 
 Refine's sample application will welcome you.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/refine_sample.png" alt="Refine sample application welcome screen" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-10-4-admin-panel-with-nestjs/refine_sample.png" alt="Refine sample application welcome screen" />
 <br />
 
 Change api url in [admin/src/App.tsx](https://github.com/refinedev/refine-hackathon/tree/main/job-posting-app/blob/master/admin/src/App.tsx)
@@ -265,5 +265,5 @@ function App() {
         />
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/refine_job.png" alt="Refine jobs list page" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-10-4-admin-panel-with-nestjs/refine_job.png" alt="Refine jobs list page" />
 <br />

documentation/blog/2021-11-12-issue-tracker-refine.md

@@ -32,7 +32,7 @@ We will use [Supabase](https://supabase.io/) in backend. Let's start by creating
 
 We have to go to [Supabase](https://supabase.io/) and create an organization and database. Then we can start creating our tables.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/start.png" alt="Issue tracker start screen" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/start.png" alt="Issue tracker start screen" />
 <br />
 
 The tables we need to create for our project are as follows:
@@ -44,7 +44,7 @@ The tables we need to create for our project are as follows:
 - `color`: varchar
 
 <br />
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/label_table.png" alt="Labels table view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/label_table.png" alt="Labels table view" />
 <br />
 
 > priority
@@ -53,7 +53,7 @@ The tables we need to create for our project are as follows:
 - `title` varchar
 
 <br />
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/common_table.png" alt="Supabase table layout for priority and status entries" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/common_table.png" alt="Supabase table layout for priority and status entries" />
 <br />
 
 > status
@@ -62,7 +62,7 @@ The tables we need to create for our project are as follows:
 - `title` varchar
 
 <br />
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/common_table.png" alt="Supabase table layout for priority and status entries" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/common_table.png" alt="Supabase table layout for priority and status entries" />
 <br />
 
 > users
@@ -71,7 +71,7 @@ The tables we need to create for our project are as follows:
 - `id` uuid
 
 <br />
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/user_table.png" alt="Users table view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/user_table.png" alt="Users table view" />
 <br />
 
 > tasks
@@ -87,7 +87,7 @@ The tables we need to create for our project are as follows:
 - `users` uuid
 
 <br />
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/task_table.png" alt="Tasks table view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/task_table.png" alt="Tasks table view" />
 <br />
 
 We created our database tables. The important part here is that as you can see, in our tasks table, label, priority, status and users values ​​are defined as bigint. To summarize the reason for this, we relation the label, priority, status and users tables that we created above with the corresponding values ​​in our tasks table.
@@ -114,22 +114,22 @@ Now let's go to the Supabase Table editor and create our constant values.
 
 `Label Table`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/label_value.png" alt="Label value field" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/label_value.png" alt="Label value field" />
 <br />
 
 `Priority Table`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/priority_value.png" alt="Priority value field" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/priority_value.png" alt="Priority value field" />
 <br />
 
 `Status Table`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/status_value.png" alt="Status value field" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/status_value.png" alt="Status value field" />
 <br />
 
 Let's create a test task to better understand key relation.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/task_test.avif" alt="Task item example" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/task_test.avif" alt="Task item example" />
 <br />
 
 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.
@@ -498,7 +498,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.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/login.avif" alt="Login page" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/login.avif" alt="Login page" />
 <br />
 
 We can now create supabase users and log in from our Refine interface.
@@ -554,7 +554,7 @@ function App() {
 export default App;
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/list.png" alt="Issues list view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/list.png" alt="Issues list view" />
 <br />
 
 We can now create lists of tasks and make changes to them.
@@ -914,7 +914,7 @@ export interface ITaskFilterVariables {
 }
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/task_list.png" alt="Task list view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/task_list.png" alt="Task list view" />
 <br />
 
 Using Refine's [tableSearch](https://refine.dev/core/docs/guides-and-concepts/search/table-search) and list, we can create our list and perform filtering.
@@ -1000,7 +1000,7 @@ export const TaskCreate = () => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/create_test.avif" alt="Create task form" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/create_test.avif" alt="Create task form" />
 <br />
 
 ## Edit Task
@@ -1058,7 +1058,7 @@ export const EditTask = () => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/edit_test.gif" alt="Edit task form" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/edit_test.gif" alt="Edit task form" />
 <br />
 
 ## Show Task
@@ -1130,7 +1130,7 @@ export const TaskShow: React.FC = () => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/show.png" alt="Task detail view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/show.png" alt="Task detail view" />
 <br />
 
 By using Refine's basic views such as [create](https://refine.dev/core/docs/ui-frameworks/antd/components/basic-views/create), [edit](https://refine.dev/core/docs/ui-frameworks/antd/components/basic-views/edit/) and [show](https://refine.dev/core/docs/ui-frameworks/antd/components/basic-views/show/), we can now create tasks, edit these tasks and view their details.
@@ -1275,7 +1275,7 @@ export const Dashboard = () => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/dash_overview.png" alt="Dashboard overview" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/dash_overview.png" alt="Dashboard overview" />
 <br/>
 
 Final version of our `<App.tsx/>`.
@@ -1341,17 +1341,17 @@ Our project is done. Lets see how its look like.
 
 `Overview`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/overview-project.avif" alt="Project overview panel" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/overview-project.avif" alt="Project overview panel" />
 <br />
 
 `Task Filter`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/filter.avif" alt="Filter panel" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/filter.avif" alt="Filter panel" />
 <br />
 
 `Dashboard Page`
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-12-issue-tracker-refine/dashboard.avif" alt="Issue tracker dashboard" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-12-issue-tracker-refine/dashboard.avif" alt="Issue tracker dashboard" />
 <br />
 
 As you can see, we made a simple and short task manager application using Refine on our front end and using its data-provider.

documentation/blog/2021-11-29-refine-vs-admin-bro.md

@@ -53,7 +53,7 @@ Although **Refine** is a newer framework, it is successful in identifying defici
 npm create refine-app@latest demo-refine-project -- -b v3
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-29-refine-vs-adminbro/project_setup.avif" alt="Refine CLI project setup output" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-29-refine-vs-adminbro/project_setup.avif" alt="Refine CLI project setup output" />
 
 ### Features
 
@@ -197,7 +197,7 @@ You just need to tell the route of your component to the routerProvider.
 
 A data provider is the place where a **Refine** app communicates with an API.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-11-29-refine-vs-adminbro/refine_flow.png" alt="Refine data provider flow diagram" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-11-29-refine-vs-adminbro/refine_flow.png" alt="Refine data provider flow diagram" />
 
 A data provider must include following methods:
 

documentation/blog/2021-12-22-base64-upload.md

@@ -139,7 +139,7 @@ Now we have an input to interact with the user and select a file. Let's add the
 </html>
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-22-base64-upload/upload.png" alt="Base64 image upload interface" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-12-22-base64-upload/upload.png" alt="Base64 image upload interface" />
 <br />
 
 Our fields are ready to display the image file and Base64 code. Now let's do our operations on the JavaScript side.
@@ -178,7 +178,7 @@ input.addEventListener("change", (e) => {
 
 Here we take data in file format and encode it as Base64. Then we show this encoded image and Base64 encoding output.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-22-base64-upload/overview.webp" alt="Base64 upload overview" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-12-22-base64-upload/overview.webp" alt="Base64 upload overview" />
 <br />
 
 ## Live Codesandbox Example

documentation/blog/2021-12-27-multipart-upload.md

@@ -38,7 +38,7 @@ We will take a file from the user with [FormData](https://developer.mozilla.org/
 </body>
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-27-multipart-upload/upload.png" alt="Multipart upload form screen" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-12-27-multipart-upload/upload.png" alt="Multipart upload form screen" />
 <br />
 
 Here we simply created an input and a button. With these HTML elements we have created, we can get the file chosen by the user.
@@ -116,7 +116,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.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-12-27-multipart-upload/overview.avif" alt="Multipart upload overview screen" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2021/2021-12-27-multipart-upload/overview.avif" alt="Multipart upload overview screen" />
 <br />
 
 ## How to Multipart Upload with Refine?

documentation/blog/2022-01-18-csv-import.md

@@ -95,7 +95,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.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/console.avif" alt="CSV import console output" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-01-18-csv-import/console.avif" alt="CSV import console output" />
 <br />
 
 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.
@@ -192,7 +192,7 @@ function App() {
 ....
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/overview.avif" alt="CSV import overview screen" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-01-18-csv-import/overview.avif" alt="CSV import overview screen" />
 <br />
 
 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.
@@ -216,7 +216,7 @@ The CSV import with **Refine** is very simple and out-of-the-box feature. How to
 
 ## Refine CSV Import Usage
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-01-18-csv-import/importing.avif" alt="CSV file import in progress" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-01-18-csv-import/importing.avif" alt="CSV file import in progress" />
 <br />
 
 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**.

documentation/blog/2022-02-21-build-internal-tools-with-refine.md

@@ -5,7 +5,7 @@ slug: what-is-refine-core-how-to-use-it
 authors: salih
 category: "How To Build"
 tags: [opensource]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-what-is-refine-core/how-to-use-refine-core
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-what-is-refine-core/how-to-use-refine-core
 hide_table_of_contents: false
 last_update: 2026-01-16
 ---

documentation/blog/2022-02-21-react-antd-admin.md

@@ -85,7 +85,7 @@ cd refine-advanced-tutorial
 npm run dev
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/refine_tutorial.avif" alt="Refine tutorial app initial view" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/refine_tutorial.avif" alt="Refine tutorial app initial view" />
 <br />
 
 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.
@@ -338,7 +338,7 @@ return (
 
 Now our i18n Provider is ready to use, let's test it together.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/i8n-overview.avif" alt="Refine i18n provider language selector" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/i8n-overview.avif" alt="Refine i18n provider language selector" />
 <br />
 
 ### Use the translation with Table Content
@@ -419,7 +419,7 @@ export const PostList: React.FC = () => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/table-i18n.avif" alt="Data table with i18n translated labels" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/table-i18n.avif" alt="Data table with i18n translated labels" />
 <br />
 
 You can add the translation you want and organize your content according to different languages ​​together with the **Refine** i18n Provider.
@@ -513,7 +513,7 @@ Our project is now Realtime! Thanks to **Refine** Live Provider, we made our pro
 
 Let's see how our RealTime Project works.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/realtime.gif" alt="Real-time data updates demonstration" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/realtime.gif" alt="Real-time data updates demonstration" />
 <br />
 
 ## Add Access Control to Your Project with Refine
@@ -602,7 +602,7 @@ export const Header: React.FC<HeaderProps> = ({ role }) => {
 };
 ```
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/access_button.png" alt="Access control disabled edit button" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/access_button.png" alt="Access control disabled edit button" />
 <br />
 
 In this article, we will use [Cerbos](https://cerbos.dev/) to **Refine** Access Control.
@@ -809,7 +809,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.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-02-21-react-antd-admin/access-control.avif" alt="Access control provider in action" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-02-21-react-antd-admin/access-control.avif" alt="Access control provider in action" />
 <br />
 
 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