Merge pull request #48 from dzcode-io/32-develop-learn-scene

32 develop learn scene

Author: ZibanPirate

data/documentation/Advanced_Git_Commands/info.json

@@ -0,0 +1,3 @@
+{
+  "title": "Advanced Git"
+}

data/documentation/Getting_Started/content.md

@@ -1 +1,54 @@
-Content coming soon...
+# Bing Daily Wallpaper
+
+[![](https://img.shields.io/npm/v/bing-daily-wallpaper-cross-platform)](https://www.npmjs.com/package/bing-daily-wallpaper-cross-platform)
+[![](https://img.shields.io/npm/dm/bing-daily-wallpaper-cross-platform)](https://www.npmjs.com/package/bing-daily-wallpaper-cross-platform)
+
+Set Bing image of the day as your desktop wallpaper daily
+
+## Get Started
+
+### Perquisites
+
+Make sure you have:
+
+- [NodeJS](https://nodejs.org/) 10 or higher
+- [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
+
+### Setup
+
+install via NPM:
+
+```terminal
+npm i -g bing-daily-wallpaper-cross-platform
+```
+
+Or install via Yarn:
+
+```terminal
+yarn global add bing-daily-wallpaper-cross-platform
+```
+
+### Run
+
+To set the latest bing daily image as your desktop wallpaper simply run:
+
+```terminal
+bdw
+```
+
+and you're all set.
+
+## Contributing
+
+To get started see [the contributing guidelines](https://github.com/ZibanPirate/bing-daily-wallpaper/blob/master/.github/CONTRIBUTING.md).
+
+## Todos
+
+- [x] Cross-platform support (MacOS, Linux, Windows)
+- [ ] More than 90% test coverage
+- [ ] Update wallpaper automatically each day
+- [ ] Electron App for non-programmers
+
+## License
+
+Copyright (c) 2020 Zakaria Mansouri (twitter: [@zibanpirate](https://twitter.com/zibanpirate)) Licensed under the MIT license.

data/documentation/Git_Basics/Collaboration_Scenarios/info.json

@@ -1,5 +1,5 @@
 {
-  "title": "Collaboration Scenarios",
+  "title": "Collaboration",
   "description": "Description coming soon",
   "image": "https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=100"
 }

data/documentation/Git_Basics/info.json

@@ -0,0 +1,3 @@
+{
+  "title": "Git Basics"
+}

data/documentation/list.json

@@ -1,10 +1,12 @@
 {
   "items": [
     "Getting_Started",
+    "Git_Basics",
     "Git_Basics/Git_and_Github",
     "Git_Basics/Basic_Git_Commands",
     "Git_Basics/Managing_Conflict",
     "Git_Basics/Collaboration_Scenarios",
+    "Advanced_Git_Commands",
     "Advanced_Git_Commands/Git_Reflog",
     "Advanced_Git_Commands/Git_Clean",
     "Advanced_Git_Commands/Git_Rebase"

frontend/package.json

@@ -81,6 +81,7 @@
     "pug-loader": "^2.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-markdown": "^4.3.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.5",

frontend/src/apps/main/components/navbar/index.tsx

@@ -9,33 +9,33 @@ interface NavigationLink {
 }
 
 interface Props {
-  navitems: NavigationLink[];
+  navItems: NavigationLink[];
 }
 
-export const Navbar: React.FC<Props> = ({ navitems }) => {
-  const [isOpen, setOpen] = useState("open");
+export const Navbar: React.FC<Props> = ({ navItems }) => {
+  const [isOpen, setIsOpen] = useState(true);
   const navToggle = () => {
-    isOpen === "" ? setOpen("open") : setOpen("");
+    setIsOpen(!isOpen);
   };
 
   return (
     <nav className="Navbar">
       <Link className="brand" to="/">
-        Dzcode.io
+        dzCode.io
       </Link>
       <div className="Navbar__burger" onClick={navToggle}>
         <div className="burger__button" />
       </div>
-      <div className={`Navbar__list ${isOpen}`}>
-        {navitems.map((navitem: NavigationLink) => {
+      <div className={`Navbar__list ${isOpen && "open"}`}>
+        {navItems.map((navItem: NavigationLink) => {
           return (
             <NavLink
               className="navLink"
               activeClassName="Navbar__link--active"
-              key={navitem.id}
-              to={navitem.to}
+              key={navItem.id}
+              to={navItem.to}
             >
-              {navitem.name}
+              {navItem.name}
             </NavLink>
           );
         })}

frontend/src/apps/main/components/navbar/style.scss

@@ -3,6 +3,7 @@
 .Navbar {
   width: 100%;
   padding: 0 10%;
+  height: $navbar-height;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -15,6 +16,7 @@
   position: fixed;
   top: 0;
   right: 0;
+  border-bottom: #d4d4d3 solid 1px;
   .brand {
     font-size: 1rem;
     color: text-primary;

frontend/src/apps/main/entry/index.pug

@@ -22,6 +22,8 @@ head(lang="{|language code|}")
       s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
       fbq('init', "#{fbpCode}");
       fbq('track', 'PageView');
+  //- Facebook Comments plugin
+  meta(property="fb:app_id" content=fbAppCode)
 
   meta(charset='utf-8')
   meta(http-equiv='X-UA-Compatible' content='IE=edge')
@@ -40,3 +42,5 @@ head(lang="{|language code|}")
 
 body
   div#app-container
+
+script(async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0")

frontend/src/apps/main/entry/index.tsx

@@ -14,17 +14,17 @@ const Learn = lazy(() => import("t9/apps/main/scenes/learn"));
 
 // Temp data: Todo: replace with props from the store
 
-const navitems = [
-  { id: 1, to: "/learn", name: "Learn" },
-  { id: 2, to: "/getstarted", name: "Get Started" },
-  { id: 3, to: "/gitgithub", name: "Git & Github" },
+const navItems = [
+  { id: 1, to: "/Learn/Getting_Started", name: "Learn" },
+  { id: 2, to: "/", name: "Contribute" },
+  { id: 3, to: "/", name: "Projects" },
   { id: 4, to: "/articles", name: "Articles" },
 ];
 
 export const App: React.SFC<{}> = () => {
   return (
     <BrowserRouter>
-      <Navbar navitems={navitems} />
+      <Navbar navItems={navItems} />
       <Suspense fallback={Loading}>
         <Switch>
           <Route path="/" exact={true} component={Landing} />