diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml new file mode 100644 index 000000000..2dfcc3f0b --- /dev/null +++ b/.github/workflows/deployment.yml @@ -0,0 +1,46 @@ +name: Node.js CI + +on: + push: + branches: + - staging + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18.x] + + steps: + - uses: actions/checkout@v2 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'yarn' + cache-dependency-path: ./ui/yarn.lock + + - name: Install Dependencies + run: yarn install --frozen-lockfile + working-directory: ./ui + + - name: Build Project + run: yarn build + working-directory: ./ui + + - name: Export Project + run: yarn export + working-directory: ./ui + + - name: Create .nojekyll File + run: touch ./out/.nojekyll + working-directory: ./ui + + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@v4.2.5 + with: + branch: gh-pages + folder: ./ui/out diff --git a/ui/components/Layout.tsx b/ui/components/Layout.tsx index 54530b40a..ec05b670a 100644 --- a/ui/components/Layout.tsx +++ b/ui/components/Layout.tsx @@ -1,20 +1,21 @@ import { NextSeo } from "next-seo"; import { ReactNode } from "react"; -import Image from "next/image"; +//import Image from "next/image"; // import { FaCreativeCommonsBy } from "react-icons/fa"; // import { GoMarkGithub } from "react-icons/go"; // import { GrCreativeCommons } from "react-icons/gr"; import { Header } from "./header"; // import Link from "next/link"; import CookieConsent from "./cookie-consent"; -import LogoSVG from "../public/undp-white-logo.svg"; -import xTwitter from '../public/x-twitter-brands-solid.svg' -import InstagramSVG from '../public/instagram-brands-solid.svg' +//import LogoSVG from "../public/undp-white-logo.svg"; +//import xTwitter from '../public/x-twitter-brands-solid.svg' +//import InstagramSVG from '../public/instagram-brands-solid.svg' import { FaFacebookF, FaLinkedinIn, FaYoutube, } from "react-icons/fa"; +import { prefix } from "lib/prefix"; type Props = { children?: ReactNode; title?: string; @@ -33,7 +34,8 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
- UNDP Logo + UNDP Logo
United Nations @@ -62,14 +64,14 @@ const Layout = ({ children, title = "", countries = [] }: Props) => { target="_blank" rel="noopener noreferrer" > - InstagramSVG + InstagramSVG - xTwitter + xTwitter { target="_blank" rel="noopener noreferrer" > - InstagramSVG + InstagramSVG - xTwitter + xTwitter { - let url = `/api/digital-right-indicators`; - let params = { country, pillar }; - let stringifiedParams = new URLSearchParams(params).toString(); - // @ts-ignore - const res = await fetch(`${url}?${stringifiedParams}`); - return await res.json(); +const fetchIndicators = async (_: string, country: string, pillar: string) => { + // using ssr api + // let url = `/api/digital-right-indicators`; + // let params = { country, pillar }; + // let stringifiedParams = new URLSearchParams(params).toString(); + // // @ts-ignore + // const res = await fetch(`${url}?${stringifiedParams}`); + // return await res.json(); + + // direct query + if (!country || !pillar) { + return; + } + + let indices = db.digital_right_scores.filter((score) => { + return ( + score["Country Name"] === country && + score["Pillar"] === pillar && + Boolean(score["Indicator"]) + ); + + }); + + let indicesWithSources = indices.map((index) => { + return { + ...index, + sources: db.digital_right_scores.filter((score) => { + return ( + score["Country Name"] === country && + score["Pillar"] === pillar && + score["Indicator"] === index["Indicator"] && + score["Source Name"] + ); + }), + }; + }); + return indicesWithSources; }; export function DigitalRightIndicatorList(props: IndicatorListProps) { @@ -90,12 +123,26 @@ const fetchIndicatorsForPillar = async ( country: string, pillar: string ) => { - let url = `/api/digital-right-indicators-for-pillar`; - let params = { country, pillar }; - let stringifiedParams = new URLSearchParams(params).toString(); - // @ts-ignore - const res = await fetch(`${url}?${stringifiedParams}`); - return await res.json(); + // using ssr api + + // let url = `/api/digital-right-indicators-for-pillar`; + // let params = { country, pillar }; + // let stringifiedParams = new URLSearchParams(params).toString(); + // // @ts-ignore + // const res = await fetch(`${url}?${stringifiedParams}`); + // return await res.json(); + + if (!country || !pillar) { + return; + } + + const allIndicators = db.digital_right_scores.filter( + (score) => + score["Pillar"] === pillar && + Boolean(score["Indicator"]) + ); + const uniqueIndicators = uniqBy(allIndicators, "Indicator"); + return uniqueIndicators; }; const MissingIndicators = ({ filledIndicators, @@ -306,15 +353,15 @@ const Indicator = ({ onMouseLeave={() => setIconIsHovered(false)} > {isIconHovered ? ( - ExternalDefaultHover ) : ( - ExternalDefault {/* Remove {label} */} - Times

Digital Development Compass

@@ -57,9 +57,9 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) { setIsScrolled(window.scrollY > 0); }; - window.addEventListener('scroll', handleScroll); + window.addEventListener("scroll", handleScroll); return () => { - window.removeEventListener('scroll', handleScroll); + window.removeEventListener("scroll", handleScroll); }; }, []); @@ -71,21 +71,24 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) {
- -
-
- +
+
@@ -95,9 +98,11 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) { > {mobileMenuOpen ? ( - Close menu icon + Close menu icon ) : ( - Open menu icon + Open menu icon )} @@ -112,14 +117,19 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) {
- - + @@ -141,40 +151,40 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) { {process.env.SITE_CONFIG === "dev" ? ( -
- - {dropdownOpen && ( - - )} -
- ) : ( +
+ + {dropdownOpen && ( + + )} +
+ ) : ( - - Methodology - - + + Methodology + + )}
diff --git a/ui/components/indicator-list.tsx b/ui/components/indicator-list.tsx index dc75c81ec..ee1e3b139 100644 --- a/ui/components/indicator-list.tsx +++ b/ui/components/indicator-list.tsx @@ -3,9 +3,12 @@ import { Score } from "database/processed/db"; import { roundNumber } from "lib"; import { useState } from "react"; import useSWR from "swr"; -import ExternalDefault from "../public/external-default.svg"; -import ExternalDefaultHover from "../public/external-hover.svg"; -import Image from "next/image"; +//import ExternalDefault from "../public/external-default.svg"; +//import ExternalDefaultHover from "../public/external-hover.svg"; +//import Image from "next/image"; +import { db } from "database"; +import { uniqBy } from "lodash"; +import { prefix } from "lib/prefix"; interface IndicatorListProps { country: string; @@ -23,12 +26,43 @@ const fetchIndicators = async ( pillar: string, subpillar: string ) => { - let url = `/api/indicators`; - let params = { country, pillar, subpillar }; - let stringifiedParams = new URLSearchParams(params).toString(); - // @ts-ignore - const res = await fetch(`${url}?${stringifiedParams}`); - return await res.json(); + // using ssr api + // let url = `/api/indicators`; + // let params = { country, pillar, subpillar }; + // let stringifiedParams = new URLSearchParams(params).toString(); + // // @ts-ignore + // const res = await fetch(`${url}?${stringifiedParams}`); + // return await res.json(); + + if (!country || !pillar || !subpillar) { + return; + } + + let indices = db.scores.filter((score) => { + return ( + score["Country Name"] === country && + score["Pillar"] === pillar && + score["Sub-Pillar"] === subpillar && + Boolean(score["Indicator"]) + ); + + }); + + let indicesWithSources = indices.map((index) => { + return { + ...index, + sources: db.scores.filter((score) => { + return ( + score["Country Name"] === country && + score["Pillar"] === pillar && + score["Sub-Pillar"] === subpillar && + score["Indicator"] === index["Indicator"] && + score["Source Name"] + ); + }), + }; + }); + return indicesWithSources; }; export function IndicatorList(props: IndicatorListProps) { @@ -103,13 +137,29 @@ const fetchIndicatorsForSubpillar = async ( pillar: string, subpillar: string ) => { - let url = `/api/indicators-for-subpillar`; - let params = { country, pillar, subpillar }; - let stringifiedParams = new URLSearchParams(params).toString(); - // @ts-ignore - const res = await fetch(`${url}?${stringifiedParams}`); - return await res.json(); + // using ssr api + // let url = `/api/indicators-for-subpillar`; + // let params = { country, pillar, subpillar }; + // let stringifiedParams = new URLSearchParams(params).toString(); + // // @ts-ignore + // const res = await fetch(`${url}?${stringifiedParams}`); + // return await res.json(); + + if (!country || !pillar || !subpillar) { + return; + } + + const allIndicators = db.scores.filter( + (score) => + score["Pillar"] === pillar && + score["Sub-Pillar"] === subpillar && + Boolean(score["Indicator"]) + ); + const uniqueIndicators = uniqBy(allIndicators, "Indicator"); + + return uniqueIndicators; }; + const MissingIndicators = ({ filledIndicators, country, @@ -319,15 +369,15 @@ const Indicator = ({ onMouseLeave={() => setIconIsHovered(false)} > {isIconHovered ? ( - ExternalDefaultHover ) : ( - ExternalDefault Methodology
- chevronRight + chevronRight
) : ( @@ -144,7 +145,7 @@ export function MobileMenuSideView({ onClose }: MobileMenuSideViewProps) { className="flex items-center cursor-pointer pt-[33px]" onClick={handleClose} > - arrowLeft + arrowLeft Back
diff --git a/ui/components/search-dialog.tsx b/ui/components/search-dialog.tsx index dc0cffba3..891fb42be 100644 --- a/ui/components/search-dialog.tsx +++ b/ui/components/search-dialog.tsx @@ -7,8 +7,9 @@ import React, { useCallback, useMemo, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useLocalStorage } from "react-use"; import { matchSorter } from "match-sorter"; -import SearchIcon from "../public/search.svg" -import Image from "next/image"; +//import SearchIcon from "../public/search.svg" +//import Image from "next/image"; +import { prefix } from "lib/prefix"; interface SearchDialogProps { countries: CountryNameAndAlpha[]; @@ -179,7 +180,8 @@ export function SearchDialog(props: SearchDialogProps) { onClick={() => setOpen(true)} className={`header-nav-bg-color font-semibold hover:header-nav-bg-color hover:text-white ${props.isOpen ? 'py-5' : 'py-4'} text-xs uppercase tracking-wide text-brand-blue-dark flex-shrink-0 flex items-center`} > - SearchIcon + SearchIcon { value: T; @@ -47,8 +48,8 @@ export function Select(props: SelectProps) { > {trigger} - Chevron Right @@ -18,7 +18,7 @@ export default function MyApp({ Component, pageProps }) { }} /> - + diff --git a/ui/pages/about.tsx b/ui/pages/about.tsx index 5cac8752c..58bef8a50 100644 --- a/ui/pages/about.tsx +++ b/ui/pages/about.tsx @@ -12,12 +12,13 @@ import { useEffect, useState } from "react"; import { interpolateHclLong, lab, scaleLinear } from "d3"; import { AnimatePresence, motion } from "framer-motion"; import { ancillary } from "database/ancillary"; -import Image from "next/image"; +//import Image from "next/image"; import Script from "next/script"; import YouTube from "react-youtube"; -import chevronRight from "../public/chevron-right.svg"; +import { prefix } from "../lib/prefix"; +//import chevronRight from "../public/chevron-right.svg"; //import arrowBase from "../public/arrow-base.svg"; -import githubScreenshot from "../public/github.png"; +//import githubScreenshot from "../public/github.png"; const AboutScrollytelling = dynamic( () => import("components/about-scrollytelling"), @@ -370,10 +371,12 @@ export default function About(

-
- + The undp/digital-nation-dashboard GitHub repository
@@ -449,8 +452,10 @@ export default function About( isHovered ? "translate-x-0" : "-translate-x-2" }`} > - chevronRight @@ -822,7 +827,7 @@ const Scrollytelling = ({ country }: { country: any }) => { {currentStepIndex > 1 && currentStepIndex < 5 && (
- DTF Animation + DTF Animation
)} diff --git a/ui/pages/methodology.tsx b/ui/pages/methodology.tsx index 1b9365e35..e9eeadd8a 100644 --- a/ui/pages/methodology.tsx +++ b/ui/pages/methodology.tsx @@ -1,14 +1,14 @@ import { db } from "database"; import { groupBy } from "lodash"; import { InferGetStaticPropsType } from "next"; -import Image from "next/image"; +//import Image from "next/image"; import Script from "next/script"; import { isMemberState } from "lib"; -import githubUNDPdiagram from "../public/undp-diagram.png"; -import overviewofTDTF from "../public/OverviewofTDTF.png"; -import fiveStage from "../public/fiveStage.png"; -import transformation from "../public/transformation.png"; -import MinMaxScale from "../public/MinMaxScale.png"; +//import githubUNDPdiagram from "../public/undp-diagram.png"; +//import overviewofTDTF from "../public/OverviewofTDTF.png"; +//import fiveStage from "../public/fiveStage.png"; +//import transformation from "../public/transformation.png"; +//import MinMaxScale from "../public/MinMaxScale.png"; import Layout from "components/Layout"; import Link from "next/link"; import React, { useState } from "react"; @@ -18,10 +18,11 @@ import { dimensionsTable, } from "database/methodologyTableData"; import { ancillary } from "database/ancillary"; -import chevronRight from "../public/chevron-right.svg"; -import downloadDefault from "../public/download-default.svg"; +//import chevronRight from "../public/chevron-right.svg"; +//import downloadDefault from "../public/download-default.svg"; //import arrowBase from "../../public/arrow-base.svg"; -import downloadHover from "../public/download-hover.svg"; +//import downloadHover from "../public/download-hover.svg"; +import { prefix } from "../lib/prefix"; const NavBar = () => { return ( @@ -215,10 +216,10 @@ export default function Methodology( opportunities they may encounter along the way.

- The undp/digital-nation-dashboard GitHub repository

Figure 1. UNDP’s Digital Transformation Framework @@ -254,8 +255,8 @@ export default function Methodology( encompasses every pillar and sub-pillar.

- The undp/digital-nation-dashboard GitHub repository @@ -269,8 +270,8 @@ export default function Methodology( the transformation framework.

- The undp/digital-nation-dashboard GitHub repository @@ -400,8 +401,8 @@ export default function Methodology( change in the Compass webpage.

- The undp/digital-nation-dashboard GitHub repository @@ -437,10 +438,10 @@ export default function Methodology( scoring country’s score.

- The undp/digital-nation-dashboard GitHub repository

@@ -1277,15 +1278,15 @@ export default function Methodology( onMouseLeave={() => setDownloadHovered(false)} > {isDownloadHovered ? ( - downloadHover ) : ( - download - chevronRight diff --git a/ui/pages/methodology/digital-development-compass.tsx b/ui/pages/methodology/digital-development-compass.tsx index a1fe6fe99..bac5bbcf6 100644 --- a/ui/pages/methodology/digital-development-compass.tsx +++ b/ui/pages/methodology/digital-development-compass.tsx @@ -1,14 +1,14 @@ import { db } from "database"; import { groupBy } from "lodash"; import { InferGetStaticPropsType } from "next"; -import Image from "next/image"; +//import Image from "next/image"; import Script from "next/script"; import { isMemberState } from "lib"; -import githubUNDPdiagram from "../../public/undp-diagram.png"; -import overviewofTDTF from "../../public/OverviewofTDTF.png"; -import fiveStage from "../../public/fiveStage.png"; -import transformation from "../../public/transformation.png"; -import MinMaxScale from "../../public/MinMaxScale.png"; +//import githubUNDPdiagram from "../../public/undp-diagram.png"; +//import overviewofTDTF from "../../public/OverviewofTDTF.png"; +//import fiveStage from "../../public/fiveStage.png"; +//import transformation from "../../public/transformation.png"; +//import MinMaxScale from "../../public/MinMaxScale.png"; import Layout from "components/Layout"; import Link from "next/link"; import React, { useState } from "react"; @@ -18,10 +18,11 @@ import { dimensionsTable, } from "database/methodologyTableData"; import { ancillary } from "database/ancillary"; -import chevronRight from "../../public/chevron-right.svg"; -import downloadDefault from "../../public/download-default.svg"; +import { prefix } from "lib/prefix"; +//import chevronRight from "../../public/chevron-right.svg"; +//import downloadDefault from "../../public/download-default.svg"; //import arrowBase from "../../public/arrow-base.svg"; -import downloadHover from "../../public/download-hover.svg"; +//import downloadHover from "../../public/download-hover.svg"; const NavBar = () => { return ( @@ -220,10 +221,10 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( opportunities they may encounter along the way.

- The undp/digital-nation-dashboard GitHub repository

Figure 1. UNDP’s Digital Transformation Framework @@ -259,8 +260,8 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( encompasses every pillar and sub-pillar.

- The undp/digital-nation-dashboard GitHub repository @@ -274,8 +275,8 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( the transformation framework.

- The undp/digital-nation-dashboard GitHub repository @@ -405,8 +406,8 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( change in the Compass webpage.

- The undp/digital-nation-dashboard GitHub repository @@ -442,10 +443,10 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( scoring country’s score.

- The undp/digital-nation-dashboard GitHub repository

@@ -1282,15 +1283,15 @@ export default function DIGITAL_DEVELOPMENT_COMPASS( onMouseLeave={() => setDownloadHovered(false)} > {isDownloadHovered ? ( - downloadHover ) : ( - download - chevronRight diff --git a/ui/pages/popupmessage.tsx b/ui/pages/popupmessage.tsx index 777b48acf..5673a1435 100644 --- a/ui/pages/popupmessage.tsx +++ b/ui/pages/popupmessage.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; -import Image from "next/image"; -import LogoSVG from "../public/undp-logo.svg"; +import { prefix } from "../lib/prefix"; +//import Image from "next/image"; +// import LogoSVG from "../public/undp-logo.svg"; const slides = [ { @@ -79,7 +80,7 @@ const PopupMessage = () => { className="rounded-full bg-blue-100 p-1 flex items-center justify-center" style={{ width: "50px", height: "50px" }} > - UNDP Logo + UNDP Logo

Digital Development Compass

diff --git a/ui/styles/global.css b/ui/styles/global.css index 6255cd5ee..9b474eed9 100644 --- a/ui/styles/global.css +++ b/ui/styles/global.css @@ -430,8 +430,8 @@ select option[value="placeholder"] { @font-face { font-family: "SohneBreitFont"; - src: url("/fonts/soehne-breit-web-dreiviertelfett.woff2") format("woff2"), - url("/fonts/soehne-breit-web-dreiviertelfett.woff") format("woff"); + src: url("/undp-digital-development-compass/fonts/soehne-breit-web-dreiviertelfett.woff2") format("woff2"), + url("/undp-digital-development-compass/fonts/soehne-breit-web-dreiviertelfett.woff") format("woff"); font-weight: normal; font-style: normal; }