From 24f096dd13c53b99d8ab2ff9fee9f573eea2f581 Mon Sep 17 00:00:00 2001 From: Nathan Wang Date: Sun, 19 Jul 2020 20:13:28 -0700 Subject: [PATCH] overhaul syllabus --- content/ordering.ts | 8 +- docs/Front End Documentation.md | 3 +- src/components/Dashboard/ModuleLink.tsx | 159 +++++++ src/components/ModuleLayout/ModuleLayout.tsx | 8 +- .../ModuleLayout/SidebarNav/SidebarNav.tsx | 4 +- .../DashboardNav.tsx => TopNavigationBar.tsx} | 14 +- src/models/module.ts | 7 +- src/pages/dashboard.tsx | 29 +- src/pages/index.tsx | 4 +- src/templates/moduleTemplate.tsx | 2 +- src/templates/syllabusTemplate.tsx | 391 ++++++------------ src/utils/getProgressInfo.ts | 25 ++ src/{ => utils}/utils.ts | 5 +- 13 files changed, 353 insertions(+), 306 deletions(-) create mode 100644 src/components/Dashboard/ModuleLink.tsx rename src/components/{Dashboard/DashboardNav.tsx => TopNavigationBar.tsx} (95%) create mode 100644 src/utils/getProgressInfo.ts rename src/{ => utils}/utils.ts (89%) diff --git a/content/ordering.ts b/content/ordering.ts index e9ac45b..44d56ed 100644 --- a/content/ordering.ts +++ b/content/ordering.ts @@ -1,16 +1,18 @@ -// Section -> Category -> Module +// Section -> Chapter -> Module export type SectionID = "intro" | "bronze" | "silver" | "gold" | "plat" | "adv"; -export type Category = { +export type Chapter = { name: string; items: string[]; + description?: string; } -const MODULE_ORDERING: {[key in SectionID]: Category[]} = { +const MODULE_ORDERING: {[key in SectionID]: Chapter[]} = { "intro": [ { name: "About This Guide", + description: "In this first chapter, you'll learn about how this guide is structured and how best to use this guide.", items: [ "using-this-guide", "modules", diff --git a/docs/Front End Documentation.md b/docs/Front End Documentation.md index 29a606a..c4c7e4a 100644 --- a/docs/Front End Documentation.md +++ b/docs/Front End Documentation.md @@ -21,4 +21,5 @@ The following is written for individuals without front-end development experienc ## Credits - Confetti taken from Josh Comeau: https://github.com/joshwcomeau/react-europe-talk-2018 -- Lots of inspiration from Josh Comeau's blog and Gatsbyjs documentation site \ No newline at end of file +- Lots of inspiration from Josh Comeau's blog and Gatsbyjs documentation site +- Syllabus template from https://www.howtographql.com/ \ No newline at end of file diff --git a/src/components/Dashboard/ModuleLink.tsx b/src/components/Dashboard/ModuleLink.tsx new file mode 100644 index 0000000..175ab18 --- /dev/null +++ b/src/components/Dashboard/ModuleLink.tsx @@ -0,0 +1,159 @@ +import * as React from 'react'; +import styled, { css } from 'styled-components'; +import tw from 'twin.macro'; +import { ModuleLinkInfo } from '../../models/module'; +import { useContext } from 'react'; +import ModuleLayoutContext from '../../context/ModuleLayoutContext'; +import UserDataContext from '../../context/UserDataContext'; +import { Link } from 'gatsby'; + +const LinkWithProgress = styled.span` + ${tw`block relative`} + + &::after { + content: ''; + //left: calc(-3rem - 12px); // -(3rem padding plus half of width) + //top: calc(1.5rem - 12px); // half of (1.5 + 1.5padding) rem minus half of height + //height: 24px; + //width: 24px; + ${({ small }) => css` + left: calc(-1.75rem - ${ + small ? '8px' : '10px' + }); // -(3rem padding plus half of width) + // prettier-ignore + top: calc(1.5rem - ${ + small ? '8px' : '10px' + }); // half of (1.5 + 1.5padding) rem minus half of height + height: ${small ? '16px' : '20px'}; + width: ${small ? '16px' : '20px'}; + `} + + @media (min-width: 768px) { + ${({ small }) => css` + // prettier-ignore + left: calc(-3rem - ${ + small ? '8px' : '10px' + }); // -(3rem padding plus half of width) + `} + } + + position: absolute; + transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; + } + + &::after { + border-radius: 100%; + + ${props => props.dotColorStyle} + ${({ small }) => small && tw`border-2 border-gray-200 bg-white`} + } + + &::before { + content: ''; + position: absolute; + width: 2px; + display: block; + left: calc(-1.75rem - 1px); + @media (min-width: 768px) { + left: calc(-3rem - 1px); // -(3rem padding plus half of width) + } + top: 0; + bottom: 0; + ${props => props.lineColorStyle}; + } + + &:first-of-type::before { + top: 22px; + } + + &:last-of-type::before { + bottom: calc(100% - 22px); + } +`; + +const StyledLink = styled.div` + ${tw`focus:outline-none transition ease-in-out duration-150 text-gray-800 hover:text-blue-700 text-xl leading-6 py-3`} + + &::before { + content: ''; + left: calc(-1.75rem - 11px); + @media (min-width: 768px) { + left: calc(-3rem - 11px); // -(3rem padding plus half of width) + } + top: calc(1.5rem - 11px); // half of 1.5rem minus half of height + height: 22px; + width: 22px; + position: absolute; + transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s; + } + + &::before { + transform: ${({ showDot }) => (showDot ? 'scale(1)' : 'scale(0.1)')}; + border-radius: 100%; + z-index: 1; + ${({ dotColorStyle }) => dotColorStyle} + } + + &:hover { + &::before { + transform: scale(1); + ${tw`bg-blue-600`} + } + } +`; + +const ModuleLink = ({ link }: { link: ModuleLinkInfo }) => { + const { userProgressOnModules } = useContext(UserDataContext); + const progress = userProgressOnModules[link.id] || 'Not Started'; + + let lineColorStyle = tw`bg-gray-200`; + let dotColorStyle = tw`bg-white`; + let activeTextStyle = tw`text-blue-700 font-medium`; + + // if (isActive) { + // lineColorStyle = tw`bg-blue-700`; + // dotColorStyle = tw`bg-blue-700`; + // } + + if (progress === 'Reading') { + lineColorStyle = tw`bg-yellow-400`; + dotColorStyle = tw`bg-yellow-400`; + activeTextStyle = tw`text-yellow-700 font-medium`; + } else if (progress === 'Practicing') { + lineColorStyle = tw`bg-orange-400`; + dotColorStyle = tw`bg-orange-400`; + activeTextStyle = tw`text-orange-700 font-medium`; + } else if (progress === 'Complete') { + lineColorStyle = tw`bg-green-400`; + dotColorStyle = tw`bg-green-400`; + activeTextStyle = tw`text-green-700 font-medium`; + } else if (progress === 'Skipped') { + lineColorStyle = tw`bg-blue-300`; + dotColorStyle = tw`bg-blue-300`; + activeTextStyle = tw`text-blue-700 font-medium`; + } + + return ( + + + +

