Skip to content

Commit

Permalink
Merge pull request #72 from cardano-foundation/staging
Browse files Browse the repository at this point in the history
Merge PR #68, #69, #70, #71 to main
  • Loading branch information
katomm authored Jun 5, 2024
2 parents 565b91e + 10fa333 commit 8bcf7f3
Show file tree
Hide file tree
Showing 9 changed files with 341 additions and 44 deletions.
11 changes: 3 additions & 8 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const config = {
{to: '/stake-pool-operation', label: 'Operate a stake pool'},
{to: '/governance', label: 'Participate in governance'},
{to: '/ouroboros', label: 'What is Ouroboros?'},
{to: '/hardforks', label: 'Which hard forks were there?'},
{to: '/genesis', label: 'About Genesis Distribution'},
{href: 'https://beta.explorer.cardano.org', label: 'Explore the blockchain'},
],
Expand All @@ -108,22 +109,16 @@ const config = {
{to: '/#follow', label: 'Follow Cardano'},
{href: 'https://forum.cardano.org', label: 'Cardano Forum'},
{href: 'https://forum.cardano.org/t/cardano-stay-safe-series-official-community-channel-list/20046', label: 'Social Channels'},

],
},
{
/* to: '/developers', TODO*/
label: 'Developers',
position: 'left',
items: [
{to: '/developers', label: 'Start building on Cardano'},
{to: '/research', label: 'Cardano Research'},
{to: '/exchanges', label: 'Integrate Cardano'},
{href: 'https://developers.cardano.org', label: 'Developer Portal'},
{href: 'https://developers.cardano.org/tools', label: 'Builder Tools'},
{href: 'https://developers.cardano.org/showcase', label: 'Project Showcase'},
{href: 'https://docs.cardano.org', label: 'Cardano Docs'},
{href: 'https://cardanoupdates.com', label: 'Developer Updates'},
{href: 'https://cardano.stackexchange.com/', label: 'Stack Exchange'},
{to: '/exchanges', label: 'Integrate Cardano'},
],
},
{
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,22 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "^3.2.0",
"@docusaurus/preset-classic": "^3.2.0",
"@docusaurus/core": "^3.4.0",
"@docusaurus/preset-classic": "^3.4.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
"prism-react-renderer": "^2.3.0",
"react": "^18.0.0",
"react-chrono": "^2.6.1",
"react-collapsible": "^2.10.0",
"react-dom": "^18.0.0",
"react-icons": "^5.0.1",
"react-tabs": "^6.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^3.2.0",
"@docusaurus/module-type-aliases": "^3.4.0",
"@docusaurus/types": "^3.2.0"
},
"browserslist": {
Expand Down
45 changes: 32 additions & 13 deletions src/components/Layout/DottedImageWithText/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,45 @@ import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import { parseMarkdownLikeText } from "@site/src/utils/textUtils";

//
// This component:
// shows a dotted image and some text to the right, title is optional

export default function DottedImageWithText({ imageName, title, text, headingDot }) {
// Construct the image URL using the imageName prop, we may want to handle image load errors in the future
const imageUrl = useBaseUrl(`/img/dotted-icons/${imageName}.svg`);

// Function to render text. Checks if text is an array and renders accordingly
const renderText = (content) => {
// If content is an array, map through it and return paragraphs
// Function to render text content
const renderTextContent = (content) => {
// If it's a string, render it as a paragraph
if (typeof content === 'string') {
return <p className="black-text">{parseMarkdownLikeText(content)}</p>;
}

// If it's an object and has a 'list' key, render it as a list
if (content && typeof content === 'object' && content.list) {
return (
<div className={styles.textWrap}>
<ul className="black-text">
{content.list.map((item, index) => (
<li key={index}>{parseMarkdownLikeText(item)}</li>
))}
</ul>
</div>
);
}

// If it's an array, render each element according to its type
if (Array.isArray(content)) {
return content.map((item, index) => (
<p key={index}>{parseMarkdownLikeText(item)}</p>
));
return (
<div>
{content.map((item, index) => (
<React.Fragment key={index}>
{renderTextContent(item)}
</React.Fragment>
))}
</div>
);
}
// If content is not an array, simply return a single paragraph
return <p>{parseMarkdownLikeText(content)}</p>;
};

return (
Expand All @@ -33,10 +54,8 @@ export default function DottedImageWithText({ imageName, title, text, headingDot
</div>
<div className={styles.textWrap}>
{title && <h2 className={clsx({ headingDot: headingDot }, styles.title)}>{title}</h2>}
{renderText(text)}
{renderTextContent(text)}
</div>
</div>
);
}


}
24 changes: 21 additions & 3 deletions src/components/Layout/DottedImageWithText/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.container {
display: flex; /* Use flexbox layout */
align-items: center; /* Center items vertically */
justify-content: flex-start; /* Align content to the start */
display: flex;
flex-wrap: wrap; /* Allow items to wrap */
align-items: flex-start;
justify-content: flex-start;
padding: 20px;
gap: 20px; /* Adjust the space between the image and the text */
}
Expand All @@ -11,8 +12,10 @@
align-items: center; /* Center the image vertically */
justify-content: center; /* Center the image horizontally */
padding: 10px;
padding-top: 60px;
width: 10rem;
height: 8rem;
min-width: 8rem;
}

.textWrap {
Expand All @@ -21,3 +24,18 @@
margin-left: 40px;
margin-right: auto;
}

@media (max-width: 768px) {
.container {
flex-direction: column; /* Stack items vertically */
align-items: center;
}

.textWrap {
margin-left: 0; /* Reset margin for better readability */
}

.imageWrap {
padding-top: 20px; /* Adjust padding for better spacing */
}
}
111 changes: 111 additions & 0 deletions src/pages/developers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import Layout from "@theme/Layout";
import SiteHero from "@site/src/components/Layout/SiteHero";
import BoundaryBox from "@site/src/components/Layout/BoundaryBox";
import Divider from "@site/src/components/Layout/Divider";
import BackgroundWrapper from "@site/src/components/Layout/BackgroundWrapper";
import CtaOneColumn from "@site/src/components/Layout/CtaOneColumn";
import DottedImageWithText from "@site/src/components/Layout/DottedImageWithText";
import SpacerBox from "@site/src/components/Layout/SpacerBox";
import OpenGraphImage from "@site/src/components/Layout/OpenGraphImage";

function HomepageHeader() {
const { siteTitle } = "useDocusaurusContext()";
return (
<SiteHero
title="Start Building on Cardano"
description="A curated list of resources and entry points to help you get started with building on Cardano."
bannerType="fluid"
/>
);
}

export default function Home() {

return (
<Layout
title="Start Building on Cardano | cardano.org"
description="A curated list of resources and entry points to help you get started with building on Cardano."
>
<OpenGraphImage pageName="developers" />
<HomepageHeader />

<BackgroundWrapper backgroundType={"zoom"}>
<BoundaryBox>
<Divider text="Developer Resources" />
<DottedImageWithText
imageName="education"
title="Documentation"
text={[

"Access the essential resources and updates you need to build, integrate, and stay informed about the Cardano blockchain. Below you’ll find links to the developer portal, detailed documentation, integration guides, and the latest core development updates.",

{
list: [
"[Developer Portal](https://developers.cardano.org)",
"[Cardano Docs](https://docs.cardano.org)",
"[Integrate Cardano](/exchanges)",
"[Core Development Updates](/news/tags/development)",
],
},

]}
headingDot={true}
/>

<DottedImageWithText
imageName="proof-of-work"
title="Developer Tools"
text={[

"Explore the tools, projects, and updates that are shaping the Cardano ecosystem. Below you’ll find links to builder tools, a showcase of projects built on Cardano, and a technical updates tracker that aggregates commits within the last 7 days from all branches of Cardano development-related repos.",

{
list: [
"[Builder Tools](https://developers.cardano.org/tools)",
"[Project Showcase](https://developers.cardano.org/showcase)",
"[Technical Update Tracker](https://cardanoupdates.com)",
],
},

]}
headingDot={false}
/>

<DottedImageWithText
imageName="research"
title="Support"
text={[

"Join the vibrant Cardano developer community through various platforms. Below you’ll find links to the Cardano Stack Exchange, the Cardano Forum, and the official Telegram group. Connect with fellow developers, ask questions, and share insights in our decentralized ecosystem.",

{
list: [
"[Cardano Stack Exchange](https://cardano.stackexchange.com)",
"[Cardano Forum](https://forum.cardano.org/c/developers/29)",
"[Telegram](https://t.me/CardanoDevelopersOfficial)",
],
},





]}
headingDot={false}
/>
</BoundaryBox>
</BackgroundWrapper>

<BackgroundWrapper backgroundType={"gradientDark"}>
<BoundaryBox>
<CtaOneColumn
title="Attack the protocol, fork the blockchain - or not. Explore the Ouroboros protocol firsthand in this interactive simulation."
buttonLabel={"Play the game"}
buttonLink={"https://ouroboros.iohk.io/ouroboros-game/"}
/>
<SpacerBox size="small" />
</BoundaryBox>
</BackgroundWrapper>
</Layout>
);
}
17 changes: 0 additions & 17 deletions src/pages/developers.md

This file was deleted.

Loading

0 comments on commit 8bcf7f3

Please sign in to comment.