Adventures: introduce Page component with proper navbar (kernel-commu…

…nity#24)

* Adventures: introduce Page component with proper navbar

* PR fixes

packages/common/src/components/Navbar.jsx

@@ -44,7 +44,7 @@ export default function Navbar (props) {
  <i className={`${textColor} fas fa-bars`} />
  </button>}
  </div>
- {menuLinks &&
+ {(menuLinks || additionalMenuItems) &&
  <div
  className={
  `lg:flex flex-grow lg:flex-grow-0 lg:ml-auto ${backgroundColor} ${navbarOpen ? ' block rounded' : ' hidden'}`

packages/common/src/components/NavbarLink.jsx

@@ -7,22 +7,23 @@
  */
 
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 export default function NavbarLink (props) {
  const { textColor } = props
  const { url, iconName, title } = props.link
 
  return (
- <a
+ <Link
  className={`${textColor} px-3 py-4 lg:px-6 lg:py-2 flex items-center text-sm lowercase font-bold`}
- href={url}
+ to={url}
  >
  {iconName &&
  <>
  <i className={`${textColor} ${iconName} text-lg leading-lg mr-2`} />
  {' '}
  </>}
  {title}
- </a>
+ </Link>
  )
 }

packages/projects/src/App.config.json

@@ -1,27 +1,17 @@
 {
  "appTitle": "Kernel Adventures",
+ "logoUrl": "/icon-192x192.png",
+ "homeUrl": "/browse",
  "minRole": 1000,
  "navbar": {
  "links": [
  {
- "url": "https://kernel.community/en/learn/",
- "iconName": "far fa-file-alt",
- "title": "Learn"
+ "url": "/browse",
+ "title": "Browse"
  },
  {
- "url": "https://twitter.com/kernel0x",
- "iconName": "fab fa-twitter",
- "title": "Tweet"
- },
- {
- "url": "https://www.youtube.com/channel/UC2kUaSgR0L-uzGkNsOxSxzw",
- "iconName": "fab fa-youtube",
- "title": "Watch"
- },
- {
- "url": "https://github.com/kernel-community/",
- "iconName": "fab fa-github",
- "title": "Contribute"
+ "url": "/create",
+ "title": "Create"
  }
  ]
  }

packages/projects/src/App.js

@@ -10,14 +10,14 @@ import React, { Suspense, lazy } from 'react'
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import { ServicesProvider } from '@kernel/common'
 
-import NotFound from 'views/NotFound.js'
+import NotFound from 'views/NotFound'
 import 'App.css'
 
-const Login = lazy(() => import('views/Login.js'))
-const Create = lazy(() => import('views/Create.js'))
-const Edit = lazy(() => import('views/Edit.js'))
-const Browse = lazy(() => import('views/Browse.js'))
-const View = lazy(() => import('views/View.js'))
+const Login = lazy(() => import('views/Login'))
+const Create = lazy(() => import('views/Create'))
+const Edit = lazy(() => import('views/Edit'))
+const Browse = lazy(() => import('views/Browse'))
+const View = lazy(() => import('views/View'))
 
 const App = () => {
  return (

packages/projects/src/components/Page.jsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Kernel
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Link } from 'react-router-dom'
+
+import { Footer, Navbar } from '@kernel/common'
+
+import AppConfig from 'App.config'
+
+const editMenuItem = ({ projectHandle }) => {
+ return (
+ <Link
+ key='edit'
+ className='text-kernel-white px-3 py-4 lg:px-6 lg:py-2 flex items-center text-sm lowercase font-bold'
+ to={`/edit/${projectHandle}`}
+ >
+ Edit
+ </Link>
+ )
+}
+
+const Page = ({ projectHandle, children }) => {
+ const additionalMenuItems = projectHandle ? [editMenuItem({ projectHandle })] : []
+
+ return (
+ <div className='flex flex-col h-screen justify-between'>
+ <Navbar
+ title={AppConfig.appTitle}
+ logoUrl={AppConfig.logoUrl}
+ homeUrl={AppConfig.homeUrl}
+ menuLinks={AppConfig.navbar?.links}
+ additionalMenuItems={additionalMenuItems}
+ backgroundColor='bg-kernel-dark' textColor='text-kernel-white'
+ />
+ <div className='mb-auto mt-24 mx-24'>
+ {children}
+ </div>
+ <Footer backgroundColor='bg-kernel-dark' textColor='text-kernel-white'>
+ built at <a href='https://kernel.community/' className='text-kernel-green-light'>KERNEL</a>
+ </Footer>
+ </div>
+ )
+}
+
+export default Page

packages/projects/src/views/Browse.js → packages/projects/src/views/Browse.jsx

@@ -11,7 +11,8 @@ import { useNavigate, Link } from 'react-router-dom'
 import { useServices } from '@kernel/common'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { items: {} }
 
@@ -44,7 +45,7 @@ const humanize = (ms, dp = 0) => {
  return `${scaledTime.toFixed(dp)} ${timeUnits[timeScalarIndex]}`
 }
 
-const Page = () => {
+const Browse = () => {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
  const navigate = useNavigate()
 
@@ -68,31 +69,24 @@ const Page = () => {
  }, [services])
 
  return (
- <div className='md:container md:mx-auto'>
- <NavBar />
- <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
- <div className='md:basis-1/2 px-8'>
- <div className='grid grid-cols-1 gap-6'>
- <div className='block'>
- <ul>
- {state && state.items && Object.keys(state.items).map((e) => {
- const meta = state.items[e]
- const project = state.items[e].data
- const updated = Date.now() - meta.updated
- return (
- <li key={e} className='text-gray-700'>
- <Link to={`/view/${project.url}`}>{project.title}</Link>
- <small> {humanize(updated)} ago</small>
- </li>
- )
- })}
- </ul>
- </div>
- </div>
- </div>
+ <Page>
+ <div>
+ <ul>
+ {state && state.items && Object.keys(state.items).map((e) => {
+ const meta = state.items[e]
+ const project = state.items[e].data
+ const updated = Date.now() - meta.updated
+ return (
+ <li key={e} className='text-gray-700'>
+ <Link to={`/view/${project.url}`}>{project.title}</Link>
+ <small> {humanize(updated)} ago</small>
+ </li>
+ )
+ })}
+ </ul>
  </div>
- </div>
+ </Page>
  )
 }
 
-export default Page
+export default Browse

packages/projects/src/views/Create.js → packages/projects/src/views/Create.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { url: '', title: '', markdown: '' }
 
@@ -82,7 +83,7 @@ const create = async (state, dispatch, e) => {
  console.log(created)
 }
 
-const Page = () => {
+const Create = () => {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
  const navigate = useNavigate()
 
@@ -132,10 +133,9 @@ const Page = () => {
  }, [markdown])
 
  return (
- <div className='md:container md:mx-auto'>
- <NavBar />
- <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
- <div className='md:basis-1/2 px-8'>
+ <Page>
+ <div className='grid grid-cols-2 mb-24'>
+ <div className='px-8'>
  <form className='grid grid-cols-1 gap-6'>
  <label className='block'>
  <span className='text-gray-700'>Title</span>
@@ -181,14 +181,14 @@ const Page = () => {
  </label>}
  </form>
  </div>
- <div className='md:basis-1/2 grow px-8 rounded-md border-gray-800 shadow-lg'>
+ <div className='px-8 rounded-md border-gray-800 shadow-lg'>
  <MDXProvider components={components}>
  <Content />
  </MDXProvider>
  </div>
  </div>
- </div>
+ </Page>
  )
 }
 
-export default Page
+export default Create

packages/projects/src/views/Edit.js → packages/projects/src/views/Edit.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { url: '', title: '', markdown: '' }
 
@@ -82,7 +83,7 @@ const update = async (state, dispatch, e) => {
  console.log(updated)
 }
 
-const Page = () => {
+const Edit = () => {
  const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
  const navigate = useNavigate()
  const { project } = useParams()
@@ -138,10 +139,9 @@ const Page = () => {
  }, [markdown])
 
  return (
- <div className='md:container md:mx-auto'>
- <NavBar />
- <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
- <div className='md:basis-1/2 px-8'>
+ <Page>
+ <div className='grid grid-cols-2 mb-24'>
+ <div className='px-8'>
  <form className='grid grid-cols-1 gap-6'>
  <label className='block'>
  <span className='text-gray-700'>Title</span>
@@ -193,8 +193,8 @@ const Page = () => {
  </MDXProvider>
  </div>
  </div>
- </div>
+ </Page>
  )
 }
 
-export default Page
+export default Edit

packages/projects/src/views/Login.js → packages/projects/src/views/Login.jsx

@@ -6,29 +6,15 @@
  *
  */
 
-import { useNavigate, Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useServices, Navbar, Footer } from '@kernel/common'
 import AppConfig from 'App.config'
 
 import bgImage from 'assets/images/admin_bg.png'
 
-const additionalNavItems = [
- (
- <button
- key='btn-nav'
- className={`bg-kernel-green-mid text-kernel-dark text-xs font-bold uppercase
- px-4 py-2 rounded outline-none focus:outline-none ml-3 mt-3 mb-4`}
- type='button'
- >
- <i className='fas fa-user-plus' /> <Link to='/register'>Register</Link>
- </button>
- )
-]
-
 const Login = () => {
  const navigate = useNavigate()
  const { walletLogin } = useServices()
- const navbarConfig = AppConfig.navbar
 
  const handleLogin = async () => {
  const user = await walletLogin()
@@ -41,8 +27,8 @@ const Login = () => {
  return (
  <div>
  <Navbar
- title={AppConfig.appTitle} menuLinks={navbarConfig.links}
- additionalMenuItems={additionalNavItems}
+ title={AppConfig.appTitle}
+ logoUrl={AppConfig.logoUrl}
  backgroundColor='bg-kernel-dark' textColor='text-kernel-white'
  />
  <main>

packages/projects/src/views/View.js → packages/projects/src/views/View.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 /* eslint-disable */
 const components = {
@@ -36,7 +37,7 @@ const components = {
 }
 /* eslint-enable */
 
-const Page = () => {
+const View = () => {
  const navigate = useNavigate()
  const { project } = useParams()
 
@@ -85,17 +86,14 @@ const Page = () => {
  }, [markdown])
 
  return (
- <div className='md:container md:mx-auto'>
- <NavBar project={project} />
- <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
- <div className='md:basis-1/2 grow px-8 rounded-md border-gray-800 shadow-lg min-h-screen'>
- <MDXProvider components={components}>
- {markdownError || <Content />}
- </MDXProvider>
- </div>
+ <Page projectHandle={project}>
+ <div className='mb-24'>
+ <MDXProvider components={components}>
+ {markdownError || <Content />}
+ </MDXProvider>
  </div>
- </div>
+ </Page>
  )
 }
 
-export default Page
+export default View