feat: change styles; add note component

drashland · Dec 23, 2022 · 343f2dc · 343f2dc
1 parent 11a3e3a
commit 343f2dc
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 27 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,6 +20,8 @@ jobs:
         uses: denoland/setup-deno@v1
 
       - name: Lint
-        run: deno lint --ignore=node_modules,.next,public
+        # Ignore `src/services` because `deno fmt` adds commas and `deno lint`
+        # complains. Classic.
+        run: deno lint --ignore=node_modules,.next,public,src/services/
       - name: Fmt Check
         run: deno fmt --check --ignore=node_modules,.next,public
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useRouter } from "next/router";
 import LayoutTopBar from "../src/components/LayoutTopBar";
 import LoadingScreen from "../src/components/LoadingScreen";
+import { common as theme } from "../styles/theme.js";
 
 const MAINTAINERS = [
   {
@@ -153,7 +154,7 @@ const CardsContainer = styled.div`
 const Card = styled.div`
   cursor: pointer;
   background: #ffffff;
-  border-radius: .5rem;
+  border-radius: ${theme.layout.borderRadius};
   padding: 1.5rem;
   color: #333333;
   display: flex;
@@ -201,7 +202,7 @@ const Button = styled.a`
   background: #000000;
   color: #ffffff;
   padding: 1rem 2rem;
-  border-radius: 3rem;
+  border-radius: ${theme.button.borderRadius};
   font-weight: bold;
   font-size: .8rem;
   letter-spacing: .1rem;
@@ -240,7 +241,7 @@ const TagsContainer = styled.div`
 
 const Tag = styled.div`
   background: #000000;
-  border-radius: 1rem;
+  border-radius: ${theme.tag.borderRadius};
   color: #ffffff;
   font-size: .75rem;
   padding: .15rem .9rem;

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -45,7 +45,7 @@ const Main = styled.div`
 
 const MakeBetter = styled.div`
   background-color: ${({ theme }) => theme.layout.makeBetter.background};
-  border-radius: 1rem;
+  border-radius: ${({ theme }) => theme.layout.borderRadius};
   padding: 2rem;
   transition-duration: 0.25s;
   transition-property: background;

diff --git a/src/components/Markdown.jsx b/src/components/Markdown.jsx
@@ -9,8 +9,6 @@ import styled from "styled-components";
 import CodeExtended from "./markdown/CodeExtended";
 import { PLACEHOLDER_REPLACEMENTS } from "../services/content_replacer_service";
 
-const MARGIN_BOTTOM = "margin-bottom: 1.25rem !important;";
-
 const flatten = (text, child) => {
   return typeof child === "string"
     ? text + child
@@ -24,6 +22,28 @@ const LinkIcon = styled(Link)`
   transition-property: opacity;
 `;
 
+const Note = styled.div`
+  border-radius: ${({ theme }) => theme.layout.borderRadius};
+  background: #e0f0f9;
+  border: ${({ theme }) => `1px solid ${theme.note.borderColor}`};
+  color: #36789d;
+  padding: 1.25rem 1.25rem 1.25rem 2.25rem;
+  margin-bottom: ${({ theme }) => theme.layout.marginBottom};
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    position: absolute;
+    content: "";
+    width: 1rem;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: ${({ theme }) => theme.note.borderColor};
+  }
+`;
+
 export const Blockquote = styled.blockquote`
   border-left: 5px solid #efefef;
   padding-left: 1rem;
@@ -97,7 +117,7 @@ export const Heading1 = styled(Heading(1))`
     font-size: 3rem;
     font-weight: bold;
     line-height: 1.2;
-    ${MARGIN_BOTTOM};
+    margin-bottom: ${({ theme }) => theme.layout.marginBottom};
     transition-duration: 0.25s;
     transition-property: color;
   }
@@ -113,7 +133,7 @@ export const Heading2 = styled(Heading(2))`
     font-weight: bold;
     line-height: 1.2;
     padding-top: 2rem;
-    ${MARGIN_BOTTOM};
+    margin-bottom: ${({ theme }) => theme.layout.marginBottom};
     transition-duration: 0.25s;
     transition-property: border-top, color;
   }
