Skip to content

Commit

Permalink
Merge branch 'feature/toc-for-what-is-celestia' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
Tamás committed Aug 23, 2023
2 parents 78346b9 + e24e48c commit bec5c76
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 53 deletions.
30 changes: 26 additions & 4 deletions src/datas/what-is-celestia/toc.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,32 @@
export const tableOfContent = [
{
section: "Get started",
type: "anchor",
depth: 1,
id: "what-is-a-modular-blockchain",
value: "What is a modular blockchain?",
},
{
text: "Current openings",
type: "anchor",
depth: 1,
id: "what-is-data-availability",
value: "What is data availability?",
},
{
depth: 1,
id: "what-are-rollups",
value: "What are rollups?",
},
{
depth: 1,
id: "whats-it-like-to-build-on-Celestia",
value: "What's it like to build on Celestia?",
},
{
depth: 1,
id: "modularism-not-maximalism",
value: "Modularism, not maximalism",
},
{
depth: 1,
id: "layer-0-social-consensus",
value: "Layer 0 social consensus",
},
];
53 changes: 9 additions & 44 deletions src/pages/what-is-celestia.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import React, { useState } from "react";
import Layout from "../components/layout";
import { FooterBoxes2 } from "../datas/what-is-celestia/content";
import { tableOfContent } from "../datas/what-is-celestia/toc";
import { StaticImage } from "gatsby-plugin-image";
import { AnchorLink } from "gatsby-plugin-anchor-links";

import { seoContent } from "../datas/what-is-celestia/seoContent";
import SEO from "../components/seo";

import celestia_modular from "../images/what-is-celestia/celestia-modular.png";
import celestia_what_are_rollups from "../images/what-is-celestia/celestia-what-are-rollups.png";
import celestia_data_availability from "../images/what-is-celestia/celestia-data-availability.png";
import celestia_what_is_modular from "../images/what-is-celestia/celestia-what-is-modular.png";
import celestia_modularizm from "../images/what-is-celestia/celestia-modularizm.png";
import celestia_transactions from "../images/what-is-celestia/celestia-transactions.png";
import monolithic_modular_aproach from "../images/what-is-celestia/monolithic-modular-aproach.png";
import celestia_connections from "../images/what-is-celestia/celestia-connections.png";

const WhatIsCelestia = () => {
Expand All @@ -23,39 +21,6 @@ const WhatIsCelestia = () => {
setSelectedItem(index);
};

const sections = [
{
depth: 1,
id: "what-is-a-modular-blockchain",
value: "What is a modular blockchain?",
},
{
depth: 1,
id: "what-is-data-availability",
value: "What is data availability?",
},
{
depth: 1,
id: "what-are-rollups",
value: "What are rollups?",
},
{
depth: 1,
id: "whats-it-like-to-build-on-Celestia",
value: "What's it like to build on Celestia?",
},
{
depth: 1,
id: "modularism-not-maximalism",
value: "Modularism, not maximalism",
},
{
depth: 1,
id: "layer-0-social-consensus",
value: "Layer 0 social consensus",
},
];

return (
<Layout footerBoxes2={FooterBoxes2}>
<SEO title={seoContent.title} description={seoContent.description} ogTitle={seoContent.ogTitle} image={seoContent.image} />
Expand Down Expand Up @@ -97,7 +62,7 @@ const WhatIsCelestia = () => {
</div>
<div className={`category-menu ${showTocCategories && "show"}`}>
<div className={"toc-item"}>
{sections.map((item, index) => {
{tableOfContent.map((item, index) => {
return (
<div
key={index}
Expand All @@ -115,8 +80,8 @@ const WhatIsCelestia = () => {
</div>
</div>
</div>
<div className='col-lg-9 ps-lg-5'>
<section className={"what-is-a-modular-blockchain"} id={`${sections[0].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className='col-lg-9 ps-lg-4 p-xl-5'>
<section className={"what-is-a-modular-blockchain"} id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}>
<h2 className='title'>And what is a modular blockchain?</h2>
<div className={"image-box--different"}>
<div className='image-wrapper'>
Expand All @@ -131,7 +96,7 @@ const WhatIsCelestia = () => {
</p>
</section>

<section className={"what-is-data-availability"} id={`${sections[1].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section className={"what-is-data-availability"} id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"row justify-content-between align-items-center"}>
<div className={"col-12 col-lg-6"}>
<h2 className='title'>What is data availability and why does it matter?</h2>
Expand All @@ -155,7 +120,7 @@ const WhatIsCelestia = () => {
</div>
</section>

<section className={"what-are-rollups"} id={`${sections[2].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section className={"what-are-rollups"} id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"row justify-content-between align-items-center"}>
<div className={"order-2 order-lg-1 image-box--different col-12 col-lg-6"}>
<div className='image-wrapper'>
Expand All @@ -178,7 +143,7 @@ const WhatIsCelestia = () => {
</div>
</section>

<section className={"whats-it-like-to-build-on-Celestia"} id={`${sections[3].id.replace(/\s+/g, "-").toLowerCase()}`}>
<section className={"whats-it-like-to-build-on-Celestia"} id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"row mb-3 mb-md-5 justify-content-center"}>
<h2 className='title'>What’s it like to build on Celestia?</h2>
</div>
Expand Down Expand Up @@ -245,7 +210,7 @@ const WhatIsCelestia = () => {
</section>

<section className='celestia-community'>
<div className={"modularism-not-maximalism"} id={`${sections[4].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"modularism-not-maximalism"} id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}>
<h2 className='section-title'>What the Celestia community stands for</h2>
<div className={"row justify-content-between align-items-center"}>
<div className={"col-12 col-lg-6"}>
Expand All @@ -270,7 +235,7 @@ const WhatIsCelestia = () => {
</div>
</div>

<div className={"layer-0-social-consensus"} id={`${sections[5].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"layer-0-social-consensus"} id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`}>
<div className={"row justify-content-between align-items-center"}>
<div className={"order-2 order-lg-1 image-box--rollups col-12 col-lg-6"}>
<div className='image-wrapper'>
Expand Down
10 changes: 5 additions & 5 deletions src/scss/pages/page-what-is-celestia.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,12 +266,12 @@
margin-bottom: 40px;
}
.gatsby-image-wrapper {
height: 75%;
transform: translateX(-10%) scale(0.96);
height: 64%;
transform: translateX(-20%) scale(1);
overflow: visible;
@include media-breakpoint-down(xl) {
height: 70%;
transform: translateX(-25%);
height: 52%;
transform: translateX(-30%);
width: 125%;
}
@include media-breakpoint-down(lg) {
Expand All @@ -290,7 +290,7 @@
width: 140%;
}
@include media-breakpoint-down(lg) {
width: 140%;
width: 120%;
}
@include media-breakpoint-down(md) {
width: 100%;
Expand Down

0 comments on commit bec5c76

Please sign in to comment.