[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"i-ic:sharp-monitor":3,"i-ic:sharp-mail":8,"i-fa6-brands:github":10,"i-fa6-brands:linkedin":14,"i-fa6-brands:telegram":17,"blog\u002F2023-05-08-personal-website-journey\u002Fposition":4,"\u002Fblog\u002F2023-05-08-personal-website-journey":19,"i-openmoji:flag-united-kingdom":624,"i-ic:sharp-arrow-back-ios":627,"i-ic:sharp-arrow-forward-ios":629},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M22 3H2v15h5l-1 1v2h12v-2l-1-1h5zm-2 13H4V5h16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M22 4H2v16h20zm-2 4l-8 5l-8-5V6l8 5l8-5z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":13},496,512,"\u003Cpath fill=\"currentColor\" d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2\"\u002F>",{"left":4,"top":4,"width":15,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":16},448,"\u003Cpath fill=\"currentColor\" d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":18},"\u003Cpath fill=\"currentColor\" d=\"M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248s248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3c-3.476 18.584-10.322 24.816-16.948 25.425c-14.4 1.326-25.338-9.517-39.287-18.661c-21.827-14.308-34.158-23.215-55.346-37.177c-24.485-16.135-8.612-25 5.342-39.5c3.652-3.793 67.107-61.51 68.335-66.746c.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142q-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123c-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7q108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789c2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716a43.8 43.8 0 0 1 .417 9.769\"\u002F>",{"id":20,"title":21,"body":22,"date":600,"description":601,"draft":6,"extension":602,"image":504,"lang":603,"meta":604,"navigation":605,"path":606,"seo":607,"stem":608,"tags":609,"__hash__":613,"before":614,"after":619},"blog\u002Fblog\u002F2023-05-08-personal-website-journey.md","Personal website building journey",{"type":23,"value":24,"toc":592},"minimark",[25,29,33,36,39,44,47,50,57,60,136,139,147,185,189,192,197,200,203,279,282,285,317,321,324,327,346,349,381,384,422,425,436,458,462,465,468,483,486,497,500,505,552,555,570,573,577,580,586,589],[26,27,21],"h1",{"id":28},"personal-website-building-journey",[30,31,32],"p",{},"Personal website is a great way to show your skills and experience. It is also a great way to learn new technologies and improve your skills.",[30,34,35],{},"In my case my personal website was the first IT project for me. And it evolved with my knowledge and experience.",[30,37,38],{},"Here I want to share my experience building several versions of my personal website throughout the years. You can notice changes in my approach to software development and architecture at different stages of my career.",[40,41,43],"h2",{"id":42},"version-1-2020","Version 1 (2020)",[30,45,46],{},"My first acquaintance with web technologies.",[30,48,49],{},"At that moment, I was immersed in creating video and believed that I needed a site with a presentation of myself as a specialist in development and video creation at the same time. A site where the user could see examples of my work, see the prices for my services, get acquainted with my work pipeline and send a request for cooperation. Support for different languages was also planned.",[30,51,52],{},[53,54],"img",{"src":55,"alt":56},"\u002Fblog\u002F2023-05-08\u002Fv1-loading.jpg","",[30,58,59],{},"The idea was good and interesting, but I stumbled upon a lack of experience with the technologies used. At first I created static pages, then I transferred everything to a single page application. Maintainability only suffered from this.",[61,62,63,76],"table",{},[64,65,66],"thead",{},[67,68,69,73],"tr",{},[70,71,72],"th",{},"Technology used",[70,74,75],{},"Purpose",[77,78,79,88,96,104,112,120,128],"tbody",{},[67,80,81,85],{},[82,83,84],"td",{},"Vue.js",[82,86,87],{},"Frontend framework",[67,89,90,93],{},[82,91,92],{},"GitHub Pages",[82,94,95],{},"Frontend hosting",[67,97,98,101],{},[82,99,100],{},"Node.js",[82,102,103],{},"Backend runtime",[67,105,106,109],{},[82,107,108],{},"Express",[82,110,111],{},"Backend framework for building simple REST API",[67,113,114,117],{},[82,115,116],{},"Heroku",[82,118,119],{},"Backend hosting",[67,121,122,125],{},[82,123,124],{},"MongoDB",[82,126,127],{},"Database",[67,129,130,133],{},[82,131,132],{},"Firebase",[82,134,135],{},"Analytics",[53,137],{"src":138},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FHOvB3i8m34JtFeKlO0vH2ZlO8B6fM8JQbA0eHecBE3xAfs8t6i_JSv27eIaclpmDsIUPpMi4YCg2--0b6axG0X0HmNMLtIl33M0EkZ8UVPAxozAPYwIF99oWXSQSbIjq-BwJv0gpCrSmF6bST1oAHQCLtpWqgb_Akdz2zDTj5LDtTcDjDlG7",[30,140,141,142,146],{},"Previously, this site occupied ",[143,144,145],"code",{},"d0rich.github.io"," domain, and it can be considered the very first version. I manually placed the images for it in the project repository, and now they are no longer here of course, so I see no reason to launch this project for viewing at a different address, but you can familiarize yourself with the client's source code to compare my skills then and today.",[61,148,149,159],{},[64,150,151],{},[67,152,153,156],{},[70,154,155],{},"Component",[70,157,158],{},"Source code",[77,160,161,174],{},[67,162,163,166],{},[82,164,165],{},"Web client",[82,167,168],{},[169,170,171],"a",{"href":171,"rel":172},"https:\u002F\u002Fgithub.com\u002Fd0rich\u002Fd0rich.github.io\u002Ftree\u002Fv1.0.0",[173],"nofollow",[67,175,176,179],{},[82,177,178],{},"Node.js server",[82,180,181],{},[169,182,183],{"href":183,"rel":184},"https:\u002F\u002Fgithub.com\u002Fd0rich\u002Fbackend.d0rich.github.io\u002Ftree\u002Fv1.0.0",[173],[40,186,188],{"id":187},"version-2-2021","Version 2 (2021)",[30,190,191],{},"I needed a resource that would demonstrate my web development competence in itself and simply by describing what I can.",[30,193,194],{},[53,195],{"src":196,"alt":56},"\u002Fblog\u002F2023-05-08\u002Fv2-3-intro.jpeg",[30,198,199],{},"Here information is provided directly about me, here projects that I want to share with others are collected, here resumes have been worked out for possible responses to vacancies. It is also planned to create a blog with related functionality.",[30,201,202],{},"This was the project in which I put the most of my heart. When writing new functionality, I tried to use some new technology for myself, so as not to stand still. And of course I tried to make it comfortable, I hope you felt it.",[61,204,205,213],{},[64,206,207],{},[67,208,209,211],{},[70,210,72],{},[70,212,75],{},[77,214,215,221,229,235,241,249,257,264,271],{},[67,216,217,219],{},[82,218,84],{},[82,220,87],{},[67,222,223,226],{},[82,224,225],{},"Vuetify",[82,227,228],{},"UI framework",[67,230,231,233],{},[82,232,92],{},[82,234,95],{},[67,236,237,239],{},[82,238,100],{},[82,240,103],{},[67,242,243,246],{},[82,244,245],{},"Fastify",[82,247,248],{},"Backend framework for building REST API",[67,250,251,254],{},[82,252,253],{},"PostgreSQL",[82,255,256],{},"Database for authentification and projects",[67,258,259,261],{},[82,260,132],{},[82,262,263],{},"Database for resume",[67,265,266,268],{},[82,267,116],{},[82,269,270],{},"Backend hosting, PostgreSQL databases",[67,272,273,276],{},[82,274,275],{},"Dropbox",[82,277,278],{},"File storage",[53,280],{"src":281},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FXP1FIyH03CNl-HGvUOkVG0Irz2IoMl1IzZ3jfBkpZ8raKbc_lKndzeyWUChBu_qWUP4dGnFKiDiR-g0yMf0PO1RF-1G3puOz5054HF2-yEqXvM5X-ePjYNQiNwpOGn4b-Y9-pROkrUmOPV7OXiYTYJBsa3MkIs4QbSz1ZdXtCyZn7hO0tfaRN69yM6pV3DX35ZnRcCBeyhdOF1Pu8ybsojthyozmetBWqT8AdvR_e3TEomUlI95de0tAEPBZjIBoL2iuEtHvivQ25FyoFTNFhftBoTVkwIRu0G00",[30,283,284],{},"You cannot try most of the functionality, since it is related to data editing and is available only to me. However, be sure everything is beautifully done.",[61,286,287,295],{},[64,288,289],{},[67,290,291,293],{},[70,292,155],{},[70,294,158],{},[77,296,297,307],{},[67,298,299,301],{},[82,300,165],{},[82,302,303],{},[169,304,305],{"href":305,"rel":306},"https:\u002F\u002Fgithub.com\u002Fd0rich\u002Fd0rich.github.io\u002Ftree\u002Fv2.0.0",[173],[67,308,309,311],{},[82,310,178],{},[82,312,313],{},[169,314,315],{"href":315,"rel":316},"https:\u002F\u002Fgithub.com\u002Fd0rich\u002Fbackend.d0rich.github.io\u002Ftree\u002Fv2.0.0",[173],[40,318,320],{"id":319},"version-3-2022","Version 3 (2022)",[30,322,323],{},"At this moment I finally realized that using just hyped SPA is not the best solution for my website. I decided to migrate to SSG (Static Site Generator) to improve SEO and reduce costs.",[30,325,326],{},"I had several problems with second iteration:",[328,329,330,334,337,340,343],"ol",{},[331,332,333],"li",{},"Maintaining server and database is quite expensive for small website.",[331,335,336],{},"At the moment for its development GitHub pages did not support HTML5 history mode for router. So SEO was completely impossible.",[331,338,339],{},"SPA are not optimized for Search Engines.",[331,341,342],{},"Open Graph protocol does not work with SPA.",[331,344,345],{},"Creating editor features only for me takes too long.",[30,347,348],{},"To solve all these problems, I migrated to Gridsome SSG. As it is built over Vue.js, I was able to move all existing styles and components to new project without problems. And the results as follows:",[328,350,351,358,372,375,378],{},[331,352,353,354,357],{},"Databases are not needed now as all the content is inside client repository in form of ",[143,355,356],{},".md"," files.",[331,359,360,361,364,365],{},"Gridsome creates HTML page for each webpage, so it is possible to have common routing without ",[143,362,363],{},"#",".\n",[366,367,369],"alert",{"type":368},"info",[30,370,371],{},"It is problem from past. GitHub pages now supports HTML5 history mode.",[331,373,374],{},"SEO works ideally with prerendered HTML.",[331,376,377],{},"There are no problems for Open Graph to parse content of prerendered HTML.",[331,379,380],{},"Now it is possible to edit content as markdown, and I don't need to implement my own features.",[30,382,383],{},"Website still works as SPA and it has all features of SPA.",[61,385,386,394],{},[64,387,388],{},[67,389,390,392],{},[70,391,72],{},[70,393,75],{},[77,395,396,402,410,416],{},[67,397,398,400],{},[82,399,84],{},[82,401,87],{},[67,403,404,407],{},[82,405,406],{},"Gridsome",[82,408,409],{},"Static Site Generator",[67,411,412,414],{},[82,413,225],{},[82,415,228],{},[67,417,418,420],{},[82,419,92],{},[82,421,95],{},[53,423],{"src":424},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FoqbDAr4eoLSeoapFA558oInAJIx9pC_ZuihBJqbLSCx9JCqhKOZcWZ2uT7LrTRd2IbFriegvt8ioKuhpSrD1_9BCj4gkM2u0",[30,426,427,428,435],{},"Copy of this version is currently hosted on subdomain ",[169,429,432],{"href":430,"rel":431},"https:\u002F\u002Fv3.d0rich.me",[173],[143,433,434],{},"v3.d0rich.me",". You can try it out.",[61,437,438,446],{},[64,439,440],{},[67,441,442,444],{},[70,443,155],{},[70,445,158],{},[77,447,448],{},[67,449,450,452],{},[82,451,165],{},[82,453,454],{},[169,455,456],{"href":456,"rel":457},"https:\u002F\u002Fgithub.com\u002Fd0rich\u002Fd0rich.github.io\u002Ftree\u002Fv3.0.0",[173],[40,459,461],{"id":460},"version-4-2023","Version 4 (2023)",[30,463,464],{},"This a website you are currently looking at.",[30,466,467],{},"Gridsome was a good choice, but it has some problems:",[328,469,470,473,480],{},[331,471,472],{},"It uses Vue.js 2, but Vue.js 3 is already released.",[331,474,475,476,479],{},"It uses old JavaScript imports via ",[143,477,478],{},"require()"," and it is not possible to use new libraries ES6 imports.",[331,481,482],{},"It became unmaintained.",[30,484,485],{},"At the moment of this realization, I was already familiar with Nuxt.js and it was in release candidate stage for the version 3. It looked like a game changer for me, because of several features:",[328,487,488,491,494],{},[331,489,490],{},"Nuxt content module with convenient API for markdown content",[331,492,493],{},"Nitro prerender mode, which works as SSG",[331,495,496],{},"Modern libraries suppport",[30,498,499],{},"Also, I finished Persona 5 Royal PC port. It really inspired me to build UI like in this game. It was the final reason to recreate whole website using new technology.",[30,501,502],{},[53,503],{"src":504,"alt":56},"\u002Fblog\u002F2023-05-08\u002Fv4-intro.jpg",[61,506,507,515],{},[64,508,509],{},[67,510,511,513],{},[70,512,72],{},[70,514,75],{},[77,516,517,523,530,538,546],{},[67,518,519,521],{},[82,520,84],{},[82,522,87],{},[67,524,525,528],{},[82,526,527],{},"Nuxt.js",[82,529,409],{},[67,531,532,535],{},[82,533,534],{},"TailwindCSS",[82,536,537],{},"CSS framework",[67,539,540,543],{},[82,541,542],{},"GSAP",[82,544,545],{},"Animations framework",[67,547,548,550],{},[82,549,92],{},[82,551,95],{},[53,553],{"src":554},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FoqbDAr4eoLSeoapFA558oInAJIx9pC_ZuihBJqbLSCx9JCqhKOZcWZ2uT7LrTRd2IbFriegvGX8pSyepyrASWuEv_4ehIa1YiG00",[30,556,557,558,563,564,569],{},"Additionally specific Nuxt theme was created for creating documentation websites for my projects: ",[169,559,562],{"href":560,"rel":561},"https:\u002F\u002Fd0xigen.d0rich.me\u002F",[173],"d0xigen",". This theme implements the same Persona 5 UI style. For conveniency my personal components was separated into Nuxt layer package: ",[169,565,568],{"href":566,"rel":567},"https:\u002F\u002Fdesign.d0rich.me\u002F",[173],"@d0rich\u002Fnuxt-design-system",".",[53,571],{"src":572},"https:\u002F\u002Fwww.plantuml.com\u002Fplantuml\u002Fpng\u002FZO_12eCm38RlVOhIUvmFCCHNAKteEcbQsWpqxJseR8EYdWB9bpzVidMJzQJDY7q9xlNWpoo0L8Ddg4iLYaRb9kGI2x50f19jm2-6_HmyiUA4fCssqaKoU-EPItgJaw7x6Qap0Gqm_0MTYrpWZUp3-4RkWUvrkzLwQGK0",[40,574,576],{"id":575},"summary","Summary",[30,578,579],{},"To sum up, I drammatically improved my hard skills during all these changes of website. Of course, it is not cool to rewrite website every year, but I have reasons for that. The main lesson learned here is:",[581,582,583],"blockquote",{},[30,584,585],{},"Simpler - better. If you can make something simpler, do it.",[30,587,588],{},"Beeing newbie I was really drived by working with different technologies, such as databases, server runtimes. I felt really good because of building complex systems. But I also realized that managing all this stuff is quite time consuming. That's why now I more like to work with SQLite rather than with full-fledged database.",[30,590,591],{},"Complex system is to much for small website. And there are convenient solutions for content management in source code. So I just made it simpler.",{"title":56,"searchDepth":593,"depth":593,"links":594},2,[595,596,597,598,599],{"id":42,"depth":593,"text":43},{"id":187,"depth":593,"text":188},{"id":319,"depth":593,"text":320},{"id":460,"depth":593,"text":461},{"id":575,"depth":593,"text":576},"2023-05-08","Here is my experience building several versions of my personal website throughout the years.","md","en",{},true,"\u002Fblog\u002F2023-05-08-personal-website-journey",{"title":21,"description":601},"blog\u002F2023-05-08-personal-website-journey",[610,611,612],"Frontend","Backend","Architecture","7GGGtRhqtcgNUf26AClKvioMK4RA04_gWjwhPEUD4Uo",{"title":615,"path":616,"stem":617,"description":618,"children":-1},"Classification of website technologies","\u002Fblog\u002F2022-01-25-classification-of-website-technologies","blog\u002F2022-01-25-classification-of-website-technologies","Nowadays there are a lot of technologies for building websites. You might be disoriented trying to choose something for your site. I did the big research, and I want share information I found.",{"title":620,"path":621,"stem":622,"description":623,"children":-1},"How to use Nuxt Typography with TailwindCSS","\u002Fblog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss","blog\u002F2023-05-09-how-to-use-nuxt-typography-with-tailwindcss","Small hack to use Nuxt Typography with TailwindCSS",{"left":4,"top":4,"width":625,"height":625,"rotate":4,"vFlip":6,"hFlip":6,"body":626},72,"\u003Cpath fill=\"#1e50a0\" d=\"M5 17h62v38H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M40 28.856V32h10.181L67 21.691V17h-7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 17h-3.827L40 31.203V32h3.482L67 17.586z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M59.347 55H67v-4.692L50.182 40H40v3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 55v-2.347L46.355 40h-4.787l24.474 15z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M32 43.144V40H21.819L5 50.309V55h7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 55h3.827L32 40.797V40h-3.482L5 54.414z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M12.653 17H5v4.692L21.818 32H32v-3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 17v2.347L25.646 32h4.786L5.958 17z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M5 31h62v10H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M31 17h10v38H31z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 33h62v6H5z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M33 17h6v38h-6z\"\u002F>\u003Cpath fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 17h62v38H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":628},"\u003Cpath fill=\"currentColor\" d=\"M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":630},"\u003Cpath fill=\"currentColor\" d=\"M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z\"\u002F>",1787506838272]