[examples/openspending][lg] - adding drd support (#928)

* [examples/openspending][lg] - adding drd support

* [examples/openspending][sm] - add data stories to header

examples/openspending/pages/[...slug].tsx

@@ -53,6 +53,7 @@ export async function getStaticPaths() {
 
   const paths = allDocuments
     .filter((page) => page.metadata?.isDraft !== true)
+    .filter((page) => !page.file_path.startsWith('content/stories/'))
     .map((page) => {
       const parts = page.url_path!.split('/');
       return { params: { slug: parts } };

examples/openspending/pages/_app.tsx

@@ -57,7 +57,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
         <NextSeo title="OpenSpending" />
         <Script
           strategy="afterInteractive"
-          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TOKEN}`}
+          src="https://www.googletagmanager.com/gtag/js?id=G-GXZF7NRXX6"
         />
         <Script
           id="gtag-init"
@@ -67,7 +67,7 @@ function CustomApp({ Component, pageProps }: AppProps) {
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
-          gtag('config', ${GA_TOKEN}, {
+          gtag('config', 'G-GXZF7NRXX6', {
             page_path: window.location.pathname,
           });
         `,

examples/openspending/pages/stories/[fileName].tsx

@@ -0,0 +1,62 @@
+import fs from 'fs';
+import clientPromise from '@/lib/mddb';
+import { GetStaticProps } from 'next';
+import Layout from '../../components/_shared/Layout';
+import { formatDate } from '@/utils/formatDate';
+import parse from '../../lib/markdown';
+import DataRichDocument from '../../components/DataRichDocument';
+
+export default function Page({ source, meta }) {
+  return (
+    <Layout>
+      <article className="docs prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-code:text-primary dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark prose text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words mx-auto p-6">
+        <header>
+          <div className="mb-4 flex-col items-center">
+            {meta.title && (
+              <h1 className="flex justify-center">{meta.title}</h1>
+            )}
+            {meta.date && (
+              <p className="text-sm text-zinc-400 dark:text-zinc-500 flex justify-center">
+                <time dateTime={meta.date}>{formatDate(meta.date)}</time>
+              </p>
+            )}
+          </div>
+        </header>
+        <section>
+          <DataRichDocument source={source} />
+        </section>
+      </article>
+    </Layout>
+  );
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const mddb = await clientPromise;
+  const dbFile = await mddb.getFileByUrl('stories/' + params?.fileName);
+
+  let source = fs.readFileSync(dbFile.file_path, { encoding: 'utf-8' });
+  let { mdxSource } = await parse(source, '.mdx', {});
+  return {
+    props: {
+      source: mdxSource,
+      meta: dbFile.metadata,
+    },
+  };
+};
+
+export async function getStaticPaths() {
+  const mddb = await clientPromise;
+  let allDocuments = await mddb.getFiles({ extensions: ['mdx'], folder: 'stories' });
+
+  const paths = allDocuments
+    .filter((page) => page.metadata?.isDraft !== true)
+    .map((page) => {
+      const parts = page.url_path!.split('/').slice(-1)[0];
+      return { params: { fileName: parts } };
+    });
+
+  return {
+    paths,
+    fallback: false,
+  };
+}

examples/openspending/pages/stories/index.tsx

@@ -0,0 +1,57 @@
+import fs from 'fs';
+import React from 'react';
+import { GetStaticProps } from 'next';
+import { BlogsList, SimpleLayout } from '@flowershow/core';
+import clientPromise from '../../lib/mddb';
+import type { CustomAppProps } from '../_app';
+import Layout from '@/components/_shared/Layout';
+
+interface BlogIndexPageProps extends CustomAppProps {
+  blogs: any[]; // TODO types
+}
+
+export default function StoriesList({
+  stories,
+  meta: { title, description },
+}: BlogIndexPageProps) {
+  return (
+    <Layout>
+      <div className="blog-list">
+        <SimpleLayout title={title} description={description}>
+          <BlogsList blogs={stories} />
+        </SimpleLayout>
+      </div>
+    </Layout>
+  );
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  const mddb = await clientPromise;
+  const storiesFiles = await mddb.getFiles({ folder: 'stories' });
+
+  const stories = storiesFiles.map((item) => ({
+    _id: item._id,
+    file_path: item.file_path,
+    urlPath: item.url_path,
+    date: item.metadata.date,
+    ...item.metadata,
+  }));
+
+  return {
+    props: {
+      meta: {
+        title: 'Data Stories',
+        showSidebar: false,
+        showToc: false,
+        showComments: false,
+        showEditLink: false,
+        urlPath: '/stories',
+      },
+      stories: stories.sort((a, b) => {
+        const bDate = new Date(b.date);
+        const aDate = new Date(a.date);
+        return bDate.getTime() - aDate.getTime();
+      }),
+    },
+  };
+};

examples/openspending/pages/styles.css

@@ -82,3 +82,109 @@ pre {
 .blog-list button {
   color: black;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "@flowershow/remark-callouts/styles.css";
+
+.w-5 {
+  width: 1.25rem
+}
+
+.h-5 {
+  height: 1.25rem
+}
+
+/* mathjax */
+.math-inline > mjx-container > svg {
+  display: inline;
+  align-items: center;
+}
+
+/* smooth scrolling in modern browsers */
+html {
+  scroll-behavior: smooth !important;
+}
+
+/* tooltip fade-out clip */
+.tooltip-body::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */
+  height: 1.2rem; /* ($top + $height)/$line-height is the number of lines we want to clip tooltip text at*/
+  width: 10rem;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+
+:is(h2, h3, h4, h5, h6):not(.blogitem-title) {
+  margin-left: -2rem !important;
+  padding-left: 2rem !important;
+  scroll-margin-top: 4.5rem;
+  position: relative;
+}
+
+.heading-link {
+  padding: 1px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: auto 0;
+  border-radius: 5px;
+  background: #1e293b;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.light .heading-link {
+  /* border: 1px solid #ab2b65; */
+  /* background: none; */
+  background: #e2e8f0;
+}
+
+:is(h2, h3, h4, h5, h6):not(.blogitem-title):hover .heading-link {
+  opacity: 100;
+}
+
+.heading-link svg {
+  transform: scale(0.75);
+}
+
+@media screen and (max-width: 640px) {
+  .heading-link {
+    visibility: hidden;
+  }
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}