Revamp entities page + Cardano Summit

docs/index.md

@@ -48,7 +48,11 @@ cardano-org
 │   ├── data
 │   │   ├── ambassadorsData.json
 │   │   ├── delegationFAQ.json
-│   │   └── operationFAQ.json
+│   │   ├── logosCompanies.json
+│   │   ├── logosEntities.json
+│   │   ├── operationFAQ.json
+│   │   ├── pineappleFAQ.json
+│   │   └── termsForTermExplainer.json
 │   └── pages
 │       ├── ambassadors.js
 │       ├── brand-assets.js
@@ -70,11 +74,18 @@ cardano-org
 - `/blog/` - Contains the Markdown files for the news section.
 - `/docs/` - Contains the Markdown files for the documentation of the components (like this page). Customize the order of the docs sidebar in `sidebars.js`.
 - `/src/` - Non-documentation files like pages, custom React components, data and css files.
-  - `/src/data/ambassadorsData.json` - Ambassador data for https://cardano.org/ambassadors/
-  - `/src/data/delegationFAQ.json` - FAQ data for https://cardano.org/stake-pool-delegation/
-   - `/src/data/operationFAQ.json` - FAQ data for https://cardano.org/stake-pool-operation/
+  - `/src/data/ambassadorsData.json` - Ambassador data for https://cardano.org/ambassadors/.
+  - `/src/data/delegationFAQ.json` - FAQ data for https://cardano.org/stake-pool-delegation/.
+  - `/src/data/logosCompanies.json` - Company data for https://cardano.org/entities/.
+  - `/src/data/logosEntities.json` - Entitiy data for https://cardano.org/entities.
+  - `/src/data/operationFAQ.json` - FAQ data for https://cardano.org/stake-pool-operation/.
+  - `/src/data/pineappleFAQ.json` - example FAQ data for the [FAQ section tutorial](/docs/tutorial/faq-component).
+  - `/src/data/termsForTermExplainer.json` - data for the TermExplainer component.
   - `/src/pages` - Any files within this directory will be converted into a website page.
 - `/static/` - Static directory. Any contents inside here will be copied into the root of the final `build` directory.
+  - `/static/archive` - Genesis distribution content that we want to preserve. Data was downloaded from static.iohk.io.
+  - `/static/downloads` - Content that needs to be distributed, e.g. media packs.
+  - `/static/img` - All kinds of images. To highlight a few: `authors` are logos for `authors.yml`, `logos` are entity and company logos, `og` are open graph images.
 - `/docusaurus.config.js` - A config file containing the site configuration.
 - `/package.json` - A Docusaurus website is a React app. You can install and use any npm packages you like in them.
 - `/sidebar.js` - Used by the documentation to specify the order of documents in the sidebar.

docs/tutorial/add-company.md

