var Component=(()=>{var ie=Object.create;var g=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var le=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var de=(a,e)=>()=>(a&&(e=a(a=0)),e);var pe=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var s in e)g(a,s,{get:e[s],enumerable:!0})},x=(a,e,s,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of re(e))!ce.call(a,p)&&p!==s&&g(a,p,{get:()=>e[p],enumerable:!(d=se(e,p))||d.enumerable});return a};var he=(a,e,s)=>(s=a!=null?ie(le(a)):{},x(e||!a||!a.__esModule?g(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>x(g({},"__esModule",{value:!0}),a);var v={};k(v,{Children:()=>ue,Component:()=>fe,Fragment:()=>ve,Profiler:()=>_e,PureComponent:()=>Me,StrictMode:()=>Fe,Suspense:()=>Ie,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:()=>Ze,cloneElement:()=>ge,createContext:()=>ye,createElement:()=>be,createFactory:()=>ke,createRef:()=>xe,default:()=>me,forwardRef:()=>we,isValidElement:()=>Ne,lazy:()=>Ce,memo:()=>je,startTransition:()=>Se,useCallback:()=>Oe,useContext:()=>De,useDebugValue:()=>Le,useDeferredValue:()=>Te,useEffect:()=>Pe,useId:()=>Ee,useImperativeHandle:()=>Re,useInsertionEffect:()=>Ae,useLayoutEffect:()=>Xe,useMemo:()=>Be,useReducer:()=>We,useRef:()=>He,useState:()=>Ve,useSyncExternalStore:()=>qe,useTransition:()=>ze});var me,ue,ge,fe,ye,be,ke,xe,we,ve,Ne,Ce,je,_e,Me,Se,Fe,Ie,Oe,De,Le,Te,Pe,Ee,Re,Ae,Xe,Be,We,He,Ve,qe,ze,Ze,N=de(()=>{me=React,{Children:ue,cloneElement:ge,Component:fe,createContext:ye,createElement:be,createFactory:ke,createRef:xe,forwardRef:we,Fragment:ve,isValidElement:Ne,lazy:Ce,memo:je,Profiler:_e,PureComponent:Me,startTransition:Se,StrictMode:Fe,Suspense:Ie,useCallback:Oe,useContext:De,useDebugValue:Le,useDeferredValue:Te,useEffect:Pe,useId:Ee,useImperativeHandle:Re,useInsertionEffect:Ae,useLayoutEffect:Xe,useMemo:Be,useReducer:We,useRef:He,useState:Ve,useSyncExternalStore:qe,useTransition:ze,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Ze}=React});var j=pe(f=>{"use strict";var Ye=(N(),w(v)),Ge=Symbol.for("react.element"),Ue=Symbol.for("react.fragment"),Ke=Object.prototype.hasOwnProperty,Je=Ye.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Qe={key:!0,ref:!0,__self:!0,__source:!0};function C(a,e,s){var d,p={},u=null,b=null;s!==void 0&&(u=""+s),e.key!==void 0&&(u=""+e.key),e.ref!==void 0&&(b=e.ref);for(d in e)Ke.call(e,d)&&!Qe.hasOwnProperty(d)&&(p[d]=e[d]);if(a&&a.defaultProps)for(d in e=a.defaultProps,e)p[d]===void 0&&(p[d]=e[d]);return{$$typeof:Ge,type:a,key:u,ref:b,props:p,_owner:Je.current}}f.Fragment=Ue;f.jsx=C;f.jsxs=C});var gn={};k(gn,{default:()=>un,meta:()=>hn});var _=he(j()),{jsx:n,jsxs:t,Fragment:r}=_.default;var{MDXContext:kn,MDXProvider:xn,useMDXComponents:o,withMDXComponents:wn}=__motif_mdx_react;var{DateTime:y,Duration:Nn,FixedOffsetZone:Cn,IANAZone:jn,Info:_n,Interval:Mn,InvalidZone:Sn,Settings:Fn,SystemZone:In,VERSION:On,Zone:Dn}=__motif_luxon;var m=({meta:a,children:e})=>{let s=Object.assign({div:"div",img:"img",iframe:"iframe"},o()),d;try{d=a?.date&&y.fromISO(a?.date).toLocaleString(y.DATE_FULL)}catch{}return n(s.div,{class:"border-t border-gray-100 pt-12 mt-20 prose w-full max-w-full antialiased",children:n(s.div,{class:"flex mx-4 justify-center antialiased",children:t(s.div,{class:"w-full max-w-screen-lg grid sm:grid-cols-5 gap-8 mx-8 sm:mx-8",children:[n(s.div,{class:"text-gray-400 mt-8",children:d||""}),t(s.div,{class:"col-span-4 mr-0 sm:mr-16",children:[a?.coverImage&&n(s.img,{class:"rounded-lg",src:a.coverImage}),a?.coverVideo&&n(s.div,{className:"mt-8 relative rounded-lg overflow-hidden w-full h-[320px] mb-8",children:n(s.iframe,{width:"100%",height:"320",src:a.coverVideo,title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0})}),e]})]})})})};var S={date:"2022-10-29",coverImage:"https://res.cloudinary.com/djp21wtxm/image/upload/v1637259552/multiplayer_bav6wx.gif"};function M(a){let e=Object.assign({h4:"h4",p:"p",strong:"strong"},o(),a.components);return t(r,{children:[n(e.h4,{id:"introducing-real-time-multiplayer",children:"Introducing Real-Time Multiplayer"}),` `,t(e.p,{children:["Motif is about bridging the gap between developers and non-developers, and bringing everyone on the same page to meaningfully and productively collaborate on content. That's why we are thrilled to announce today the introduction of ",n(e.strong,{children:"real-time multiplayer"}),". By leveraging state-of-the-art technologies like ",n("a",{href:"https://yjs.dev/",target:"_blank",children:"Y.js"})," and ",n("a",{href:"https://webrtc.org/",children:"WebRTC"}),", Motif now allows you to seamlessly edit pages with as many collaborators as you want, at the same time. It even works when you are ",n(e.strong,{children:"offline"}),"."]})]})}function $e(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(M,a)})):M(a)}var F=$e;var O={date:"2221-08-13",coverVideo:"https://www.youtube.com/embed/1RP9yX0OHKA"};function I(a){let e=Object.assign({h4:"h4",p:"p",code:"code",pre:"pre",span:"span",a:"a",ul:"ul",li:"li"},o(),a.components);return t(r,{children:[n(e.h4,{id:"introducing-the-motif-platform-api",children:"Introducing the Motif Platform API"}),` `,t(e.p,{children:["The Motif Platform API gives you access to the Motif platform, such as projects and pages, via a simple HTTP endpoint. For instance, fetch a list of pages within a project using the ",n(e.code,{children:"/v1/projects/:id"})," request:"]}),` `,n(e.pre,{className:"language-bash",children:t(e.code,{className:"language-bash",children:[n(e.span,{className:"token function",children:"curl"})," ",n(e.span,{className:"token string",children:'"https://api.motif.land/v1/projects/a-page-id"'})," ",n(e.span,{className:"token punctuation",children:"\\"}),` -H `,n(e.span,{className:"token string",children:'"Authorization: Bearer "'}),` `]})}),` `,n(e.p,{children:"The API also exposes your pages as ES modules, so that you can reuse them across any JavaScript project that supports ES modules, for instance:"}),` `,n(e.pre,{className:"language-jsx",children:t(e.code,{className:"language-jsx",children:[n(e.span,{className:"token keyword module",children:"import"})," ",t(e.span,{className:"token imports",children:[n(e.span,{className:"token maybe-class-name",children:"Page"}),n(e.span,{className:"token punctuation",children:","})," ",n(e.span,{className:"token punctuation",children:"{"})," meta ",n(e.span,{className:"token punctuation",children:"}"})]})," ",n(e.span,{className:"token keyword module",children:"from"})," ",n(e.span,{className:"token string",children:'"https://api.motif.land/v1/pages/esm/a-page-id"'}),` `,n(e.span,{className:"token keyword",children:"const"})," ",n(e.span,{className:"token function-variable function",children:n(e.span,{className:"token maybe-class-name",children:"Component"})})," ",n(e.span,{className:"token operator",children:"="})," ",n(e.span,{className:"token punctuation",children:"("}),n(e.span,{className:"token punctuation",children:")"})," ",n(e.span,{className:"token arrow operator",children:"=>"})," ",n(e.span,{className:"token punctuation",children:"{"}),` `,n(e.span,{className:"token console class-name",children:"console"}),n(e.span,{className:"token punctuation",children:"."}),n(e.span,{className:"token method function property-access",children:"log"}),n(e.span,{className:"token punctuation",children:"("}),n(e.span,{className:"token string",children:'"Meta"'}),n(e.span,{className:"token punctuation",children:","})," ",n(e.span,{className:"token known-class-name class-name",children:"JSON"}),n(e.span,{className:"token punctuation",children:"."}),n(e.span,{className:"token method function property-access",children:"stringify"}),n(e.span,{className:"token punctuation",children:"("}),"meta",n(e.span,{className:"token punctuation",children:")"}),n(e.span,{className:"token punctuation",children:")"}),` `,n(e.span,{className:"token keyword control-flow",children:"return"})," ",t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),n(e.span,{className:"token class-name",children:"Page"})]})," ",n(e.span,{className:"token punctuation",children:"/>"})]}),` `,n(e.span,{className:"token punctuation",children:"}"}),` `,n(e.span,{className:"token keyword module",children:"export"})," ",n(e.span,{className:"token keyword module",children:"default"})," ",n(e.span,{className:"token maybe-class-name",children:"Component"}),` `]})}),` `,n(e.h4,{id:"generate-page-indexes",children:"Generate page indexes"}),` `,t(e.p,{children:["You can now automatically build an index of pages, for instance for your blog, by using the ",n(e.code,{children:"files"}),' value passed in a template. Learn more about this in the "Generate an Index of Pages" guide.']}),` `,n(e.h4,{id:"syntax-highlighting-with-prism-js",children:"Syntax highlighting with Prism JS"}),` `,t(e.p,{children:["Code blocks, delimited by ```, will now be parsed with the ",n(e.a,{href:"https://prismjs.com/",children:"Prism JS"})," tokenizer, which allows you to beautifully highlight it. You can customize the colors in your ",n(e.code,{children:"main.css"})," file, as explained in the guide on syntax highlighting."]}),` `,n(e.pre,{className:"language-html",children:t(e.code,{className:"language-html",children:[n(e.span,{className:"token comment",children:""}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",n(e.span,{className:"token attr-name",children:"class"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4",n(e.span,{className:"token punctuation",children:'"'})]}),n(e.span,{className:"token punctuation",children:">"})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",n(e.span,{className:"token attr-name",children:"class"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"flex-shrink-0",n(e.span,{className:"token punctuation",children:'"'})]}),n(e.span,{className:"token punctuation",children:">"})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"img"]})," ",n(e.span,{className:"token attr-name",children:"class"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"h-12 w-12",n(e.span,{className:"token punctuation",children:'"'})]})," ",n(e.span,{className:"token attr-name",children:"src"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"/img/logo.svg",n(e.span,{className:"token punctuation",children:'"'})]})," ",n(e.span,{className:"token attr-name",children:"alt"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"ChitChat Logo",n(e.span,{className:"token punctuation",children:'"'})]}),n(e.span,{className:"token punctuation",children:">"})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:""})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"div"]}),n(e.span,{className:"token punctuation",children:">"})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",n(e.span,{className:"token attr-name",children:"class"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"text-xl font-medium text-black",n(e.span,{className:"token punctuation",children:'"'})]}),n(e.span,{className:"token punctuation",children:">"})]}),"ChitChat",t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:""})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),"p"]})," ",n(e.span,{className:"token attr-name",children:"class"}),t(e.span,{className:"token attr-value",children:[n(e.span,{className:"token punctuation attr-equals",children:"="}),n(e.span,{className:"token punctuation",children:'"'}),"text-gray-500",n(e.span,{className:"token punctuation",children:'"'})]}),n(e.span,{className:"token punctuation",children:">"})]}),"You have a new message!",t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:""})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:""})]}),` `,t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:""})]}),` `]})}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Improve public page indicator"}),` `,n(e.li,{children:"Improve linking to community resources"}),` `,n(e.li,{children:"Improve support for dynamic page metadata"}),` `]})]})}function en(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(I,a)})):I(a)}var D=en;var L=a=>{let e=Object.assign({div:"div"},o());return t(e.div,{className:"flex align-center items-start bg-lightBlue-50 text-lightBlue-700 rounded-md p-4 m-0 leading-relaxed text-[15px]",children:[n(nn,{className:"w-6 h-6 mr-3 flex-none mt-[2px] text-lightBlue-400"}),n(e.div,{children:a.children})]})},nn=({className:a})=>{let e=Object.assign({svg:"svg",path:"path"},o());return n(e.svg,{className:a,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:n(e.path,{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})};var T=({className:a,width:e,height:s,viewBox:d,strokeWidth:p})=>{let u=Object.assign({svg:"svg",path:"path",rect:"rect"},o());return t(u.svg,{className:a,width:e||"30",height:s||"30",viewBox:d||"0 0 30 30",fill:"currentColor",strokeWidth:p||1.5,children:[n(u.path,{d:"M6 10C6 8.89543 6.89543 8 8 8H13V22H8C6.89543 22 6 21.1046 6 20V10Z",fill:"#D4D4D4",stroke:"#A3A3A3"}),n(u.rect,{x:"6",y:"8",width:"18",height:"14",rx:"2",fill:"none",stroke:"#A3A3A3"})]})};var i=({symbol:a,variable:e})=>{let s=Object.assign({div:"div"},o());return n(s.div,{className:`inline-block items-center text-center justify-center h-5 bg-gray-100 border border-gray-300 rounded text-gray-500 text-xs font-medium select-none ${e?"px-1":"w-5"}`,children:n(s.div,{style:{marginTop:-1},class:"w-full h-full flex items-center align-center justify-center",children:a})})},l=()=>n(i,{variable:!1,symbol:"\u2318"}),c=()=>n(i,{variable:!0,symbol:"Ctrl"});var h=()=>n(i,{variable:!1,symbol:"\u21E7"}),P=()=>{let a=Object.assign({div:"div"},o());return n(a.div,{class:"inline-block rounded-full bg-black text-white w-5 h-5",children:n(a.div,{class:"flex w-full h-full justify-center align-center",style:{marginTop:-4},children:" ?"})})},E=({className:a,children:e})=>{let s=Object.assign({span:"span"},o());return n(s.span,{className:`text-xs font-semibold rounded-full px-2 py-1 not-italic ${a}`,children:e})};var A={date:"2022-07-20",coverImage:"https://res.cloudinary.com/djp21wtxm/image/upload/v1627604062/Screen_Shot_2021-07-30_at_2.11.21_AM-min_g87atv.png"};function R(a){let e=Object.assign({h4:"h4",p:"p",em:"em",ul:"ul",li:"li"},o(),a.components);return t(r,{children:[n(e.h4,{id:"instant-search",children:"Instant search"}),` `,t(e.p,{children:["By hitting the ",n(l,{})," ",n(i,{symbol:"P"})," key (",n(c,{})," ",n(i,{symbol:"P"})," on PC), you can bring up the new instant search dialog, which allows you to quickly navigate through your files."]}),` `,n(e.h4,{id:"markdown-import",children:"Markdown import"}),` `,n(e.p,{children:"You can now easily import all your Markdown files into the pages folder of your project. Head over to the project settings, and navigate to the Import tab."}),` `,n(e.h4,{id:"pause-publishing",children:"Pause publishing"}),` `,t(e.p,{children:[`By default, when marking a page as "Public" via the Share menu, all subsequent changes are automatically published. Now, if you don't want your content to be instantly published (for instance while working on a draft), you can hit the "Pause publishing" toggle in the Share menu. Only when untoggled will publishing be resumed. `,t(e.em,{children:["This is a feature of the ",n(E,{className:"bg-cyan-50 text-cyan-700",children:"Pro"})," plan."]})]}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Syntax highlighting"}),` `,n(e.li,{children:"Recover deleted files"}),` `,n(e.li,{children:"Reorder tabs"}),` `,n(e.li,{children:"Improved file tree UX"}),` `,n(e.li,{children:"Improved version history"}),` `,n(e.li,{children:"Prevent accidental deletes of spaces and projects"}),` `,t(e.li,{children:["Full screen preview ",n(l,{})," ",n(i,{symbol:"\\"})," (Mac) / ",n(c,{})," ",n(i,{symbol:"\\"})," (PC)"]}),` `,t(e.li,{children:["Full screen editor ",n(l,{})," ",n(h,{})," ",n(i,{symbol:"\\"})," (Mac) / ",n(c,{})," ",n(h,{})," ",n(i,{symbol:"\\"})," (PC)"]}),` `,n(e.li,{children:"Toggle editor and preview"}),` `,n(e.li,{children:"Improved error handling with line numbers"}),` `]}),` `,n(e.h4,{id:"bug-fixes",children:"Bug fixes"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Fix Safari bug causing file tree to be non-editable"}),` `,n(e.li,{children:"Fix guest access bug causing guests to not see pages with templates"}),` `]}),` `]})}function tn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(R,a)})):R(a)}var X=tn;var W={date:"2022-06-28",coverVideo:"https://www.youtube.com/embed/m3xQPdrTvhA"};function B(a){let e=Object.assign({p:"p",h4:"h4",code:"code",strong:"strong",pre:"pre",span:"span",a:"a"},o(),a.components),{__motif_img__:s}=e;return s||on("__motif_img__",!0),t(r,{children:[n(e.p,{children:"Motif is all about bridging the gap between developer tools and no-code tools, and with this release, we are taking this a major step further on several fronts."}),` `,n(e.h4,{id:"projects-folders-and-tabs",children:"Projects, folders and tabs"}),` `,n(e.p,{children:"In addition to spaces, we are introducing projects, which allow you to better organize your content. Within one space, you can for instance have a project for your main website, your blog, a marketing experiment, documentation, shared notes, and so on. Each project has its own subdomain, and can be assigned its own custom domain. Also, instead of sharing single pages for others to reuse, you can now share an entire project."}),` `,n(e.p,{children:"Furthermore, we are making it easier to access your content, by putting all your project pages into the sidebar, and introducing folders to better organize them."}),` `,n(e.p,{children:"Finaly, we are introducing tabs, so that you can work on several open pages at the same time."}),` `,n("br",{}),` `,n(L,{children:"One important change is that the path of your pages are now determined by the page name, and the folder it's in. So for instance if you have a page named welcome within the blog folder, it will be accessible at the blog-slash-welcome path. So you no longer need to add a path entry to your page's metadata. If you want a title for your public webpage which is different from the file name, you can specify that in the metadata using the title key. If you want a page to be accessible without a path, simply name it Index. Don't worry, for all your pages with a custom path, we've migrated them to the new folder-based structure."}),` `,n(e.h4,{id:"templates",children:"Templates"}),` `,t(e.p,{children:["Many of you have been asking for the ability to create a design, and reuse it across multiple pages. Now, thanks to ES module imports, you can do just that. In your project's source (which you can access by tapping the down arrow next to the sidebar toggle ",n(T,{className:"inline-block mt-[-2px] mr-[-2px]"}),', and select "Source"), you will find a ',n(e.code,{children:"templates"})," folder holding your templates. These are pages that should export a default component to wrap your page content. Read more in the ",n(e.strong,{children:"Templates"})," guide."]}),` `,n(e.h4,{id:"es-module-support",children:"ES module support"}),` `,n(e.p,{children:"With ES module support, you can import your favorite JavaScript modules straight into a page, with no further setup. Simply include lines of the form"}),` `,n(e.pre,{className:"language-jsx",children:t(e.code,{className:"language-jsx",children:[n(e.span,{className:"token keyword module",children:"import"})," ",t(e.span,{className:"token imports",children:[n(e.span,{className:"token operator",children:"*"})," ",n(e.span,{className:"token keyword module",children:"as"})," d3"]})," ",n(e.span,{className:"token keyword module",children:"from"})," ",n(e.span,{className:"token string",children:'"d3"'}),` `,n(e.span,{className:"token keyword module",children:"import"})," ",t(e.span,{className:"token imports",children:[n(e.span,{className:"token maybe-class-name",children:"React"}),n(e.span,{className:"token punctuation",children:","})," ",n(e.span,{className:"token punctuation",children:"{"})," useState ",n(e.span,{className:"token punctuation",children:"}"})]})," ",n(e.span,{className:"token keyword module",children:"from"})," ",n(e.span,{className:"token string",children:'"react"'}),` `,n(e.span,{className:"token keyword module",children:"import"})," ",t(e.span,{className:"token imports",children:[n(e.span,{className:"token punctuation",children:"{"})," ",n(e.span,{className:"token maybe-class-name",children:"RadioGroup"})," ",n(e.span,{className:"token punctuation",children:"}"})]})," ",n(e.span,{className:"token keyword module",children:"from"})," ",n(e.span,{className:"token string",children:"'@headlessui/react'"}),` `]})}),` `,n(e.p,{children:"and use the modules just as you would in a classical Node-based application."}),` `,t(e.p,{children:["Similarly, content from your pages can be exported for other pages to reuse, such as a shared navigation bar, or a list of authors for your blog posts. For instance, here is a page named ",n(e.code,{children:"data"}),", located in a folder named ",n(e.code,{children:"assets"}),":"]}),` `,n(e.pre,{className:"language-jsx",children:t(e.code,{className:"language-jsx",children:[n(e.span,{className:"token keyword module",children:"export"})," ",n(e.span,{className:"token keyword",children:"const"})," authors ",n(e.span,{className:"token operator",children:"="})," ",n(e.span,{className:"token punctuation",children:"["}),` `,n(e.span,{className:"token punctuation",children:"{"}),` name`,n(e.span,{className:"token operator",children:":"})," ",n(e.span,{className:"token string",children:'"Hannah Nelson"'}),n(e.span,{className:"token punctuation",children:","}),` twitter`,n(e.span,{className:"token operator",children:":"})," ",n(e.span,{className:"token string",children:'"Hannah_KL_Nelson"'}),` `,n(e.span,{className:"token punctuation",children:"}"}),n(e.span,{className:"token punctuation",children:","}),` `,n(e.span,{className:"token spread operator",children:"..."}),` `,n(e.span,{className:"token punctuation",children:"]"}),` `]})}),` `,t(e.p,{children:["Now, from any other page, import the ",n(e.code,{children:"authors"})," list by prepending the path with ",n(e.code,{children:"@"}),":"]}),` `,n(e.pre,{className:"language-jsx",children:t(e.code,{className:"language-jsx",children:[n(e.span,{className:"token keyword module",children:"import"})," ",t(e.span,{className:"token imports",children:[n(e.span,{className:"token punctuation",children:"{"})," authors ",n(e.span,{className:"token punctuation",children:"}"})]})," ",n(e.span,{className:"token keyword module",children:"from"})," ",n(e.span,{className:"token string",children:'"@assets/data"'}),` `,n(e.span,{className:"token punctuation",children:"{"})," authors",n(e.span,{className:"token punctuation",children:"."}),n(e.span,{className:"token method function property-access",children:"map"}),n(e.span,{className:"token punctuation",children:"("}),n(e.span,{className:"token punctuation",children:"("}),n(e.span,{className:"token parameter",children:"author"}),n(e.span,{className:"token punctuation",children:")"})," ",n(e.span,{className:"token arrow operator",children:"=>"})," ",t(e.span,{className:"token tag",children:[t(e.span,{className:"token tag",children:[n(e.span,{className:"token punctuation",children:"<"}),n(e.span,{className:"token class-name",children:"Card"})]})," ",n(e.span,{className:"token attr-name",children:"author"}),t(e.span,{className:"token script language-javascript",children:[n(e.span,{className:"token script-punctuation punctuation",children:"="}),n(e.span,{className:"token punctuation",children:"{"}),"author",n(e.span,{className:"token punctuation",children:"}"})]})," ",n(e.span,{className:"token punctuation",children:"/>"})]})," ",n(e.span,{className:"token punctuation",children:")"}),n(e.span,{className:"token punctuation",children:"}"}),` `]})}),` `,n(e.h4,{id:"tailwind-configuration-and-jit",children:"Tailwind configuration and JIT"}),` `,t(e.p,{children:["We now support a custom ",n(e.a,{href:"https://tailwindcss.com/docs/configuration",children:"Tailwind configuration"})," for you to include custom color palettes, typography, dimensions etc. in your Tailwind classes. Furthermore, Motif features the latest ",n(e.a,{href:"https://tailwindcss.com/docs/just-in-time-mode",children:"Tailwind compiler with JIT support"}),". So you will now see your style changes being applied in real time, with an optimized stylesheet. It also means that we now support Tailwind classes with custom values, such as ",n(e.code,{children:"bg-[#f0f]"})," or ",n(e.code,{children:"my-[97px]"}),", which is convenient for very specific, on-off use cases."]}),` `,n(e.h4,{id:"global-stylesheet",children:"Global stylesheet"}),` `,t(e.p,{children:["In the ",n(e.code,{children:"styles"})," folder, you will find a ",n(e.code,{children:"main.css"})," file, allowing you to create project-wide CSS to be applied to all your pages. This is a convenient place to include things that are currently cumbersome to do in Tailwind, such as keyframe animations."]}),` `,n(e.h4,{id:"speed-reaching-near-perfect-lighthouse-scores",children:"Speed: reaching near-perfect Lighthouse scores"}),` `,n(e.p,{children:"We have optimized the in-browser build process even further, to achieve near-perfect Lighthouse scores, which indicate among others how fast your pages are loading for your visitors. This is important for SEO and user experience."}),` `,n(s,{className:"max-w-sm w-full rounded-lg",src:"https://res.cloudinary.com/djp21wtxm/image/upload/v1625348970/yrpqswkfm4c3u9eidzps.png"}),` `]})}function an(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(B,a)})):B(a)}var H=an;function on(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}var q={date:"2221-03-09",coverImage:"https://res.cloudinary.com/djp21wtxm/image/upload/v1637262696/whyqsf0mytefgnkpg5wc.png"};function V(a){let e=Object.assign({h4:"h4",p:"p",code:"code",ul:"ul",li:"li",a:"a"},o(),a.components);return t(r,{children:[n(e.h4,{id:"introducing-the-pages-api-easily-generate-an-index-for-your-blog-or-book",children:"Introducing the Pages API: easily generate an index for your blog or book"}),` `,t(e.p,{children:["This is the beginning of a broad set of API functionalities for interacting with your own data. We introduce a ",n(e.code,{children:"usePages()"})," hook, which allows you to obtain a list of all the pages accessible to you or to viewers of your content. You can freely apply transformations to your page list, such as filtering by tag or public state, or sorting by publication date. This makes it easy for instance to create an auto-generated index of pages for your blog or book."]}),` `,n(e.h4,{id:"drag-and-drop",children:"Drag and drop"}),` `,n(e.p,{children:"You can drag and drop files and images into the editor. The assets will be uploaded to Motif, and corresponding content blocks will be inserted into your page at the position of the cursor."}),` `,n(e.h4,{id:"paste-rich-content-chrome-edge-brave-only",children:"Paste rich content (Chrome/Edge/Brave only)"}),` `,t(e.p,{children:["We are introducing rich copy-paste functionality. Using the ",n(l,{})," ",n(h,{})," ",n(i,{symbol:"V"})," (Mac) / ",n(c,{})," ",n(h,{})," ",n(i,{symbol:"V"})," (PC) shortcut, content (e.g. from a website) will be pasted preserving the formatting (links, images, headings, bold, etc.). You can even copy an image or any other file from your computer, and paste it into the editor, and Motif will take care of uploading the file and generating the corresponding block. Of course, if you wish to paste content but not preserve the formatting, use the usual ",n(l,{})," ",n(i,{symbol:"V"})," (Mac) / ",n(c,{})," ",n(i,{symbol:"V"})," (PC) shorctuts."]}),` `,n(e.p,{children:"Note that rich paste functionality is only available on Chrome, Edge and Brave. It is not yet supported on Safari and Firefox."}),` `,n(e.h4,{id:"new-guides",children:"New guides"}),` `,t(e.ul,{children:[` `,t(e.li,{children:[n(e.a,{href:"/community/guides/iqmxw2eh287pmjc2",children:"Metadata"}),". An overview of the currently supported metadata items."]}),` `,t(e.li,{children:[n(e.a,{href:"/community/guides/z1c45vp0z0a5x3zm",children:"Create an index of pages"}),". A guide on how to use the Pages API to create an index of pages, e.g. for your blog."]}),` `]}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Performance improvements for large page, by running the MDX transpiler in a background worker."}),` `,t(e.li,{children:["Auto-complete when a ",n(e.code,{children:""})," is entered."]}),` `,n(e.li,{children:"Bullet points are automatically indented."}),` `,n(e.li,{children:"Numbering in numbered lists is automatically incremented."}),` `,n(e.li,{children:"Improved line wrap behavior."}),` `,n(e.li,{children:"Adjust Motif footer logo to page color."}),` `,n(e.li,{children:"Access a template's source code without having to duplicate it."}),` `,t(e.li,{children:["New comment block ",n(e.code,{children:"{/**/}"}),"."]}),` `,n(e.li,{children:"New image block to add an image from a URL (rather than from the file picker)."}),` `,n(e.li,{children:"Version history is more fine-grained for snapshots closer to now."}),` `,t(e.li,{children:["Shortcut to create a link (Mac: ",n(l,{})," ",n(i,{symbol:"K"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"K"}),")."]}),` `,t(e.li,{children:["Shortcut to add a block (Mac: ",n(l,{})," ",n(h,{})," ",n(i,{symbol:"B"}),", Win/Linux: ",n(c,{})," ",n(h,{})," ",n(i,{symbol:"B"}),")."]}),` `,t(e.li,{children:["Shortcut to comment text (Mac: ",n(l,{})," ",n(i,{symbol:"/"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"/"}),")."]}),` `]}),` `,n(e.h4,{id:"bug-fixes",children:"Bug fixes"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Fix bug preventing to enter card details."}),` `,n(e.li,{children:"Fix version history stalling on documents with a lot of edits."}),` `,n(e.li,{children:"Fix Tailwind CSS colors."}),` `,n(e.li,{children:"Fix issue allowing you to register a custom domain even when it is registered elsewhere."}),` `,n(e.li,{children:"Fix clipboard permission issue on Firefox."}),` `]}),` `]})}function sn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(V,a)})):V(a)}var z=sn;var Y={date:"2022-02-16",coverImage:"https://res.cloudinary.com/djp21wtxm/image/upload/v1613512246/Templates_wfpsiy.png"};function Z(a){let e=Object.assign({h4:"h4",p:"p",a:"a",strong:"strong",code:"code",ul:"ul",li:"li"},o(),a.components);return t(r,{children:[n(e.h4,{id:"introducing-community-resources",children:"Introducing community resources"}),` `,t(e.p,{children:["We've added a new ",n(e.a,{href:"/community/templates",children:"Community"}),' section, available in your sidebar. This is the beginning of a centralized place to find and share already built-out content. You can now go to the Community section, find a template that fits your use case, and press the "Duplicate" button. This creates a copy in your current space, which you can then adjust to fit your needs. In addition, you can also turn any page into a template for others to duplicate and reuse. Simply press the "Share" button to open the Share menu and toggle on ',n(e.strong,{children:"Publish as template"}),"."]}),` `,n(e.h4,{id:"updated-guides",children:"Updated guides"}),` `,t(e.p,{children:["We've created a new ",n(e.a,{href:"/community/guides",children:"Guides"})," section, where, as part of the introduction of community resources, we have centralized all guides, tutorials and sample code, and created a series of new guides."]}),` `,n(e.h4,{id:"import-external-java-script-libraries",children:"Import external JavaScript libraries"}),` `,t(e.p,{children:["You can load external JavaScript libraries into your page. In that way, you can benefit from the resources built by the JavaScript community without requiring Motif to support them explicitly. For modern ES modules, use the async ",n(e.code,{children:"import"})," function. For libraries without ESM support, use the ",n(e.code,{children:"useScript"})," hook. Read more in the ",n(e.a,{href:"/community/guides/0uo2bbpbbstra6dt",children:"JavaScript import guide"}),"."]}),` `,n(e.h4,{id:"version-history",children:"Version history"}),` `,t(e.p,{children:["You can browse the full edit history of your page and restore previous versions of your content. Access it via the page settings menu \u2192 ",n(e.strong,{children:"Show version history"}),"."]}),` `,n(e.h4,{id:"keyboard-shortcuts",children:"Keyboard shortcuts"}),` `,t(e.p,{children:["We have introduced keyboard shortcuts to improve the typing experience, and to quickly perform actions that would typically require using the mouse/trackpad. For instance, you can now immediately preview your page in full screen, or go into distraction free writing. The shortcuts currently supported are listed in the Help menu, accessible via the ",n(P,{})," button at the bottom right of the app."]}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,t(e.li,{children:["Distraction-free mode (Mac: ",n(l,{})," ",n(h,{})," ",n(i,{symbol:"\\"}),", Win/Linux: ",n(c,{})," ",n(h,{})," ",n(i,{symbol:"\\"}),")."]}),` `,t(e.li,{children:["Instant full screen previews (Mac: ",n(l,{})," ",n(i,{symbol:"\\"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"\\"}),")."]}),` `,t(e.li,{children:["Keyboard navigation (Mac: ",n(l,{})," ",n(i,{symbol:"["})," and ",n(l,{})," ",n(i,{symbol:"]"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"["})," and ",n(c,{})," ",n(i,{symbol:"]"})," to navigate back and forward)."]}),` `,t(e.li,{children:["New ",n(e.code,{children:"useScrollPosition()"})," hook to track page scroll position, allowing for things like fade in animations and parallax effects. Read more in the ",n(e.a,{href:"/community/guides/wr4m4bsag80yfb4i",children:"Parallax tutorial"}),"."]}),` `,n(e.li,{children:"Speedier look and feel."}),` `,n(e.li,{children:"SEO and performance optimizations."}),` `,t(e.li,{children:["Support for ",n(e.code,{children:"aria-label"})," on links and ",n(e.code,{children:"alt"})," on images."]}),` `,n(e.li,{children:"Improved error handling in the page metadata."}),` `,n(e.li,{children:"Keep track of last cursor position within a page, and restore it upon reopening."}),` `,n(e.li,{children:"Improved scrolling for public pages (especially elastic scroll on mobile)."}),` `,n(e.li,{children:"More resilient handling of paths in page metadata."}),` `,n(e.li,{children:"Collapse sections in the code editor."}),` `]}),` `,n(e.h4,{id:"bug-fixes",children:"Bug fixes"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Fix link pre-fetching bug that caused some links to break for server-side rendered pages."}),` `,n(e.li,{children:"Fix bug causing spurious path conflict errors."}),` `,n(e.li,{children:"Fix background color issue when overscrolling on mobile."}),` `,n(e.li,{children:"Fix cursor glitch when opening a new page."}),` `]}),` `]})}function rn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(Z,a)})):Z(a)}var G=rn;var K={date:"2221-01-16",coverImage:"https://res.cloudinary.com/djp21wtxm/image/upload/v1637263107/gxxchfxlhiwy6ivtnero.png"};function U(a){let e=Object.assign({h4:"h4",p:"p",strong:"strong",a:"a",code:"code",ul:"ul",li:"li"},o(),a.components),{__motif_a__:s}=e;return s||cn("__motif_a__",!0),t(r,{children:[n(e.h4,{id:"new-pro-and-team-plans",children:"New Pro and Team plans"}),` `,t(e.p,{children:["You can get unbranded content or add additional team members to your spaces through our ",n(e.strong,{children:"Pro"})," or ",n(e.strong,{children:"Team"})," plans."]}),` `,n(e.h4,{id:"desktop-app",children:"Desktop app"}),` `,n(e.p,{children:'Motif is available as a desktop app! Open the space switcher, and you should see "Download desktop app" as an option.'}),` `,n("div",{class:"mt-8 flex justify-start",children:t("div",{children:[n(s,{href:"https://dl.todesktop.com/2012134t6as1nuw",class:"rounded-md px-4 py-3 bg-blueGray-900 hover:bg-black hover:shadow-lg transition text-white font-medium text-base no-underline",children:n(e.p,{children:"Download Motif for desktop"})}),n("p",{className:"italic text-gray-500 text-sm",children:"For Mac, Windows and Linux."})]})}),` `,n(e.h4,{id:"page-sharing-permissions",children:"Page sharing permissions"}),` `,t(e.p,{children:["Give individual users fine-grained permissions on your pages. Hit the ",n(e.strong,{children:"Share"})," button, invite people by email, and give them ",n(e.strong,{children:"view"}),", ",n(e.strong,{children:"edit"})," or ",n(e.strong,{children:"full"})," access."]}),` `,n(e.h4,{id:"user-management",children:"User management"}),` `,t(e.p,{children:["In the ",n(e.a,{href:"/settings/members",children:"Member settings"}),", you can assign roles, even for users who have not yet joined. You can also resend or cancel invitations, and remove members."]}),` `,n(e.p,{children:"In addition to invitation links, you can use email to invite others to collaborate on your space."}),` `,n(e.h4,{id:"google-analytics",children:"Google Analytics"}),` `,t(e.p,{children:["When hosting pages on a custom domain, you can track visits by providing a ",n(e.a,{href:"https://support.google.com/analytics/answer/9744165",children:"Google Analytics 4 property"})," using the ",n(e.code,{children:"gaMeasurementId"})," key (or ",n(e.code,{children:"gaTrackingId"})," for legacy configurations) in your page metadata. Read more on the ",n(e.a,{href:"/community/guides/br9upk8bsxdc1ajd",children:"Google Analytics guide"}),"."]}),` `,n(e.h4,{id:"sitemaps",children:"Sitemaps"}),` `,t(e.p,{children:["When hosting pages on a custom domain, a ",n(e.a,{href:"https://www.sitemaps.org/",children:"sitemap"})," and ",n(e.a,{href:"https://en.wikipedia.org/wiki/Robots_exclusion_standard",children:"robots.txt"})," file will automatically be generated for all the public pages in your space. This will make it easier for search engines to discover and list your content."]}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Upload multiple images at once using the Image file picker."}),` `,n(e.li,{children:"Display page path in My Pages."}),` `,n(e.li,{children:"Delete account."}),` `,n(e.li,{children:"Delete space."}),` `,n(e.li,{children:'"Copy to clipboard" button to share a page link.'}),` `,n(e.li,{children:"Swallow Cmd/Ctrl+S."}),` `,n(e.li,{children:"Adapt default page padding on mobile devices."}),` `,n(e.li,{children:"Adapt default padding for headings."}),` `]}),` `,n(e.h4,{id:"bug-fixes",children:"Bug fixes"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Fix bug causing users to be redirected to their space when accessing a public page from a space of which they are not members."}),` `,n(e.li,{children:"Fix bug causing imported components not to display on pages served via custom domains."}),` `,n(e.li,{children:"Fix bug causing the editor toolbar to be unclickable."}),` `,t(e.li,{children:["Fix bug causing pages containing client-side code (such as ",n(e.code,{children:"document"}),") to err when rendered server side."]}),` `,n(e.li,{children:"Fix mobile page scrolling issue for public pages."}),` `,n(e.li,{children:"Fix bug causing delete pages to fail."}),` `]})]})}function ln(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(U,a)})):U(a)}var J=ln;function cn(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}var $={date:"2021-12-13"};function Q(a){let e=Object.assign({h4:"h4",p:"p",code:"code",pre:"pre",span:"span",a:"a",ul:"ul",li:"li"},o(),a.components);return t(r,{children:[n(e.h4,{id:"fast-page-loads",children:"Fast page loads"}),` `,n(e.p,{children:"If you visit a page from a custom domain, it will now appear almost instantaneously, as it has been pre-generated and cached on the edge."}),` `,n(e.h4,{id:"open-graph-meta-tags",children:"Open Graph meta tags"}),` `,t(e.p,{children:["When serving a page via your custom domain, you can now specify Open Graph meta properties in your page's metadata, under the ",n(e.code,{children:"meta"})," property, for SEO and sharing purposes:"]}),` `,n(e.pre,{className:"language-yaml",children:t(e.code,{className:"language-yaml",children:[n(e.span,{className:"token punctuation",children:"---"}),` `,n(e.span,{className:"token key atrule",children:"meta"}),n(e.span,{className:"token punctuation",children:":"}),` `,n(e.span,{className:"token key atrule",children:'"og:url"'}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"https://acme.com/blog/design-principles"'}),` `,n(e.span,{className:"token key atrule",children:'"og:title"'}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"Ten principles for good design"'}),` `,n(e.span,{className:"token key atrule",children:'"og:description"'}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"Ten principles for good design by Dieter Rams."'}),` `,n(e.span,{className:"token key atrule",children:'"og:image"'}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"https://res.cloudinary.com/djp21w..."'}),` `,n(e.span,{className:"token punctuation",children:"---"}),` `]})}),` `,n(e.h4,{id:"custom-favicons",children:"Custom favicons"}),` `,t(e.p,{children:["You can now give your page a custom favicon by specifying an image in the page metadata using the ",n(e.code,{children:"favicon"})," key. Read more in the ",n(e.a,{href:"/community/guides/tvzj6ey8deo5nefu",children:"Custom Favicon guide"}),"."]}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,t(e.li,{children:["Add support for sub-paths, e.g. path: ",n(e.code,{children:"blog/ten-principles-of-design"}),"."]}),` `,n(e.li,{children:"Add support for uploading SVG images."}),` `]})]})}function dn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(Q,a)})):Q(a)}var ee=dn;var te={date:"2021-11-30"};function ne(a){let e=Object.assign({h4:"h4",p:"p",code:"code",a:"a",pre:"pre",span:"span",ul:"ul",li:"li",strong:"strong",em:"em"},o(),a.components);return t(r,{children:[n(e.h4,{id:"shareable-components",children:"Shareable components"}),` `,t(e.p,{children:["By adding the ",n(e.code,{children:"export"}),' keyword to your custom React components, they become available for reuse across all your pages. You can find them in the block picker (click "Add Block" at the bottom of the editor).']}),` `,n(e.h4,{id:"tailwind-css-support",children:"Tailwind CSS support"}),` `,t(e.p,{children:["With ",n(e.a,{href:"https://tailwindcss.com/",children:"Tailwind CSS"})," support, you can to easily add arbitrary CSS styling to your pages and components, including media queries for responsive designs."]}),` `,n(e.h4,{id:"new-navbar-component",children:"New Navbar component"}),` `,t(e.p,{children:["As part of the built-in blocks, we now have a fully customizable, responsive ",n(e.code,{children:""})," component."]}),` `,n(e.h4,{id:"global-page-styles",children:"Global page styles"}),` `,n(e.p,{children:"In your page metadata, you can now apply classes to specific elements, e.g."}),` `,n(e.pre,{className:"language-yaml",children:t(e.code,{className:"language-yaml",children:[n(e.span,{className:"token punctuation",children:"---"}),` `,n(e.span,{className:"token key atrule",children:"class"}),n(e.span,{className:"token punctuation",children:":"}),` `,n(e.span,{className:"token key atrule",children:"container"}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"max-w-screen-lg"'}),` `,n(e.span,{className:"token key atrule",children:"h1"}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"text-5xl sm:text-6xl font-black text-gray-900"'}),` `,n(e.span,{className:"token key atrule",children:"p"}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"pt-2 py-2"'}),` `,n(e.span,{className:"token key atrule",children:"Input"}),n(e.span,{className:"token punctuation",children:":"})," ",n(e.span,{className:"token string",children:'"rounded-xl py-3 text-lg"'}),` `,n(e.span,{className:"token punctuation",children:"---"}),` `]})}),` `,n(e.h4,{id:"quality-of-life-improvements",children:"Quality of life improvements"}),` `,t(e.ul,{children:[` `,t(e.li,{children:[n(e.strong,{children:"Shortcuts"})," for bold (Mac: ",n(l,{})," ",n(i,{symbol:"B"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"B"}),") and italic (Mac: ",n(l,{})," ",n(i,{symbol:"I"}),", Win/Linux: ",n(c,{})," ",n(i,{symbol:"I"}),")."]}),` `,n(e.li,{children:"Automatically add a new bullet point when hitting enter from another bullet point."}),` `,n(e.li,{children:'Shift-click to select ranges of pages in "My pages" for bulk actions.'}),` `,n(e.li,{children:"New Recents section in the sidebar."}),` `,n(e.li,{children:"Fonts now display nicely on Windows."}),` `,n(e.li,{children:"Faster page creation."}),` `,n(e.li,{children:"Sync status indicator."}),` `]}),` `,n(e.h4,{id:"bug-fixes",children:"Bug fixes"}),` `,t(e.ul,{children:[` `,n(e.li,{children:"Fix bug causing editor to stall or be read-only."}),` `,n(e.li,{children:"Fix bug causing onboarding to not complete."}),` `,n(e.li,{children:"Fix bug causing root path to reload infinitely."}),` `,n(e.li,{children:"Fix bug causing editor not to resize."}),` `,n(e.li,{children:"Fix bug causing Unsplash images to flicker on Safari."}),` `,n(e.li,{children:"Fix bug causing sender name and avatar to not display on message blocks."}),` `,n(e.li,{children:"Fix bug causing large images not to be uploaded via the image picker."}),` `,n(e.li,{children:"Better handling of Guest access on a space."}),` `,n(e.li,{children:"Better handling of resizing."}),` `,t(e.li,{children:["Better handling of path collisions (to avoid several pages at ",n(e.em,{children:"yourdomain"}),".motif.land/",n(e.strong,{children:"same-path"}),")."]}),` `]}),` `]})}function pn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(ne,a)})):ne(a)}var ae=pn;var hn={title:"Motif Changelog",subtitle:"New features, fixes and improvements to Motif.",twitter:"motifland"};function oe(a){return t(r,{children:[n(m,{meta:S,children:n(F,{})}),` `,n(m,{meta:O,children:n(D,{})}),` `,n(m,{meta:A,children:n(X,{})}),` `,n(m,{meta:W,children:n(H,{})}),` `,n(m,{meta:q,children:n(z,{})}),` `,n(m,{meta:Y,children:n(G,{})}),` `,n(m,{meta:K,children:n(J,{})}),` `,n(m,{meta:$,children:n(ee,{})}),` `,n(m,{meta:te,children:n(ae,{})}),` `]})}function mn(a={}){let{wrapper:e}=Object.assign({},o(),a.components);return e?n(e,Object.assign({},a,{children:n(oe,a)})):oe(a)}var un=mn;return w(gn);})(); /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ return Component;