knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Website v0.4 (#860)

Browse Source 
* [#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
2023-05-09 14:39:23 -03:00
committed by GitHub
parent ca13e7b9c3
commit a954575397
18 changed files with 259 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
site/components/Hero.tsx
View File

@@ -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>