diff --git a/site/components/Community.tsx b/site/components/Community.tsx new file mode 100644 index 00000000..d5e76c34 --- /dev/null +++ b/site/components/Community.tsx @@ -0,0 +1,66 @@ +import Container from './Container'; +import DiscordIcon from './icons/DiscordIcon'; +import EmailIcon from './icons/EmailIcon'; +import GitHubIcon from './icons/GitHubIcon'; + +import { siteConfig } from '@/config/siteConfig'; + +const Stat = ({ title, value, ...props }) => { + return ( +
+ {value} +

{title}

+
+ ); +}; + +const IconButton = ({ Icon, text, href, ...props }) => { + return ( +
+ + + {text} + +
+ ); +}; + +export default function Community() { + return ( + +

+ Community +

+

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

+
+ + +
+
+ + + +
+ + ); +} diff --git a/site/components/Container.tsx b/site/components/Container.tsx new file mode 100644 index 00000000..610d9992 --- /dev/null +++ b/site/components/Container.tsx @@ -0,0 +1,7 @@ +export default function Container({ children }) { + return ( +
+ {children} +
+ ); +} diff --git a/site/components/Features.tsx b/site/components/Features.tsx index d1679550..274a37bb 100644 --- a/site/components/Features.tsx +++ b/site/components/Features.tsx @@ -1,3 +1,5 @@ +import Container from './Container'; + const features: { title: string; description: string; icon: string }[] = [ { title: 'Unified sites', @@ -37,8 +39,10 @@ const features: { title: string; description: string; icon: string }[] = [ export default function Features() { return ( -
-

How Portal.JS works?

+ +

+ How Portal.JS works? +

Portal.JS is built in JavaScript and React on top of the popular Next.js framework, assuming a "decoupled" approach where the frontend is a @@ -55,7 +59,7 @@ export default function Features() {

-

+

{feature.title}

@@ -66,6 +70,6 @@ export default function Features() {
))}
-
+ ); } diff --git a/site/components/Gallery.tsx b/site/components/Gallery.tsx new file mode 100644 index 00000000..06224743 --- /dev/null +++ b/site/components/Gallery.tsx @@ -0,0 +1,53 @@ +import Container from './Container'; +import GalleryItem from './GalleryItem'; + +const items = [ + { + title: 'Open Data Northern Ireland', + href: 'https://www.opendatani.gov.uk/', + image: '/images/showcases/odni.png', + description: 'Government Open Data Portal', + }, + { + title: 'Birmingham City Observatory', + href: 'https://www.cityobservatory.birmingham.gov.uk/', + image: '/images/showcases/birmingham.png', + description: 'Government Open Data Portal', + }, + { + title: 'UAE Open Data', + href: 'https://opendata.fcsc.gov.ae/', + image: '/images/showcases/uae.png', + description: 'Government Open Data Portal', + }, + { + title: 'Brazil Open Data', + href: 'https://dados.gov.br/', + image: '/images/showcases/brazil.png', + description: 'Government Open Data Portal', + }, + { + title: 'Datahub Open Data', + href: 'https://opendata.datahub.io/', + image: '/images/showcases/datahub.png', + description: 'Demo Data Portal by DataHub', + }, +]; + +export default function Gallery() { + return ( + +

+ Gallery +

+

+ Discover what's being powered by Portal.JS +

+
+ {items.map((item) => { + return ; + })} +
+ + ); +} diff --git a/site/components/GalleryItem.tsx b/site/components/GalleryItem.tsx new file mode 100644 index 00000000..53bf5f1e --- /dev/null +++ b/site/components/GalleryItem.tsx @@ -0,0 +1,24 @@ +export default function GalleryItem({ item }) { + return ( + +
+
+
+
+
+
+ {item.title} +

{item.description}

+
+
+
+ + ); +} diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx index 3932807d..48cf954a 100644 --- a/site/components/Hero.tsx +++ b/site/components/Hero.tsx @@ -32,7 +32,7 @@ export function Hero() { const el = useRef(null); return ( -
+
{/* Commented code on line 37, 39 and 113 will reenable the two columns hero */} {/*
*/} diff --git a/site/components/Layout.tsx b/site/components/Layout.tsx index 9d1b9195..507f45ba 100644 --- a/site/components/Layout.tsx +++ b/site/components/Layout.tsx @@ -1,5 +1,6 @@ import { siteConfig } from '@/config/siteConfig'; import { NextSeo } from 'next-seo'; +import { useTheme } from 'next-themes'; import Link from 'next/link'; import { useCallback, useEffect, useState } from 'react'; @@ -58,6 +59,7 @@ export default function Layout({ tableOfContents?; }) { // const { toc } = children.props; + const { theme, setTheme } = useTheme(); const currentSection = useTableOfContents(tableOfContents); @@ -87,17 +89,21 @@ export default function Layout({ > Built by{' '} Datopian Logo {/** TABLE OF CONTENTS */} - {tableOfContents.length > 0 && (siteConfig.tableOfContents) && ( + {tableOfContents.length > 0 && siteConfig.tableOfContents && (