Introduce twin.macro

.babelrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      'next/babel',
+      {
+        'preset-react': {
+          runtime: 'automatic',
+          importSource: '@emotion/react',
+        },
+      },
+    ],
+  ],
+  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
+}

Makefile

@@ -13,6 +13,12 @@ build:
 start:
 	yarn start
 
+clean:
+	rm -rf .next node_modules out yarn-error.log
+
+server:
+	python3 -m http.server --directory out/
+
 # 1024x1024 area
 # resize:
 # 	mogrify -resize '1048576@>' -format jpg -quality 60 *.*

next.config.js

@@ -5,9 +5,23 @@ const withYaml = require('next-plugin-yaml')
 const withImages = require('next-images')
 
 let nextConfig = {
-  future: {
-    // https://nextjs.org/docs/messages/webpack5
-    webpack5: true,
+  // https://nextjs.org/docs/messages/webpack5
+  future: { webpack5: true },
+
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      // Unset client-side javascript that only works server-side
+      // https://github.com/vercel/next.js/issues/7755#issuecomment-508633125
+      config.resolve = {
+        ...config.resolve,
+        fallback: {
+          fs: 'empty',
+          module: 'empty',
+        },
+      }
+    }
+
+    return config
   },
 
   // https://nextjs.org/docs/api-reference/next.config.js/basepath

package.json

@@ -8,9 +8,16 @@
     "start": "next start",
     "netlify:dev": "netlify dev -c 'next dev'"
   },
+  "babelMacros": {
+    "twin": {
+      "preset": "emotion"
+    }
+  },
   "dependencies": {
-    "@netlify/plugin-nextjs": "^3.0.3",
-    "@tailwindcss/jit": "^0.1.17",
+    "@emotion/css": "^11.1.3",
+    "@emotion/react": "^11.1.5",
+    "@emotion/server": "^11.0.0",
+    "@emotion/styled": "^11.1.5",
     "autoprefixer": "^10.2.4",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
@@ -31,6 +38,9 @@
     "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
-    "netlify-cli": "^3.13.7"
+    "@emotion/babel-plugin": "^11.2.0",
+    "babel-plugin-macros": "^3.0.1",
+    "netlify-cli": "^3.13.7",
+    "twin.macro": "^2.3.2"
   }
 }

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/jit': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }

src/components/home/upcoming-events.js

@@ -0,0 +1,58 @@
+import tw, { css } from 'twin.macro'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+export const UpcomingEventsSection = ({title, children, ...props}) => (
+  <div tw="text-center all-child:my-8" {...props}>
+    <h2 tw="uppercase font-bold flex-none w-full text-wixColor24" css={css`
+      font-size: 35px;
+      letter-spacing: 0.2em;
+      text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
+    `}>
+      {title}
+    </h2>
+
+    <UpcomingEvents>
+      {children}
+    </UpcomingEvents>
+  </div>
+)
+UpcomingEventsSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node
+}
+
+export const UpcomingEvents = tw.div`sm:(flex justify-center justify-items-center)`
+
+export const UpcomingEvent = ({href, title, children, ...props}) => (
+  <div tw="flex flex-col my-8 px-8 border-wixColor31 sm:border-l first:border-0" css={css`
+    p {
+      ${tw`flex-1 my-4`}
+    }
+  `} {...props}>
+    <h5 tw="font-bold leading-none text-wixColor24" css={css`
+      font-size: 26px;
+      letter-spacing: 0.2em;
+    `}>
+      <Link href={href} passHref>
+        <a tw="underline">{title}</a>
+      </Link>
+    </h5>
+
+    {children}
+
+    <div>
+      <Link href={href} passHref>
+        <a tw="uppercase text-wixColor33 hover:text-wixColor25" css={css`
+          font-size: 12px;
+          transition: color 0.4s ease 0s;
+        `}>more info »</a>
+      </Link>
+    </div>
+  </div>
+)
+UpcomingEvent.propTypes = {
+  title: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node
+}

src/components/home/whats-news.js

@@ -0,0 +1,81 @@
+import tw, { css, theme } from 'twin.macro'
+import Link from 'next/link'
+import ShadowImage from '@/components/shadow-image'
+
+export const WhatsNewsSection = ({title, children, ...props}) => (
+  <div tw="overflow-x-hidden text-center all-child:my-8" {...props}>
+    <h2 tw="uppercase font-bold text-wixColor24" css={css`
+      font-size: 35px;
+      letter-spacing: 0.2em;
+      text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
+    `}>
+      {title}
+    </h2>
+
+    <WhatsNewsItems>
+      {children}
+    </WhatsNewsItems>
+  </div>
+)
+WhatsNewsSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node
+}
+
+export const WhatsNewsItems = tw.div`container text-center relative mx-auto px-4 md:(flex space-x-4)`
+
+export const WhatsNewsItem = ({title, image, href, children, ...props}) => (
+  <div tw="my-8 flex flex-col md:flex-1" css={css`
+    .news-item-image {
+      height: 192px;
+
+      img {
+        ${tw`object-cover h-full w-full`}
+      }
+    }
+
+    @media (min-width: ${theme`screens.sm`}) {
+      .news-item-image {
+        height: 24vw;
+      }
+    }
+  `} {...props}>
+    <ShadowImage className={'news-item-image'} src={image} />
+
+    <WhatsNewsContent>
+      <h6 tw="font-bold leading-none uppercase font-serif text-wixColor25" css={css`
+        font-size: 18px;
+        letter-spacing: 0.2em;
+      `}>
+        {title}
+      </h6>
+
+      <hr tw="my-8 w-16 border mx-auto border-wixColor15" />
+
+      {children}
+
+      <div tw="mt-8">
+        <Link href={href} passHref>
+          <a tw="uppercase text-wixColor33 hover:text-wixColor25" css={css`
+            font-size: 12px;
+            transition: color 0.4s ease 0s;
+          `}>read more »</a>
+        </Link>
+      </div>
+    </WhatsNewsContent>
+  </div>
+)
+WhatsNewsItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  children: PropTypes.node
+}
+
+export const WhatsNewsContent = props => (
+  <div tw="p-8 flex-1 flex flex-col bg-wixColor31 --tw-bg-opacity[0.19]" css={css`
+    & > p {
+      ${tw`flex-1`}
+    }
+  `} {...props} />
+)

src/pages/_app.js

@@ -1,4 +1,5 @@
 import '@/styles/globals.css'
+import { GlobalStyles } from 'twin.macro'
 import Title from '@/components/title'
 import Head from 'next/head'
 import Layout from '@/components/layout'
@@ -15,6 +16,8 @@ function MyApp({ Component, pageProps }) {
         <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap" rel="stylesheet" />
       </Head>
 
+      <GlobalStyles />
+
       <Layout>
         <Component {...pageProps} />
       </Layout>