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

Refactor catalog example to use portal.js

Browse Source
This commit is contained in:
Rising Odegua 2021-05-21 16:48:55 +01:00
parent b103b0e845
commit f8602184ce
14 changed files with 94 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dist/index.cjs.js vendored
View File

@ -230,8 +230,8 @@ var KeyInfo = function KeyInfo(_ref) {
var datasetSize = 0;
if (resources) {
datasetSize = resources.length == 1 ? resources[0].size : resources.reduce(function (accumulator, currentValue) {
return accumulator.size + currentValue.size;
datasetSize = resources.length == 1 ? resources[0].size || 0 : resources.reduce(function (accumulator, currentValue) {
return (accumulator.size || 0) + (currentValue.size || 0);
});
}
@ -266,22 +266,22 @@ var KeyInfo = function KeyInfo(_ref) {
className: "text-1xl"
}, resources.length)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, filesize__default['default'](datasetSize, {
}, datasetSize && filesize__default['default'](datasetSize, {
bits: true
}))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, resources[0].format, " zip")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
}, resources[0]["format"], " zip")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, descriptor.created)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
}, descriptor["created"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, descriptor.updated)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
}, descriptor["updated"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, descriptor.license)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
}, descriptor["license"])), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, /*#__PURE__*/React__default['default'].createElement("a", {
className: "text-yellow-600",
href: descriptor.sources[0].web
}, descriptor.sources[0].title))))));
href: descriptor["sources"] && descriptor["sources"][0]["web"]
}, descriptor["sources"] && descriptor["sources"][0]["title"]))))));
};
KeyInfo.propTypes = {
@ -300,9 +300,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("section", {
className: "m-8",
name: "file-list"
}, /*#__PURE__*/React__default['default'].createElement("h1", {
className: "text-2xl font-bold mb-4"
}, "Data Files"), /*#__PURE__*/React__default['default'].createElement("div", {
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "grid grid-cols-7 gap-4"
}, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl font-bold mb-2"
@ -324,7 +322,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "text-1xl"
}, resource.description || "No description")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, filesize__default['default'](resource.size, {
}, resource.size && filesize__default['default'](resource.size, {
bits: true
}))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
@ -333,9 +331,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
}, /*#__PURE__*/React__default['default'].createElement("a", {
className: "text-yellow-600",
href: "/dataset/".concat(resource.path)
}, resource.format, " (", filesize__default['default'](resource.size, {
bits: true
}), ")"))));
}, resource.format))));
})));
};
@ -551,11 +547,13 @@ var Nav = function Nav(_ref) {
className: "flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "flex items-center flex-shrink-0 text-gray-700 mr-6"
}, /*#__PURE__*/React__default['default'].createElement(Link__default['default'], {
href: "/"
}, /*#__PURE__*/React__default['default'].createElement("img", {
src: logo,
alt: "portal logo",
width: "40"
})), /*#__PURE__*/React__default['default'].createElement("div", {
}))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "block lg:hidden mx-4"
}, /*#__PURE__*/React__default['default'].createElement("button", {
onClick: handleClick,

32
dist/index.esm.js vendored
View File

@ -197,8 +197,8 @@ var KeyInfo = function KeyInfo(_ref) {
var datasetSize = 0;
if (resources) {
datasetSize = resources.length == 1 ? resources[0].size : resources.reduce(function (accumulator, currentValue) {
return accumulator.size + currentValue.size;
datasetSize = resources.length == 1 ? resources[0].size || 0 : resources.reduce(function (accumulator, currentValue) {
return (accumulator.size || 0) + (currentValue.size || 0);
});
}
@ -233,22 +233,22 @@ var KeyInfo = function KeyInfo(_ref) {
className: "text-1xl"
}, resources.length)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, filesize(datasetSize, {
}, datasetSize && filesize(datasetSize, {
bits: true
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, resources[0].format, " zip")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
}, resources[0]["format"], " zip")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, descriptor.created)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
}, descriptor["created"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, descriptor.updated)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
}, descriptor["updated"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, descriptor.license)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
}, descriptor["license"])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, /*#__PURE__*/React.createElement("a", {
className: "text-yellow-600",
href: descriptor.sources[0].web
}, descriptor.sources[0].title))))));
href: descriptor["sources"] && descriptor["sources"][0]["web"]
}, descriptor["sources"] && descriptor["sources"][0]["title"]))))));
};
KeyInfo.propTypes = {
@ -267,9 +267,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
className: "m-8",
name: "file-list"
}, /*#__PURE__*/React.createElement("h1", {
className: "text-2xl font-bold mb-4"
}, "Data Files"), /*#__PURE__*/React.createElement("div", {
}, /*#__PURE__*/React.createElement("div", {
className: "grid grid-cols-7 gap-4"
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl font-bold mb-2"
@ -291,7 +289,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "text-1xl"
}, resource.description || "No description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, filesize(resource.size, {
}, resource.size && filesize(resource.size, {
bits: true
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
@ -300,9 +298,7 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
}, /*#__PURE__*/React.createElement("a", {
className: "text-yellow-600",
href: "/dataset/".concat(resource.path)
}, resource.format, " (", filesize(resource.size, {
bits: true
}), ")"))));
}, resource.format))));
})));
};
@ -518,11 +514,13 @@ var Nav = function Nav(_ref) {
className: "flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
}, /*#__PURE__*/React.createElement("div", {
className: "flex items-center flex-shrink-0 text-gray-700 mr-6"
}, /*#__PURE__*/React.createElement(Link, {
href: "/"
}, /*#__PURE__*/React.createElement("img", {
src: logo,
alt: "portal logo",
width: "40"
})), /*#__PURE__*/React.createElement("div", {
}))), /*#__PURE__*/React.createElement("div", {
className: "block lg:hidden mx-4"
}, /*#__PURE__*/React.createElement("button", {
onClick: handleClick,

37
examples/catalog/components/dataset/About.tsx
View File

@ -1,38 +1,7 @@
import { useQuery } from '@apollo/react-hooks';
import { Table, ErrorMessage } from '../_shared';
import { ErrorMessage } from '../_shared';
import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries';
const columns = [
{
name: 'Files',
key: 'files',
render: ({ resources }) => (resources && resources.length) || 0,
},
{
name: 'Size',
key: 'size',
},
{
name: 'Format',
key: 'format',
},
{
name: 'Created',
key: 'metadata_created',
},
{
name: 'Updated',
key: 'metadata_modified',
},
{
name: 'License',
key: 'license',
},
{
name: 'Source',
key: 'source',
},
];
import { KeyInfo } from 'portal';
const About: React.FC<{ variables: any }> = ({ variables }) => {
const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
@ -47,7 +16,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
if (loading) return <div>Loading</div>;
const { result } = data.dataset;
return <Table columns={columns} data={[result]} />;
return <KeyInfo descriptor={result} resources={result.resources} />;
};
export default About;

32
examples/catalog/components/dataset/Org.tsx
View File

@ -1,9 +1,9 @@
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';
import { ErrorMessage } from '../_shared';
import { GET_ORG_QUERY } from '../../graphql/queries';
import { Org } from 'portal';
const Org: React.FC<{ variables: any }> = ({ variables }) => {
const OrgInfo: React.FC<{ variables: any }> = ({ variables }) => {
const { loading, error, data } = useQuery(GET_ORG_QUERY, {
variables,
// Setting this value to true will make the component rerender when
@ -16,30 +16,8 @@ const Org: React.FC<{ variables: any }> = ({ variables }) => {
if (loading) return <div>Loading</div>;
const { organization } = data.dataset.result;
return (
<>
{organization ? (
<>
<img
src={
organization.image_url ||
'https://datahub.io/static/img/datahub-cube-edited.svg'
}
className="h-5 w-5 mr-2 inline-block"
alt="org_img"
/>
<Link href={`/@${organization.name}`}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="font-semibold text-primary underline">
{organization.title || organization.name}
</a>
</Link>
</>
) : (
''
)}
</>
);
return <Org organization={organization} />;
};
export default Org;
export default OrgInfo;

71
examples/catalog/components/home/Nav.tsx
View File

@ -1,65 +1,14 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import Link from 'next/link';
import { useState } from 'react';
import { Nav } from 'portal';
const Nav: React.FC = () => {
const [open, setOpen] = useState(false);
const NavBar: React.FC = () => {
const navMenu = [
{ title: 'Blog', path: '/blog' },
{ title: 'Search', path: '/search' },
{ title: 'Docs', path: 'http://tech.datopian.com/frontend/' },
{ title: 'GitHub', path: 'https://github.com/datopian/portal' },
];
const handleClick = (event) => {
event.preventDefault();
setOpen(!open);
};
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<img src="/images/logo.svg" alt="portal logo" width="40" />
</div>
<div className="block lg:hidden mx-4">
<button
onClick={handleClick}
className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
>
<svg
className="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div className={`${open ? `block` : `hidden`} lg:block`}>
<Link href="/blog">
<a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
Blog
</a>
</Link>
<Link href="/search">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6">
Search
</a>
</Link>
<a
href="http://tech.datopian.com/frontend/"
className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
target="_blank"
rel="noreferrer"
>
Docs
</a>
<a
href="https://github.com/datopian/portal"
className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
target="_blank"
rel="noreferrer"
>
GitHub
</a>
</div>
</nav>
);
return <Nav logo={'/images/logo.svg'} navMenu={navMenu} />;
};
export default Nav;
export default NavBar;

29
examples/catalog/components/home/Recent.tsx
View File

@ -1,10 +1,10 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import Link from 'next/link';
import { useQuery } from '@apollo/react-hooks';
import { ErrorMessage } from '../_shared';
import { SEARCH_QUERY } from '../../graphql/queries';
import { Recent } from 'portal';
const Recent: React.FC = () => {
const RecentDataset: React.FC = () => {
const { loading, error, data } = useQuery(SEARCH_QUERY, {
variables: {
sort: 'metadata_created desc',
@ -24,30 +24,9 @@ const Recent: React.FC = () => {
return (
<section className="my-10 mx-4 lg:my-20">
<h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
<div className="recent flex flex-col lg:flex-row">
{result.results.map((dataset, index) => (
<div
key={index}
className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
>
<h1 className="text-2xl font-thin">{dataset.title}</h1>
<p className="text-gray-500">
{dataset.organization && dataset.organization.description}
</p>
<Link
href={`/@${
dataset.organization ? dataset.organization.name : 'dataset'
}/${dataset.name}`}
>
<a className="pt-3 flex justify-end text-orange-500">
View Dataset
</a>
</Link>
</div>
))}
</div>
<Recent datasets={result.results} />
</section>
);
};
export default Recent;
export default RecentDataset;

50
examples/catalog/components/resource/About.tsx
View File

@ -1,51 +1,8 @@
/* eslint-disable react/display-name */
import { useQuery } from '@apollo/react-hooks';
import { Table, ErrorMessage } from '../_shared';
import { ErrorMessage } from '../_shared';
import { GET_RESOURCES_QUERY } from '../../graphql/queries';
const columns = [
{
name: 'Name',
key: 'name',
render: ({ name, id }) => name || id,
},
{
name: 'Title',
key: 'title',
},
{
name: 'Description',
key: 'description',
},
{
name: 'Format',
key: 'format',
},
{
name: 'Size',
key: 'size',
},
{
name: 'Created',
key: 'created',
},
{
name: 'Updated',
key: 'last_modified',
},
{
name: 'Download',
key: 'download',
render: ({ url, format }) => (
<a
href={url}
className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
>
{format}
</a>
),
},
];
import { ResourceInfo } from 'portal';
const About: React.FC<{ variables: any }> = ({ variables }) => {
const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
@ -63,7 +20,8 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
const resource = result.resources.find(
(item) => item.name === variables.resource
);
return <Table columns={columns} data={[resource]} />;
return <ResourceInfo resources={[resource]} />;
};
export default About;

61
examples/catalog/components/search/Form.tsx
View File

@ -1,65 +1,20 @@
import { useState } from 'react';
import { useRouter } from 'next/router';
import { Form } from 'portal';
const Form: React.FC = () => {
const SearchForm: React.FC = () => {
const router = useRouter();
const [q, setQ] = useState(router.query.q);
const [sort, setSort] = useState(router.query.sort);
const handleChange = (event) => {
if (event.target.name === 'q') {
setQ(event.target.value);
} else if (event.target.name === 'sort') {
setSort(event.target.value);
}
};
const handleSubmit = (event) => {
event.preventDefault();
const handleSubmit = (q) => {
router.push({
pathname: '/search',
query: { q, sort },
query: { q },
});
};
return (
<form onSubmit={handleSubmit} className="items-center">
<div className="flex">
<input
type="text"
name="q"
value={q}
onChange={handleChange}
placeholder="Search"
aria-label="Search"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button
onClick={handleSubmit}
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
>
Search
</button>
</div>
<div className="inline-block my-6 float-right">
<label htmlFor="field-order-by">Order by:</label>
<select
className="bg-white"
id="field-order-by"
name="sort"
onChange={handleChange}
onBlur={handleChange}
value={sort}
>
<option value="score:desc">Relevance</option>
<option value="title_string:asc">Name Ascending</option>
<option value="title_string:desc">Name Descending</option>
<option value="metadata_modified:desc">Last Modified</option>
<option value="views_recent:desc">Popular</option>
</select>
</div>
</form>
<>
<Form handleSubmit={handleSubmit} />
</>
);
};
export default Form;
export default SearchForm;

39
examples/catalog/components/search/Item.tsx
View File

@ -1,38 +1,7 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import Link from 'next/link';
import { Item } from 'portal';
const Item: React.FC<{ datapackage: any }> = ({ datapackage }) => {
return (
<div className="mb-6">
<h3 className="text-xl font-semibold">
<Link
href={`/@${
datapackage.organization
? datapackage.organization.name
: 'dataset'
}/${datapackage.name}`}
>
<a className="text-primary">
{datapackage.title || datapackage.name}
</a>
</Link>
</h3>
<Link
href={`/@${
datapackage.organization ? datapackage.organization.name : 'dataset'
}`}
>
<a className="text-gray-500 block mt-1">
{datapackage.organization
? datapackage.organization.title
: 'dataset'}
</a>
</Link>
<div className="leading-relaxed mt-2">
{datapackage.description || datapackage.notes}
</div>
</div>
);
const SearchItem: React.FC<{ datapackage: any }> = ({ datapackage }) => {
return <Item dataset={datapackage} />;
};
export default Item;
export default SearchItem;

7
examples/catalog/components/search/Total.tsx
View File

@ -1,6 +1,7 @@
import { useQuery } from '@apollo/react-hooks';
import { ErrorMessage } from '../_shared';
import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
import { ItemTotal } from 'portal';
const Total: React.FC<{ variables: any }> = ({ variables }) => {
const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
@ -16,11 +17,7 @@ const Total: React.FC<{ variables: any }> = ({ variables }) => {
const { result } = data.search;
return (
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{result.count} results found
</h1>
);
return <ItemTotal count={result.count} />;
};
export default Total;

19
examples/catalog/pages/index.tsx
View File

@ -1,19 +1,24 @@
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import { initializeApollo } from '../lib/apolloClient';
import Nav from '../components/home/Nav';
import Recent from '../components/home/Recent';
import Form from '../components/search/Form';
import RecentDataset from '../components/home/Recent';
import SearchForm from '../components/search/Form';
import { SEARCH_QUERY } from '../graphql/queries';
import { loadNamespaces } from './_app';
import useTranslation from 'next-translate/useTranslation';
import NavBar from '../components/home/Nav';
const Home: React.FC<{ locale: any; locales: any }> = ({
locale,
locales,
}) => {
const { t } = useTranslation();
const navMenu = [
{ title: 'Blog', path: '/blog' },
{ title: 'Search', path: '/search' },
{ title: 'Docs', path: 'http://tech.datopian.com/frontend/' },
{ title: 'GitHub', path: 'https://github.com/datopian/portal' },
];
return (
<>
<div className="container mx-auto">
@ -21,7 +26,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
<title>{t(`common:title`)}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<NavBar logo={'/images/logo.svg'} navMenu={navMenu} />
<section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
<div>
<h1 className="text-4xl mb-3 font-thin">
@ -31,13 +36,13 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
<p className="text-md font-light mb-3 w-4/5">
{t(`common:description`)}
</p>
<Form />
<SearchForm />
</div>
<div className="mt-4">
<img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
</div>
</section>
<Recent />
<RecentDataset />
</div>
</>
);

18
src/components/dataset/KeyInfo.js
View File

@ -22,9 +22,9 @@ const KeyInfo = ({ descriptor, resources }) => {
let datasetSize = 0
if (resources) {
datasetSize = resources.length == 1 ?
resources[0].size :
(resources[0].size || 0) :
resources.reduce((accumulator, currentValue) => {
return accumulator.size + currentValue.size
return (accumulator.size || 0) + (currentValue.size || 0)
})
}
@ -63,25 +63,25 @@ const KeyInfo = ({ descriptor, resources }) => {
<h3 className="text-1xl">{resources.length}</h3>
</div>
<div>
<h3 className="text-1xl">{filesize(datasetSize, { bits: true })}</h3>
<h3 className="text-1xl">{datasetSize && filesize(datasetSize, { bits: true })}</h3>
</div>
<div>
<h3 className="text-1xl">{resources[0].format} zip</h3>
<h3 className="text-1xl">{resources[0]["format"]} zip</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.created}</h3>
<h3 className="text-1xl">{descriptor["created"]}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.updated}</h3>
<h3 className="text-1xl">{descriptor["updated"]}</h3>
</div>
<div>
<h3 className="text-1xl">{descriptor.license}</h3>
<h3 className="text-1xl">{descriptor["license"]}</h3>
</div>
<div>
<h3 className="text-1xl">
<a className="text-yellow-600"
href={descriptor.sources[0].web}>
{descriptor.sources[0].title}
href={descriptor["sources"] && descriptor["sources"][0]["web"]}>
{descriptor["sources"] && descriptor["sources"][0]["title"]}
</a>
</h3>
</div>

5
src/components/dataset/ResourceInfo.js
View File

@ -11,7 +11,6 @@ const ResourcesInfo = ({ resources }) => {
return (
<>
<section className="m-8" name="file-list">
<h1 className="text-2xl font-bold mb-4">Data Files</h1>
<div className="grid grid-cols-7 gap-4">
<div>
<h3 className="text-1xl font-bold mb-2">File</h3>
@ -40,7 +39,7 @@ const ResourcesInfo = ({ resources }) => {
<h3 className="text-1xl">{resource.description || "No description"}</h3>
</div>
<div>
<h3 className="text-1xl">{filesize(resource.size, { bits: true })}</h3>
<h3 className="text-1xl">{resource.size && filesize(resource.size, { bits: true })}</h3>
</div>
<div>
<h3 className="text-1xl">{resource.updated}</h3>
@ -48,7 +47,7 @@ const ResourcesInfo = ({ resources }) => {
<div>
<h3 className="text-1xl">
<a className="text-yellow-600" href={`/dataset/${resource.path}`}>
{resource.format} ({filesize(resource.size, { bits: true })})
{resource.format}
</a>
</h3>
</div>

2
src/components/ui/Nav.js
View File

@ -22,7 +22,7 @@ const Nav = ({ logo, navMenu }) => {
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<img src={logo} alt="portal logo" width="40" />
<Link href="/"><img src={logo} alt="portal logo" width="40" /></Link>
</div>
<div className="block lg:hidden mx-4">
<button