feat: liveness blog (#59)

* feat: add liveness blog and update styling (#57) * feat: optimize images for liveness blog post (#58) --------- Co-authored-by: Ardy <[email protected]>
defi-wonderland · Nov 20, 2023 · f023cd8 · f023cd8
1 parent fda1eb3
commit f023cd8
Show file tree

Hide file tree

Showing 20 changed files with 431 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "rehype-katex": "6.0.2",
     "rehype-raw": "6.1.1",
     "remark-math": "5.1.1",
-    "styled-components": "5.3.5"
+    "styled-components": "6.1.1"
   },
   "devDependencies": {
     "@types/fontfaceobserver": "2.1.0",

diff --git a/public/blog-posts/liveness-2-and-beyond.md b/public/blog-posts/liveness-2-and-beyond.md
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-conclusion.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-conclusion.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-cult.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-cult.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-door.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-door.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-final-piece.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-final-piece.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-knight.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-knight.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-lq.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-lq.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-machine.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-machine.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-paper.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-paper.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-repair.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-repair.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/alice-tree.jpg b/public/img/blog-posts/liveness-2-and-beyond/alice-tree.jpg
diff --git a/public/img/blog-posts/liveness-2-and-beyond/graph-1.png b/public/img/blog-posts/liveness-2-and-beyond/graph-1.png
diff --git a/public/img/blog-posts/liveness-2-and-beyond/table-1.png b/public/img/blog-posts/liveness-2-and-beyond/table-1.png
diff --git a/src/data/blog.json b/src/data/blog.json
@@ -1,4 +1,12 @@
 [
+  {
+    "id": "liveness-2-and-beyond",
+    "name": "Liveness 2 and beyond",
+    "description": "The current status of on-chain storage proofs",
+    "date": "11/17/23",
+    "tags": ["Cryptography", "Verification", "Cross-chain"],
+    "image": "img/blog-posts/liveness-2-and-beyond/alice-lq.jpg"
+  },
   {
     "id": "a-mev-racing-story",
     "name": "A (MEV) racing story",

diff --git a/src/pages/Creations/ProjectsList/index.tsx b/src/pages/Creations/ProjectsList/index.tsx
@@ -54,11 +54,7 @@ export function ProjectsList({ projects }: ProjectListProps) {
     <List>
       {projects.map((project) => (
         <ProjectContainer key={project.name}>
-          <ProjectHeader
-            onClick={(e) => {
-              handleClick(project, e.currentTarget);
-            }}
-          >
+          <ProjectHeader onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleClick(project, e.currentTarget)}>
             <Name>{project.name}</Name>
             <Circle src={circle} alt='circle icon' />
             <HLine />

diff --git a/src/pages/Insights/Insights.styles.tsx b/src/pages/Insights/Insights.styles.tsx
@@ -57,6 +57,10 @@ export const BlogsContainer = styled.div`
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     justify-content: center;
     width: 100%;
+
+    & img {
+      max-height: 27rem;
+    }
   }
 `;
 
@@ -159,10 +163,9 @@ export const DescriptionContainer = styled.div`
   }
 `;
 
-export const TagsContainer = styled.div`
+export const BlogFooter = styled.div`
   padding-top: 1.5rem;
   color: white;
-  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -171,24 +174,33 @@ export const TagsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem 2rem;
+    max-width: 95vw;
 
     & div strong {
       font-size: 1.8rem;
     }
   }
 `;
 
-export const Date = styled.div``;
+export const Date = styled.div`
+  max-width: 30%;
+`;
 
-export const Tags = styled.div`
+export const TagsContainer = styled.div`
   display: flex;
-  justify-content: end;
+  flex-direction: row;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+export const Tag = styled.div`
+  display: flex;
+  justify-content: flex-end;
 
   & strong {
     width: max-content;
     text-transform: capitalize;
     margin: 0 1rem;
-
     font-size: 2.2rem;
   }
 `;
diff --git a/src/pages/Insights/Insights.tsx b/src/pages/Insights/Insights.tsx
@@ -5,16 +5,17 @@ import {
   PageContainer,
   Title,
   BgContainer,
-  TagsContainer,
+  BlogFooter,
   DescriptionContainer,
   DetailsContainer,
   BlogPost,
   Date,
   BackgroundImage,
   BlogsContainer,
   Image,
-  Tags,
+  Tag,
   TitleContainer as PostTitle,
+  TagsContainer,
 } from './Insights.styles';
 import VIDEO_CHROME from '~/assets/videos/insights.webm';
 import VIDEO_SAFARI from '~/assets/videos/insights.mp4';
@@ -77,16 +78,18 @@ export function Insights() {
               <DescriptionContainer>
                 <p>{post.description}</p>
               </DescriptionContainer>
-              <TagsContainer>
+              <BlogFooter>
                 <Date>
                   <p>{post.date}</p>
                 </Date>
-                {post.tags.map((tag) => (
-                  <Tags key={tag}>
-                    <strong>{tag}</strong>
-                  </Tags>
-                ))}
-              </TagsContainer>
+                <TagsContainer>
+                  {post.tags.map((tag) => (
+                    <Tag key={tag}>
+                      <strong>{tag}</strong>
+                    </Tag>
+                  ))}
+                </TagsContainer>
+              </BlogFooter>
             </DetailsContainer>
           </BlogPost>
         ))}

diff --git a/src/pages/Insights/Posts/Posts.styles.tsx b/src/pages/Insights/Posts/Posts.styles.tsx
@@ -55,6 +55,7 @@ export const Content = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 0 3rem;
   }
 
   .ytplayer {
@@ -136,6 +137,7 @@ export const Content = styled.div`
     font-weight: 375;
     border-bottom: 1px solid rgba(255, 255, 255, 0.87);
     transition: all 200ms linear;
+    cursor: pointer;
   }
 
   blockquote {
@@ -163,7 +165,6 @@ export const Content = styled.div`
       font-size: 3rem;
     }
 
-    p,
     h1,
     h2,
     h3,
@@ -190,15 +191,33 @@ export const Content = styled.div`
       width: 350px;
       transform: scale(0.9);
       overflow-y: hidden;
-      overflow-x: scroll;
+      overflow-x: auto;
     }
 
-    .math {
-      display: block;
-      width: 90vw;
+    .math .math-inline {
+      max-width: 80vw;
       height: 100%;
+      width: 100%;
       overflow-y: hidden;
-      overflow-x: scroll;
+      overflow-x: auto;
+    }
+
+    p {
+      max-width: 100vw;
+      padding: 0 1.8rem;
+    }
+
+    li {
+      max-width: 90vw;
+    }
+
+    mrow {
+      max-width: 90vw;
+      overflow-x: auto;
+    }
+
+    aside {
+      padding: 0 2.2rem;
     }
   }
 `;
diff --git a/yarn.lock b/yarn.lock
@@ -96,7 +96,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
   integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
@@ -237,7 +237,7 @@
     "@babel/parser" "^7.22.5"
     "@babel/types" "^7.22.5"
 
-"@babel/traverse@^7.22.5", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
   integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
@@ -267,7 +267,7 @@
   resolved "https://registry.npmjs.org/@cush/relative/-/relative-1.0.0.tgz#8cd1769bf9bde3bb27dac356b1bc94af40f6cc16"
   integrity sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==
 
-"@emotion/is-prop-valid@^1.1.0":
+"@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -279,15 +279,10 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@esbuild/[email protected]":
   version "0.14.54"
@@ -533,6 +528,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/stylis@^4.0.2":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz#0dff504fc23487a02a29209b162249070e83a0da"
+  integrity sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -766,17 +766,6 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.1.4"
-  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
-  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
-    "@babel/plugin-syntax-jsx" "^7.22.5"
-    lodash "^4.17.21"
-    picomatch "^2.3.1"
-
 bail@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
@@ -935,7 +924,7 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
-css-to-react-native@^3.0.0:
+css-to-react-native@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -944,7 +933,7 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -1822,7 +1811,7 @@ hastscript@^7.0.0:
     property-information "^6.0.0"
     space-separated-tokens "^2.0.0"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2128,11 +2117,6 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 longest-streak@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
@@ -2685,6 +2669,15 @@ postcss@^8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3113,21 +3106,25 @@ style-to-object@^0.4.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-[email protected]:
-  version "5.3.5"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
-  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
+[email protected]:
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz#a5414ada07fb1c17b96a26a05369daa4e2ad55e5"
+  integrity sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==
+  dependencies:
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/unitless" "^0.8.0"
+    "@types/stylis" "^4.0.2"
+    css-to-react-native "^3.2.0"
+    csstype "^3.1.2"
+    postcss "^8.4.31"
     shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+    stylis "^4.3.0"
+    tslib "^2.5.0"
+
+stylis@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
 
 sucrase@^3.20.3:
   version "3.32.0"
@@ -3142,7 +3139,7 @@ sucrase@^3.20.3:
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -3231,6 +3228,11 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.5.0:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"