-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblogpost-guide.html
More file actions
25 lines (25 loc) · 31.7 KB
/
blogpost-guide.html
File metadata and controls
25 lines (25 loc) · 31.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html><html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><title>ReScript Documentation</title><meta charSet="utf-8"/><meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui" name="viewport"/><meta content="The ReScript language and ecosystem docs" name="description"/><meta content="" name="keywords"/><link href="/static/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/><link href="/static/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/><link href="/static/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/><link href="/static/favicon/site.webmanifest" rel="manifest"/><meta content="ReScript Documentation" property="og:site_name"/><meta content="en_US" property="og:locale"/><meta content="ReScript Documentation" property="og:title"/><meta content="The ReScript language and ecosystem docs" property="og:description"/><meta content="ReScript Documentation" name="twitter:title"/><meta content="The ReScript language and ecosystem docs" name="twitter:description"/><meta content="@reasonml" name="twitter:site"/><meta content="@ReasonAssoc" name="twitter:creator"/><meta content="image/jpeg" property="og:image:type"/><meta content="summary_large_image" name="twitter:card"/><link title="ReScript Blog" href="/blog/feed.xml" rel="alternate" type="application/rss+xml"/><meta name="next-head-count" content="20"/><link rel="preload" href="/_next/static/css/2b269719632b344a478b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2b269719632b344a478b.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/blogpost-guide-b5808881936a51860fe8.js" as="script"/></head><body><div id="__next"><div class="mt-4 xs:mt-16"><div class="text-gray-80"><nav class="fixed top-0 z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14" id="header" style="min-width:20rem"><div class="flex justify-between items-center h-full w-full max-w-1280"><div class="h-8 w-8 lg:h-10 lg:w-32"><a class="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold" href="/"><img class="lg:hidden" src="/static/nav-logo@2x.png"/><img class="hidden lg:block" src="/static/nav-logo-full@2x.png"/></a></div><div class="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative"><div class="flex ml-10 space-x-5 w-full max-w-320" style="max-width:26rem"><div class="relative"><div class="flex items-center"><button class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px border-none flex items-center hover:cursor-pointer " tabindex="0"><span class="">文档</span></button></div><div class="hidden fixed left-0 overflow-y-scroll overflow-x-hidden border-gray-80 border-gray-40 min-w-320 w-full h-full bg-white sm:overflow-y-auto sm:bg-transparent sm:h-auto sm:justify-center sm:rounded-bl-xl sm:rounded-br-xl sm:shadow" style="margin-top:1rem"><div class="w-full"><div class="relative w-full bg-white pb-32 min-h-full sm:pb-0 text-gray-60 text-14 rounded-bl-xl rounded-br-xl"><div class="flex justify-center"><div class="w-full sm:grid sm:grid-cols-3 max-w-1280"><div class="flex px-4 sm:justify-center border-r border-gray-10 pt-8 pb-10"><div><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">快速跳转</div><div><ul class="space-y-2 ml-2 mt-6"><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/introduction">概览</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/overview">语言特性</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/embed-raw-javascript">与 JS 互操作</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/build-overview">构建系统</a></li></ul></div></div></div><div class="flex px-4 sm:h-full sm:justify-center border-r border-gray-10 pt-8"><div class="w-full pb-16" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Documentation</div><div><div class="mt-6"><a class="" href="/docs-cn/manual/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_manual@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语言手册</span></div><div class="block text-14 text-gray-60 text-gray-60">所有的语言特性的参考指南</div></div></div></a><a class="" href="/docs/react/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_rescript_react@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>ReScript & React</span></div><div class="block text-14 text-gray-60 text-gray-60">ReactJS 的一等公民绑定</div></div></div></a><a class="" href="/docs/gentype/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_gentype@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>GenType</span></div><div class="block text-14 text-gray-60 text-gray-60">无缝衔接 TypeScript & Flow 集成</div></div></div></a><a class="" href="https://github.com/reason-association/reanalyze" rel="noopener noreferrer"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_reanalyze@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>Reanalyze</span><svg class="stroke-current inline-block ml-2 w-4 h-4" height="16" width="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"></path></svg></div><div class="block text-14 text-gray-60 text-gray-60">死代码消除 & 停机分析</div></div></div></a></div></div></div></div><div class="flex px-4 sm:h-full sm:justify-center pb-12 pt-8 pb-10"><div class="w-full" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Exploration</div><div class="mt-6"><a class="" href="/syntax-lookup"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><div class="-mr-2 flex w-6 h-6 justify-center items-center"><img class="w-4 h-4" src="/static/ic_search.svg"/></div><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语法查找</span></div><div class="block text-14 text-gray-60 text-gray-60">探索所有语法结构</div></div></div></a></div></div></div></div></div><img class="hidden xl:block absolute bottom-0 right-0" style="max-width:27.8rem" src="/static/illu_index_rescript@2x.png"/></div></div></div></div><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/docs-cn/manual/latest/api">API</a><a class="hidden xs:block no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></div><div class="hidden md:flex items-center"><div class="hidden sm:block mr-6"><div class=" bg-gray-100 border border-gray-70 hover:text-white hover:cursor-pointer flex justify-center p-2 px-3 rounded-lg"><input type="text" class="transition-all ease-in-out duration-150 text-white bg-gray-100 border-none focus:outline-none w-0" id="docsearch"/><svg class="stroke-current text-gray-60 w-5 h-5" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg></div></div><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" height="17.79" width="18.236" viewBox="0 0 18.236 17.79"><g transform="translate(8 -5.365)"><path d="M17.013,9.906a9.078,9.078,0,0,0-3.318-3.318A8.918,8.918,0,0,0,9.118,5.365,8.919,8.919,0,0,0,4.541,6.588,9.077,9.077,0,0,0,1.223,9.906,8.919,8.919,0,0,0,0,14.483a8.861,8.861,0,0,0,1.739,5.36,8.93,8.93,0,0,0,4.493,3.294.531.531,0,0,0,.475-.083.464.464,0,0,0,.154-.356q0-.036-.006-.641T6.85,21l-.273.047a3.484,3.484,0,0,1-.659.042,5.02,5.02,0,0,1-.825-.083,1.844,1.844,0,0,1-.8-.356,1.506,1.506,0,0,1-.522-.73l-.119-.273a2.966,2.966,0,0,0-.374-.605,1.432,1.432,0,0,0-.516-.451l-.083-.06a.871.871,0,0,1-.154-.143.651.651,0,0,1-.107-.166q-.036-.083.059-.137a.77.77,0,0,1,.344-.053l.237.035a1.733,1.733,0,0,1,.588.285,1.916,1.916,0,0,1,.576.617,2.093,2.093,0,0,0,.659.742,1.4,1.4,0,0,0,.778.255,3.376,3.376,0,0,0,.677-.059,2.362,2.362,0,0,0,.534-.178,1.924,1.924,0,0,1,.582-1.223,8.129,8.129,0,0,1-1.217-.214,4.845,4.845,0,0,1-1.116-.463,3.2,3.2,0,0,1-.956-.8,3.822,3.822,0,0,1-.623-1.247A5.928,5.928,0,0,1,3.3,14.007a3.463,3.463,0,0,1,.938-2.446A3.192,3.192,0,0,1,4.321,9.14a1.664,1.664,0,0,1,1.021.16,7.138,7.138,0,0,1,.991.457q.315.19.5.321a8.574,8.574,0,0,1,4.559,0l.451-.285a6.389,6.389,0,0,1,1.092-.522,1.556,1.556,0,0,1,.962-.13A3.161,3.161,0,0,1,14,11.562a3.463,3.463,0,0,1,.938,2.446,5.994,5.994,0,0,1-.243,1.787,3.674,3.674,0,0,1-.629,1.247,3.319,3.319,0,0,1-.962.789,4.855,4.855,0,0,1-1.116.463,8.121,8.121,0,0,1-1.217.214,2.115,2.115,0,0,1,.617,1.686v2.5a.473.473,0,0,0,.149.356.516.516,0,0,0,.469.083A8.929,8.929,0,0,0,16.5,19.842a8.863,8.863,0,0,0,1.739-5.36A8.926,8.926,0,0,0,17.013,9.906Z" transform="translate(-8 0)"></path></g></svg></a><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://twitter.com/rescriptlang" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 15.53 12.71"><path d="M5.794,12.711a13.325,13.325,0,0,1-2.058-.163A9.659,9.659,0,0,1,.92,11.523L0,11.02l1-.328c1.089-.358,1.751-.58,2.571-.928A3.421,3.421,0,0,1,1.809,7.726l-.232-.7.19.029a3.456,3.456,0,0,1-.433-.534A3.276,3.276,0,0,1,.779,4.57l.044-.614L1.19,4.1a3.437,3.437,0,0,1-.333-.934A3.552,3.552,0,0,1,1.235.774l.32-.588L1.984.7A7.883,7.883,0,0,0,7.091,3.575a3.054,3.054,0,0,1,.185-1.623A3.038,3.038,0,0,1,8.511.536,3.71,3.71,0,0,1,10.664.008a3.439,3.439,0,0,1,2.114.872,7.1,7.1,0,0,0,.774-.258c.17-.064.362-.136.6-.219L15.042.1l-.579,1.652.119-.008L15.53,1.7l-.56.765c-.032.044-.04.056-.052.073-.045.068-.1.153-.87,1.179a1.448,1.448,0,0,0-.271.943,8.916,8.916,0,0,1-.487,3.586,6.346,6.346,0,0,1-1.7,2.524,7.524,7.524,0,0,1-3.566,1.724A10.979,10.979,0,0,1,5.794,12.711Zm0,0" transform="translate(0 -0.001)"></path></svg></a><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://forum.rescript-lang.org" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 24 24"><path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 00-6.337 3.57 7.247 7.247 0 00-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 008.136-1.39 7.256 7.256 0 001.737-7.997 7.375 7.375 0 00-6.84-4.585h-.008z"></path></svg></a></div></div></div><button class="h-full px-4 xs:hidden flex items-center hover:text-white"><svg class="fill-current h-1 w-auto block text-gray-60" height="4" width="22" stroke="none" viewBox="0 0 22 4"><circle cx="2" cy="2" r="2"></circle><circle cx="2" cy="2" r="2" transform="translate(9)"></circle><circle cx="2" cy="2" r="2" transform="translate(18)"></circle></svg></button><div class="hidden sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between" style="min-width:20rem;top:4rem"><div class="border-gray-80 border-t"><ul><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><div class="opacity-75 hover:text-white hover:cursor-pointer bg-gray-80 flex items-center p-2 px-3 rounded"><svg class="stroke-current w-5 h-5 mr-3" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg><input type="text" class="w-32 bg-gray-80 focus:outline-none " id="docsearch-mobile"/></div></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="text-inherit font-medium text-fire-30 border-b border-fire" href="/blog">Blog</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://twitter.com/rescriptlang" rel="noopener noreferrer">Twitter</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer">GitHub</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://forum.rescript-lang.org" rel="noopener noreferrer">Forum</a></li></ul></div></div></nav><div class="hidden z-40 bg-gray-10-tr w-full h-full bottom-0" style="backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)"></div><div class="flex xs:justify-center overflow-hidden pb-48"><main class="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280 "><div class="flex justify-center"><div class="max-w-740 w-full"><h1 class="hl-1 mb-6 ">Blogpost Guide</h1><div class="text-24 mt-8 mb-4">Here you can find all the information needed to write and publish a new blog post on rescript-lang.org.</div><h2 class="group mt-16 mb-3 hl-3">Requirements<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#requirements"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="requirements" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Clone the <a class="no-underline text-fire hover:underline" href="https://github.com/reason-association/rescript-lang.org" rel="noopener noreferrer">rescript-lang.org repo</a> and follow the README instructions to run the local development server.</p><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Open the <a class="no-underline text-fire hover:underline" href="/blog" rel="noopener noreferrer">localhost:3000/blog</a> page to see the blog page.</p><h2 class="group mt-16 mb-3 hl-3">Create a new file<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#create-a-new-file"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="create-a-new-file" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Blogposts are located in the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">./_blogposts</code> directory. File name starts with the date to maintain a natural sort order:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text ">_blogposts/YYYY-MM-DD-[title].mdx
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">For example, let's create a new file:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30">SH</div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-sh ">touch _blogposts/2020-01-30-my-new-blog-post.mdx
</code></div></div></div></pre><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Refresh your browser within <a class="no-underline text-fire hover:underline" href="/blog" rel="noopener noreferrer">/blog</a>. You should now see a warning for some malformed frontmatter data. Let's fix this!</p><h2 class="group mt-16 mb-3 hl-3">Add Frontmatter Data<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#add-frontmatter-data"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="add-frontmatter-data" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Each blogpost requires a certain set of meta information (so called
"frontmatter"), otherwise it can't be displayed in the blog.</p><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">Frontmatter is put <strong class="font-semibold">on the top of your file</strong>. Here is a fully working example
of all available attributes:</p><pre class="mt-2 mb-4 -mx-6 xs:mx-0 block"><div class="md-code font-mono w-full block mt-5 mb-5"><div class="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-20 bg-gray-10 py-2 text-gray-80"><div class="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"></div><div class="px-5 text-14 pt-4 pb-2 overflow-x-auto -mt-2"><code class="hljs lang-text ">---
author: hongbo
co-authors:
- chenglou
- ryyppy
date: "2017-10-01"
previewImg:
badge: release
title: Bloomberg announces BuckleScript 1.0
description: |
some multiline
description
---
</code></div></div></div></pre><ul class="md-ul mt-12 mb-16"><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">author</code>: An author alias as defined in <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">./data/blog_authors.json</code></p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">co-authors</code>: A list of co-author aliases (same aliases allowed as in the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">author</code> field)</p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">date</code>: A <strong class="font-semibold">string</strong> date (always make sure to use the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">"</code>, otherwise yaml
will parse it as a <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">date</code>). The date format is <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">"YYYY-MM-DD hh:mm"</code>. All blog
posts are ordered ascending by date.</p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">previewImg</code>: The image shown in the blog overview, which will also be used
as a link preview image</p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">badge</code>: An additional badge on the blog, on top of the preview image.
Available values are <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">release</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">testing</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">preview</code>, <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">roadmap</code></p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">title</code>: The title of the article (h1 headline)</p></li><li class="md-li mt-3 leading-4 ml-2"><p><code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">description</code>: A description, which will be shown in the Featured blog post
in the blog overview, and also as an introductory text in the blog article</p></li></ul><blockquote class="md-blockquote"><div class="infobox my-5 py-6 pl-8 pr-10 rounded-lg bg-sky-5"><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16"><strong class="font-semibold">For Maintainers:</strong> The implementation for the frontmatter logic can be found in the
<code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">common/BlogFrontmatter.res</code> module.</p></div></blockquote><h3 class="group mt-8 mb-1 hl-4">Writing Markdown Content<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#writing-markdown-content"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="writing-markdown-content" style="position:absolute;top:-7rem"></a></span></span></h3><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">You can use all the markdown features available to this documentation platform.</p><div class="md-url-box text-16 border-l-2 border-gray-60 my-6 py-6 pl-8 pr-10 bg-gray-5"><p><img class="mr-2 inline-block" src="/static/hyperlink.svg"/>Check out our markdown guide to get an overview
over all available UI components.</p><div class="mt-4 text-sky hover:text-sky-30"><a class="flex items-center" href="/markdown-guide">Markdown Guide<svg class="fill-current ml-1" height="11.769" width="18" viewBox="0 0 18 11.769"><defs><clipPath id="prefix__a"><path clip-rule="evenodd" d="M12.121-16.823a.67.67 0 00-.907 0 .566.566 0 000 .835l4.6 4.277H.635A.611.611 0 000-11.12a.617.617 0 00.635.6h15.179l-4.6 4.269a.576.576 0 000 .844.67.67 0 00.907 0L17.81-10.7a.553.553 0 000-.835z" fill="current" transform="translate(0 17)"></path></clipPath><clipPath id="prefix__b"><path class="prefix__b" d="M-297 336.231h747.692V-534H-297z" transform="translate(297 534)"></path></clipPath></defs><g clip-path="url(#prefix__a)"><g clip-path="url(#prefix__b)" transform="translate(-205.615 -357.923)"><path class="prefix__b" d="M202.154 354.462h24.923v18.692h-24.923z"></path></g></g></svg></a></div></div><h2 class="group mt-16 mb-3 hl-3">Special <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">_blogposts/archive</code> directory<span class="ml-2"><span class="inline group relative"><a class="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible" href="#special-_blogpostsarchive-directory"><svg class="fill-current inline-block align-middle text-gray-40" height="0.8em" width="0.8em" viewBox="0 0 20.003 19.944"><path d="M11.927 7.908a4.819 4.819 0 00-3.968-1.3 5.091 5.091 0 00-2.921 1.508L1.47 11.684a4.82 4.82 0 00.192 7.122 4.994 4.994 0 006.76-.4l3.7-3.776a.109.109 0 00-.067-.184s-.649.029-1.132.006a10.116 10.116 0 01-1.35-.226.308.308 0 00-.243.088l-2.529 2.609a2.733 2.733 0 01-3.583.319 2.64 2.64 0 01-.247-3.951l3.755-3.753a2.7 2.7 0 013.654-.073.108.108 0 00.15 0l1.4-1.4a.114.114 0 00-.003-.157z"></path><path d="M8.076 12.036a4.822 4.822 0 003.967 1.3 5.089 5.089 0 002.922-1.509l3.568-3.568a4.818 4.818 0 00-.192-7.121 5 5 0 00-6.761.4l-3.7 3.777a.108.108 0 00.067.183s.648-.028 1.132-.006a10.151 10.151 0 011.35.226.3.3 0 00.243-.088l2.529-2.608a2.732 2.732 0 013.581-.319 2.638 2.638 0 01.249 3.95l-3.755 3.754a2.706 2.706 0 01-3.654.073.107.107 0 00-.15 0l-1.4 1.4a.113.113 0 00.004.156z"></path></svg></a><a id="special-_blogpostsarchive-directory" style="position:absolute;top:-7rem"></a></span></span></h2><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">All blog posts that are put into the <code class="md-inline-code px-2 py-0.5 text-14 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">_blogposts/archive</code> directory will be flagged as <em>archived</em> and not show up on the blog overview page.</p><p class="md-p md:leading-5 tracking-[-0.015em] text-gray-80 md:text-16">We keep this directory around to hide old blog posts.</p></div></div></main></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/blogpost-guide","query":{},"buildId":"azkpStclBMlbyu6nwP73h","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/_next/static/chunks/polyfills-9def993fe817cc057038.js"></script><script src="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" async=""></script><script src="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" async=""></script><script src="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" async=""></script><script src="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" async=""></script><script src="/_next/static/chunks/pages/blogpost-guide-b5808881936a51860fe8.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_buildManifest.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_ssgManifest.js" async=""></script><script async="" defer="" src="https://scripts.simpleanalyticscdn.com/latest.js"></script><noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/></noscript></body></html>