docs: refactor blog images (refinedev#3177)

* docs: blog images moved to cdn

* chore: remove blog images

* docs: removed promo gifs

* fix: imgix cdn setup

documentation/blog/2021-10-25-mail-subscription-with-refine.md

@@ -8,19 +8,19 @@ image: /img/placeholder.png
 hide_table_of_contents: false
 ---
 
-import auth from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/auth.png';
-import create from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/create.gif';
-import dummy_data from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/dummy_data.png';
-import login from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/login.gif';
-import messages from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/messages.png';
-import overview from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/overview.png';
-import refine_messages from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/refine_messages.png';
-import refine_subs from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/refine_subs.png';
-import refine_welcome from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/refine_welcome.png';
-import send from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/send.gif';
-import signin from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/signin.png';
-import strapi from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/strapi.png';
-import subscribers from '@site/static/img/blog/2021-10-25-mail-subscription-with-refine/subscribers.png';
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 We will make a web application that allows you to quickly create subscribers and send emails to your subscribers in a simple way. We’ll use refine to develop the frontend easily and strapi for backend solutions.
 
@@ -35,7 +35,7 @@ npx create-strapi-app strapi-email-subscription-api --quickstart
 
 After the project is loaded, the admin panel will open automatically open in the browser. We need to create an admin user in order to log in to the strapi.
 
-<img src={strapi} alt="strapi" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/strapi.png" alt="strapi" />
 
 
 With the information we will create here, we can now enter the strapi and start shaping our backend.
@@ -54,7 +54,7 @@ We will create these collections from the Collection-Types Builder part of the s
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={subscribers} alt="subscribers" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/subscribers.png" alt="subscribers" />
 </div>
 <br />
 
@@ -69,7 +69,7 @@ We will create these collections from the Collection-Types Builder part of the s
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={messages} alt="messages" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/messages.png" alt="messages" />
 </div>
 <br />
 
@@ -130,7 +130,7 @@ This is a example Refine project:
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_welcome} alt="refine_welcome" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/refine_welcome.png" alt="refine_welcome" />
 </div>
 <br />
 
@@ -182,7 +182,7 @@ export default App;
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={signin} alt="signin" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/signin.png" alt="signin" />
 </div>
 <br />
 
@@ -194,7 +194,7 @@ After adding the resources, we need to define a user in the strapi in order to b
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={auth} alt="auth" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/auth.png" alt="auth" />
 </div>
 <br />
 
@@ -206,7 +206,7 @@ Let's login with this user we created
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={login} alt="login" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/login.gif" alt="login" />
 </div>
 
 
@@ -218,7 +218,7 @@ We can now list subscribers and messages and make changes to our list. Before do
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={dummy_data} alt="dummy_data" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/dummy_data.png" alt="dummy_data" />
 </div>
 <br />
 
@@ -332,7 +332,7 @@ Now let's see how our subscriber panel looks like:
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_subs} alt="refine_subs" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/refine_subs.png" alt="refine_subs" />
 </div>
 <br />
 
@@ -345,7 +345,7 @@ Now let's see how our subscriber panel looks like:
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_messages} alt="refine_messages" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/refine_messages.png" alt="refine_messages" />
 </div>
 <br />
 
@@ -461,7 +461,7 @@ Using refine's [form](https://refine.dev/docs/api-reference/antd/hooks/form/useF
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={create} alt="create" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/create.gif" alt="create" />
 </div>
 <br />
 
@@ -554,7 +554,7 @@ Our project is finished. Let's try it now.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={overview} alt="overview" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/overview.png" alt="overview" />
 </div>
 <br />
 
@@ -568,7 +568,7 @@ Let's send the same e-mail to our subscribers shown in the picture at once.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={send} alt="send" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-25-mail-subscription-with-refine/send.gif" alt="send" />
 </div>
 <br />
 

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

@@ -8,9 +8,9 @@ image: /img/placeholder.png
 hide_table_of_contents: false
 ---
 
