1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[937],{58860:(e,t,n)=>{n.d(t,{xA:()=>p,yg:()=>h});var i=n(37953);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=i.createContext({}),c=function(e){var t=i.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},p=function(e){var t=c(e.components);return i.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},g=i.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(n),g=o,h=u["".concat(s,".").concat(g)]||u[g]||d[g]||r;return n?i.createElement(h,a(a({ref:t},p),{},{components:n})):i.createElement(h,a({ref:t},p))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,a=new Array(r);a[0]=g;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:o,a[1]=l;for(var c=2;c<r;c++)a[c]=n[c];return i.createElement.apply(null,a)}return i.createElement.apply(null,n)}g.displayName="MDXCreateElement"},50268:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>u});n(37953);var i=n(58860);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function a(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const l={title:"An article guideline for Refine blog posts",description:"A guideline for writing articles",slug:"article-guideline",authors:"necati",category:"Announcement",tags:[],image:"https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-09-23-refine-article-guideline/social.png",hide_table_of_contents:!1},s=void 0,c={permalink:"/blog/article-guideline",source:"@site/blog/2022-09-23-refine-article-guideline.md",title:"An article guideline for Refine blog posts",description:"A guideline for writing articles",date:"2022-09-23T00:00:00.000Z",formattedDate:"SEP 23, 2022",tags:[],readingTime:3.585,hasTruncateMarker:!1,authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],frontMatter:{title:"An article guideline for Refine blog posts",description:"A guideline for writing articles",slug:"article-guideline",authors:"necati",category:"Announcement",tags:[],image:"https://refine.ams3.cdn.digitaloceanspaces.com/blog-yearly/2022/2022-09-23-refine-article-guideline/social.png",hide_table_of_contents:!1},prevItem:{title:"React Hook Form Validation with Complete Examples",permalink:"/blog/react-hook-form-validation-examples"},nextItem:{title:"OTP Authentication with Supabase and Twilio in React",permalink:"/blog/supabase-twilio-otp-authentication-in-react"},lastUpdate:"2022-09-23T00:00:00.000Z",formattedLastUpdateDate:"SEP 23, 2022",relatedPosts:[{title:"Refine Levels Up with Claude 4",description:"Refine now capitalizes on the power of Anthropic's newly released Claude 4 models, improving output quality and productivity in your future and existing Refine projects.",permalink:"/blog/refine-
1ai-claude-4",authors:[{name:"\xd6zg\xfcr Ak\xe7a",title:"Junior Developer Relations",url:"https://github.com/doguhanozgurakca",imageURL:"https://github.com/doguhanozgurakca.png",key:"ozgur"}],readingTime:2.515,date:"2025-05-26T00:00:00.000Z",formattedDate:"MAY 26, 2025",lastUpdate:"2025-06-18T00:00:00.000Z",formattedLastUpdateDate:"JUN 18, 2025"},{title:"Announcing the Refine Open Source Hackathon 2 Winners",description:"We're thrilled to announce the winners of the Refine Open Source Hackathon 2!",permalink:"/blog/refine-hackathon-2-winners",authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],readingTime:5.065,date:"2023-08-04T00:00:00.000Z",formattedDate:"AUG 4, 2023",lastUpdate:"2023-08-04T00:00:00.000Z",formattedLastUpdateDate:"AUG 4, 2023"},{title:"refine Hackaton Winners",description:"The winners of the Refine Open Source Hackathon are announced!",permalink:"/blog/refine-hackathon-winners",authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],readingTime:2.38,date:"2023-02-28T00:00:00.000Z",formattedDate:"FEB 28, 2023",lastUpdate:"2023-02-28T00:00:00.000Z",formattedLastUpdateDate:"FEB 28, 2023"}],authorPosts:[{title:"Top Front-End Frameworks in 2024 Worth Your Time and Effort to Master",description:"We'll talk about five frameworks \u2013 React, Refine, Angular, Svelte, and Vue. Each of these has its cool stuff to offer, making them worth the time to learn.",permalink:"/blog/best-front-end-frameworks-in-2024",authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],readingTime:12.635,date:"2024-09-16T00:00:00.000Z",formattedDate:"SEP 16, 2024",lastUpdate:"2024-09-16T00:00:00.000Z",formattedLastUpdateDate:"SEP 16, 2024"},{title:"How to Use Nodemon to Automatically Restart Node.js Applications",description:"This guide shows you how to install and use Nodemon to streamline your development process.",permalink:"/blog/nodemon",authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],readingTime:10.62,date:"2024-11-08T00:00:00.000Z",formattedDate:"NOV 8, 2024",lastUpdate:"2024-11-08T00:00:00.000Z",formattedLastUpdateDate:"NOV 8, 2024"},{title:"refine Open Source Hackathon 2",description:"The second Refine Open Source Hackathon is an excellent opportunity for developers to showcase their skills, learn Refine and win prizes!",permalink:"/blog/refine-hackathon-2",authors:[{name:"Necati \xd6zmen",url:"https://github.com/necatiozmen",description:"Feeling Irie",github:"https://github.com/necatiozmen",twitter:"https://twitter.com/necatiozmen3",linkedin:"https://www.linkedin.com/in/necatiozmen/",imageURL:"https://github.com/necatiozmen.png",key:"necati"}],readingTime:10.335,date:"2023-06-14T00:00:00.000Z",formattedDate:"JUN 14, 2023",lastUpdate:"2023-08-05T00:00:00.000Z",formattedLastUpdateDate:"AUG 5, 2023"}],category:{value:"Announcement",label:"Announcement",permalink:"/blog/categories/announcement"}},p={authorsImageUrls:[void 0]},u=[{value:"Inroduction",id:"inroduction",level:2},{value:"Project installation for example app",id:"project-installation-for-example-app",level:2},{value:"Adding table of contents",id:"adding-table-of-contents",level:2},{value:"What is Refine?",id:"what-is-refine",level:2},{value:"How to use Refine?",id:"how-to-use-refine",level:2},{value:"How to customize Refine?",id:"how-to-customize-refine",level:2},{value:"Code blocks",id:"code-blocks",level:2}
1,{value:"Code block structure",id:"code-block-structure",level:3},{value:"File path and code block syntax",id:"file-path-and-code-block-syntax",level:3},{value:"Syntax highlighting",id:"syntax-highlighting",level:3},{value:"Screenshots & Images",id:"screenshots--images",level:2}],d={toc:u},g="wrapper";function h(e){var{components:t}=e,n=a(e,["components"]);return(0,i.yg)(g,r(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(t){o(e,t,n[t])}))}return e}({},d,n),{components:t,mdxType:"MDXLayout"}),(0,i.yg)("h2",{id:"inroduction"},"Inroduction"),(0,i.yg)("p",null,"We use Docusaurus for our blog pages. Your article should follow some standards."),(0,i.yg)("ul",null,(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"The article needs to be written in markdown format. Do not publish the article on platforms like hackmd.io and your personal blog.")),(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"You need to be wait minimum one month before publishing the article on your personal blog due SEO purpose. Do not forget to give a canonical url to the article on your personal blog.")),(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"Add the word count at the end of your article - excluding the code.")),(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"Use tools like Grammarly ",(0,i.yg)("a",{parentName:"p",href:"https://app.grammarly.com/"},"https://app.grammarly.com/")," to fix all grammar mistakes and spellings"))),(0,i.yg)("h2",{id:"project-installation-for-example-app"},"Project installation for example app"),(0,i.yg)("p",null,"If you need to bootstrap a new project with React or Next.js for the article, please use ",(0,i.yg)("inlineCode",{parentName:"p"},"create refine-app")," CLI."),(0,i.yg)("p",null,"It is a CLI tool that helps you to bootstrap a new project with a lot of features."),(0,i.yg)("p",null,"To create a project called my-app, run this command:"),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-bash"},"npm create refine-app@latest my-app\n")),(0,i.yg)("h2",{id:"adding-table-of-contents"},"Adding table of contents"),(0,i.yg)("p",null,"Covered sections need to be shown at the beginning of the article."),(0,i.yg)("p",null,"Imagine you have 3 headings in your article."),(0,i.yg)("h2",{id:"what-is-refine"},"What is Refine?"),(0,i.yg)("h2",{id:"how-to-use-refine"},"How to use Refine?"),(0,i.yg)("h2",{id:"how-to-customize-refine"},"How to customize Refine?"),(0,i.yg)("p",null,"You need to add the following code with proper heading link to the top of the article."),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-markdown"},"-[What is Refine?](#what-is-refine) -[How to use Refine?](#how-to-use-refine) -[How to customize Refine?](#how-to-customize-refine)\n")),(0,i.yg)("p",null,"The result will be like this when the post is published."),(0,i.yg)("h2",{id:"code-blocks"},"Code blocks"),(0,i.yg)("p",null,"Explain the topic contents step by step. Imagine you are reading the article for the first time. You need to explain the topic in a way that a beginner can understand."),(0,i.yg)("h3",{id:"code-block-structure"},"Code block structure"),(0,i.yg)("ul",null,(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"Keep your code blocks content as much as minimal.")),(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"Add the component imports, functions definitions, etc., into the code blocks if they are only required for the code to work successfully.\nOtherwise, do not show any code that is not explained or implemented in the section at that time. Shortly, please add the required code blocks only."))),(0,i.yg)("h3",{id:"file-path-and-code-block-syntax"},"File path and code block syntax"),(0,i.yg)("ul",null,(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"For code block language syntax, we always use ",(0,i.yg)("inlineCode",{parentName:"p"}
1,'"tsx"')," option whetever your code is written in Typescript or not. This is just useful for syntax coloring.")),(0,i.yg)("li",{parentName:"ul"},(0,i.yg)("p",{parentName:"li"},"We use ",(0,i.yg)("inlineCode",{parentName:"p"},"title")," attribute to show the file name of the codeblock."))),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n />\n );\n}\n')),(0,i.yg)("p",null,"The result will be like this in the blog post when published."),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n />\n );\n}\n')),(0,i.yg)("p",null,"We recommended to use title attribute for all codeblocks to make it easier to understand file structure of the project."),(0,i.yg)("h3",{id:"syntax-highlighting"},"Syntax highlighting"),(0,i.yg)("ul",null,(0,i.yg)("li",{parentName:"ul"},"When you add a new codes to the existing code block, you should use syntax highlighting technique.")),(0,i.yg)("p",null,"For example, you should use ",(0,i.yg)("inlineCode",{parentName:"p"},"//highlight-next-line")," to highlight the new added code, if you want to add a resources property ",(0,i.yg)("inlineCode",{parentName:"p"},"<Refine />")," component"),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n //highlight-next-line\n resources={[{ name: "posts", list: Posts }]}\n />\n );\n}\n')),(0,i.yg)("p",null,"The result will be like this in the blog post when published."),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n //highlight-next-line\n resources={[{ name: "posts", list: Posts }]}\n />\n );\n}\n')),(0,i.yg)("br",null),(0,i.yg)("ul",null,(0,i.yg)("li",{parentName:"ul"},"For more than one line highlighting, you can use ",(0,i.yg)("inlineCode",{parentName:"li"},"//highlight-start")," and ",(0,i.yg)("inlineCode",{parentName:"li"},"//highlight-end")," to highlight the code block.")),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n //highlight-start\n resources={[\n { name: "posts", list: Posts }\n { name: "users", list: Users }]}\n //highlight-end\n />\n );\n}\n')),(0,i.yg)("p",null,"The result will be like this in the blog post when published."),(0,i.yg)("pre",null,(0,i.yg)("code",{parentName:"pre",className:"language-tsx",metastring:'title="src/App.tsx"',title:'"src/App.tsx"'},'function App() {\n return (\n <Refine\n routerProvider={routerProvider}\n dataProvider={dataProvider("https://api.fake-rest.refine.dev")}\n //highlight-start\n resources={[\n { name: "posts", list: Posts }\n { name: "users", list: Users }]}\n //highlight-end\n />\n );\n}\n')),(0,i.yg)("p",null,"We recommended to use highlighting technique for codeblocks to make it easier to readers to follow the code."),(0,i.yg)("p",null,"For more detailed usage of syntax highlighting, you can check ",(0,i.yg)("a",{parentName:"p",href:"https://docusaurus.io/docs/markdown-features/code-blocks"},"this")," page."),(0,i.yg)("h2",{id:"screenshots--images"},"Screenshots & Images"),(0,i.yg)("p",null,"We recommend to add screenshots and images to show outputs if you building an example app."),(0,i.yg)("p",null,"Please design your example app outputs to look cool and understandable."),(0,i.yg)("p",null,"If you want yo use gifs, please optimize gif size before adding to the article. You can use ",(0,i.yg)("a",{parentName:"p",href:"https://ezgif.com/optimize"},"this")," tool to optimize gif size."))}h.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.