Atr forum

package.json

@@ -1,42 +1,54 @@
 {
   "name": "gatsby-starter-julia",
   "private": true,
-  "description": "A minimal blog template built with Gatsby",
+  "description": "A minimal blog template with forum",
   "version": "0.1.0",
-  "author": "Niklas Metje <hi@niklasmtj.de>",
-  "dependencies": {
-    "@emotion/core": "^10.0.28",
+  "author": "Dawn Wages <dawn.wages@gmail.com>",
+  "resolutions": {
+    "graphql": "^15.4.0",
+    "graphql-compose": "^7.25.0",
+    "webpack": "^5.24.2"
+  },
+  "dependencies":  {
+    "@chakra-ui/react": "^1.6.5",
+    "@emotion/core": "^10.1.1",
+    "@emotion/react": "^11.4.0",
     "@emotion/styled": "^10.0.27",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-brands-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.12",
-    "gatsby": "^2.23.18",
-    "gatsby-image": "^2.4.12",
-    "gatsby-plugin-emotion": "^4.3.9",
-    "gatsby-plugin-google-gtag": "^2.1.13",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "framer-motion": "^4.1.17",
+    "gatsby": "^3.9.0",
+    "gatsby-cli": "^3.11.0",
+    "gatsby-image": "^2.11.0",
+    "gatsby-plugin-emotion": "^4.5.0",
+    "gatsby-plugin-google-gtag": "^2.8.0",
     "gatsby-plugin-gtag": "^1.0.13",
-    "gatsby-plugin-manifest": "^2.4.17",
-    "gatsby-plugin-netlify": "^2.3.10",
-    "gatsby-plugin-offline": "^3.2.16",
-    "gatsby-plugin-react-helmet": "^3.9.0",
-    "gatsby-plugin-sharp": "^2.6.17",
-    "gatsby-remark-prismjs": "^3.5.9",
+    "gatsby-plugin-manifest": "^2.12.1",
+    "gatsby-plugin-netlify": "^2.11.1",
+    "gatsby-plugin-offline": "^3.10.2",
+    "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-sharp": "^2.14.4",
+    "gatsby-remark-prismjs": "^3.13.0",
     "gatsby-remark-reading-time": "^1.1.0",
-    "gatsby-source-filesystem": "^2.3.18",
-    "gatsby-transformer-remark": "^2.8.23",
-    "gatsby-transformer-sharp": "^2.5.10",
-    "prism-themes": "^1.4.0",
+    "gatsby-source-filesystem": "^2.11.1",
+    "gatsby-transformer-remark": "^2.16.1",
+    "gatsby-transformer-sharp": "^2.12.1",
+    "prism-themes": "^1.7.0",
     "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-disqus-comments": "^1.4.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.14.0",
     "react-helmet": "^5.2.1",
+    "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "typeface-nunito": "1.1.3"
   },
   "devDependencies": {
-    "prettier": "^2.0.5"
+    "postcss": "^8.3.5",
+    "prettier": "^2.3.2"
   },
   "keywords": [
     "gatsby"

src/components/checklist/Button.js

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "@emotion/styled"
+
+const boxShadow = (color) => {
+	return `0.2em 0.2em 1px ${color}`
+}
+
+const Button = styled.button`
+    height: 2em;
+    margin: 0.5em;
+    padding: 0 1em;
+    font-size: 2em;
+    line-height: 1em;
+    text-transform: lowercase;
+    background-color: white;
+    cursor: pointer;
+
+    &:active P
+    border: none;
+    border-radius: 0;
+    }
+`
+
+const ButtonOutlined = styled(Button)`
+    background-color: white;
+    border: 2px solid orange;
+	transition-duration:  "0.1s";
+	box-shadow: ${boxShadow('orange')};
+
+	&:hover {
+		box-shadow: none;
+		transform: translate(2px, 2px);
+	}
+
+	&:disabled {
+		cursor: default;
+		color: #ccc;
+		background-image: repeating-linear-gradient(
+			45deg,
+			#eee 0,
+			#eee 1px,
+			transparent 0,
+			transparent 50%
+		);
+		background-size: 0.4em 0.4em;
+		border: 2px solid #aaa;
+		box-shadow: ${boxShadow("#aaa")};
+	}
+
+	&:hover:disabled {
+		transform: none;
+	}
+`
+
+const ButtonText = styled(Button)`
+	color: orange;
+	border: none;
+
+	&:hover {
+		color: #aaa;
+	}
+`
+
+const theme = {
+	accent: "orange",
+	transitionDuration: "0.1s"
+}
+
+export default ButtonOutlined

src/components/checklist/Card.js

@@ -0,0 +1,114 @@
+import React from "react"
+import styled from "@emotion/styled"
+
+import {borderColor} from "../theme/colors"
+import {greyLight, greyDark, magentaLight, magentaLighter} from "../theme/colors"
+import {contentPadding, contentPaddingSmall, dropShadow, contentPaddingTitleBottom, ObjectFooter} from "../theme/page"
+import {defaultFont} from "../theme/font"
+import {FeedBadgeWrapper, Badge, SmallMagentaButton, MagentaButton} from "../checklist/FeedRow";
+import {SmallColorText} from "../checklist/MainFeed"
+import {SecondaryHighlightHeader} from "../theme/MarkedHeader";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {library} from "@fortawesome/fontawesome-svg-core";
+import {faBookReader, faStar} from "@fortawesome/free-solid-svg-icons";
+library.add(faBookReader);
+
+const boxShadow = (color) => {
+	return `0.2em 0.2em 1px ${color} !important`
+}
+
+const CardContainer = styled.div`
+    min-height: 2em;
+    margin: 1.2em;
+    cursor: pointer;
+    color: ${greyDark} !important;
+    border-top: 3px solid ${borderColor} !important;
+    box-shadow: ${dropShadow};
+    flex: 1 1 220px;
+    font-size: ${defaultFont};
+    background-color: white;
+`
+
+const CardTitle = styled.h4`
+    padding: ${contentPadding};
+    margin-bottom: 0rem;
+    padding-bottom: 0rem;
+`
+
+const CardBody = styled.p`
+    padding: ${contentPadding};
+    overflow-y: auto;
+    max-height: 9rem;
+    padding-top: 0rem;
+`
+
+const CardFooter = styled(ObjectFooter)`
+    background-color: ${magentaLighter};
+    padding: 0rem;
+    margin-left: auto;
+`
+
+export const CardBadgeWrapper = styled(ObjectFooter)`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+`
+
+export const CardDate = styled.p`
+    font-size: ${defaultFont};
+    padding: ${contentPadding};
+    margin-bottom: 0rem;
+    padding-bottom: 0rem;
+`
+
+const CardIcon = styled.div`
+    margin: -40px auto auto -20px;
+    text-align: center;
+    border: 2px ${magentaLighter} solid;
+    border-radius: 50%;
+    position: relative;
+    padding: 1.5rem;
+    width: 3.125rem;
+    height: 3.125rem;
+    font-size: 50px;
+    font-weight: bold;
+    white-space: nowrap;
+    ::after{
+        border: 1px ${magentaLighter} solid;
+        transform: rotate(5deg);
+        content: "";
+        top: -2px;
+        left: -5px;
+    }
+    ::before{
+    content: "00";
+    font-size: 40px;
+    }
+`
+
+const Card = ({data, incr}) => {
+    const tagLimit = 5;
+    const abstractLimit = 400;
+    return (
+        <CardContainer>
+            <CardIcon>{incr}</CardIcon>
+            <CardTitle>{data.title}</CardTitle>
+            <CardDate>{data.date}</CardDate>
+            <FeedBadgeWrapper>
+                {data.tags.slice(0,tagLimit).map((item, index) => (<Badge key={index}>{item}</Badge>))}
+            {data.tags.length > tagLimit && <SmallColorText>... {data.tags.length - tagLimit} more tag(s)</SmallColorText>}
+        </FeedBadgeWrapper>
+            <hr/>
+            <CardBody>
+                {data.abstractShort.substring(0,abstractLimit)} {data.abstractShort.length > abstractLimit && <span>...</span>}
+            </CardBody>
+            <CardFooter>
+            <CardBadgeWrapper>
+                <MagentaButton>Read More ></MagentaButton>
+            </CardBadgeWrapper>
+            </CardFooter>
+        </CardContainer>
+    )
+}
+
+export default Card