-import api from '@site/static/img/blog/2021-10-4-admin-panel-with-nestjs/api.png';
-import refine_sample from '@site/static/img/blog/2021-10-4-admin-panel-with-nestjs/refine_sample.png';
-import refine_job from '@site/static/img/blog/2021-10-4-admin-panel-with-nestjs/refine_job.png';
+
+
+
 
 In this article, we will prepare a simple `job-posting` application. We will also use the [refine](https://github.com/refinedev/refine) framework for the **admin panel**. The project will consist of two parts, api and admin.
 
@@ -77,7 +77,7 @@ It created these end-points automatically with nestjsx/crud.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={api} alt="api" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/api.png" alt="api" />
 </div>
 <br />
 
@@ -118,7 +118,7 @@ Refine's sample application will welcome you.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_sample} alt="refine_sample" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/refine_sample.png" alt="refine_sample" />
 </div>
 <br />
 
@@ -274,6 +274,6 @@ function App() {
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_job} alt="refine_job" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/refine_job.png" alt="refine_job" />
 </div>
 <br />

documentation/blog/2021-10-4-feedback-admin-panel.md

@@ -8,15 +8,15 @@ image: /img/placeholder.png
 hide_table_of_contents: false
 ---
 
-import refine_welcome from '@site/static/img/blog/2021-10-4-feedback-admin-panel/refine_welcome.png';
-import header from '@site/static/img/blog/2021-10-4-feedback-admin-panel/header.png';
-import strapi_content from '@site/static/img/blog/2021-10-4-feedback-admin-panel/strapi_content.png';
-import signin from '@site/static/img/blog/2021-10-4-feedback-admin-panel/signin.png';
-import user from '@site/static/img/blog/2021-10-4-feedback-admin-panel/user.png';
-import feedback from '@site/static/img/blog/2021-10-4-feedback-admin-panel/feedback.png';
-import feedbacks from '@site/static/img/blog/2021-10-4-feedback-admin-panel/feedbacks.png';
-import feedback_overview from '@site/static/img/blog/2021-10-4-feedback-admin-panel/feedback_overview.gif';
-import widgets from '@site/static/img/blog/2021-10-4-feedback-admin-panel/widgets.gif';
+
+
+
+
+
+
+
+
+
 
 
 In this article, we will create a panel where we can manage the feedback we receive from our web application. 
@@ -49,7 +49,7 @@ Quite simply, a feedback should have a `description` text field, A `page` text f
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={strapi_content} alt="content" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/strapi_content.png" alt="content" />
 </div>
 <br />
 
@@ -108,7 +108,7 @@ npm run dev
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={refine_welcome} alt="welcome" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/refine_welcome.png" alt="welcome" />
 </div>
 <br />
 
@@ -170,7 +170,7 @@ After adding the resource, our auth provider was activated.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={signin} alt="signin" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/signin.png" alt="signin" />
 </div>
 <br />
 
@@ -182,7 +182,7 @@ Now let's create a user on the Strapi to be able to login to the application.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={user} alt="user" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/user.png" alt="user" />
 </div>
 <br />
 
@@ -194,7 +194,7 @@ We created a user and login to the application with this user.
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={feedback} alt="feedback" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/feedback.png" alt="feedback" />
 </div>
 <br />
 
@@ -261,7 +261,7 @@ In the new view, there are no siders anymore and the header we have customized i
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={header} alt="header" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/header.png" alt="header" />
 </div>
 <br />
 
@@ -273,7 +273,7 @@ Now we come to the part where we can list our feedback and make changes to it. B
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={feedbacks} alt="feedbacks" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/feedbacks.png" alt="feedbacks" />
 </div>
 <br />
 
@@ -457,7 +457,7 @@ See detailed usage of useSimpleList for adding new filters, adding search entrie
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={feedback_overview} alt="feedback_overview" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/feedback_overview.gif" alt="feedback_overview" />
 </div>
 <br />
 
@@ -475,7 +475,7 @@ Now let's add this component to the `OfflayouArea` component and create feedback
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={widgets} alt="widgets" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-feedback-admin-panel/widgets.gif" alt="widgets" />
 </div>
 <br />
 

documentation/blog/2021-10-4-manage-hackatons.md

@@ -8,8 +8,8 @@ image: /img/placeholder.png
 hide_table_of_contents: false
 ---
 
-import hackathons from '@site/static/img/blog/2021-10-4-manage-hackathons/hackathons.png';
-import create from '@site/static/img/blog/2021-10-4-manage-hackathons/create.png';
+
+
 
 We'll be building a demo app to manage hackathons with [refine](https://refine.dev/). We'll be able to create new hackathons, new project entries for a hackathon and criterias for a hackathon.
 
@@ -21,7 +21,7 @@ We'll be building a demo app to manage hackathons with [refine](https://refine.d
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={hackathons} alt="hackathons" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-manage-hackathons/hackathons.png" alt="hackathons" />
 </div>
 <br/>
 
@@ -198,7 +198,7 @@ export default App;
         <div class="control orange"></div>
         <div class="control green"></div>
     </div>
-    <img src={create} alt="create" />
+    <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-manage-hackathons/create.png" alt="create" />
 </div>
 <br/>