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
This commit is contained in:
João Demenech
GitHub
parent
ca13e7b9c3
commit
a954575397
@ -18,7 +18,7 @@ export default function ButtonLink({
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={`inline-block h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
|
||||
className={`inline-block px-4 py-2 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
|
||||
@ -60,10 +60,13 @@ export default function Community() {
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
|
||||
<h2
|
||||
className="text-3xl font-bold text-primary dark:text-primary-dark"
|
||||
id="community"
|
||||
>
|
||||
Community
|
||||
</h2>
|
||||
<p className="text-lg mt-8 ">
|
||||
<p className="text-lg mt-2">
|
||||
We are growing. Get in touch or become a contributor!
|
||||
</p>
|
||||
<div className="flex justify-center mt-12">
|
||||
|
||||
@ -40,17 +40,17 @@ const features: { title: string; description: string; icon: string }[] = [
|
||||
export default function Features() {
|
||||
return (
|
||||
<Container>
|
||||
<h2 className="text-3xl font-bold text-primary dark:text-primary-dark">
|
||||
<h2 className="text-3xl font-bold text-primary dark:text-primary-dark" id="how-portaljs-works">
|
||||
How PortalJS works?
|
||||
</h2>
|
||||
<p className="text-lg mt-8">
|
||||
<p className="text-lg mt-2">
|
||||
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.
|
||||
</p>
|
||||
<div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 ">
|
||||
{features.map((feature, i) => (
|
||||
<div
|
||||
key={`feature-${i}`}
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
const IconBeaker = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconDocs = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconCode = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ActionButton = ({ title, Icon, href, className = '' }) => (
|
||||
<a
|
||||
title={title}
|
||||
target="_blank"
|
||||
href={href}
|
||||
className={`rounded-full p-2 hover:bg-secondary transition-all duration-250 ${className}`}
|
||||
>
|
||||
<Icon />
|
||||
</a>
|
||||
);
|
||||
|
||||
export default function GalleryItem({ item }) {
|
||||
return (
|
||||
<a
|
||||
className="rounded overflow-hidden group relative border-1 shadow-lg"
|
||||
target="_blank"
|
||||
href={item.href}
|
||||
>
|
||||
<div
|
||||
className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
>
|
||||
<div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
|
||||
<div className="text-center text-primary-dark">
|
||||
<span className="text-xl font-semibold">{item.title}</span>
|
||||
<p className="text-base font-medium">{item.description}</p>
|
||||
<div className="flex justify-center mt-2">
|
||||
<ActionButton Icon={IconBeaker} title="Demo" href={item.href} />
|
||||
{item.docsUrl && (
|
||||
<ActionButton
|
||||
Icon={IconDocs}
|
||||
title="Documentation"
|
||||
href={item.docsUrl}
|
||||
className="mx-5"
|
||||
/>
|
||||
)}
|
||||
{item.sourceUrl && (
|
||||
<ActionButton
|
||||
Icon={IconCode}
|
||||
title="Source code"
|
||||
href={item.sourceUrl}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Maybe: Blog post */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -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() {
|
||||
>
|
||||
<div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
|
||||
{/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
|
||||
{/* <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"> */}
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-4xl lg:grid-cols-1 lg:px-8 xl:gap-x-16 xl:px-12">
|
||||
{/* <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left"> */}
|
||||
<div className="relative mb-10 lg:mb-0 md:text-center lg:text-center">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
|
||||
<div className="relative mb-10 lg:mb-0 md:text-center lg:text-left">
|
||||
<div role="heading">
|
||||
<h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
|
||||
The JavaScript framework for data portals
|
||||
@ -56,7 +54,15 @@ export function Hero() {
|
||||
Get started
|
||||
</ButtonLink>
|
||||
|
||||
<div className="md:max-w-md mx-auto">
|
||||
<ButtonLink
|
||||
style="secondary"
|
||||
className="mt-8 ml-3"
|
||||
href="https://github.com/datopian/portaljs"
|
||||
>
|
||||
View on GitHub
|
||||
</ButtonLink>
|
||||
|
||||
<div className="md:max-w-md mx-auto lg:mx-0 ">
|
||||
<NewsletterForm />
|
||||
</div>
|
||||
<p className="my-10 text-l tracking-wide">
|
||||
@ -75,84 +81,13 @@ export function Hero() {
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="relative">
|
||||
<div className="relative">
|
||||
<div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
|
||||
<div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0" />
|
||||
<div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0" />
|
||||
<div className="pl-4 pt-4">
|
||||
<TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
|
||||
<div className="mt-4 flex space-x-2 text-xs">
|
||||
{tabs.map((tab) => (
|
||||
<div
|
||||
key={tab.name}
|
||||
className={clsx(
|
||||
'flex h-6 rounded-full',
|
||||
tab.isActive
|
||||
? 'bg-gradient-to-r from-sky-400/30 via-sky-400 to-sky-400/30 p-px font-medium text-sky-300'
|
||||
: 'text-slate-500'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center rounded-full px-2.5',
|
||||
tab.isActive && 'bg-slate-800'
|
||||
)}
|
||||
>
|
||||
{tab.name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 flex items-start px-1 text-sm">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600"
|
||||
>
|
||||
{Array.from({
|
||||
length: code.split('\n').length,
|
||||
}).map((_, index) => (
|
||||
<Fragment key={index}>
|
||||
{(index + 1).toString().padStart(2, '0')}
|
||||
<br />
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
code={code}
|
||||
language={codeLanguage}
|
||||
theme={undefined}
|
||||
>
|
||||
{({
|
||||
className,
|
||||
style,
|
||||
tokens,
|
||||
getLineProps,
|
||||
getTokenProps,
|
||||
}) => (
|
||||
<pre
|
||||
className={clsx(className, 'flex overflow-x-auto pb-6')}
|
||||
style={style}
|
||||
>
|
||||
<code className="px-4">
|
||||
{tokens.map((line, lineIndex) => (
|
||||
<div key={lineIndex} {...getLineProps({ line })}>
|
||||
{line.map((token, tokenIndex) => (
|
||||
<span
|
||||
key={tokenIndex}
|
||||
{...getTokenProps({ token })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</code>
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
</div>
|
||||
</div>
|
||||
<Image src={DatahubExampleImg} alt="opendata.datahub.io" />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 && <NextSeo title={title} />}
|
||||
<Nav />
|
||||
<div className="mx-auto p-6 bg-background dark:bg-background-dark">
|
||||
{children}
|
||||
{isHomePage && <Hero />}
|
||||
|
||||
<div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
|
||||
{!!sidebarTree.length && (
|
||||
<div className="hidden lg:relative lg:block lg:flex-none">
|
||||
<div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
|
||||
<div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
|
||||
<div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
|
||||
<div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden py-16 pl-0.5">
|
||||
<Navigation
|
||||
navigation={sidebarTree}
|
||||
className="w-64 pr-8 xl:w-72 xl:pr-16"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 ">
|
||||
{children}
|
||||
</div>
|
||||
{/** TABLE OF CONTENTS */}
|
||||
<div className="hidden xl:sticky xl:right-0 xl:top-[4.5rem] xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:mb-16">
|
||||
{tableOfContents.length > 0 && siteConfig.tableOfContents && (
|
||||
<nav aria-labelledby="on-this-page-title" className="w-56">
|
||||
<h2 className="font-display text-sm font-medium text-primary dark:text-primary-dark">
|
||||
On this page
|
||||
</h2>
|
||||
<ol className="mt-4 space-y-4 text-sm">
|
||||
{tableOfContents.map((section) => (
|
||||
<li key={section.id}>
|
||||
<h3>
|
||||
<Link
|
||||
href={`#${section.id}`}
|
||||
className={
|
||||
isActive(section)
|
||||
? 'text-secondary font-semibold'
|
||||
: 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
|
||||
}
|
||||
>
|
||||
{section.title}
|
||||
</Link>
|
||||
</h3>
|
||||
{section.children && section.children.length > 0 && (
|
||||
<ol className="mt-4 space-y-4 pl-5 text-slate-500 dark:text-slate-400">
|
||||
{section.children.map((subSection) => (
|
||||
<li key={subSection.id}>
|
||||
<Link
|
||||
href={`#${subSection.id}`}
|
||||
className={
|
||||
isActive(subSection)
|
||||
? 'text-secondary font-semibold'
|
||||
: 'hover:text-slate-600 dark:hover:text-slate-300'
|
||||
}
|
||||
>
|
||||
{subSection.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="flex items-center justify-center w-full h-24 border-t dark:border-slate-900 bg-background dark:bg-background-dark">
|
||||
<a
|
||||
@ -104,58 +171,6 @@ export default function Layout({
|
||||
/>
|
||||
</a>
|
||||
</footer>
|
||||
{/** TABLE OF CONTENTS */}
|
||||
{tableOfContents.length > 0 && siteConfig.tableOfContents && (
|
||||
<div className="hidden xl:fixed xl:right-0 xl:top-[4.5rem] xl:block xl:w-1/5 xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6 xl:mb-16">
|
||||
<nav aria-labelledby="on-this-page-title" className="w-56">
|
||||
<h2 className="font-display text-md font-medium text-primary dark:text-primary-dark">
|
||||
On this page
|
||||
</h2>
|
||||
<ol className="mt-4 space-y-3 text-sm">
|
||||
{tableOfContents.map((section) => (
|
||||
<li key={section.id}>
|
||||
<h3>
|
||||
<Link
|
||||
href={`#${section.id}`}
|
||||
className={
|
||||
isActive(section)
|
||||
? 'text-secondary'
|
||||
: 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
|
||||
}
|
||||
>
|
||||
{section.title}
|
||||
</Link>
|
||||
</h3>
|
||||
{section.children && section.children.length > 0 && (
|
||||
<ol className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400">
|
||||
{section.children.map((subSection) => (
|
||||
<li key={subSection.id}>
|
||||
<Link
|
||||
href={`#${subSection.id}`}
|
||||
className={
|
||||
isActive(subSection)
|
||||
? 'text-secondary'
|
||||
: 'hover:text-slate-600 dark:hover:text-slate-300'
|
||||
}
|
||||
>
|
||||
{subSection.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
{/* LHS NAVIGATION */}
|
||||
{/* {showSidebar && ( */}
|
||||
<div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
|
||||
<SiteToc currentPath={urlPath} nav={sidebarTree} />
|
||||
</div>
|
||||
{/* )} */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import { siteConfig } from '../config/siteConfig';
|
||||
import MobileNavigation from './MobileNavigation';
|
||||
import NavItem from './NavItem';
|
||||
import ThemeSelector from './ThemeSelector';
|
||||
import GitHubButton from 'react-next-github-btn';
|
||||
// import { SearchContext, SearchField } from "./search/index.jsx";
|
||||
|
||||
// const Search = SearchContext(siteConfig.search?.provider);
|
||||
@ -110,16 +111,6 @@ export default function Nav() {
|
||||
</Search>
|
||||
)} */}
|
||||
<ThemeSelector />
|
||||
{siteConfig.github && (
|
||||
<Link
|
||||
href={siteConfig.github}
|
||||
target="_blank"
|
||||
className="group"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<GitHubIcon className="h-6 w-6 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
|
||||
</Link>
|
||||
)}
|
||||
{siteConfig.discord && (
|
||||
<Link
|
||||
href={siteConfig.discord}
|
||||
@ -130,6 +121,21 @@ export default function Nav() {
|
||||
<DiscordIcon className="h-8 w-8 dark:fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
|
||||
</Link>
|
||||
)}
|
||||
{siteConfig.github && (
|
||||
<div className="mt-1">
|
||||
<
|
||||
// @ts-ignore
|
||||
GitHubButton
|
||||
href={siteConfig.github}
|
||||
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star PortalJS on GitHub"
|
||||
>
|
||||
Stars
|
||||
</GitHubButton>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import Link from "next/link";
|
||||
import { Fragment, useRef, useState } from "react";
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import Link from 'next/link';
|
||||
import { Fragment, useRef, useState } from 'react';
|
||||
|
||||
import BaseLink from "./BaseLink";
|
||||
import BaseLink from './BaseLink';
|
||||
|
||||
export default function NavItem({ item }) {
|
||||
const dropdownRef = useRef(null);
|
||||
@ -21,14 +21,14 @@ export default function NavItem({ item }) {
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button
|
||||
onClick={() => setshowDropdown(!showDropdown)}
|
||||
onMouseEnter={openDropdown}
|
||||
onMouseLeave={closeDropdown}
|
||||
>
|
||||
{Object.prototype.hasOwnProperty.call(item, "href") ? (
|
||||
<Menu.Item>
|
||||
{Object.prototype.hasOwnProperty.call(item, 'href') ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
onMouseEnter={openDropdown}
|
||||
onMouseLeave={closeDropdown}
|
||||
target={item.target || '_self'}
|
||||
onClick={() => setshowDropdown(!showDropdown)}
|
||||
className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
|
||||
>
|
||||
{item.name}
|
||||
@ -38,9 +38,9 @@ export default function NavItem({ item }) {
|
||||
{item.name}
|
||||
</div>
|
||||
)}
|
||||
</Menu.Button>
|
||||
</Menu.Item>
|
||||
|
||||
{Object.prototype.hasOwnProperty.call(item, "subItems") && (
|
||||
{Object.prototype.hasOwnProperty.call(item, 'subItems') && (
|
||||
<Transition
|
||||
as={Fragment}
|
||||
show={showDropdown}
|
||||
@ -58,11 +58,10 @@ export default function NavItem({ item }) {
|
||||
onMouseLeave={closeDropdown}
|
||||
>
|
||||
{item.subItems.map((subItem) => (
|
||||
<Menu.Item
|
||||
key={subItem.name}
|
||||
>
|
||||
<Menu.Item key={subItem.name}>
|
||||
<BaseLink
|
||||
href={subItem.href}
|
||||
target={item.target || '_self'}
|
||||
className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
|
||||
onClick={() => setshowDropdown(false)}
|
||||
>
|
||||
|
||||
46
site/components/Navigation.jsx
Normal file
46
site/components/Navigation.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export function Navigation({ navigation, className }) {
|
||||
let router = useRouter();
|
||||
|
||||
const currentPath = router.asPath.split(/[#?]/)[0];
|
||||
|
||||
return (
|
||||
<nav className={clsx('text-base lg:text-sm', className)}>
|
||||
<ul role="list" className="space-y-9">
|
||||
{navigation.map((section) => (
|
||||
<li key={section.title}>
|
||||
<h2 className="font-display font-medium text-primary dark:text-primary-dark">
|
||||
{section.title}
|
||||
</h2>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
|
||||
>
|
||||
{section.links.map((link) => {
|
||||
const linkPath = link.href.split(/[#?]/)[0];
|
||||
return (
|
||||
<li key={link.href} className="relative">
|
||||
<Link
|
||||
href={link.href}
|
||||
className={clsx(
|
||||
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
|
||||
linkPath === currentPath
|
||||
? 'font-semibold text-secondary before:bg-secondary'
|
||||
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300'
|
||||
)}
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@ -33,7 +33,7 @@ export default function NewsletterForm() {
|
||||
type="email"
|
||||
required
|
||||
placeholder="Your email"
|
||||
className="input entry__field !w-full px-2 py-3 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
|
||||
className="input entry__field !w-full px-2 py-2 text-base rounded-md bg-slate-200 dark:bg-slate-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 focus:ring-offset-gray-900"
|
||||
/>
|
||||
|
||||
<label className="entry__error entry__error--primary px-2 text-red-400 text-sm"></label>
|
||||
@ -43,7 +43,7 @@ export default function NewsletterForm() {
|
||||
<input type="hidden" name="form-name" value="get-updates" />
|
||||
<button
|
||||
type="submit"
|
||||
className="sib-form-block__button sib-form-block__button-with-loader h-12 flex-none mt-3 px-6 py-3 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
|
||||
className="sib-form-block__button sib-form-block__button-with-loader flex-none mt-3 px-4 py-2 border border-transparent text-base font-medium rounded-md text-slate-900 bg-blue-400 hover:bg-blue-300 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 sm:mt-0 sm:ml-3"
|
||||
>
|
||||
<svg
|
||||
className="icon clickable__icon progress-indicator__icon sib-hide-loader-icon hidden"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Container from './Container';
|
||||
import GalleryItem from './GalleryItem';
|
||||
import ShowcasesItem from './ShowcasesItem';
|
||||
|
||||
const items = [
|
||||
{
|
||||
@ -27,39 +27,21 @@ const items = [
|
||||
image: '/images/showcases/datahub.png',
|
||||
description: 'Demo Data Portal by DataHub',
|
||||
},
|
||||
{
|
||||
title: 'Example: Simple Data Catalog',
|
||||
href: 'https://example.portaljs.org/',
|
||||
image: '/images/showcases/example-simple-catalog.png',
|
||||
description: 'Simple data catalog',
|
||||
sourceUrl:
|
||||
'https://github.com/datopian/portaljs/tree/main/examples/simple-example',
|
||||
docsUrl: '/docs/example-data-catalog',
|
||||
},
|
||||
{
|
||||
title: 'Example: Portal with CKAN',
|
||||
href: 'https://ckan-example.portaljs.org/',
|
||||
image: '/images/showcases/example-ckan.png',
|
||||
description: 'Simple portal with data coming from CKAN',
|
||||
sourceUrl:
|
||||
'https://github.com/datopian/portaljs/tree/main/examples/ckan-example',
|
||||
docsUrl: '/docs/example-ckan',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Gallery() {
|
||||
export default function Showcases() {
|
||||
return (
|
||||
<Container>
|
||||
<h2
|
||||
className="text-3xl font-bold text-primary dark:text-primary-dark"
|
||||
id="gallery"
|
||||
id="showcases"
|
||||
>
|
||||
Gallery
|
||||
Showcases
|
||||
</h2>
|
||||
<p className="text-lg mt-8">Discover what's being powered by PortalJS</p>
|
||||
<div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<p className="text-lg mt-2">Discover what's being powered by PortalJS</p>
|
||||
<div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{items.map((item) => {
|
||||
return <GalleryItem item={item} />;
|
||||
return <ShowcasesItem item={item} />;
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
24
site/components/ShowcasesItem.tsx
Normal file
24
site/components/ShowcasesItem.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
export default function ShowcasesItem({ item }) {
|
||||
return (
|
||||
<a
|
||||
className="rounded overflow-hidden group relative border-1 shadow-lg"
|
||||
target="_blank"
|
||||
href={item.href}
|
||||
>
|
||||
<div
|
||||
className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
>
|
||||
<div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
|
||||
<div className="text-center text-primary-dark">
|
||||
<span className="text-xl font-semibold">{item.title}</span>
|
||||
<p className="text-base font-medium">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
import Link from 'next/link.js';
|
||||
import clsx from 'clsx';
|
||||
import { Disclosure, Transition } from '@headlessui/react';
|
||||
|
||||
export interface NavItem {
|
||||
name: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface NavGroup {
|
||||
name: string;
|
||||
path: string;
|
||||
level: number;
|
||||
children: Array<NavItem | NavGroup>;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
currentPath: string;
|
||||
nav: Array<NavItem | NavGroup>;
|
||||
}
|
||||
|
||||
function isNavGroup(item: NavItem | NavGroup): item is NavGroup {
|
||||
return (item as NavGroup).children !== undefined;
|
||||
}
|
||||
|
||||
function navItemBeforeNavGroup(a, b) {
|
||||
if (isNavGroup(a) === isNavGroup(b)) {
|
||||
return 0;
|
||||
}
|
||||
if (isNavGroup(a) && !isNavGroup(b)) {
|
||||
return 1;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function sortNavGroupChildren(items: Array<NavItem | NavGroup>) {
|
||||
return items.sort(
|
||||
(a, b) => navItemBeforeNavGroup(a, b) || a.name.localeCompare(b.name)
|
||||
);
|
||||
}
|
||||
|
||||
export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
|
||||
return (
|
||||
<nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
|
||||
{/* {sortNavGroupChildren(nav).map((n) => ( */}
|
||||
{nav.map((n) => (
|
||||
<NavComponent item={n} currentPath={currentPath} />
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
const NavComponent: React.FC<{
|
||||
item: NavItem | NavGroup;
|
||||
currentPath: string;
|
||||
}> = ({ item, currentPath }) => {
|
||||
function isActiveItem(item: NavItem) {
|
||||
return item.href === "/" + currentPath;
|
||||
}
|
||||
|
||||
return !isNavGroup(item) ? (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={clsx(
|
||||
isActiveItem(item)
|
||||
? 'text-secondary'
|
||||
: 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
|
||||
'block'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
) : (
|
||||
<Disclosure as="div" key={item.name} className="flex flex-col space-y-3" defaultOpen={true}>
|
||||
{({ open }) => (
|
||||
<div>
|
||||
<Disclosure.Button className="group w-full flex items-center text-left text-md font-medium text-slate-900 dark:text-white">
|
||||
<svg
|
||||
className={clsx(
|
||||
open ? 'text-slate-400 rotate-90' : 'text-slate-300',
|
||||
'h-3 w-3 mr-2 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-slate-400'
|
||||
)}
|
||||
viewBox="0 0 20 20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
|
||||
</svg>
|
||||
{item.name}
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
|
||||
{/* {sortNavGroupChildren(item.children).map((subItem) => ( */}
|
||||
{item.children.map((subItem) => (
|
||||
<NavComponent item={subItem} currentPath={currentPath} />
|
||||
))}
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
14
site/content/assets/sidebar.json
Normal file
14
site/content/assets/sidebar.json
Normal file
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"title": "Getting started",
|
||||
"links": [
|
||||
{ "title": "Introduction", "href": "/#how-portaljs-works" },
|
||||
{ "title": "Setup", "href": "/docs" },
|
||||
{ "title": "Creating new datasets", "href": "/docs/creating-new-datasets" },
|
||||
{ "title": "Searching datasets", "href": "/docs/searching-datasets" },
|
||||
{ "title": "Showing metadata", "href": "/docs/showing-metadata" },
|
||||
{ "title": "Deploying your PortalJS app", "href": "/docs/deploying-your-portaljs-app" }
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -19,8 +19,8 @@ const config = {
|
||||
{ name: "Docs", href: "/docs" },
|
||||
// { name: "Components", href: "/docs/components" },
|
||||
{ name: "Blog", href: "/blog" },
|
||||
{ name: "Gallery", href: "/#gallery" },
|
||||
// { name: "Data Literate", href: "/data-literate" },
|
||||
{ name: "Showcases", href: "/#showcases" },
|
||||
{ name: "Examples", href: "https://github.com/datopian/portaljs/tree/main/examples", target: "_blank" },
|
||||
// { name: "DL Demo", href: "/data-literate/demo" },
|
||||
// { name: "Excel Viewer", href: "/excel-viewer" },
|
||||
],
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "Getting started",
|
||||
"children": [
|
||||
{
|
||||
"name": "Setup",
|
||||
"href": "/docs"
|
||||
},
|
||||
{
|
||||
"name": "Creating new datasets",
|
||||
"href": "/docs/creating-new-datasets"
|
||||
},
|
||||
{
|
||||
"name": "Searching datasets",
|
||||
"href": "/docs/searching-datasets"
|
||||
},
|
||||
{
|
||||
"name": "Showing metadata",
|
||||
"href": "/docs/showing-metadata"
|
||||
},
|
||||
{
|
||||
"name": "Deploying your PortalJS app",
|
||||
"href": "/docs/deploying-your-portaljs-app"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Components",
|
||||
"href": "/docs/components"
|
||||
},
|
||||
{
|
||||
"name": "Examples",
|
||||
"children": [
|
||||
{
|
||||
"name": "Data Catalog w/ CKAN datasets",
|
||||
"href": "/docs/examples/example-ckan"
|
||||
},
|
||||
{
|
||||
"name": "Data Catalog w/ GitHub datasets",
|
||||
"href": "/docs/examples/example-data-catalog"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -65,7 +65,7 @@ export const getStaticProps: GetStaticProps = async ({
|
||||
// Temporary, docs pages should present the LHS sidebar
|
||||
if (dbFile.url_path.startsWith('docs')) {
|
||||
frontMatter.showSidebar = true;
|
||||
frontMatter.sidebarTreeFile = 'content/docs/sidebar.json';
|
||||
frontMatter.sidebarTreeFile = 'content/assets/sidebar.json';
|
||||
}
|
||||
|
||||
const source = fs.readFileSync(filePath, { encoding: 'utf-8' });
|
||||
|
||||
@ -1,21 +1,46 @@
|
||||
import fs from 'fs';
|
||||
|
||||
import Community from '@/components/Community';
|
||||
import Features from '@/components/Features';
|
||||
import Gallery from '@/components/Gallery';
|
||||
import { Hero } from '@/components/Hero';
|
||||
import { UnstyledLayout } from '@flowershow/core';
|
||||
import Showcases from '@/components/Showcases';
|
||||
import Layout from '../components/Layout';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { collectHeadings } from '@flowershow/core';
|
||||
|
||||
export default function Home({ sidebarTree }) {
|
||||
const router = useRouter();
|
||||
|
||||
const [tableOfContents, setTableOfContents] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const headingNodes = document.querySelectorAll(
|
||||
'h2,h3'
|
||||
) as NodeListOf<HTMLHeadingElement>;
|
||||
const toc = collectHeadings(headingNodes);
|
||||
setTableOfContents(toc ?? []);
|
||||
}, [router.asPath]); // update table of contents on route change with next/link
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<UnstyledLayout>
|
||||
<Hero />
|
||||
<Features />
|
||||
<Gallery />
|
||||
<Community />
|
||||
</UnstyledLayout>
|
||||
<Layout isHomePage={true} tableOfContents={tableOfContents} sidebarTree={sidebarTree} >
|
||||
<Features />
|
||||
<Showcases />
|
||||
<Community />
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function getStaticProps() {
|
||||
const tree = fs.readFileSync('content/assets/sidebar.json', {
|
||||
encoding: 'utf-8',
|
||||
});
|
||||
const sidebarTree = JSON.parse(tree);
|
||||
|
||||
return {
|
||||
props: {
|
||||
sidebarTree,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user