created fullarticleheader & helmetfullarticle

package.json

@@ -52,7 +52,7 @@
     "@testing-library/user-event": "^14.5.1",
     "framer-motion": "^10.16.4",
     "npm": "^10.1.0",
-    "prettier": "^3.0.3",
+    "prettier": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -67,5 +67,8 @@
     "slick-carousel": "^1.8.1",
     "update": "^0.7.4",
     "web-vitals": "^3.4.0"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/App.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import { Loading, PageLayout } from "./components";
-import { Header } from "./containers";
-import "./index.css";
+import React, { useState, useEffect } from 'react';
+import { Loading, PageLayout } from './components';
+import { Header } from './containers';
+import './index.css';
 
 function App() {
     const [isLoaded, setIsLoaded] = useState(false);

src/containers/FullArticle/FullArticle.css

@@ -461,3 +461,49 @@
     max-width: 53px;
   }
 }
+
+
+/* ----- BLOCK CONTENT CSS */
+
+.ct__full-article-block__content {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+  font-family: var(--font-family);
+}
+.ct__full-article-block__content h3 {
+  font-size: 22px;
+}
+.ct__full-article-block__content h4 {
+  font-size: 20px;
+}
+.ct__full-article-block__content a {
+  text-decoration: none;
+}
+.ct__full-article-block__content li {
+  padding: 0.5rem 1rem;
+}
+.ct__full-article-block__content ul {
+  padding: 0.5rem 1rem;
+}
+.ct__full-article-block__content ol {
+  padding: 0.5rem 1rem;
+}
+.ct__full-article-block__content blockquote {
+  line-height: 25px;
+  font-size: 14px;
+  padding-bottom: 1rem;
+}
+.ct__full-article-block__content p {
+  padding: 0.5rem 0;
+  line-height: 25px;
+  font-size: 16px;
+}
+.ct__full-article-block__content img {
+  margin: 1rem 0 0.5rem 0;
+  width: 100%;
+  border-radius: 1rem;
+  object-fit: cover;
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
+}

src/containers/FullArticle/FullArticleHeader.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { IoMdClose } from 'react-icons/io';
+import { BsArrowLeft } from 'react-icons/bs';
+import { urlFor } from '../../client';
+import BlockContent from '@sanity/block-content-to-react';
+import './FullArticle.css';
+
+const FullArticleHeader = ({
+    headerImage,
+    headerDataColor,
+    headerImageAlt,
+    author,
+    arrowColor,
+    titleColor,
+    titleFilter,
+    title,
+    publishedAt,
+    categories,
+}) => {
+    const [showDetails, setShowDetails] = useState(false);
+
+    return (
+        <div className="ct__full-article__header">
+            {headerImage && headerImage.asset && <img src={urlFor(headerImage.asset).url()} alt={headerImageAlt} />}
+            <Link className="ct__full-article__header-nav__link" to={'/blog'}>
+                <BsArrowLeft className="ct__full-article__header-nav__link-arrow" size={30} style={{ color: `${arrowColor}`, zIndex: 1 }} />
+            </Link>
+            <div className="ct__full-article__header-nav">
+                <AnimatePresence>
+                    {!showDetails && (
+                        <motion.div className="ct__full-article__header-nav__author" layoutId="author" onClick={() => setShowDetails(true)}>
+                            {author.image && author.image.asset && (
+                                <>
+                                    <motion.img src={urlFor(author.image.asset).url()} alt={author.name} />
+                                    <motion.p>by {author.name}</motion.p>
+                                </>
+                            )}
+                        </motion.div>
+                    )}
+
+                    {showDetails && (
+                        <motion.div
+                            className="ct__full-article__header-nav__author open"
+                            layoutId="author-details"
+                            positionTransition
+                            initial={{ opacity: 0, scale: 0.5 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.5 }}
+                        >
+                            <motion.img src={urlFor(author.image.asset).url()} alt={author.name} />
+                            <motion.div className="expanded-article-details-data">
+                                <motion.h3>{author.name}</motion.h3>
+                                {author.bio && <BlockContent blocks={author.bio} />}
+                            </motion.div>
+                            <motion.button onClick={() => setShowDetails(false)}>
+                                <IoMdClose />
+                            </motion.button>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+            <div className="ct__full-article__header-h1">
+                <h1 style={{ color: `${titleColor}`, filter: `${titleFilter}` }}>{title}</h1>
+                <div className="ct__full-article__header-data" style={{ color: `${headerDataColor}` }}>
+                    <p>{publishedAt}</p>
+                    <span>•</span>
+                    {categories && <p>{categories.map((category) => category.title).join(', ')}</p>}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FullArticleHeader;

src/containers/FullArticle/HelmetFullArticle.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+const HelmetFullArticle = ({ title, desc, keywords, slug, headerImageLink }) => {
+    return (
+        <Helmet>
+            <title>{title}</title>
+            <meta name="description" content={desc} />
+            <meta name="keywords" content={keywords} />
+            <meta property="og:locale" content="en_US" />
+            <meta property="og:type" content="article" />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={desc} />
+            <meta property="og:url" content={'https://curiositytakeover.com/blog/' + slug} />
+            <meta property="og:site_name" content="Curiosity Takeover" />
+            <meta property="og:image" content={headerImageLink} />
+            <meta property="og:image:width" content="1200" />
+            <meta property="og:image:height" content="800" />
+            <meta property="og:image:type" content="image/png" />
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:creator" content="@curiosity__blog" />
+            <meta name="twitter:site" content="@curiosity__blog" />
+            <meta name="twitter:image" content={headerImageLink} />
+        </Helmet>
+    );
+};
+
+export default HelmetFullArticle;

src/containers/FullArticle/index.js

@@ -0,0 +1,2 @@
+export { default as FullArticleHeader } from './FullArticleHeader';
+export { default as HelmetFullArticle } from './HelmetFullArticle';