From 4095247ca6f18d781a3e78807142243426e64923 Mon Sep 17 00:00:00 2001
From: Luccas Mateus de Medeiros Gomes <luccasmmg@gmail.com>
Date: Tue, 30 May 2023 13:16:28 -0300
Subject: [PATCH] [examples/openspending][m] - fix requested by demenech

---
 examples/openspending/components/Header.tsx   | 145 +++++++++++++++---
 .../components/_shared/Footer.tsx             |  16 +-
 .../content/about/presentations.md            |  13 +-
 .../content/resources/journo/index.md         |   4 +-
 examples/openspending/pages/blog.tsx          |  23 ++-
 5 files changed, 162 insertions(+), 39 deletions(-)

diff --git a/examples/openspending/components/Header.tsx b/examples/openspending/components/Header.tsx
index 55a1b03a..c1a47d5c 100644
--- a/examples/openspending/components/Header.tsx
+++ b/examples/openspending/components/Header.tsx
@@ -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>
+  );
+}
diff --git a/examples/openspending/components/_shared/Footer.tsx b/examples/openspending/components/_shared/Footer.tsx
index cc2d411b..ab06e7d6 100644
--- a/examples/openspending/components/_shared/Footer.tsx
+++ b/examples/openspending/components/_shared/Footer.tsx
@@ -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>
diff --git a/examples/openspending/content/about/presentations.md b/examples/openspending/content/about/presentations.md
index 1e8f399f..eaf5ff77 100644
--- a/examples/openspending/content/about/presentations.md
+++ b/examples/openspending/content/about/presentations.md
@@ -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
diff --git a/examples/openspending/content/resources/journo/index.md b/examples/openspending/content/resources/journo/index.md
index 25017586..2b1315e0 100644
--- a/examples/openspending/content/resources/journo/index.md
+++ b/examples/openspending/content/resources/journo/index.md
@@ -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;
diff --git a/examples/openspending/pages/blog.tsx b/examples/openspending/pages/blog.tsx
index 97854bcd..369b0932 100644
--- a/examples/openspending/pages/blog.tsx
+++ b/examples/openspending/pages/blog.tsx
@@ -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();
+      }),
     },
   };
 };