added markdown reader darkmode

components/core/CarouselSidebarData.js

@@ -283,7 +283,7 @@ class CarouselSidebarData extends React.Component {
 
   _handleDarkMode = async (e) => {
     Events.dispatchCustomEvent({
-      name: "slate-theme-toggle-darkmode",
+      name: "set-slate-theme",
       detail: { darkmode: e.target.value },
     });
   };
@@ -610,9 +610,6 @@ class CarouselSidebarData extends React.Component {
               <div css={STYLES_TEXT}>Dark mode</div>
               <Toggle dark active={this.props?.theme?.darkmode} onChange={this._handleDarkMode} />
             </div>
-            <div style={{ color: Constants.system.darkGray, marginTop: 8 }}>
-              {this.props?.data?.settings?.darkMode ? "You're saving your eyes" : "RIP"}
-            </div>
           </React.Fragment>
         ) : null}
         {this.props.isOwner && type?.startsWith("video/") ? (

components/core/MarkdownFrame.js

@@ -1,32 +1,28 @@
 import "isomorphic-fetch";
 
 import * as React from "react";
-import * as Constants from "~/common/constants";
+import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/react";
 import { Markdown } from "~/components/system/components/Markdown";
 import { H1, H2, H3, H4, P, UL, OL, LI, Link } from "~/components/system/components/Typography";
 
-const STYLES_ASSET = (theme) => {
-  console.log(theme.darkMode);
-  return css`
-    padding: 120px calc(32px + 16px + 8px);
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    will-change: transform;
-    color: ${theme.darkmode ? Constants.system.white : "#000"};
-    background-color: ${theme.darkmode ? "#000" : "#fff"};
-  `;
-};
+const STYLES_ASSET = (theme) => css`
+  padding: 120px calc(32px + 16px + 8px);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  will-change: transform;
+  color: ${theme.darkmode ? theme.system.wallLight : theme.system.pitchBlack};
+  background-color: ${theme.darkmode ? theme.system.pitchBlack : theme.system.wallLight};
+`;
 
 const STYLES_BODY = css`
   width: 100%;
   // 687px to ensure we have maximum 70ch per line
   max-width: 687px;
   margin: 0 auto;
-
   & > *:first-child {
     margin-top: 0;
   }
@@ -71,7 +67,48 @@ const STYLES_IMG = css`
   max-width: 100%;
 `;
 
-export default function MarkdownFrame({ url }) {
+const STYLES_META = (theme) => css`
+  max-width: 687px;
+  margin: 0 auto;
+  font-size: 12px;
+  color: ${theme.darkmode ? theme.system.textGray : theme.system.gray70};
+  letter-spacing: 0.2px;
+  align-items: center;
+  margin-bottom: 12px;
+`;
+
+const STYLES_DEVIDER = (theme) => css`
+  position: sticky;
+  // Note(Amine): asset padding
+  top: -120px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  max-width: 687px;
+  margin: 0 auto;
+  margin-bottom: 58px;
+  background-color: ${theme.system.gray50};
+  transition: height 0.3s;
+`;
+
+const STYLE_PROGRESS = (theme) => css`
+  width: 80%;
+  height: 100%;
+  background-color: ${theme.darkmode ? "#fff" : "#000"};
+  transition: opacity 0.3s;
+`;
+
+const STYLES_INTENT = (theme) => css`
+  width: 100%;
+  height: 8px;
+  background: linear-gradient(
+    180deg,
+    ${theme.darkmode ? theme.system.pitchBlack : theme.system.wallLight} 0%,
+    ${theme.darkmode ? "rgba(12, 12, 12, 0)" : "rgba(241, 240, 242, 0)"} 100%
+  );
+`;
+
+export default function MarkdownFrame({ url, date }) {
   const [content, setContent] = React.useState("");
 
   React.useEffect(() => {
@@ -81,6 +118,11 @@ export default function MarkdownFrame({ url }) {
     });
   }, []);
 
+  const ref = React.useRef();
+  const { handleScrollAnimation, percentage } = useScrollPosition({ ref });
+
+  const readTime = Math.round(content.split(" ").length / 150);
+
   const remarkReactComponents = {
     p: (props) => <P {...props} />,
     h1: (props) => <H1 {...props} />,
@@ -102,10 +144,34 @@ export default function MarkdownFrame({ url }) {
       onClick={(e) => {
         e.stopPropagation();
       }}
+      onScroll={handleScrollAnimation}
+      ref={ref}
     >
-      <article css={STYLES_BODY}>
-        <Markdown md={content} css={STYLES_BODY} options={{ remarkReactComponents }} />
-      </article>
+      <div>
+        <div css={STYLES_META}>
+          <span>{Strings.toDate(date)}</span> / <span>{readTime} min read</span>
+        </div>
+        <div css={STYLES_DEVIDER} style={{ height: percentage > 15 ? "4px" : "1px" }}>
+          <div
+            css={STYLE_PROGRESS}
+            style={{ width: `${percentage}%`, opacity: percentage < 15 ? 0 : 1 }}
+          />
+          <div css={STYLES_INTENT} />
+        </div>
+        <article css={STYLES_BODY}>
+          <Markdown md={content} css={STYLES_BODY} options={{ remarkReactComponents }} />
+        </article>
+      </div>
     </div>
   );
 }
+
+const useScrollPosition = ({ ref }) => {
+  const [percentage, setPercentage] = React.useState(0);
+  const handleScrollAnimation = () => {
+    const percentage =
+      (100 * ref.current.scrollTop) / (ref.current.scrollHeight - ref.current.clientHeight);
+    setPercentage(percentage);
+  };
+  return { percentage, handleScrollAnimation };
+};

components/core/SlateMediaObject.js

@@ -140,7 +140,7 @@ export default class SlateMediaObject extends React.Component {
     }
 
     if (this.props.data.name.endsWith(".md")) {
-      return <MarkdownFrame url={this.props.data.url} />;
+      return <MarkdownFrame date={this.props.data.date} url={this.props.data.url} />;
     }
 
     if (Validations.isPreviewableImage(type)) {

components/system/ThemeProvider.js

@@ -4,15 +4,15 @@ import * as Constants from "~/common/constants";
 import { ThemeProvider as EmotionTP } from "@emotion/react";
 
 export default function ThemeProvider({ children }) {
-  const [theme, setTheme] = React.useState({ darkmode: true });
-  const toggleDarkMode = (e) => setTheme((prev) => ({ ...prev, darkmode: e.detail.darkmode }));
+  const [theme, setTheme] = useLocalStorage("slate-theme", { darkmode: true });
+  const handleSlateTheme = (e) => setTheme((prev) => ({ ...prev, ...e.detail }));
 
   React.useEffect(() => {
     if (!window) return;
-    window.addEventListener("slate-theme-toggle-darkmode", toggleDarkMode);
+    window.addEventListener("set-slate-theme", handleSlateTheme);
     return () => {
       if (!window) return;
-      window.removeEventListener("slate-theme-toggle-darkmode", toggleDarkMode);
+      window.removeEventListener("set-slate-theme", handleSlateTheme);
     };
   }, []);
 
@@ -34,3 +34,18 @@ export default function ThemeProvider({ children }) {
     </EmotionTP>
   );
 }
+
+export const useLocalStorage = (key, defaultValue) => {
+  const [value, setValue] = React.useState(defaultValue);
+
+  React.useEffect(() => {
+    const cachedValue = localStorage.getItem(key);
+    if (cachedValue) setValue(JSON.parse(cachedValue));
+  }, []);
+
+  React.useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+};