learnreact.com: add layout links and copyright

J8088 · Jan 28, 2020 · f25fa96 · f25fa96
1 parent 1e15a18
commit f25fa96
Show file tree

Hide file tree

Showing 33 changed files with 228 additions and 135 deletions.
diff --git a/learnreact.com/components/layout.js b/learnreact.com/components/layout.js
@@ -0,0 +1,16 @@
+export default function({ children, ...props }) {
+  return (
+    <div>
+      <main {...props} style={{ maxWidth: "32em" }}>
+        <p>
+          <strong>
+            <a href="/">Learn React</a>
+          </strong>
+        </p>
+
+        {children}
+      </main>
+      <footer>&copy; {new Date().getFullYear()} Michael Chan</footer>
+    </div>
+  );
+}
diff --git a/learnreact.com/pages/courses/2014-react-basics.mdx b/learnreact.com/pages/courses/2014-react-basics.mdx
@@ -1,10 +1,18 @@
+import Layout from "../../components/layout";
+
+<Layout>
+<Head>
+  <title>Learn React | React Basics (2014)</title>
+</Head>
+
 # React Basics (2014)
 
 (out of date) React Basics for v0.12
 
 ## Lessons
 
 <Index />
+</Layout>
 
 export const lessons = [
   {
@@ -36,27 +44,29 @@ export const lessons = [
 
 export function Lesson({ title, course, videoEmbed, ...props }) {
   return (
-    <article {...props}>
-      <Head>
-        <title>
-          Learn React | {course} > {title}
-        </title>
-      </Head>
-      <h2>
-        <a href="/courses/2014-react-basics">{course}</a>
-      </h2>
-      <h1>{title}</h1>
-      <iframe
-        width="560"
-        height="315"
-        frameBorder="0"
-        allow="autoplay; encrypted-media"
-        allowFullScreen
-        src={videoEmbed}
-        {...props}
-      ></iframe>
-      <Index />
-    </article>
+    <Layout>
+      <article {...props}>
+        <Head>
+          <title>
+            Learn React | {course} > {title}
+          </title>
+        </Head>
+        <h2>
+          <a href="/courses/2014-react-basics">{course}</a>
+        </h2>
+        <h3>{title}</h3>
+        <iframe
+          width="560"
+          height="315"
+          frameBorder="0"
+          allow="autoplay; encrypted-media"
+          allowFullScreen
+          src={videoEmbed}
+          {...props}
+        ></iframe>
+        <Index />
+      </article>
+    </Layout>
   );
 }
 

diff --git a/learnreact.com/pages/courses/2018-essential-npm.mdx b/learnreact.com/pages/courses/2018-essential-npm.mdx
@@ -1,10 +1,19 @@
+import Layout from "../../components/layout";
+
+<Layout>
+  <Head>
+    <title>Learn React | Essential NPM</title>
+  </Head>
+
 # Essential NPM
 
 Are you an NPM button masher? Do lack confidence when adding, updating, are removing dependencies? Are you worried you might change a dependency only to break your site? Essential NPM is for you. In it are the secrets of the NPM command line utility for application developers. In a few short lessons you'll gain total confidence in managing your dependencies with NPM
 
 ## Lessons:
 
 <Index />
+</Layout>
+
 
 export const lessons = [
   {
@@ -87,31 +96,32 @@ export const lessons = [
     videoEmbed: "https://www.youtube.com/embed/AhfXHzTCmTU",
     uri: "/lessons/2018-essential-npm-16-summary"
   }
-];
+].map(lesson => ({ ...lesson, course: "Essential NPM"}));
 
-export function Lesson({ title, course, videoEmbed, ...props }) {
+export function Lesson({ title, course, videoEmbed }) {
   return (
-    <article {...props}>
-      <Head>
-        <title>
-          Learn React | {course} > {title}
-        </title>
-      </Head>
-      <h2>
-        <a href="/courses/2018-essential-npm">{course}</a>
-      </h2>
-      <h1>{title}</h1>
-      <iframe
-        width="560"
-        height="315"
-        frameBorder="0"
-        allow="autoplay; encrypted-media"
-        allowFullScreen
-        src={videoEmbed}
-        {...props}
-      ></iframe>
-      <Index />
-    </article>
+    <Layout>
+      <article>
+        <Head>
+          <title>
+            Learn React | {course} > {title}
+          </title>
+        </Head>
+        <h2>
+          <a href="/courses/2018-essential-npm">{course}</a>
+        </h2>
+        <h3>{title}</h3>
+        <iframe
+          width="560"
+          height="315"
+          frameBorder="0"
+          allow="autoplay; encrypted-media"
+          allowFullScreen
+          src={videoEmbed}
+        ></iframe>
+        <Index />
+      </article>
+    </Layout>
   );
 }
 

diff --git a/learnreact.com/pages/courses/2018-essential-react.mdx b/learnreact.com/pages/courses/2018-essential-react.mdx
@@ -1,10 +1,17 @@
-# Essential React
+import Layout from "../../components/layout"
+
+<Layout>
+  <Head>
+    <title>Learn React | Essential React</title>
+  </Head>
 
+# Essential React
 Learn Essential React—the kind that makes you money. If you want to sound smart buzz-wordy at your next meet up, move along. This course is for doers. It moves fast from "Hello World" to advanced component composition, serving as a good overview of the best parts of React. Learn Essential React and start shipping code today!
 
 ## Lessons:
 
 <Index />
+</Layout>
 
 export const lessons = [
   {
@@ -147,7 +154,7 @@ export function Lesson({ title, course, videoEmbed }) {
       <h2>
         <a href="/courses/2018-essential-npm">{course}</a>
       </h2>
-      <h1>{title}</h1>
+      <h3>{title}</h3>
       <iframe
         width="560"
         height="315"

diff --git a/learnreact.com/pages/courses/2018-the-context-api.mdx b/learnreact.com/pages/courses/2018-the-context-api.mdx
@@ -1,3 +1,10 @@
+import Layout from "../../components/layout"
+
+<Layout>
+  <Head>
+    <title>Learn React: The Context API</title>
+  </Head>
+
 # The Context API
 
 Want to join the ranks of open source projects like Redux, React Router, and Styled Components? You need to learn Context. Context is an API that allows you to distribute data to every component in a component tree without drilling prop-holes. This course is an in-depth look at the Context API, new in 16.3. It covers the the part system: Create, Consumer, and Provide. And explores the ergonomics of working with Context in your apps and components.
@@ -6,6 +13,8 @@ Want to join the ranks of open source projects like Redux, React Router, and Sty
 
 <Index />
 
+</Layout>
+
 export const lessons = [
   {
     title: "Overview",
@@ -68,7 +77,7 @@ export const lessons = [
 
 export function Lesson({ title, course, videoEmbed }) {
   return (
-    <>
+    <Layout>
       <Head>
         <title>
           Learn React | {course} > {title}
@@ -77,17 +86,19 @@ export function Lesson({ title, course, videoEmbed }) {
       <h2>
         <a href="/courses/2018-the-context-api">{course}</a>
       </h2>
-      <h1>{title}</h1>
-      <iframe
-        width="560"
-        height="315"
-        frameBorder="0"
-        allow="autoplay; encrypted-media"
-        allowFullScreen
-        src={videoEmbed}
-      ></iframe>
+      <article>
+        <h1>{title}</h1>
+        <iframe
+          width="560"
+          height="315"
+          frameBorder="0"
+          allow="autoplay; encrypted-media"
+          allowFullScreen
+          src={videoEmbed}
+        ></iframe>
+      </article>
       <Index />
-    </>
+    </Layout>
   );
 }
 

diff --git a/learnreact.com/pages/courses/function-components.mdx b/learnreact.com/pages/courses/function-components.mdx
@@ -1,3 +1,6 @@
+import Layout from "../../components/layout";
+
+<Layout>
 <Head>
   <title>Learn React | Function Components</title>
 </Head>
@@ -9,6 +12,7 @@ Function components are the simplest way to write components in React. They don'
 ## Lessons:
 
 <Index />
+</Layout>
 
 export const lessons = [
   {
@@ -67,27 +71,29 @@ export const lessons = [
 
 export function Lesson({ title, course, videoEmbed, ...props }) {
   return (
-    <article {...props}>
-      <Head>
-        <title>
-          Learn React | {course} > {title}
-        </title>
-      </Head>
-      <h2>
-        <a href="/courses/function-components">{course}</a>
-      </h2>
-      <h1>{title}</h1>
-      <iframe
-        width="560"
-        height="315"
-        frameborder="0"
-        allow="autoplay; encrypted-media"
-        allowfullscreen
-        src={videoEmbed}
-        {...props}
-      ></iframe>
-      <Index />
-    </article>
+    <Layout>
+      <article {...props}>
+        <Head>
+          <title>
+            Learn React | {course} > {title}
+          </title>
+        </Head>
+        <h2>
+          <a href="/courses/function-components">{course}</a>
+        </h2>
+        <h3>{title}</h3>
+        <iframe
+          width="560"
+          height="315"
+          frameborder="0"
+          allow="autoplay; encrypted-media"
+          allowfullscreen
+          src={videoEmbed}
+          {...props}
+        ></iframe>
+        <Index />
+      </article>
+    </Layout>
   );
 }
 

diff --git a/learnreact.com/pages/courses/style-with-components.mdx b/learnreact.com/pages/courses/style-with-components.mdx
@@ -1,10 +1,17 @@
-# Style with Components
+import Layout from "../../components/layout";  
+
+<Layout>
+  <Head>
+    <title>Learn React | Style with Components</title>
+  </Head>
 
+# Style with Components
 Learn to compose React components for styling. Whether you prefer CSS, inline-styles, or a CSS-in-JS solution, you can use style components to keep your codebase clean and maintainable.
 
 ## Lessons:
 
 <Index />
+</Layout>
 
 export const lessons = [
   {
@@ -52,7 +59,7 @@ export const lessons = [
 
 export function Lesson({ title, course, videoEmbed }) {
   return (
-    <>
+    <Layout>
       <Head>
         <title>
           Learn React | {course} > {title}
@@ -61,7 +68,7 @@ export function Lesson({ title, course, videoEmbed }) {
       <h2>
         <a href="/courses/2018-the-context-api">{course}</a>
       </h2>
-      <h1>{title}</h1>
+      <h3>{title}</h3>
       <iframe
         width="560"
         height="315"
@@ -71,7 +78,7 @@ export function Lesson({ title, course, videoEmbed }) {
         src={videoEmbed}
       ></iframe>
       <Index />
-    </>
+    </Layout>
   );
 }
 

diff --git a/learnreact.com/pages/index.mdx b/learnreact.com/pages/index.mdx
@@ -1,10 +1,11 @@
-import Courses from "./courses/index.md"
+import Layout from "../components/layout"
+import Courses from "./courses/index.mdx"
 
-<>
+<Layout>
 
 <Head>
   <title>Learn React</title>
 </Head>
 
 <Courses />
-</>
+</Layout>
diff --git a/learnreact.com/pages/lessons/2018-essential-react-1-overview.mdx b/learnreact.com/pages/lessons/2018-essential-react-1-overview.mdx
@@ -1,9 +1,10 @@
 import { Lesson, Index, lessons } from "../courses/2018-essential-react.mdx";
+import Layout from "../../components/layout"
 
-<article>
+<Layout>
 <Lesson {...lessons[0]} />
 
 Welcome to Essential React! In this course we’ll cover all of the essential knowledge you need to have about React components. We’ll state easy! We’re going to start with `Hello World!` and JSX. How to get started and what they are. But we’re going to progress pretty quickly to events. and state, and state management, lifecycle events, and get all the way to advanced composition of components. Yes! Advanced composition. But don’t be afraid, I think you can handle it. We’re going to take it one step at a time. Only one new concept per video. The whole thing will take about fourty to fourty-five minutes, but by the end you’ll know everything that you need to know to write stellar React apps. We’ll build this Pokemon component that allows you to page through all of the Pokemon available on Pokeapi.co. It’s going to be a lot of fun! Let’s get started.
 
 <Index />
-</article>
+</Layout>