(chore) Add with-filbert as example

examples/with-filbert/README.md

@@ -0,0 +1,49 @@
+# Using Next.js with filbert-js
+
+A light weight(~1KB) css-in-js solution(framework)🎨
+
+This example showcase how to perform SSR & extract and inline critical css with [@filbert-js/server-stylesheet](https://www.npmjs.com/package/@filbert-js/server-stylesheet) and [@filbert-js/core](https://www.npmjs.com/package/@filbert-js/core)
+
+
+If you are running into any issues with this example, feel free to open-up an issue at https://github.com/kuldeepkeshwar/filbert-js/issues.
+
+
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-filbert)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-filbert with-filbert-app
+# or
+yarn create next-app --example with-filbert with-filbert-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-filbert
+cd with-filbert
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-filbert/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "with-filbert",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "Kuldeep Keshwar",
+  "license": "ISC",
+  "dependencies": {
+    "@filbert-js/core": "^0.0.4",
+    "@filbert-js/server-stylesheet": "^0.0.4",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }
+}

examples/with-filbert/pages/_document.js

@@ -0,0 +1,34 @@
+import Document from 'next/document';
+import { createStylesheet } from '@filbert-js/server-stylesheet';
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = createStylesheet();
+    const originalRenderPage = ctx.renderPage;
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => {
+            return (props) => {
+              return sheet.collectStyles(<App {...props} />);
+            };
+          },
+        });
+      const initialProps = await Document.getInitialProps(ctx);
+
+      const styleTags = sheet.getReactElements();
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {styleTags}
+            {initialProps.styles}
+          </>
+        ),
+      };
+    } finally {
+    }
+  }
+}
+
+export default MyDocument;

examples/with-filbert/pages/index.js

@@ -0,0 +1,69 @@
+import { Global, styled } from '@filbert-js/core'
+
+import React from 'react'
+
+const Text = styled('div')`
+  color: hotpink;
+`
+const Heading = styled('h1')`
+  outline: none;
+  text-decoration: none;
+  font-weight: 300;
+  letter-spacing: 1px;
+  transition: all 0.2s ease;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
+  padding: 0.4125em 1.25em;
+  color: #3793e0;
+
+  &:hover {
+    border-bottom-color: #4682b4;
+    border-bottom: 1px solid;
+  }
+  a {
+    color: #3793e0;
+    text-decoration: none;
+  }
+`
+const Small=styled('div')`
+ color:black;
+`
+const Container = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  > * + * {
+    margin-top: 1rem;
+  }
+`
+export default function Home() {
+  return (
+    <Container>
+      <Global
+        styles={`
+          html,
+          body {
+            padding: 0;
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+              Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+              sans-serif;
+          }
+  
+          * {
+            box-sizing: border-box;
+          }
+          
+        `}
+      />
+      <img src="/filbert.png" width="150" alt="filbert" />
+      <Heading>
+        <a target="_black" href="https://filbert-js.vercel.app/"> Welcome to Filbert!</a>
+
+      </Heading>
+      <Small>A light weight(~1KB) css-in-js solution(framework)🎨</Small>
+      <Text>Next JS is awesome</Text>
+    </Container>
+  )
+}