+ {link.title} +

+

+ {link.description} +

+ + + + ); +}; + +export default ModuleLink; diff --git a/src/components/ModuleLayout/ModuleLayout.tsx b/src/components/ModuleLayout/ModuleLayout.tsx index dfccee5..40cf7ce 100644 --- a/src/components/ModuleLayout/ModuleLayout.tsx +++ b/src/components/ModuleLayout/ModuleLayout.tsx @@ -10,7 +10,7 @@ import { } from '../../models/module'; import { graphql, Link, useStaticQuery } from 'gatsby'; import MODULE_ORDERING, { - Category, + Chapter, SECTION_LABELS, } from '../../../content/ordering'; import ModuleFrequencyDots from './ModuleFrequencyDots'; @@ -20,7 +20,7 @@ import ModuleConfetti from './ModuleConfetti'; import TextTooltip from '../Tooltip/TextTooltip'; import UserDataContext, { UserLang } from '../../context/UserDataContext'; import { NavLinkGroup, SidebarNav } from './SidebarNav/SidebarNav'; -import { graphqlToModuleLinks } from '../../utils'; +import { graphqlToModuleLinks } from '../../utils/utils'; import ModuleLayoutContext from '../../context/ModuleLayoutContext'; import TableOfContentsSidebar from './TableOfContents/TableOfContentsSidebar'; import TableOfContentsBlock from './TableOfContents/TableOfContentsBlock'; @@ -77,7 +77,7 @@ const Breadcrumbs = () => { return (