Merge PR #120, #121, #122, #123 into main

.gitignore

@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

docusaurus.config.js

@@ -6,6 +6,10 @@
 
 import {themes as prismThemes} from 'prism-react-renderer';
 
+// Dotenv is a zero-dependency module that loads environment 
+// variables from a .env file into process.env
+import 'dotenv/config'; 
+
 // GitHub Settings to setup repository and branch customFields
 const vars = require('./variables')
 
@@ -33,6 +37,9 @@ const config = {
   customFields: {
     repository: `${vars.repository}`,
     branch: `${vars.branch}`,
+
+    // put your blockfrost id in your .env file 
+    REACT_APP_BLOCKFROST_APP_PROJECT_ID: process.env.REACT_APP_BLOCKFROST_APP_PROJECT_ID,
   },
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -194,9 +201,17 @@ const config = {
                 href: '/entities?tab=iog',  
               },
               {
-                label: 'More entities',
+                label: 'Intersect',
                 href: '/entities?tab=intersect', 
               },
+              {
+                label: 'PRAGMA',
+                href: '/entities?tab=pragma', 
+              },
+              {
+                label: 'More entities',
+                href: '/entities/#companies', 
+              },
             ],
           },
           {

netlify.toml

@@ -9,7 +9,7 @@
     # Activates the browser's built-in cross-site scripting (XSS) filter and blocks responses if an attack is detected.
     X-XSS-Protection = "1; mode=block"
     # Ensures that only trusted content is executed and styled. TODO: Consider using nonces or hashes for inline scripts instead of unsafe-inline.
-    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cardano.org https://new-cardano-org-staging.netlify.app https://www.googletagmanager.com https://js.hsforms.net https://forms.hsforms.com https://www.google.com https://www.gstatic.com; img-src 'self' https://cardano.org https://new-cardano-org-staging.netlify.app https://forms.hsforms.com https://forms-eu1.hsforms.com data: https://*.ytimg.com; style-src 'self' 'unsafe-inline'; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://www.google.com https://*.hsforms.com; media-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; connect-src 'self' https://hubspot-forms-static-embed.s3.amazonaws.com https://*.hsforms.com https://*.google-analytics.com" 
+    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cardano.org https://new-cardano-org-staging.netlify.app https://www.googletagmanager.com https://js.hsforms.net https://forms.hsforms.com https://www.google.com https://www.gstatic.com; img-src 'self' https://cardano.org https://new-cardano-org-staging.netlify.app https://forms.hsforms.com https://forms-eu1.hsforms.com data: https://*.ytimg.com; style-src 'self' 'unsafe-inline'; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://www.google.com https://*.hsforms.com; media-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; connect-src 'self' https://hubspot-forms-static-embed.s3.amazonaws.com https://*.hsforms.com https://*.google-analytics.com https://cardano-mainnet.blockfrost.io"
     # Enforces secure connections via HTTPS, protecting against certain types of man-in-the-middle attacks.
     Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"
     # Controls information provided as the HTTP Referer header when navigating from your site, enhancing privacy and security.

package.json

@@ -20,7 +20,9 @@
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
     "@tippyjs/react": "^4.2.6",
+    "axios": "^1.7.7",
     "clsx": "^2.0.0",
+    "dotenv": "^16.4.5",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-chrono": "^2.6.1",

src/pages/network.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'; 
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import SiteHero from "@site/src/components/Layout/SiteHero";
+import BoundaryBox from "@site/src/components/Layout/BoundaryBox";
+import TitleWithText from "@site/src/components/Layout/TitleWithText";
+import OpenGraphImage from "@site/src/components/Layout/OpenGraphImage";
+import SpacerBox from "@site/src/components/Layout/SpacerBox";
+import BackgroundWrapper from "@site/src/components/Layout/BackgroundWrapper";
+import axios from 'axios';
+
+// convert Lovelaces to ada and round to the nearest full ada
+const convertLovelacesToAda = (lovelaces) => {
+  return Math.round(lovelaces / 1_000_000).toLocaleString();
+};
+
+const NetworkStats = () => {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+
+  // Blockfrost id, see docusaurus.config.js for details
+  const { siteConfig: {customFields}} = useDocusaurusContext();
+  const PROJECT_ID = customFields.REACT_APP_BLOCKFROST_APP_PROJECT_ID;
+
+  useEffect(() => {
+    // Make sure the environment variable is loaded
+    if (!PROJECT_ID) {
+      setError('Blockfrost API key is missing!');
+      return;
+    }
+
+    // API request to Blockfrost
+    axios.get('https://cardano-mainnet.blockfrost.io/api/v0/network', {
+      headers: {
+        'project_id': PROJECT_ID
+      }
+    })
+    .then((response) => {
+      setData(response.data);  // Set the data in state
+    })
+    .catch((error) => {
+      console.error('Error fetching data:', error);
+      setError(error.message);  // Set the error message in case of failure
+    });
+  }, []);
+
+  // Render the values in ada or an error message if available
+  return (
+    <div>
+      {error ? (
+        <p>Error: {error}</p>
+      ) : data !== null ? (
+        <div>
+          <TitleWithText title="Supply" 
+            description={[
+              `**Max:** ${convertLovelacesToAda(data.supply.max)} ada`,
+              `**Total:** ${convertLovelacesToAda(data.supply.total)} ada`,
+              `**Circulating:** ${convertLovelacesToAda(data.supply.circulating)} ada`,      `**Locked:** ${convertLovelacesToAda(data.supply.locked)} ada`,
+              `**Treasury:** ${convertLovelacesToAda(data.supply.treasury)} ada`,
+              `**Reserves:** ${convertLovelacesToAda(data.supply.reserves)} ada`
+            ]}
+            headingDot={true} 
+          /> 
+
+          <TitleWithText title="Stake" 
+            description={[
+              `**Live:** ${convertLovelacesToAda(data.stake.live)} ada`,
+              `**Active:** ${convertLovelacesToAda(data.stake.active)} ada`
+            ]}
+            headingDot={false} 
+          /> 
+
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+
+function HomepageHeader() {
+  const { siteTitle } = "useDocusaurusContext()"; // Ensure this works as needed for Docusaurus
+  return (
+    <SiteHero
+      title="Network Data"
+      description="Cardano mainnet network stats"
+      bannerType="zoom"
+    />
+  );
+}
+
+export default function Home() {
+
+  return (
+    <Layout
+      title="Cardano Network | cardano.org"
+      description="Network Data"
+    >
+      <OpenGraphImage pageName="network" />
+      <HomepageHeader />
+      <main>
+        <BoundaryBox>
+          <BackgroundWrapper backgroundType="zoom">
+            <NetworkStats />
+            <SpacerBox size="medium" />
+          </BackgroundWrapper>
+        </BoundaryBox>
+      </main>
+    </Layout>
+  );
+}

static/img/dotted-icons/*README.md → static/img/dotted-icons/README.md

@@ -29,4 +29,4 @@ While these instructions are for the current grid system, if you think you can d
 
 Some icons currently have a different, slanted grid system. The template-dotted-icons.svg file was made for the more rigid and square grid because it is the one that most of the current icons use. But why not make a template for the slanted, more relaxed grid style ? Or take inspiration from it and redesign all the icons.
 
-Thank you for your contributions.
+Thank you for your contributions.