@@ -127,7 +147,7 @@ export const Heading3 = styled(Heading(3))`
     font-weight: bold;
     line-height: 1.2;
     padding-top: 1.5rem;
-    ${MARGIN_BOTTOM};
+    margin-bottom: ${({ theme }) => theme.layout.marginBottom};
     transition-duration: 0.25s;
     transition-property: color;
   }
@@ -139,7 +159,7 @@ export const Heading4 = styled(Heading(4))`
     color: ${({ theme }) => theme.layout.text.color};
     font-size: 1.3rem;
     font-weight: bold;
-    ${MARGIN_BOTTOM};
+    margin-bottom: ${({ theme }) => theme.layout.marginBottom};
     transition-duration: 0.25s;
     transition-property: color;
   }
@@ -202,43 +222,65 @@ const ParagraphExtended = ({ className, children: text }) => {
     });
   });
 
+  let note = null;
+  text.forEach((line) => {
+    if (typeof line === "string" && line.includes("{{ note_since: ")) {
+      const version = line.replace(/\{\{.+note_since: +|\}\}/g, "");
+      note = (
+        <Note>
+          <span className="bold">Note:</span> This feature was introduced in
+          {" "}
+          {version}. Please make sure you are using {version}{" "}
+          (or higher) before proceeding with this tutorial.
+        </Note>
+      );
+    }
+  });
+
+  if (note) {
+    return note;
+  }
+
   // If the paragraph includes placeholders, then we need to make sure we do not
   // wrap the replaced placeholder in a <p> tag. Otherwise we will end up with
   // nested <p> tags and that will throw a React error in the console. It's not
   // problematic per se, but annoying af.
-  return paragraphContainsPlaceholder
-    ? text
-    : <p className={className}>{text}</p>;
+  if (paragraphContainsPlaceholder) {
+    return text;
+  }
+
+  return <p className={className}>{text}</p>;
 };
 
 export const Paragraph = styled(ParagraphExtended)`
-  ${MARGIN_BOTTOM};
+  margin-bottom: ${({ theme }) => theme.layout.marginBottom};
   transition-duration: 0.25s;
   transition-property: color;
 `;
 
 export const Pre = styled(PreExtended)`
   background: #2f343c !important;
-  border-radius: 1rem;
+  border-radius: ${({ theme }) => theme.markdown.pre.borderRadius};
   overflow: hidden;
-  ${MARGIN_BOTTOM};
+  margin-bottom: ${({ theme }) => theme.layout.marginBottom};
 
   &[class*=language-] {
-    ${MARGIN_BOTTOM};
+    margin-bottom: ${({ theme }) => theme.layout.marginBottom};
   }
 
   pre {
     background: #2f343c !important;
-    border-radius: 1rem;
+    border-radius: ${({ theme }) => theme.markdown.pre.borderRadius};
     margin-bottom: 0 !important;
+    max-height: 500px;
 
     &[class*=language-] {
       margin-bottom: 0 !important;
     }
   }
 
   code {
-    font-size: .85rem;
+    font-size: .8rem;
     background-color: transparent;
     padding: 0;
     color: inherit;
@@ -248,7 +290,7 @@ export const Pre = styled(PreExtended)`
 export const Code = styled(CodeExtended)`
   font-size: .85rem;
   background: ${({ theme }) => theme.markdown.code.backgroundColor};
-  border-radius: 1rem;
+  border-radius: ${({ theme }) => theme.markdown.code.borderRadius};
   color: ${({ theme }) => theme.markdown.code.color};
   font-weight: 500;
   padding: .25rem .5rem;
@@ -259,13 +301,13 @@ export const Code = styled(CodeExtended)`
 export const OrderedList = styled.ol`
   margin-left: 0;
   padding-left: 2.5rem;
-  ${MARGIN_BOTTOM};
+  margin-bottom: ${({ theme }) => theme.layout.marginBottom};
 `;
 
 export const UnorderedList = styled.ul`
   margin-left: 0;
   padding-left: 2.5rem;
-  ${MARGIN_BOTTOM};
+  margin-bottom: ${({ theme }) => theme.layout.marginBottom};
 `;
 
 export const Image = styled.img`

diff --git a/src/components/SideBar.jsx b/src/components/SideBar.jsx
@@ -50,7 +50,7 @@ const VersionsSelectorContainer = styled.div`
 `;
 
 const VersionsSelectorInnerContainer = styled.div`
