Merge PR #397 | Setup Tailwindcss

from mateusfg7/feat/setup-tailwindcss

package.json

@@ -32,7 +32,6 @@
     "remark-math": "5.1.1",
     "remark-parse": "10.0.1",
     "remark-rehype": "10.1.0",
-    "styled-components": "5.3.6",
     "unified": "10.1.2"
   },
   "devDependencies": {
@@ -41,9 +40,9 @@
     "@types/blueimp-md5": "2.18.0",
     "@types/node": "18.11.9",
     "@types/react": "17.0.52",
-    "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.43.0",
     "@typescript-eslint/parser": "5.43.0",
+    "autoprefixer": "^10.4.13",
     "eslint": "8.27.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-standard": "16.0.3",
@@ -53,7 +52,9 @@
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.31.10",
     "husky": "^8.0.1",
+    "postcss": "^8.4.19",
     "prettier": "2.7.1",
+    "tailwindcss": "^3.2.4",
     "typescript": "4.9.3"
   }
 }

postcss.config.js

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

src/components/Container.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Container: React.FC = ({ children }) => {
+  return <div className="max-w-4xl p-5 m-auto">{children}</div>
+}

src/components/Date/index.tsx → src/components/Date.tsx

@@ -5,10 +5,8 @@ interface Props {
   dateString: string
 }
 
-const Date: React.FC<Props> = ({ dateString }) => {
+export const Date: React.FC<Props> = ({ dateString }) => {
   const date = parseISO(dateString)
 
   return <time dateTime={dateString}>{format(date, 'LLL d, yyyy')}</time>
 }
-
-export default Date

src/components/Header.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+
+interface Props {
+  imageUrl: string
+  title: string
+}
+
+export const Header: React.FC<Props> = ({ imageUrl, title }) => {
+  return (
+    <header className="flex justify-between items-center mb-24">
+      <div className="flex items-center gap-5">
+        <img src={imageUrl} className="w-12 h-12 rounded-full text-gray-600" />
+        <h2>brain</h2>
+        <span className="text-xs">/</span>
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+      <nav>
+        <Link href="/">
+          <a className="text-text mr-8 hover:underline">Home</a>
+        </Link>
+
+        <Link href="/categories">
+          <a className="text-text mr-8 hover:underline">Categories</a>
+        </Link>
+      </nav>
+    </header>
+  )
+}

src/components/KnowledgeLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { Date } from './Date'
+
+interface Props {
+  id: string
+  title: string
+  key: number
+  description: string
+  date: string
+}
+
+export function KnowledgeLink({ id, key, title, date, description }: Props) {
+  return (
+    <Link href={`/knowledge/${id}`} key={key}>
+      <a className="group">
+        <section className="mb-8">
+          <h2 className="text-xl font-bold text-unselectedText group-hover:text-primary">
+            {title}
+          </h2>
+          <span className="text-unselectedSecondText group-hover:text-secondText">
+            <Date dateString={date} /> &#8226; {description}
+          </span>
+        </section>
+      </a>
+    </Link>
+  )
+}

src/components/ReadProgress/index.tsx → src/components/ReadProgress.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { ProgressBar, PercentageProgress } from './styles'
-
-const ReadProgress: React.FC = () => {
+export const ReadProgress: React.FC = () => {
   const [progressWidth, setProgressWith] = useState(0)
 
   const handleScroll = () => {
@@ -17,11 +15,11 @@ const ReadProgress: React.FC = () => {
   }, [])
 
   return (
-    <>
-      <ProgressBar width={progressWidth} />
-      <PercentageProgress>{progressWidth.toFixed(2)}% Read</PercentageProgress>
-    </>
+    <div
+      className="fixed top-0 bg-black transition-all duration-300 rounded-md h-1"
+      style={{
+        width: `${progressWidth}%`
+      }}
+    />
   )
 }
-
-export default ReadProgress

src/components/StatsTopic/index.tsx → src/components/StatsTopic.tsx

@@ -6,7 +6,7 @@ interface Props {
   imgSrc: string
 }
 
-const StatsTopic: React.FC<Props> = ({ imgSrc, title, gridArea }) => {
+export const StatsTopic: React.FC<Props> = ({ imgSrc, title, gridArea }) => {
   return (
     <section className={`topic ${gridArea}`}>
       <header>
@@ -17,5 +17,3 @@ const StatsTopic: React.FC<Props> = ({ imgSrc, title, gridArea }) => {
     </section>
   )
 }
-
-export default StatsTopic

src/pages/_app.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import Head from 'next/head'
 import { AppProps } from 'next/app'
-import { ThemeProvider } from 'styled-components'
 
-import GlobalStyle from '../styles/global'
-import defaultTheme from '../styles/theme'
+import '../styles/main.css'
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
   return (
@@ -17,10 +15,7 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
           src="https://mateusfg7-umami-instance.herokuapp.com/umami.js"
         />
       </Head>
-      <ThemeProvider theme={defaultTheme}>
-        <Component {...pageProps} />
-        <GlobalStyle />
-      </ThemeProvider>
+      <Component {...pageProps} />
     </>
   )
 }

src/pages/categories.tsx

@@ -3,10 +3,8 @@ import { GetStaticProps } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 
-import Container from '../components/Container/index'
-import Header from '../components/Header/index'
-
-import { CategoryList, CategoryButton } from '../styles/pages/categories'
+import { Container } from '../components/Container'
+import { Header } from '../components/Header'
 
 import { getSortedKnowledgeData } from '../lib/knowledgeFunctions'
 import {
@@ -29,18 +27,18 @@ const Categories: React.FC<Props> = ({ avatarUrl, categories }) => {
       <Container>
         <Header imageUrl={avatarUrl} title="Categories" />
         <main>
-          <CategoryList>
+          <div className="flex flex-wrap gap-2">
             {categories.map((categoryData, index) => (
               <Link key={index} href={`/category/${categoryData.category}`}>
-                <CategoryButton>
+                <div className="py-1 px-4 border-2 border-solid border-unselectedText hover:border-primary font-bold text-unselectedText hover:text-primary duration-100 hover:cursor-pointer">
                   <p>
                     {categoryData.category}
                     <sup> {categoryData.numberOfKnowledge} </sup>
                   </p>
-                </CategoryButton>
+                </div>
               </Link>
             ))}
-          </CategoryList>
+          </div>
         </main>
       </Container>
     </div>