@@ -0,0 +1,53 @@
+---
+sidebar_position: 10
+---
+
+# Add your Company
+
+Thank you for considering adding your company, association or collaboration to [Entities Building on Cardano](https://cardano.org/entities#companies). 
+
+## Requirements
+
+Before making a pull request, please make sure that you fulfil all these requirements. 
+
+### Requirements of your company, association or collaboration 
+- You can only add a registered company or association, but not a product, service or tool. These can be added to the [Cardano Showcase](https://developers.cardano.org/showcase). By "collaboration" we mean open source collaborations such as the **Koios Team** or the **Guild Operators**. They do not necessarily have to be registered but need to fullfil all other requirements. 
+- That your company has a product, service or tool that is listed on either [Cardano Showcase](https://developers.cardano.org/showcase) or [Builder Tools](https://developers.cardano.org/tools).
+- Your product, service or tools needs to work today on Cardano mainnet, no coming soon, no preview, no promises, no token sales.
+
+### Website Requirement
+- Link to the company website and not to the product website. Examples: don't link to **Flint Wallet** but to **dcSpark**. Don't link to **CardanoScan** but to **Strica**.
+- Your company website has to have a stable domain name. (a random Netlify/Vercel domain is not allowed, no URL shortener, no app store links, or similar)
+- Don't link to token pages. Example: don't link to **World Mobile Token** but to **World Mobile**. 
+- If you have registered your product as a company or you have the same website for both, please link to a team or about Us page. Examples: entries of **DripDropz** and **jpg.store**.
+
+### Logo Requirements
+- Have your company, association or collaboration logo as SVG (Scalable Vector Graphics) file. In order to maintain a certain quality standard, no jpg, png or other formats are accepted.
+- You need one that looks good on white background and one that looks good an dark background. (Light mode / dark mode)
+- Avoid a transparent border around the logo otherwise it will be displayed too small.
+- If you specify a size in the SVG file, do not go below 600x600.
+
+### Pull Request requirements
+- The GitHub account that adds the company must not be new.
+- The GitHub account that adds the company must have a history/or already be known in the Cardano community.
+
+
+## Changes for the actual pull request
+
+To create a pull request that adds your company named `Amazing Company`:
+
+- Fullfil all the above requirements.
+- Copy your two logos (light and dark mode) to the folder `static/img/logos`. Name them `amazingcompany.svg` and `amazingcompany-dark.svg`.
+- Make changes to the JSON file as shown below. 
+- The field `showCompanyName` can set to true if your company logo does not include the company name already. The name of the company is then displayed under the logo. Example: TxPipe and DripDropz. The company name 
+- The field `knownFor` must be set to at least one product/service or tool that is listed on either [Cardano Showcase](https://developers.cardano.org/showcase) or [Builder Tools](https://developers.cardano.org/tools).
+
+```jsx title="src/data/logosCompanies.json"
+  {
+    "companyName": "Amazing Company",
+    "imageName": "amazingcompany",
+    "link": "https://link-to-amazing-company",
+    "knownFor": "product, service or tool",
+    "showCompanyName": false
+  },
+```

docusaurus.config.js

@@ -55,6 +55,7 @@ const config = {
           showReadingTime: false,
           routeBasePath: 'news',
           blogSidebarCount: 17,
+          onUntruncatedBlogPosts: 'ignore',
           editUrl: `${vars.repository}/edit/${vars.branch}`,
         },
         theme: {
@@ -180,19 +181,19 @@ const config = {
             items: [
               {
                 label: 'Cardano Foundation',
-                to: '/partners?tab=cardanofoundation',
+                to: '/entities?tab=cardanofoundation',
               },
               {
                 label: 'EMURGO',
-                to: '/partners?tab=emurgo',
+                to: '/entities?tab=emurgo',
               },
               {
                 label: 'Input Output',
-                href: '/partners?tab=iog',  
+                href: '/entities?tab=iog',  
               },
               {
                 label: 'More entities',
-                href: '/partners?tab=intersect', 
+                href: '/entities?tab=intersect', 
               },
             ],
           },
@@ -256,6 +257,19 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
+
+    // Announcement Bar
+    // id: always change it when changing the announcement
+    // backgroundColor: use #1442B3 for announcements
+    announcementBar: {
+      id: "announcement_index1", // Any value that will identify this message + increment the number every time to be unique
+      content:
+        `<strong>Join the Cardano Summit 2024 in Dubai on 23-24 October. ⭐️<a target="_blank" rel="noopener noreferrer" href="https://summit.cardano.org?ref=corg">Get Tickets!</a></strong>`,
+      backgroundColor: "#1442B3",
+      textColor: "#FFFFFF", // Use #FFFFFF
+      isCloseable: true, // Use true
+    },
+
       head: [
         // ...
         {

netlify.toml

@@ -24,4 +24,9 @@
     X-Frame-Options = "SAMEORIGIN"
     # This path has its own content security policy
     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://maxcdn.bootstrapcdn.com; img-src 'self' https://cardano.org https://new-cardano-org-staging.netlify.app data:; style-src 'self' 'unsafe-inline'; font-src 'self' https://maxcdn.bootstrapcdn.com"
-
+
+# Redirects
+[[redirects]]
+  from = "/partners/"
+  to = "https://cardano.org/entities/"
+  status = 301

package.json

@@ -19,6 +19,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
+    "@tippyjs/react": "^4.2.6",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

src/components/DiscoverUsSection/index.js

@@ -46,37 +46,37 @@ export default function DiscoverUsSection({}) {
 
           <LogoLink
             imageName={"cardanofoundation-white"}
-            to={"/partners/?tab=cardano-foundation#partners-section"}
+            to={"/entities/?tab=cardano-foundation#entities"}
           />
           <p>
           The Cardano Foundation is an independent, Swiss-based not-for-profit organization. The Foundation is tasked with advancing the public digital infrastructure Cardano and works to anchor it as a utility for financial and social systems, thus empowering the digital architects of the future.<br /><br />The Foundation facilitates the worldwide advancement of Cardano in enterprise applications. It develops infrastructure tooling—including where there may not be an immediate commercial use case—plus strengthens operational resilience, and drives diversity of on-infrastructure use cases as well as the development of sound and representative governance.
           </p>
 
           <LogoLink
             imageName={"emurgo-white"}
-            to={"/partners/?tab=emurgo#partners-section"}
+            to={"/entities/?tab=emurgo#entitiesn"}
           />
           <p>
           EMURGO is a blockchain technology company and a founding entity of the Cardano blockchain that provides products and services to drive the adoption of Cardano’s Web3 ecosystem. Established in 2015 in Japan, EMURGO's mission is to facilitate commercial adoption through dynamic partnerships with existing ecosystem members and the seamless integration of new entrants.
           </p>
 
           <LogoLink
             imageName={"iog-white"}
-            to={"/partners/?tab=iog#partners-section"}
+            to={"/entities/?tab=iog#entities"}
           />
           <p>
           Input Output is a research and engineering company and venture studio that builds blockchain and Web3 products to empower everyone, everywhere.<br /><br />Founded by Charles Hoskinson and Jeremy Wood, Input Output was one of the three pioneer entities behind Cardano,  originally contracted to design, build, and help maintain the Cardano platform. A fully decentralized company, Input Output is comprised of dynamic, innovative teams– based all over the world, collectively committed to innovation through delivering the highest standards in software engineering based on rigorous peer-to-peer reviewed science.
           </p>
           <LogoLink
             imageName={"intersect-white"}
-            to={"/partners/?tab=intersect#partners-section"}
+            to={"/entities/?tab=intersect#entities"}
           />
           <p>
           Intersect is a not-for-profit member-based organization for the Cardano ecosystem. Intersect acts as a champion for distributed development and is committed to empowering the Cardano community to build together and drive the blockchain forward. Our mission is to ensure, through our members, the lasting continuity and progressive development of Cardano - fostering a self-sustaining ecosystem that’s fit-for-purpose, perpetually future-proof, resilient, secure, and transparent.
           </p>
           <LogoLink
             imageName={"pragma-white"}
-            to={"/partners/?tab=pragma#partners-section"}
+            to={"/entities/?tab=pragma#entities"}
           />
           <p>
           PRAGMA is a member-based, not-for-profit open source Association for blockchain software projects. It aims to foster an alternative open-source ecosystem for Cardano and beyond. A team of passionate software engineers from various backgrounds who build open-source tools for developers aiming for mass adoption.

src/components/HomeDiscoverSection/index.js

@@ -61,7 +61,7 @@ export default function HomeDiscoverSection() {
       </div>
       <div className={styles.quoteWrap}>
         <QuoteWithText
-          text="We, alongside our community and partners, are defining a new future: a decentralized future without intermediaries, in which power is returned to the individual."
+          text="Alongside the community, entities, and companies building on Cardano, a new future is being defined: a decentralized future without intermediaries, where power is returned to the individual"
           quoteType="none"
         />
       </div>

src/components/Layout/Logos/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';  //Default Styling
+
+// shows a logo with a link, forces svg to ensure quality
+// "companyName" in the json file is optional, therefore
+// if the logo consists of the company name leave the field out (example: Sundae Labs)
+function LogoWithLink({ imageName, link, companyName, knownFor, showCompanyName }) {
+  const logoElement = (
+    <Link to={link}>
+      <ThemedImage
+        alt={`Company logo of ${companyName}`}
+        sources={{
+          light: useBaseUrl(`/img/logos/${imageName}.svg`),
+          dark: useBaseUrl(`/img/logos/${imageName}-dark.svg`),
+        }}
+      />
+    </Link>
+  );
+
+  return (
+    <div className={styles.logoContainer}>
+      <div className={styles.imageWrap}>
+        {knownFor ? (
+          <Tippy content={`Known for: ${knownFor}`} 
+                 offset={[10, 20]}
+                 trigger="mouseenter focusin click"
+                 touch="hold">
+            {logoElement}
+          </Tippy>
+        ) : (
+          logoElement
+        )}
+      </div>
+      {showCompanyName && companyName && (
+        <div className={styles.companyName}>{companyName}</div>
+      )}
+    </div>
+  );
+}
+
+function PartnerItem({ imageName, label, link, companyName, knownFor, showCompanyName }) {
+  return <LogoWithLink imageName={imageName} link={link} companyName={companyName} knownFor={knownFor} showCompanyName={showCompanyName} />;
+}
+
+export default function HomePartnersSection({ jsonFileName }) {
+  const [partnerItems, setPartnerItems] = useState([]);
+
+  useEffect(() => {
+    import(`@site/src/data/${jsonFileName}.json`)
+      .then((module) => setPartnerItems(module.default))
+      .catch((error) => console.error('Error loading partner items:', error));
+  }, [jsonFileName]);
+
+  return (
+      <div className={styles.logoGridContainer}>
+        <div className={styles.logoGrid}>
+          {partnerItems.map((props, idx) => (
+            <PartnerItem key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+  );
+}