-  border-radius: 1rem;
+  border-radius: ${({ theme }) => theme.versionSelector.borderRadius};
   border: 1px solid #dfdfdf;
   background: #ffffff;
   width: 100%;

diff --git a/src/components/markdown/CodeExtended.jsx b/src/components/markdown/CodeExtended.jsx
@@ -24,7 +24,7 @@ const ACCEPTED_CODE_TAB_NAMES = [
 const Code = styled.code`
   font-size: .85rem;
   background: ${({ theme }) => theme.markdown.code.backgroundColor};
-  border-radius: 1rem;
+  border-radius: ${({ theme }) => theme.layout.borderRadius};
   color: ${({ theme }) => theme.markdown.code.color};
   font-weight: 500;
   padding: .25rem .5rem;
@@ -34,7 +34,7 @@ const Code = styled.code`
 
 const Tab = styled.button`
   font-family: 'Menlo', Helvetica, Arial, sans-serif;
-  font-size: .85rem;
+  font-size: .7rem;
   cursor: pointer;
   padding: 1rem;
   background: ${({ activeTab, name }) =>

diff --git a/src/services/content_replacer_service.jsx → src/services/content_replacer_service.js b/src/services/content_replacer_service.jsx → src/services/content_replacer_service.js
diff --git a/styles/globals.css b/styles/globals.css
@@ -213,3 +213,7 @@ pre pre code {
 .code-blocks code {
   padding: 1rem !important;
 }
+
+.bold {
+  font-weight: bold;
+}
diff --git a/styles/theme.js b/styles/theme.js
@@ -1,7 +1,10 @@
 /**
  * Common styles that both light theme and dark theme use go here.
  */
-const common = {
+export const common = {
+  button: {
+    borderRadius: "3rem",
+  },
   module: {
     logo: {
       size: "100px",
@@ -12,6 +15,24 @@ const common = {
       height: "13px",
     },
   },
+  layout: {
+    borderRadius: ".25rem",
+    marginBottom: "1.25rem",
+  },
+  markdown: {
+    pre: {
+      borderRadius: ".25rem",
+    },
+  },
+  note: {
+    borderColor: "#b8dcf1",
+  },
+  tag: {
+    borderRadius: ".25rem",
+  },
+  versionSelector: {
+    borderRadius: ".25rem",
+  },
 };
 
 /**
@@ -27,6 +48,7 @@ export const lightTheme = {
     color: "#333333",
   },
   markdown: {
+    ...common.markdown,
     heading2: {
       borderTopColor: "#f4f4f4",
     },
@@ -36,6 +58,7 @@ export const lightTheme = {
     },
   },
   layout: {
+    ...common.layout,
     background: "#ffffff",
     horizontalRule: {
       background: "#f4f4f4",
@@ -76,6 +99,7 @@ export const darkTheme = {
     color: "#efefef",
   },
   layout: {
+    ...common.layout,
     background: "#363b44",
     color: "#efefef",
     horizontalRule: {
@@ -92,6 +116,7 @@ export const darkTheme = {
     },
   },
   markdown: {
+    ...common.markdown,
     heading2: {
       borderTopColor: "#494f58",
     },