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

[examples/openspending][m] - fix requested by demenech

Browse Source
This commit is contained in:
Luccas Mateus de Medeiros Gomes 2023-05-30 13:16:28 -03:00
parent f526d3a833
commit 4095247ca6
5 changed files with 162 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
examples/openspending/components/Header.tsx
View File

@ -5,6 +5,9 @@ import Link from 'next/link';
import { useRouter } from 'next/router';
import { Bars3Icon } from '@heroicons/react/24/outline';
import { useState } from 'react';
import { Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
export function Header() {
const [menuOpen, setMenuOpen] = useState<boolean>(false);
@ -21,41 +24,72 @@ export function Header() {
href: '/#datasets',
},
{
title: "Blog",
href: "/blog"
title: 'Blog',
href: '/blog',
},
{
title: "About",
href: "/about"
title: 'About',
href: '/about',
children: [
{
title: 'Fiscal Data Package',
href: '/about/fiscaldatapackage/',
},
{
title: 'Tools',
href: '/about/tools/',
},
{
title: 'Funders',
href: '/about/funders/',
},
{
title: 'Presentations',
href: '/about/presentations/',
},
],
},
{
title: "Resources",
href: "/resources"
}
title: 'Resources',
href: '/resources',
children: [
{
title: 'IATI',
href: '/resources/iati',
},
{
title: 'Follow the money',
href: '/resources/journo',
},
{
title: 'OpenSpending.Mobi',
href: '/resources/mobi/',
},
{
title: 'Map of Spending Projects',
href: '/resources/map-of-spending-projects/',
},
{
title: 'Working Group On Open Spending Data',
href: '/resources/wg/',
},
],
},
];
return (
<header className="relative z-50 pb-11 lg:pt-11">
<Container className="flex flex-wrap items-center justify-between lg:flex-nowrap mt-10 lg:mt-0">
<Container className="flex flex-wrap justify-between lg:flex-nowrap mt-10 lg:mt-0">
<Link href="/" className="lg:mt-0 lg:grow lg:basis-0 flex items-center">
<Image src={logo} alt="OpenSpending" className="h-12 w-auto" />
</Link>
<ul className="hidden list-none sm:flex gap-x-5 text-base font-medium">
{navLinks.map((link, i) => (
<li key={`nav-link-${i}`}>
<Link
className={`text-emerald-900 hover:text-emerald-600 ${
isActive(link) ? 'text-emerald-600' : ''
}`}
href={link.href}
scroll={false}
>
{link.title}
</Link>
<Dropdown navItem={link} />
</li>
))}
</ul>
<div className='hidden aria-hidden xl:block xl:grow'></div>
<div className="sm:hidden sm:mt-10 lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
<button onClick={() => setMenuOpen(!menuOpen)}>
<Bars3Icon className="w-8 h-8" />
@ -84,3 +118,78 @@ export function Header() {
</header>
);
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
function Dropdown({ navItem }: { navItem: any }) {
const [showDropDown, setShowDropDown] = useState(false);
console.log(showDropDown);
return (
<Menu as="div" className="relative inline-block text-left">
{({ open }) => (
<>
<div>
<Menu.Button
onMouseEnter={() => setShowDropDown(true)}
onMouseLeave={() => setShowDropDown(false)}
className="text-emerald-900 hover:text-emerald-600 inline-flex w-full justify-center gap-x-1.5 px-3 py-2 text-sm font-semibold"
>
<Link href={navItem.href}>{navItem.title}</Link>
{navItem.children && (
<ChevronDownIcon
className="-mr-1 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
)}
</Menu.Button>
</div>
{navItem.children && (
<Transition
as={Fragment}
show={showDropDown}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div>
<Menu.Items
static
onMouseEnter={() => setShowDropDown(true)}
onMouseLeave={() => setShowDropDown(false)}
className="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div className="py-1">
{navItem.children.map((item) => (
<Menu.Item>
{({ active }) => (
<a
key={item.href}
href={item.href}
className={classNames(
active
? 'bg-gray-100 text-emerald-900 hover:text-emerald-600'
: 'text-gray-700',
'block px-4 py-2 text-sm'
)}
>
{item.title}
</a>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</div>
</Transition>
)}
</>
)}
</Menu>
);
}

16
examples/openspending/components/_shared/Footer.tsx
View File

@ -1,9 +1,21 @@
import Image from 'next/image'
import Image from 'next/image';
import Link from 'next/link';
export default function Footer() {
return (
<footer>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-between md:flex-row">
<Image alt="Datopian logo" src="/datopian-logotype.png" width={160} height={40} />
<div className="flex gap-x-2 items-center">
<p className="mt-8 text-base text-slate-500 md:mt-0">Maintained by</p>
<a href="https://www.datopian.com/">
<Image
alt="Datopian logo"
className="mb-2"
src="/datopian-logotype.png"
width={160}
height={40}
/>
</a>
</div>
<p className="mt-6 text-base text-slate-500 md:mt-0">
Copyright © 2023 Datopian, LLC. All rights reserved.
</p>

13
examples/openspending/content/about/presentations.md
View File

@ -3,15 +3,10 @@ title: Presentations
section: about
---
{% for presentation in site.pages %}{% if presentation.presentation %}
[{{ presentation.title }}]({{ presentation.url }})
{% if presentation.authors %}
<div class="author">Written by
<ul>
{% for author in presentation.authors %}
<li>{{ author }}</li>
{% endfor %}
<p><a href="/about/presentation-introduction/">Introduction to OpenSpending: Mapping the Money</a></p>
<li>Anders Pedersen</li>
</ul>
</div>
{% endif %}
{% endif %}{% endfor %}
</div

4
examples/openspending/content/resources/journo/index.md
View File

@ -15,8 +15,8 @@ From the point at which funds come into the government's possession to when they
Here are the guides we'll publish in the coming weeks:
- [A guide to tax avoidance and evasion](resources/tax-avoidance-evasion/) with a full set of choices of stories from shadow markets in Africa to big companies setting up overseas shell companies;
- [A guide to reading accounts both public and business](resources/reading-accounts/)
- [A guide to tax avoidance and evasion](/resources/journo/resources/tax-avoidance-evasion/) with a full set of choices of stories from shadow markets in Africa to big companies setting up overseas shell companies;
- [A guide to reading accounts both public and business](/resources/journo/resources/reading-accounts/)
- The decisions for how to allocate public funds to different projects are often completely open. We provide a list of the allocation formulas and suggest what it would be sensible to correlate the allocation of funds with;
- A guide to the many ways of grouping spending in the U.K. and beyond to help you find what you're looking for;
- A guide to tax models. The U.K. uses a model called the General Computation Model -- we look at it in detail through contact with researchers involved;

23
examples/openspending/pages/blog.tsx
View File

@ -30,15 +30,18 @@ export const getStaticProps: GetStaticProps = async () => {
const blogFiles = await mddb.getFiles({ folder: 'blog' });
const blogs = blogFiles.map((item) => ({
_id: item._id,
file_path: item.file_path,
urlPath: item.url_path,
date: item.url_path.split('/').slice(-1)[0].split('-').slice(0,3).join('-'),
...item.metadata
_id: item._id,
file_path: item.file_path,
urlPath: item.url_path,
date: item.url_path
.split('/')
.slice(-1)[0]
.split('-')
.slice(0, 3)
.join('-'),
...item.metadata,
}));
console.log(blogs[0].date)
return {
props: {
meta: {
@ -49,7 +52,11 @@ export const getStaticProps: GetStaticProps = async () => {
showEditLink: false,
urlPath: '/blog',
},
blogs,
blogs: blogs.sort((a, b) => {
const bDate = new Date(b.date);
const aDate = new Date(a.date);
return bDate.getTime() - aDate.getTime();
}),
},
};
};