From a95457539730f16da8f0b70c8f08f5b6f7b88aaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Demenech?= Date: Tue, 9 May 2023 14:39:23 -0300 Subject: [PATCH] Website v0.4 (#860) * [#858,site][xl]: add Examples to the Navbar, rename gallery to showcases, remove examples from showcases, move github stars to the navbar, add view on github button to the hero section, reduce padding on buttons, add RHS image to the hero * [#858,site][xl]: make sidebar consistent on all pages * [site][xs]: fix ts error on GitHub button component * [site][xs]: fix external links on navbar needing two clicks to open * [site, hero][xs]: align RHS image to the top --- site/components/ButtonLink.tsx | 2 +- site/components/Community.tsx | 7 +- site/components/Features.tsx | 6 +- site/components/GalleryItem.tsx | 106 --------------- site/components/Hero.tsx | 99 +++----------- site/components/Layout.tsx | 127 ++++++++++-------- site/components/Nav.tsx | 26 ++-- site/components/NavItem.tsx | 29 ++-- site/components/Navigation.jsx | 46 +++++++ site/components/NewsletterForm.tsx | 4 +- .../components/{Gallery.tsx => Showcases.tsx} | 32 +---- site/components/ShowcasesItem.tsx | 24 ++++ site/components/SiteToc.tsx | 110 --------------- site/content/assets/sidebar.json | 14 ++ site/content/config.js | 4 +- site/content/docs/sidebar.json | 44 ------ site/pages/[...slug].tsx | 2 +- site/pages/index.tsx | 47 +++++-- 18 files changed, 259 insertions(+), 470 deletions(-) delete mode 100644 site/components/GalleryItem.tsx create mode 100644 site/components/Navigation.jsx rename site/components/{Gallery.tsx => Showcases.tsx} (55%) create mode 100644 site/components/ShowcasesItem.tsx delete mode 100644 site/components/SiteToc.tsx create mode 100644 site/content/assets/sidebar.json delete mode 100644 site/content/docs/sidebar.json diff --git a/site/components/ButtonLink.tsx b/site/components/ButtonLink.tsx index 24f4ba94..3022095a 100644 --- a/site/components/ButtonLink.tsx +++ b/site/components/ButtonLink.tsx @@ -18,7 +18,7 @@ export default function ButtonLink({ return ( {children} diff --git a/site/components/Community.tsx b/site/components/Community.tsx index 21e1aee0..0c0abd47 100644 --- a/site/components/Community.tsx +++ b/site/components/Community.tsx @@ -60,10 +60,13 @@ export default function Community() { return ( -

+

Community

-

+

We are growing. Get in touch or become a contributor!

diff --git a/site/components/Features.tsx b/site/components/Features.tsx index 79e1bacc..835336e5 100644 --- a/site/components/Features.tsx +++ b/site/components/Features.tsx @@ -40,17 +40,17 @@ const features: { title: string; description: string; icon: string }[] = [ export default function Features() { return ( -

+

How PortalJS works?

-

+

PortalJS is built in JavaScript and React on top of the popular Next.js framework, assuming a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for CKAN.

-
+
{features.map((feature, i) => (
( - - - -); - -const IconDocs = () => ( - - - -); - -const IconCode = () => ( - - - -); - -const ActionButton = ({ title, Icon, href, className = '' }) => ( - - - -); - -export default function GalleryItem({ item }) { - return ( - -
-
-
-
-
-
- {item.title} -

{item.description}

-
- - {item.docsUrl && ( - - )} - {item.sourceUrl && ( - - )} - - {/* Maybe: Blog post */} -
-
-
-
- - ); -} diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx index 2721ebee..d00f7c22 100644 --- a/site/components/Hero.tsx +++ b/site/components/Hero.tsx @@ -1,8 +1,8 @@ -import clsx from 'clsx'; -import Highlight, { defaultProps } from 'prism-react-renderer'; -import { Fragment, useRef } from 'react'; +import { useRef } from 'react'; import ButtonLink from './ButtonLink'; import NewsletterForm from './NewsletterForm'; +import Image from 'next/image'; +import DatahubExampleImg from "@/public/images/showcases/datahub.png" const codeLanguage = 'javascript'; const code = `export default { @@ -39,10 +39,8 @@ export function Hero() { >
{/* Commented code on line 37, 39 and 113 will reenable the two columns hero */} - {/*
*/} -
- {/*
*/} -
+
+

The JavaScript framework for data portals @@ -56,7 +54,15 @@ export function Hero() { Get started -
+ + View on GitHub + + +

@@ -75,84 +81,13 @@ export function Hero() {

- {/*
+
-
- -
- {tabs.map((tab) => ( -
-
- {tab.name} -
-
- ))} -
-
- - - {({ - className, - style, - tokens, - getLineProps, - getTokenProps, - }) => ( - 
-                        
-                          {tokens.map((line, lineIndex) => (
-                            

-                              {line.map((token, tokenIndex) => (
-                                
-                              ))}
-                            

-                          ))}
-                        
-
- )} - -
-
+ opendata.datahub.io
-
*/} +

diff --git a/site/components/Layout.tsx b/site/components/Layout.tsx index 002c59f9..4c15e75a 100644 --- a/site/components/Layout.tsx +++ b/site/components/Layout.tsx @@ -5,7 +5,8 @@ import Link from 'next/link'; import { useCallback, useEffect, useState } from 'react'; import Nav from './Nav'; -import { SiteToc } from '@/components/SiteToc'; +import { Hero } from './Hero'; +import { Navigation } from './Navigation'; function useTableOfContents(tableOfContents) { const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id); @@ -54,14 +55,15 @@ export default function Layout({ children, title, tableOfContents = [], - urlPath, - sidebarTree = [] + isHomePage = false, + sidebarTree = [], }: { children; title?: string; tableOfContents?; urlPath?: string; sidebarTree?: []; + isHomePage?: boolean; }) { // const { toc } = children.props; const { theme, setTheme } = useTheme(); @@ -83,7 +85,72 @@ export default function Layout({ {title && }