poko | Notion

rootUrl: "<https://poko.m4rr.co/>"
presets:
  - HeaderTitle
  - ImgLazy
  - MenuLevel1Pages
metadata:
  lang: en
  siteName: poko
subBlocks:
	body:
	  class: stack
	main:
	  class: stack
	ul:
	  class: stack
	  style: "--gap: 0.5rem;"
	ol:
	  class: stack
	  style: "--gap: 0.5rem;"
  Menu:
	  class: "box stack horizontal split-after-1"
  Menu-left:
    style: "width: max-content;"
  Menu-right:
    class: "reset cluster"
	columns:
	  class: image-circle
email: [email protected]

<aside> 🗨️ Have questions? Want to share ideas or cool tips? Need some inspiration for your next project? Come and discuss about anything Poko related.

</aside>

<aside> ❗ This is the actual Notion Space used for the Poko Website. Things will move! I may even be working on it as you read this so if a sentence is incomplete for example, you know why. 😉

</aside>

<aside> ‼️ Poko is in early Alpha. What it means is that it is incomplete and things may break unexpectedly. We will try and document changes from version to version though. Moreover you keep control on your update cycle since only you can update your github fork.

</aside>

Exports

You can export ’things’ on any page. Variables, functions, components can be exported to be retrieved and reused across the page or even site wide.

We use MDX and Preact under the hood. Don’t hesitate to geek on these and go check their docs.

Anything you export in the Settings will be imported on every page in props and in the component prop. If you export components with names corresponding to an HTML elements, these will be used instead of the standard element (or instead of the component provided by poko-notion by default)

Any variable can be exported from a frontmatter code block at the top of any page (like the one above). The language of the code block has to be set to YAML. Here is a cheatsheet to write YAML if needed.

There are special export fields

metadata
- lang [string: ‘en’] → <html {lang}>
- siteName [string: undefined] Used to compose meta title as {title} | {siteName}
- title [string: undefined] → <title>... & <meta property="og:title"...
- description [string: undefined] → <meta name="description"... & <meta property="og:description"...
- link [array: undefined] → Array of objects describing <link> tags (see example)
- meta [array: undefined] → Array of objects describing <meta> tags (see example)
- <any> [object: undefined] → Object describing any html tag to be inserted in the <head>. Need to have a tag property. You can give the object any name (=key) you’d like. Just make sure it does not collide with other keys on the metadata object. The key will be embedded in the element you create as an data-key attribute. Example: ogType: {tag: meta, property: "og:type", content: website} will yield <meta data-key="ogType" property="og:type" content="website">

Exports examples

export const p = ({ style, ...props }) =>  <p style={{ backgroundColor: 'yellow', ...style }} {...props} />
export const Thing = () ⇒ <>world</>
export const name = `m4rrc0`;
export const Style = () => <style>{`
nav {background-color: lightblue;}
`}</style>

// Then you can use all those exports like so

<Style />

# Hello <Thing />, I'm {name}

Normal Text like this will be turned into a paragraph (<p>) and use the `p` export defined above.

These are the actual exports for this site

{/*MDX*/}

export const PokoBrand = ({ cap, link = false, page }) => link ? <a href={page.rootUrl}><em>{cap ? 'P' : 'p'}oko</em></a> : <em>{cap ? 'P' : 'p'}oko</em>

{/*
export const img = (props) => <props.components.ImgLazy {...props} />

export const nav = ({ index, pages }) => {
	return (
	  <nav class="box stack horizontal split-after-1">
	    <ul class="reset">
		    {index && index.title && (
			    <li>
				    <strong><a href={index.href}>{index.title}</a></strong>
			    </li>
		    )}
	    </ul>
	    <ul class="reset">
		    {pages && pages.map(({ href, title, codeName }) => (
			    <li>
				    <a {...{ href }}>{title || codeName}</a>
			    </li>
		    ))}
	    </ul>
    </nav>
  );
};
*/}

{/*

export const wrapper = ({ children, components, ...props }) => {
export function main({ children, ...props}) {
export const Brand = ({ cap, link = false }) ⇒ link ? <a href=”https://poko.m4rr.co/”><em>{cap ? ‘P’ : ‘p’}oko</em></a> : <em>{cap ? ‘P’ : ‘p’}oko</em>