Merge pull request #30 from codelit/page-title

Title on every page
codelitdev · May 31, 2020 · a6236c0 · a6236c0
2 parents c9dfe41 + 93d62a6
commit a6236c0
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 24 deletions.
diff --git a/docs/assets/screenshot.png b/docs/assets/screenshot.png
diff --git a/frontend/components/About.js b/frontend/components/About.js
@@ -8,7 +8,7 @@ const About = props =>
   props.siteInfo.about ? (
     <Grid container spacing={2}>
       <Grid item>
-        <Typography variant="h4">{HEADER_ABOUT_SECTION}</Typography>
+        <Typography variant="h2">{HEADER_ABOUT_SECTION}</Typography>
       </Grid>
       <Grid item>
         <Card>

diff --git a/frontend/components/Article.js b/frontend/components/Article.js
@@ -20,7 +20,10 @@ import PriceTag from "./PriceTag";
 const useStyles = featuredImage =>
   makeStyles(theme => ({
     header: {
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(1),
+      [theme.breakpoints.up("sm")]: {
+        marginBottom: theme.spacing(4)
+      }
     },
     creatoravatarcontainer: {
       display: "flex",

diff --git a/frontend/components/CourseItem.js b/frontend/components/CourseItem.js
@@ -67,7 +67,9 @@ const CourseItem = props => {
                       </Typography>
                     </Grid>
                     <Grid item>
-                      <Typography variant="body1">{description}</Typography>
+                      <Typography variant="body1" component="div">
+                        {description}
+                      </Typography>
                     </Grid>
                     <Grid item>
                       <PriceTag cost={course.cost}></PriceTag>

diff --git a/frontend/components/Hero.js b/frontend/components/Hero.js
@@ -37,7 +37,7 @@ const Hero = props => {
     <div className={classes.container}>
       <Grid container className={classes.header}>
         <Grid item>
-          <Typography variant="h4">{FEATURED_SECTION_HEADER}</Typography>
+          <Typography variant="h2">{FEATURED_SECTION_HEADER}</Typography>
         </Grid>
       </Grid>
       <Grid container alignItems="center" justify="space-between" spacing={2}>

diff --git a/frontend/components/Masterlayout.js b/frontend/components/Masterlayout.js
@@ -25,12 +25,15 @@ const MasterLayout = props => {
   return (
     <>
       <Head>
-        {props.siteinfo.logopath && (
+        <title>
+          {props.title} | {props.siteInfo.title}
+        </title>
+        {props.siteInfo.logopath && (
           <link
             rel="icon"
             href={formulateMediaUrl(
               MEDIA_BACKEND,
-              props.siteinfo.logopath,
+              props.siteInfo.logopath,
               true
             )}
           />
@@ -48,12 +51,13 @@ const MasterLayout = props => {
 MasterLayout.propTypes = {
   children: PropTypes.object,
   networkAction: PropTypes.bool,
-  siteinfo: siteInfoProps
+  siteInfo: siteInfoProps.isRequired,
+  title: PropTypes.string.isRequired
 };
 
 const mapStateToProps = state => ({
   networkAction: state.networkAction,
-  siteinfo: state.siteinfo
+  siteInfo: state.siteinfo
 });
 
 export default connect(mapStateToProps)(MasterLayout);
diff --git a/frontend/pages/course/[id]/[slug].js b/frontend/pages/course/[id]/[slug].js
@@ -1,7 +1,11 @@
 import { connect } from "react-redux";
 import ResponsiveDrawer from "../../../components/ResponsiveDrawer.js";
 import Head from "next/head";
-import { formulateCourseUrl, formulateMediaUrl } from "../../../lib/utils.js";
+import {
+  formulateCourseUrl,
+  formulateMediaUrl,
+  getPostDescriptionSnippet
+} from "../../../lib/utils.js";
 import { Lock } from "@material-ui/icons";
 import { BACKEND, FRONTEND, MEDIA_BACKEND } from "../../../config/constants.js";
 import { SIDEBAR_TEXT_COURSE_ABOUT } from "../../../config/strings.js";
@@ -41,14 +45,19 @@ const Course = props => {
       {!error && (
         <>
           <Head>
-            <title>{course.title}</title>
+            <title>
+              {course.title} | {props.siteInfo.title}
+            </title>
             <meta
               property="og:url"
               content={formulateCourseUrl(course, FRONTEND)}
             />
             <meta property="og:type" content="article" />
             <meta property="og:title" content={course.title} />
-            {/* <meta property="og:description" content={getPostDescriptionSnippet(course.description)} /> */}
+            <meta
+              property="og:description"
+              content={getPostDescriptionSnippet(course.description)}
+            />
             <meta property="og:author" content={course.creatorName} />
             {course.featuredImage && (
               <meta
@@ -108,7 +117,8 @@ Course.getInitialProps = async ({ query }) => {
 };
 
 const mapStateToProps = state => ({
-  profile: state.profile
+  profile: state.profile,
+  siteInfo: state.siteinfo
 });
 
 export default connect(mapStateToProps)(Course);
diff --git a/frontend/pages/courses.js b/frontend/pages/courses.js
@@ -8,10 +8,25 @@ import { BTN_LOAD_MORE, PAGE_HEADER_ALL_COURSES } from "../config/strings.js";
 import MasterLayout from "../components/Masterlayout.js";
 import ContainedBodyLayout from "../components/ContainedBodyLayout.js";
 import { Typography, Button } from "@material-ui/core";
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    [theme.breakpoints.up("sm")]: {
+      marginTop: theme.spacing(4)
+    }
+  },
+  loadMoreBtn: {
+    marginBottom: theme.spacing(4)
+  }
+}));
 
 const Courses = props => {
   const [courses, setCourses] = useState(props.courses);
   const [hasMorePages, setHasMorePages] = useState(true);
+  const classes = useStyles();
 
   const getMoreCourses = async () => {
     if (hasMorePages) {
@@ -26,15 +41,18 @@ const Courses = props => {
   };
 
   return (
-    <MasterLayout>
+    <MasterLayout title={PAGE_HEADER_ALL_COURSES}>
       <ContainedBodyLayout>
-        <Typography variant="h2">{PAGE_HEADER_ALL_COURSES}</Typography>
+        <Typography variant="h2" className={classes.header}>
+          {PAGE_HEADER_ALL_COURSES}
+        </Typography>
         {courses.map(course => (
           <CourseItem course={course} key={course.id} isPublicView={true} />
         ))}
         <Button
           onClick={getMoreCourses}
           disabled={hasMorePages ? null : "disabled"}
+          className={classes.loadMoreBtn}
         >
           {BTN_LOAD_MORE}
         </Button>

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
@@ -75,7 +75,9 @@ const Index = props => {
   };
 
   return (
-    <MasterLayout>
+    <MasterLayout
+      title={`${props.siteinfo.subtitle} | ${props.siteinfo.title}`}
+    >
       <Grid container direction="column">
         {hasContentToShow === true && (
           <>
@@ -93,7 +95,7 @@ const Index = props => {
                   {posts.length > 0 && (
                     <Grid item xs={12} sm={8}>
                       <section>
-                        <Typography variant="h4">
+                        <Typography variant="h2">
                           {HEADER_BLOG_POSTS_SECTION}
                         </Typography>
                         {posts.map((x, index) => (
@@ -210,7 +212,8 @@ const getFeaturedCourses = async () => {
 
 const mapStateToProps = state => ({
   auth: state.auth,
-  profile: state.profile
+  profile: state.profile,
+  siteinfo: state.siteinfo
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/frontend/pages/post/[id]/[slug].js b/frontend/pages/post/[id]/[slug].js
@@ -11,15 +11,16 @@ import Head from "next/head";
 import ContainedBodyLayout from "../../../components/ContainedBodyLayout.js";
 import Article from "../../../components/Article.js";
 import FetchBuilder from "../../../lib/fetch.js";
+import { siteInfoProps } from "../../../types.js";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   articleMarginAdjust: {
-    marginTop: "3.2em"
+    marginTop: theme.spacing(2)
   },
   articleMarginBottomAdjust: {
-    marginBottom: "2em"
+    marginBottom: theme.spacing(2)
   }
-});
+}));
 
 const Post = props => {
   const classes = useStyles();
@@ -28,11 +29,10 @@ const Post = props => {
   };
 
   return (
-    <MasterLayout>
+    <MasterLayout title={props.post.title}>
       {props.post && (
         <>
           <Head>
-            <title>{props.post.title}</title>
             <meta
               property="og:url"
               content={formulateCourseUrl(props.post, FRONTEND)}
@@ -91,4 +91,12 @@ Post.getInitialProps = async ({ query }) => {
   return { post: response.post };
 };
 
-export default connect()(Post);
+Post.propTypes = {
+  siteInfo: siteInfoProps
+};
+
+const mapStateToProps = state => ({
+  siteInfo: state.siteinfo
+});
+
+export default connect(mapStateToProps)(Post);
diff --git a/frontend/public/default2.png b/frontend/public/default2.png
diff --git a/frontend/public/default4.png b/frontend/public/default4.png