tailwind and other config

monogramdesign · Sep 14, 2022 · 1c51a41 · 1c51a41
1 parent af81bfd
commit 1c51a41
Show file tree

Hide file tree

Showing 15 changed files with 2,021 additions and 1,835 deletions.
diff --git a/package.json b/package.json
@@ -2,11 +2,11 @@
   "name": "swell-subscriptions-poc",
   "version": "0.1.0",
   "private": true,
-	"author": {
-		"name": "Monogram",
-		"email": "[email protected]",
-		"url": "https://monogram.io"
-	},
+  "author": {
+    "name": "Monogram",
+    "email": "[email protected]",
+    "url": "https://monogram.io"
+  },
   "scripts": {
     "dev": "next dev -p 3009",
     "build": "next build",
@@ -19,11 +19,17 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@monogram/prettier-config": "^0.2.0",
     "@types/node": "18.7.18",
     "@types/react": "18.0.20",
     "@types/react-dom": "18.0.6",
+    "autoprefixer": "^10.4.11",
     "eslint": "8.23.1",
     "eslint-config-next": "12.3.0",
+    "postcss": "^8.4.16",
+    "sass": "^1.54.9",
+    "tailwindcss": "^3.1.8",
     "typescript": "4.8.3"
-  }
+  },
+  "prettier": "@monogram/prettier-config"
 }
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/pages/_app.tsx → src/pages/_app.tsx b/pages/_app.tsx → src/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import '@styles/globals.scss'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+	return <Component {...pageProps} />
 }
 
 export default MyApp
diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -0,0 +1,44 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+	static async getInitialProps(ctx) {
+		const originalRenderPage = ctx.renderPage
+
+		// Run the React rendering logic synchronously
+		ctx.renderPage = () =>
+			originalRenderPage({
+				// Useful for wrapping the whole react tree
+				enhanceApp: (App) => App,
+				// Useful for wrapping in a per-page basis
+				enhanceComponent: (Component) => Component
+			})
+
+		// Run the parent `getInitialProps`, it now includes the custom `renderPage`
+		const initialProps = await Document.getInitialProps(ctx)
+
+		return initialProps
+	}
+
+	render() {
+		return (
+			<Html>
+				<Head lang="en">
+					<link rel="preconnect" href="https://fonts.googleapis.com" />
+					<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+					<link
+						href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
+						rel="stylesheet"
+					/>
+					<link rel="icon" href="/favicon.ico" />
+				</Head>
+
+				<body>
+					<Main />
+					<NextScript />
+				</body>
+			</Html>
+		)
+	}
+}
+
+export default MyDocument
diff --git a/pages/api/hello.ts → src/pages/api/hello.ts b/pages/api/hello.ts → src/pages/api/hello.ts
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -0,0 +1,28 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+
+const Home: NextPage = () => {
+	return (
+		<div>
+			<Head>
+				<title>Swell + Monogram - Subscriptions POC</title>
+				<meta
+					name="description"
+					content="POC by Monogram on using the headless ecommerce platform Swell."
+				/>
+			</Head>
+
+			<main>
+				<section>
+					<div className="container">
+						<h1 className="font-serif text-3xl">Swell x Monogram Subscriptions </h1>
+						<p>Home</p>
+					</div>
+				</section>
+			</main>
+		</div>
+	)
+}
+
+export default Home
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+
+
+@layer base {
+	html,
+	body {
+		@apply h-full;
+	}
+	html {
+		@apply antialiased scroll-smooth;
+		font-size: 16px;
+	}
+
+	body {
+		@apply flex flex-col overflow-x-hidden;
+	}
+}
+
+@tailwind utilities;
diff --git a/styles/Home.module.css b/styles/Home.module.css
diff --git a/styles/globals.css b/styles/globals.css