update with-filbert-js (#15968)

- Update dependencies for filbert-js
- Add `@filbert-js/macro` example

examples/with-filbert/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": ["macros"]
+  }

examples/with-filbert/package.json

@@ -12,8 +12,9 @@
   "author": "Kuldeep Keshwar",
   "license": "ISC",
   "dependencies": {
-    "@filbert-js/core": "^0.0.4",
-    "@filbert-js/server-stylesheet": "^0.0.4",
+    "@filbert-js/core": "latest",
+    "@filbert-js/macro": "latest",
+    "@filbert-js/server-stylesheet": "latest",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"

examples/with-filbert/pages/index.js

@@ -1,11 +1,8 @@
-import { Global, styled } from '@filbert-js/core'
+import { Global, css, styled } from '@filbert-js/macro'
 
 import React from 'react'
 
-const Text = styled('div')`
-  color: hotpink;
-`
-const Heading = styled('h1')`
+const Heading = styled.h1`
   outline: none;
   text-decoration: none;
   font-weight: 300;
@@ -14,7 +11,6 @@ const Heading = styled('h1')`
   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;
@@ -24,10 +20,10 @@ const Heading = styled('h1')`
     text-decoration: none;
   }
 `
-const Small = styled('div')`
+const Small = styled.div`
   color: black;
 `
-const Container = styled('div')`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -57,7 +53,11 @@ export default function Home() {
           
         `}
       />
-      <img src="/filbert.png" width="150" alt="filbert" />
+      <img
+        src="https://raw.githubusercontent.com/kuldeepkeshwar/filbert-js/master/filbert.png"
+        width="150"
+        alt="filbert"
+      />
       <Heading>
         <a target="_black" href="https://filbert-js.vercel.app/">
           {' '}
@@ -65,7 +65,13 @@ export default function Home() {
         </a>
       </Heading>
       <Small>A light weight(~1KB) css-in-js solution(framework)🎨</Small>
-      <Text>Next JS is awesome</Text>
+      <div
+        css={css`
+          color: hotpink;
+        `}
+      >
+        Nextjs is awesome
+      </div>
     </Container>
   )
 }