First version of Tutorials page (#413)

Author: enoldev

assets/js/react/components/App.jsx

@@ -29,7 +29,16 @@ export const App = ({component, fetchData}) => {
       }
     }
 
-    fetchAsync()
+
+    if (fetchData) {
+      fetchAsync()
+    } else {
+      setFetchingData({
+        loading: false,
+        data: {},
+        error: null
+      })
+    }
   }, [])
 
   if (fetchingData.loading) {

assets/scss/common/_custom.scss

@@ -307,4 +307,93 @@ iframe {
 
 [data-dark-mode] .landing-colo {
     color: white;
-}
+}
+
+.tutorials-container {
+  width: 100%;
+}
+
+.tutorials-container a {
+  text-decoration: none;
+  color: black;
+  width: 100%;
+}
+
+[data-dark-mode] .tutorials-container a {
+  color: white;
+}
+
+.tutorials-card {
+  margin-right: 20px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #d5d5d5;
+  margin-bottom: 20px;
+}
+
+[data-dark-mode] .tutorials-card {
+  color: white;
+  border-color: #8a8a8a;
+}
+
+.tutorials-card .info {
+  width: auto;
+  background-color: #f5f5f5;
+  opacity: 0.95; display: flex;
+  justify-content: space-between;
+  border-radius: 3px 3px 0px 0px;
+  border-bottom: 1px solid #d5d5d5;
+}
+
+[data-dark-mode] .tutorials-card .info {
+  background-color: #3d3d3d;
+  border-color: #8a8a8a;
+}
+
+.tutorials-card .mainback {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  height: 200px;
+  background-size: cover;
+  border-radius: 0px 0px 4px 4px;
+}
+
+.tutorials-card .mainback .title {
+  background-color: #f5f5f5;
+  border-top: 4px solid #a4a4a4;
+  border-radius: 0px 0px 4px 4px;
+  align-self: flex-end;
+  width: 100%;
+  font-size: 26px;
+  font-weight: bold;
+  opacity: 0.9;
+}
+
+[data-dark-mode] .tutorials-card .mainback .title {
+  background-color: #3d3d3d;
+  border-color: #8a8a8a;
+}
+
+@media (min-width: 1088px) {
+  .tutorials-card {
+    width: calc(33.3% - 20px);
+    max-width:400px;
+  }
+}
+
+@media (min-width: 650px) and (max-width: 1087px) {
+  .tutorials-card {
+    min-width: calc(50% - 20px);
+    width: calc(50% - 20px);
+    max-width: calc(50% - 20px);
+  }
+}
+
+@media (min-width: 0px) and (max-width: 649px) {
+  .tutorials-card {
+    min-width: 100%;
+    width: 100%;
+    max-width: 100%;
+  }
+}

config/_default/config.toml

@@ -1,6 +1,6 @@
 baseurl = "/"
 canonifyURLs = false
-disableAliases = true
+disableAliases = false
 disableHugoGeneratorInject = true
 enableEmoji = true
 enableGitInfo = false

config/_default/menus/menus.en.toml

@@ -1,37 +1,42 @@
 [[main]]
   name = "Curriculum"
-  url = "/"
+  url = "/curriculum"
   weight = 1000
   [main.params]
     identifier = "curriculum"
+    image = "https://cdn-icons-png.flaticon.com/128/9041/9041299.png"
+    width = 21
+    height = 21
 
 [[main]]
-  name = "Prerequisites"
-  url = "/prerequisites/objectives/"
+  name = "Tutorials"
+  url = "/tutorials"
   weight = 2000
   [main.params]
-    identifier = "prerequisites"
+    identifier = "tutorials"
+      image = "https://cdn-icons-png.flaticon.com/128/6988/6988166.png"
+      width = 26
+      height = 26
 
 [[main]]
   name = "Resources"
-  url = "/resources/additional-learning/"
-  weight = 3000
-  [main.params]
-    identifier = "resources"
-
-[[main]]
-  name = "About"
-  url = "/about/"
+  url = "/resources/about/"
   weight = 3500
   [main.params]
-    identifier = "about"
+    identifier = "resources"
+    image = "https://cdn-icons-png.flaticon.com/128/2563/2563002.png"
+    width = 24
+    height = 24
 
 [[main]]
   name = "Website"
   url = "https://pl-launchpad.io"
   weight = 4000
   [main.params]
     identifier = "website"
+    image = "https://cdn-icons-png.flaticon.com/512/4302/4302080.png"
+    width = 24
+    height = 24
 
 # [[main]]
 #   name = "Get Started"
@@ -135,19 +140,47 @@
     section = "dev-tools"
     description = "Learn about some of the most popular tools and projects built using Protocol Labs' technology"
 
-[[prereq]]
-  name = "Pre-Requisites"
-  weight = 10
-  identifier = "prereq"
-
 [[resources]]
   name = "Resources"
   weight = 20
   identifier = "resources-other"
 
+[[resources]]
+  name = "Prerequisites"
+  weight = 20
+  identifier = "resources-prerequisites"
+
+[[resources]]
+  name = "About"
+  weight = 20
+  identifier = "resources-about"
+
+
+[[tutorials]]
+  name = "Introduction to IPFS"
+  weight = 10
+  identifier = "tutorials-ipfs"
+  [tutorials.params]
+    category = "ipfs"
+    image = "/tutorials/intro-ipfs.png"
+
+
+[[tutorials]]
+  name = "Building libp2p applications"
+  weight = 20
+  identifier = "tutorials-libp2p"
+  [tutorials.params]
+    category = "libp2p"
+    image = "/tutorials/libp2p.png"
 
+# [[tutorials]]
+#   name = "Working with IPLD structures"
+#   weight = 30
+#   identifier = "tutorials-ipld"
+#   [tutorials.params]
+#     image = "/tutorials/ipld.svg"
 
-# [[footer]]
-#   name = "Privacy"
-#   url = "/privacy-policy/"
-#   weight = 10
+[[footer]]
+  name = "About Launchpad"
+  url = "/resources/about/"
+  weight = 10

content/en/about/_index.md

@@ -0,0 +1,13 @@
+---
+title: "About Launchpad"
+description: "The What and Why of Web3"
+draft: false
+menu:
+    resources:
+        parent: "resources-about"
+weight: 20
+aliases:
+    - /about/
+---
+
+{{< aboutpage >}}

content/en/resources/about/index.md

@@ -6,6 +6,8 @@ menu:
     resources:
         parent: "resources-other"
 weight: 60
+aliases:
+- /resources/additional-learning/
 ---
 
 #### The Lifecycle of Data in DWeb | IPFS Camp 2019

content/en/resources/additional-learning.md renamed to content/en/resources/other/additional-learning.md

@@ -6,6 +6,8 @@ menu:
     resources:
         parent: "resources-other"
 weight: 70
+aliases:
+- /resources/built-on-ipfs/
 ---
 
 IPFS and Filecoin have made it possible for a number of Dapps and tooling to be built for Web3.

content/en/resources/built-on-ipfs.md renamed to content/en/resources/other/built-on-ipfs.md

@@ -6,6 +6,8 @@ menu:
     resources:
         parent: "resources-other"
 weight: 80
+aliases:
+- /resources/github-guide/
 ---
 
 {{< embed src="https://docs.google.com/presentation/d/11V_BA5A64lCY_wFsvuLO4je02zvzJwD5vf2kzONDWyc/embed" width="100%" height="600px">}}
@@ -36,7 +38,7 @@ Issues are super easy ways for you to make a suggestion to an OSS team, without
 
 Now the team who maintains that repo can see any problems you want to report, assign, and track who can see it. You will also get e-mail notifications for any responses people have to you. Using `@username` in a comment, Issue, or PR will notify that particular person.
 
-![Issues Tab](issue-5.png)  
+![Issues Tab](issue-5.png)
 
 ### Part 2: Make a PR in the GUI
 If you want to take your changes to the next step, you can fork the repo and make a Pull Request (PR). This will make it as easy as the click of a button for repo maintainers to add in your suggestions.

content/en/resources/github-guide/fork-1.png renamed to content/en/resources/other/github-guide/fork-1.png

@@ -3,8 +3,8 @@ title: "Building Web3"
 description: "The What and Why of Web3"
 draft: false
 menu:
-    prereq:
-        parent: "prereq"
+    resources:
+        parent: "resources-prerequisites"
 weight: 20
 ---
 
@@ -40,4 +40,4 @@ Web3 enhances the internet as we know it today with a few other added characteri
 
 [**Smart Contracts – Simply Explained**](https://youtu.be/ZE2HxTmxfrI)
 
-{{< youtube ZE2HxTmxfrI >}}
+{{< youtube ZE2HxTmxfrI >}}

content/en/resources/github-guide/fork-10.png renamed to content/en/resources/other/github-guide/fork-10.png

@@ -3,9 +3,11 @@ title: "Learning Objectives & Quiz"
 description: "Test your knowledge by taking a quiz"
 draft: false
 menu:
-    prereq:
-        parent: "prereq"
+    resources:
+        parent: "resources-prerequisites"
 weight: 10
+aliases:
+    - /prerequisites/objectives/
 ---
 
 # Pre-Requisites

content/en/resources/github-guide/fork-11.png renamed to content/en/resources/other/github-guide/fork-11.png

@@ -3,8 +3,8 @@ title: "Web3 & Protocol Labs"
 description: "What is Web3, and How the Protocol Labs Network is Contributing"
 draft: false
 menu:
-    prereq:
-        parent: "prereq"
+    resources:
+        parent: "resources-prerequisites"
 weight: 10
 ---
 

content/en/resources/github-guide/fork-12.png renamed to content/en/resources/other/github-guide/fork-12.png

@@ -3,8 +3,8 @@ title: "Web3 Tools"
 description: "The Basic Tools and Mechanisms"
 draft: false
 menu:
-    prereq:
-        parent: "prereq"
+    resources:
+        parent: "resources-prerequisites"
 weight: 30
 ---
 
@@ -44,4 +44,4 @@ Essentially, [wallets](https://www.coinbase.com/learn/crypto-basics/what-is-a-cr
 ### Smart Contracts & Security
 
 * [Best Practices Blog](https://consensys.github.io/smart-contract-best-practices/)
-* [Webinar on Smart Contracts Security Best Practices](https://courses.consensys.net/courses/take/smart-contract-security/lessons/9798331-smart-contracts-security-best-practices)
+* [Webinar on Smart Contracts Security Best Practices](https://courses.consensys.net/courses/take/smart-contract-security/lessons/9798331-smart-contracts-security-best-practices)