diff --git a/docs/website/docusaurus.config.js b/docs/website/docusaurus.config.js index 5aa774b8f3d..77fa4915be8 100644 --- a/docs/website/docusaurus.config.js +++ b/docs/website/docusaurus.config.js @@ -235,26 +235,25 @@ const config = { navbar: { logo: { alt: "Mithril. A complete guide.", - src: "img/mithril-logo-text.svg", }, items: [ { type: "doc", docId: "manual/welcome", - position: "left", + position: "right", label: "Manual", }, { type: "doc", docId: "mithril/intro", label: "Protocol", - position: "left", + position: "right", }, { type: "dropdown", label: "Use Cases", - position: "left", + position: "right", items: [ { type: "doc", @@ -279,18 +278,49 @@ const config = { position: "right", }, { - to: "/glossary", label: "Glossary", + to: "/glossary", + position: "right", + }, + { + label: "Blog", + to: "/dev-blog", + position: "right", + }, + { + label: "ADRs", + to: "/adr", + position: "right", + }, + { + href: "https://github.com/IntersectMBO/mithril", + position: "right", + html: ` + + `, + }, + { + href: "https://discord.gg/5kaErDKDRq", position: "right", + html: ` + + `, }, - { to: "/dev-blog", label: "Blog", position: "right" }, - { to: "/adr", label: "ADRs", position: "right" }, ], }, footer: { + style: "dark", logo: { alt: "Mithril. A complete guide.", src: "img/mithril-logo-dark.svg", + width: 38, + height: 38, }, links: [ { diff --git a/docs/website/homepage-content/hero.ts b/docs/website/homepage-content/hero.ts deleted file mode 100644 index 474066300a5..00000000000 --- a/docs/website/homepage-content/hero.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { translate } from "@docusaurus/Translate"; - -export const hero = { - title: translate({ - id: "homepage.hero.title", - message: "Powering Cardano state proofs", - }), - standfirst: translate({ - id: "homepage.hero.standfirst", - message: `Built on stake-based threshold multisignatures, Mithril lets clients verify Cardano chain data without running a full node — ideal for wallets, exchanges, bridges, and any app that needs verified chain data with minimal overhead.`, - }), -}; diff --git a/docs/website/homepage-content/use-cases.ts b/docs/website/homepage-content/use-cases.ts deleted file mode 100644 index 3b500371737..00000000000 --- a/docs/website/homepage-content/use-cases.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { translate } from "@docusaurus/Translate"; - -export const useCases = { - nonScrollingText: translate({ - id: "homepage.useCases.nonScrollingText", - message: "Use cases include:", - }), - scrollingText: { - id: "homepage.useCases.scrollingText", - items: [ - "Full node clients", - "Light clients", - "Light wallets", - "Mobile applications", - "Sidechains", - "Bridges", - "Rollups", - "State channels", - ], - }, -}; diff --git a/docs/website/homepage-content/why-mithril.tsx b/docs/website/homepage-content/why-mithril.tsx deleted file mode 100644 index 00ddfec0ec3..00000000000 --- a/docs/website/homepage-content/why-mithril.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import { translate } from "@docusaurus/Translate"; - -export const WhyMithrilContents = { - title: translate({ - id: "homepage.whyMithril.title", - message: "WHY MITHRIL?", - }), - descriptionParagraph: { - id: "homepage.whyMithril.paragraphs", - message: ( -
-

- The Cardano blockchain offers robust security, but starting up a new - node, syncing it with the network, or exchanging data can be slow and - resource intensive (24GB of RAM, 150GB (and growing) of storage, and - over 24 hours for initial synchronization.) -

-

- Mithril was developed for Cardano as part of the Basho development - phase to support optimization, scalability, and interoperability. -

-
- ), - }, - timeline: ["Byron", "Shelley", "Goguen", "Basho", "Voltaire"], -}; diff --git a/docs/website/src/components/AnimatedText.tsx b/docs/website/src/components/AnimatedText.tsx deleted file mode 100644 index b71dec8920f..00000000000 --- a/docs/website/src/components/AnimatedText.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { FC } from "react"; -import { motion } from "framer-motion"; - -const processText = (children: React.ReactNode): React.ReactNode => - React.Children.map(children, (child) => { - if (typeof child === "string") { - return child.split(" ").map((word, index) => ( - - {word.split("").map((char, charIndex) => ( - - {char} - {charIndex === word.length - 1 && ( -   - )} - - ))} - - )); - } - - if (React.isValidElement(child)) { - //@ts-ignore - const processedText = processText(child.props.children); - //@ts-ignore - return React.cloneElement(child, child.props, processedText); - } - }); - -const AnimatedText: FC = () => { - return ( -
- - {processText( -

- Choosing Mithril means opting for a scalable, secure, and versatile - enhancement to the Cardano blockchain -

, - )} - -
- ); -}; - -export default AnimatedText; diff --git a/docs/website/src/components/Features.tsx b/docs/website/src/components/Features.tsx index bc5f4902147..8e0ad7a566a 100644 --- a/docs/website/src/components/Features.tsx +++ b/docs/website/src/components/Features.tsx @@ -1,66 +1,58 @@ -import React, { FC } from "react"; -import { motion } from "framer-motion"; -import { FeatureList } from "../../homepage-content/features"; -import useMediaQuery from "../hooks/useMediaQuery"; -import { forTablet } from "../../helpers/media-queries"; - -type Props = { - icon: React.JSX.Element; - title: string; - description: string; - index: number; -}; - -const Feature: FC = ({ icon, title, description, index }) => { - const isTabletUp = useMediaQuery(forTablet); - +const Features = () => { return ( - -
- {icon} -

- {title} -

+
+
+

Features

-

{description}

- - ); -}; - -const Features: FC = () => { - return ( -
-
- - FEATURES - - - {FeatureList.map((props, idx) => ( - - ))} - +
+
+
+ %% +

Trustless Light wallets

+
+

+ Fully open-source, non-custodial chain state that emphasizes privacy + and functionality without relying on third-party servers +

+
+
+
+ %% +

Succint state proofs

+
+

+ Allow participants to verify the validity of a blockchain’s entire + history or specific state transitions with constant verification + costs and minimal bandwidth +

+
+
+
+ %% +

+ Faster node bootstrapping +

+
+

+ Fast and secure data synchronization with layer 2 solutions – + including bridges, sidechains, and rollups – as well as applications + like light wallets. +

+
+
+
+ %% +

Decentralization

+
+

+ {" "} + Improved security and transparency, data and transactions are + recorded on distributed, verifiable ledgers accessible to all + participants +

+
-
+
); }; diff --git a/docs/website/src/components/HomepageHero.tsx b/docs/website/src/components/HomepageHero.tsx index 4ceeb202e74..d9689eff954 100644 --- a/docs/website/src/components/HomepageHero.tsx +++ b/docs/website/src/components/HomepageHero.tsx @@ -1,69 +1,48 @@ -import React, { FC } from "react"; import Link from "@docusaurus/Link"; -import { forTablet } from "../../helpers/media-queries"; -import { motion } from "framer-motion"; -import { hero } from "../../homepage-content/hero"; -const HomepageHero: FC = () => { +const HomepageHero = () => { return ( -
- -
-
-
- - {hero.title} - - +
+
+
+

+ Secure Cardano synchronization in{" "} + minutes, not hours +

+

+ Open Source </>  |  Community Driven ∞ +  |  Built for Cardano ✴ +

+ - {hero.standfirst} - -
- + Become a Signer + + + + + - Run a signer node + Explore the protocol - +
+
+
+
diff --git a/docs/website/src/components/Trusted.tsx b/docs/website/src/components/Trusted.tsx new file mode 100644 index 00000000000..bbbec198e04 --- /dev/null +++ b/docs/website/src/components/Trusted.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { motion } from "framer-motion"; + +import iog from "../../static/img/iog.png"; +import blinklabs from "../../static/img/blinklabs.png"; +import cardano from "../../static/img/cardano.png"; +import midnight from "../../static/img/midnight.png"; +import pogun from "../../static/img/pogun.png"; +import txpipe from "../../static/img/txpipe.png"; +import teragone from "../../static/img/teragone.png"; +import uralabs from "../../static/img/uralabs.png"; + +const logoPartner: Array<{ src: any; alt: string }> = [ + { src: iog, alt: "Input Output Global" }, + { src: blinklabs, alt: "BlinkLabs" }, + { src: cardano, alt: "Cardano" }, + { src: midnight, alt: "Midnight Network" }, + { src: pogun, alt: "Pogun DeFi" }, + { src: txpipe, alt: "TXPipe" }, + { src: teragone, alt: "Teragone Factory" }, + { src: uralabs, alt: "Ura Labs Finance" }, +]; + +const Trusted = () => { + return ( +
+
+

Trusted by the Cardano ecosystem

+
+
+
+ + {[...new Array(2)].fill(0).map((_, index) => ( + + {logoPartner.map(({ src, alt }) => ( + {alt} + ))} + + ))} + +
+
+
+ ); +}; + +export default Trusted; diff --git a/docs/website/src/components/UseCases.tsx b/docs/website/src/components/UseCases.tsx deleted file mode 100644 index 87d8f7cc85c..00000000000 --- a/docs/website/src/components/UseCases.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { FC, useEffect, useState } from "react"; -import { AnimatePresence, motion } from "framer-motion"; -import Link from "@docusaurus/Link"; -import { useCases } from "../../homepage-content/use-cases"; - -const processItems = (items: string[]): React.ReactNode => { - const [index, setIndex] = useState(0); - - useEffect(() => { - const interval = setInterval(() => { - setIndex((prev) => (prev + 1) % items.length); - }, 2500); - - return () => clearInterval(interval); - }, []); - return ( - - - {items[index]} - - - ); -}; -const UseCases: FC = () => { - return ( -
- -

- {useCases.nonScrollingText} - {processItems(useCases.scrollingText.items)} -

- - Learn more - - -
- ); -}; - -export default UseCases; diff --git a/docs/website/src/components/WhyMithril.tsx b/docs/website/src/components/WhyMithril.tsx index 1f869eb6a65..ab0444cfceb 100644 --- a/docs/website/src/components/WhyMithril.tsx +++ b/docs/website/src/components/WhyMithril.tsx @@ -1,112 +1,91 @@ -import React, { useEffect, useRef } from "react"; import Link from "@docusaurus/Link"; -import { WhyMithrilContents } from "../../homepage-content/why-mithril"; -import { cx } from "cva"; -import useMediaQuery from "../hooks/useMediaQuery"; -import { forLargeScreen } from "../../helpers/media-queries"; const WhyMithril = () => { - const containerRef = useRef(null); - const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - const isLargeScreen = useMediaQuery(forLargeScreen); - - useEffect(() => { - let animationFrameId: number; - - const animate = () => { - const sectionEl = containerRef.current; - if (!sectionEl) return; - - const scrollY = window.scrollY; - const viewportHeight = window.innerHeight; - - const sectionTop = sectionEl.offsetTop; - const sectionHeight = sectionEl.offsetHeight; - const scrollProgress = - (scrollY + viewportHeight - sectionTop) / - (sectionHeight + viewportHeight); - - itemRefs.current.forEach((el, index) => { - if (!el) return; - - const start = 0.07 + index * 0.08; - const end = start + 0.75; - - let localProgress = (scrollProgress - start) / (end - start); - localProgress = Math.min(Math.max(localProgress, 0), 1); - - const translateZ = -200 + localProgress * 400; - const opacity = - localProgress < 0.5 ? localProgress * 2 : (1 - localProgress) * 2; - const blur = - localProgress < 0.5 - ? 5 - localProgress * 10 - : (1 - localProgress) * 100; - - el.style.opacity = `${opacity}`; - el.style.transform = `translateZ(${translateZ}px)`; - el.style.filter = `blur(${blur}px)`; - }); - - animationFrameId = requestAnimationFrame(animate); - }; - - animationFrameId = requestAnimationFrame(animate); - - return () => cancelAnimationFrame(animationFrameId); - }, []); - return ( -
-
-
- {WhyMithrilContents.title} -
- -
-
- {WhyMithrilContents.timeline.map((item, index) => ( -
(itemRefs.current[index] = el)} - className={cx( - "timeline-grid-item", - item === "Basho" && "text-blue-highlight", - )} - style={{ - transformStyle: "preserve-3d", - opacity: 0, - filter: "blur(5px)", - transform: "translateZ(-200px)", - alignSelf: [ - "flex-start", - "flex-end", - "flex-start", - "center", - "flex-end", - ][index % 5], - }} - > - {item} -
- ))} -
- -
- {WhyMithrilContents.descriptionParagraph.message} +
+
+

Why Mithril ?

+
+
+
+
+ +

+ Built on stake-based threshold multisignatures,{" "} + + Mithril + {" "} + lets clients verify Cardano chain data without running a full node + — ideal for wallets, exchanges, bridges, and any app that needs + verified chain data with minimal overhead +

Learn more
+
+
+
+
+ +

+ 250+ +
+ Active Signers +

+
+
+
+
+ +

+ 50M+ +
+ ADA stake securing +
+ the network +

+
+
+
+
+ +

+ 8 min +
+ To bootstrap a node +

+
+
+
+
-
+
); }; diff --git a/docs/website/src/components/icons/Discord.tsx b/docs/website/src/components/icons/Discord.tsx deleted file mode 100644 index 9a34d431cee..00000000000 --- a/docs/website/src/components/icons/Discord.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from "react"; -import { SVGProps } from "react"; -const Discord = (props: SVGProps) => ( - - - -); - -export default Discord; diff --git a/docs/website/src/components/icons/Github.tsx b/docs/website/src/components/icons/Github.tsx deleted file mode 100644 index 252be9b0f95..00000000000 --- a/docs/website/src/components/icons/Github.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from "react"; -import { SVGProps } from "react"; -const Github = (props: SVGProps) => ( - - - -); - -export default Github; diff --git a/docs/website/src/components/icons/Scalability.tsx b/docs/website/src/components/icons/Scalability.tsx index 843a8b6602a..cdf314ae9b1 100644 --- a/docs/website/src/components/icons/Scalability.tsx +++ b/docs/website/src/components/icons/Scalability.tsx @@ -21,13 +21,13 @@ const Scalability = (props: SVGProps) => ( y="0.609375" width="28.681" height="24.3904" - fill="#D9D9D9" + fill="var(--ifm-color-primary)" /> ) => ( width="24" height="24" > - + diff --git a/docs/website/src/css/custom.css b/docs/website/src/css/custom.css index 70048f4b510..aa942a0c95b 100644 --- a/docs/website/src/css/custom.css +++ b/docs/website/src/css/custom.css @@ -48,23 +48,11 @@ --color-transparent: transparent; --color-current: currentColor; - --color-blue: #01193c; - --color-blue-light: #ecf9fd; - --color-blue-highlight: #2634ad; - - --color-secondary: #3c9ec8; --color-black: #000000; - - --color-gray: #7c8080; - --color-gray-dark: #99a3b1; - --color-gray-light: #808c9d; - --color-gray-extra-light: #f3f4f4; - --color-gray-border: #b3bac5; - --color-white: #ffffff; - --color-cyan: #65cfe1; - --color-cyan-dark: #397589; + --color-white-ish: #f9fbf8; + --color-gray-dark: #383737; } @font-face { @@ -111,60 +99,57 @@ } :root { - --ifm-color-primary: #397589; - --ifm-color-primary-dark: #397589; - --ifm-color-primary-darker: #397589; - --ifm-color-primary-darkest: #397589; - --ifm-color-primary-light: #65cfe1; - --ifm-color-primary-lighter: #65cfe1; - --ifm-color-primary-lightest: #65cfe1; + --ifm-color-primary: #f4360b; + --ifm-color-primary-dark: #dc310a; + --ifm-color-primary-darker: #cf2e09; + --ifm-color-primary-darkest: #ab2608; + --ifm-color-primary-light: #f54a23; + --ifm-color-primary-lighter: #f65430; + --ifm-color-primary-lightest: #f77254; --ifm-code-font-size: 95%; - --ifm-navbar-height: 60px; + --ifm-navbar-height: 70px; font-family: "Inter"; } @media (min-width: 768px) { :root { - --ifm-navbar-height: 96px; + --ifm-navbar-height: 75px; } } /* Styling overrides to Infima after upgrading to Tailwind V4 */ -.navbar__item { - font-weight: 600; - font-size: 1rem; - line-height: 2rem; -} - -.navbar__items { - display: flex !important; +.navbar { + background: transparent; font-family: "Lexend"; + box-shadow: none; } -.footer__link-item { - color: var(--color-gray-extra-light); - line-height: normal; -} -.footer__link-item:hover { - color: var(--ifm-color-primary-dark); +.navbar__items--right{ + gap: 0.2rem; + padding: 0.6rem 1.5rem; + border-radius: 999px; + background: var(--color-white); + box-shadow: + 0 1px 2px rgba(16, 24, 40, 0.04), + 0 8px 24px rgba(16, 24, 40, 0.08); } -.footer-logo-text { - margin: 0; - font-size: 1.5rem; - line-height: calc(2 / 1.5); - font-weight: normal; +.footer{ + background-color: var(--color-gray-dark); } -.navbar__social-link { - color: var(--ifm-navbar-link-color); -} -.navbar__social-link:hover { - color: var(--ifm-navbar-link-hover-color); +.footer__bottom { + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + border-top: 1px solid var(--color-white-ish); + padding-top: 1rem; + margin-top: 1rem; } .hero-title { @@ -174,11 +159,66 @@ Styling overrides to Infima after upgrading to Tailwind V4 } @media (min-width: 768px) { .hero-title { - font-size: 3.5rem; - line-height: 73px; + font-size: 3.25rem; + line-height: 75px; } } +.glitch { + animation: textflicker 0.016s infinite alternate; +} + +@keyframes textflicker { + from { + text-shadow: + -2px 0.1 0.1 #c44b31, + 2px 0.1 0.1 #ff7455; + } + to { + text-shadow: + 2px 0.5px 1px #ff7455, + -2px -0.5px 2px #c44b31; + } +} + +/* Loseely based on code by freefrontend.com/css-shine-effect/ */ +.shine-card { + position: relative; + overflow: hidden; +} + +.shine-card::before { + content: ""; + position: absolute; + top: 0; + left: -150%; + width: 50%; + height: 100%; + pointer-events: none; + background: linear-gradient( + 100deg, + transparent 10%, + color-mix(in srgb, var(--ifm-color-primary-lightest) 35%, transparent) 40%, + transparent 90% + ); + transform: skewX(-20deg); + animation: shine 3s ease-in-out infinite; + animation-delay: var(--shine-delay, 0s); +} + +@keyframes shine { + 0% { + left: -150%; + } + 40% { + left: 150%; + } + 100% { + left: 150%; + } +} +/*-------------------------------------------------------------*/ + .animated-text-heading { font-size: 2rem; font-weight: normal; @@ -273,20 +313,6 @@ h3 { padding-bottom: 72px; } -.use-case-text { - background: #01193c; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; -} - -@media screen and (max-width: 996px) { - .footer { - text-align: center; - } -} - a.menu__link:hover { text-decoration: underline; } @@ -468,13 +494,3 @@ a.menu__link { transform 0.1s ease, filter 0.1s ease; } - -.landing-navbar--top { - background-color: rgba(255, 255, 255, 0); - transition: background-color 0.3s ease; -} - -.landing-navbar--scrolled { - background-color: rgba(255, 255, 255, 0.96); - transition: background-color 0.3s ease; -} diff --git a/docs/website/src/pages/index.module.css b/docs/website/src/pages/index.module.css deleted file mode 100644 index 9f71a5da775..00000000000 --- a/docs/website/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/docs/website/src/pages/index.tsx b/docs/website/src/pages/index.tsx index b077c1489e0..b40c8b3cce0 100644 --- a/docs/website/src/pages/index.tsx +++ b/docs/website/src/pages/index.tsx @@ -4,9 +4,8 @@ import Layout from "@theme/Layout"; import { PageContext, PageType } from "../context/PageContext"; import HomepageHero from "../components/HomepageHero"; import Features from "../components/Features"; -import AnimatedText from "../components/AnimatedText"; -import UseCases from "../components/UseCases"; import WhyMithril from "../components/WhyMithril"; +import Trusted from "../components/Trusted"; export default function HomePage() { return ( @@ -19,9 +18,8 @@ export default function HomePage() {
- - +
diff --git a/docs/website/src/theme/Footer/Layout/index.tsx b/docs/website/src/theme/Footer/Layout/index.tsx deleted file mode 100644 index dbf8df940e8..00000000000 --- a/docs/website/src/theme/Footer/Layout/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { type ReactNode } from "react"; -import type { Props } from "@theme/Footer/Layout"; -import clsx from "clsx"; - -export default function FooterLayout({ - links, - logo, - copyright, -}: Props): ReactNode { - return ( -
-
- {links} - {(logo || copyright) && ( -
- {logo &&
{logo}
} - {copyright} -
- )} -
-
- ); -} diff --git a/docs/website/src/theme/Footer/LinkItem/index.tsx b/docs/website/src/theme/Footer/LinkItem/index.tsx deleted file mode 100644 index dded8cbdcb8..00000000000 --- a/docs/website/src/theme/Footer/LinkItem/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { type ReactNode } from "react"; -import clsx from "clsx"; -import Link from "@docusaurus/Link"; -import useBaseUrl from "@docusaurus/useBaseUrl"; - -import type { Props } from "@theme/Footer/LinkItem"; - -export default function FooterLinkItem({ item }: Props): ReactNode { - const { to, href, label, prependBaseUrlToHref, className, ...props } = item; - const toUrl = useBaseUrl(to); - const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true }); - - return ( - - {label} - - ); -} diff --git a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx b/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx deleted file mode 100644 index 16a75fcdc4c..00000000000 --- a/docs/website/src/theme/Footer/Links/MultiColumn/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { type ReactNode } from "react"; -import clsx from "clsx"; -import LinkItem from "@theme/Footer/LinkItem"; -import type { Props } from "@theme/Footer/Links/MultiColumn"; - -type ColumnType = Props["columns"][number]; -type ColumnItemType = ColumnType["items"][number]; - -function ColumnLinkItem({ item }: { item: ColumnItemType }) { - return item.html ? ( -
  • - ) : ( -
  • - -
    • - ); -} - -function Column({ column }: { column: ColumnType }) { - return ( -
    -
    {column.title}
    -
      - {column.items.map((item, i) => ( - - ))} -
    -
    - ); -} - -export default function FooterLinksMultiColumn({ columns }: Props): ReactNode { - return ( -
    - {columns.map((column, i) => ( - - ))} -
    - ); -} diff --git a/docs/website/src/theme/Footer/Logo/index.tsx b/docs/website/src/theme/Footer/Logo/index.tsx deleted file mode 100644 index 33ee2d0c5ff..00000000000 --- a/docs/website/src/theme/Footer/Logo/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { type ReactNode } from "react"; -import clsx from "clsx"; -import Link from "@docusaurus/Link"; -import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"; -import ThemedImage from "@theme/ThemedImage"; -import type { Props } from "@theme/Footer/Logo"; - -import styles from "./styles.module.css"; - -function LogoImage({ logo }: Props) { - const { withBaseUrl } = useBaseUrlUtils(); - const sources = { - light: withBaseUrl(logo.src), - dark: withBaseUrl(logo.srcDark ?? logo.src), - }; - return ( - - ); -} - -export default function FooterLogo({ logo }: Props): ReactNode { - return logo.href ? ( - - - - ) : ( -
    - -

    Mithril

    -
    - ); -} diff --git a/docs/website/src/theme/Footer/Logo/styles.module.css b/docs/website/src/theme/Footer/Logo/styles.module.css deleted file mode 100644 index faf0e60f3e1..00000000000 --- a/docs/website/src/theme/Footer/Logo/styles.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.footerLogoLink { - opacity: 0.5; - transition: opacity var(--ifm-transition-fast) - var(--ifm-transition-timing-default); -} - -.footerLogoLink:hover { - opacity: 1; -} diff --git a/docs/website/src/theme/Navbar/Content/index.tsx b/docs/website/src/theme/Navbar/Content/index.tsx deleted file mode 100644 index 5b5a111b347..00000000000 --- a/docs/website/src/theme/Navbar/Content/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react"; -import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common"; -import { - splitNavbarItems, - useNavbarMobileSidebar, -} from "@docusaurus/theme-common/internal"; -import NavbarItem from "@theme/NavbarItem"; -import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; -import SearchBar from "@theme/SearchBar"; -import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; -import NavbarLogo from "@theme/Navbar/Logo"; -import NavbarSearch from "@theme/Navbar/Search"; -import styles from "./styles.module.css"; -import Discord from "../../../components/icons/Discord"; -import Github from "../../../components/icons/Github"; - -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items; -} -function NavbarItems({ items }) { - return ( - <> - {items.map((item, i) => ( - - new Error( - `A theme navbar item failed to render. -Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: -${JSON.stringify(item, null, 2)}`, - { cause: error }, - ) - } - > - - - ))} - - ); -} -function NavbarContentLayout({ left, right }) { - return ( -
    -
    {left}
    -
    {right}
    -
    - ); -} -export default function NavbarContent() { - const mobileSidebar = useNavbarMobileSidebar(); - const items = useNavbarItems(); - const [leftItems, rightItems] = splitNavbarItems(items); - const searchBarItem = items.find((item) => item.type === "search"); - return ( - - - - - } - right={ - <> - - - {!searchBarItem && ( - - - - )} - - - - - - - {!mobileSidebar.disabled && } - - } - /> - ); -} diff --git a/docs/website/src/theme/Navbar/Content/styles.module.css b/docs/website/src/theme/Navbar/Content/styles.module.css deleted file mode 100644 index 4c9471e1098..00000000000 --- a/docs/website/src/theme/Navbar/Content/styles.module.css +++ /dev/null @@ -1,8 +0,0 @@ -/* -Hide color mode toggle in small viewports - */ -@media (max-width: 996px) { - .colorModeToggle { - display: none; - } -} diff --git a/docs/website/src/theme/Navbar/Layout/index.tsx b/docs/website/src/theme/Navbar/Layout/index.tsx deleted file mode 100644 index 5ae0ed2c29d..00000000000 --- a/docs/website/src/theme/Navbar/Layout/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useEffect, useState } from "react"; -import clsx from "clsx"; -import { useThemeConfig } from "@docusaurus/theme-common"; -import { - useHideableNavbar, - useNavbarMobileSidebar, -} from "@docusaurus/theme-common/internal"; -import { translate } from "@docusaurus/Translate"; -import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar"; -import styles from "./styles.module.css"; -import { useIsLandingPage } from "../../../hooks/useIsLandingPage"; - -function NavbarBackdrop(props) { - return ( -
    - ); -} - -export default function NavbarLayout({ children }) { - const isLandingPage = useIsLandingPage(); - const { - navbar: { hideOnScroll }, - } = useThemeConfig(); - const mobileSidebar = useNavbarMobileSidebar(); - const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); - - const [scrolled, setScrolled] = useState(false); - - useEffect(() => { - const onScroll = () => { - setScrolled(window.scrollY > 70); - }; - - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); - }, []); - - return ( -
    -
    - {children} -
    - - -
    - ); -} diff --git a/docs/website/src/theme/Navbar/Layout/styles.module.css b/docs/website/src/theme/Navbar/Layout/styles.module.css deleted file mode 100644 index e72891a44ff..00000000000 --- a/docs/website/src/theme/Navbar/Layout/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.navbarHideable { - transition: transform var(--ifm-transition-fast) ease; -} - -.navbarHidden { - transform: translate3d(0, calc(-100% - 2px), 0); -} diff --git a/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx deleted file mode 100644 index 18659aa1846..00000000000 --- a/docs/website/src/theme/Navbar/MobileSidebar/Layout/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { type ReactNode } from "react"; -import clsx from "clsx"; -import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal"; -import type { Props } from "@theme/Navbar/MobileSidebar/Layout"; - -export default function NavbarMobileSidebarLayout({ - header, - primaryMenu, - secondaryMenu, -}: Props): ReactNode { - const { shown: secondaryMenuShown } = useNavbarSecondaryMenu(); - return ( -
    - {header} -
    -
    {primaryMenu}
    -
    {secondaryMenu}
    -
    -
    - ); -} diff --git a/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx deleted file mode 100644 index 2c4260043b2..00000000000 --- a/docs/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { type ReactNode } from "react"; -import { useThemeConfig } from "@docusaurus/theme-common"; -import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal"; -import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem"; -import Discord from "../../../../components/icons/Discord"; - -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items as NavbarItemConfig[]; -} - -// The primary menu displays the navbar items -export default function NavbarMobilePrimaryMenu(): ReactNode { - const mobileSidebar = useNavbarMobileSidebar(); - - // TODO how can the order be defined for mobile? - // Should we allow providing a different list of items? - const items = useNavbarItems(); - - return ( -
      - {items.map((item, i) => ( - mobileSidebar.toggle()} - key={i} - /> - ))} - - - -
    - ); -} diff --git a/docs/website/static/img/blinklabs.png b/docs/website/static/img/blinklabs.png new file mode 100644 index 00000000000..ad94a606de5 Binary files /dev/null and b/docs/website/static/img/blinklabs.png differ diff --git a/docs/website/static/img/cardano.png b/docs/website/static/img/cardano.png new file mode 100644 index 00000000000..8ee96164056 Binary files /dev/null and b/docs/website/static/img/cardano.png differ diff --git a/docs/website/static/img/iog.png b/docs/website/static/img/iog.png new file mode 100644 index 00000000000..745dd014d08 Binary files /dev/null and b/docs/website/static/img/iog.png differ diff --git a/docs/website/static/img/midnight.png b/docs/website/static/img/midnight.png new file mode 100644 index 00000000000..070c71b9ef1 Binary files /dev/null and b/docs/website/static/img/midnight.png differ diff --git a/docs/website/static/img/people.svg b/docs/website/static/img/people.svg new file mode 100644 index 00000000000..41bb47c25ea --- /dev/null +++ b/docs/website/static/img/people.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/website/static/img/pogun.png b/docs/website/static/img/pogun.png new file mode 100644 index 00000000000..d5789b0192c Binary files /dev/null and b/docs/website/static/img/pogun.png differ diff --git a/docs/website/static/img/rocket.svg b/docs/website/static/img/rocket.svg new file mode 100644 index 00000000000..e1fbb14b4ef --- /dev/null +++ b/docs/website/static/img/rocket.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/website/static/img/safe.svg b/docs/website/static/img/safe.svg new file mode 100644 index 00000000000..ec4d575a7ff --- /dev/null +++ b/docs/website/static/img/safe.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/website/static/img/teragone.png b/docs/website/static/img/teragone.png new file mode 100644 index 00000000000..a5016b8bfc2 Binary files /dev/null and b/docs/website/static/img/teragone.png differ diff --git a/docs/website/static/img/txpipe.png b/docs/website/static/img/txpipe.png new file mode 100644 index 00000000000..91346591d2b Binary files /dev/null and b/docs/website/static/img/txpipe.png differ diff --git a/docs/website/static/img/uralabs.png b/docs/website/static/img/uralabs.png new file mode 100644 index 00000000000..bdc3f2e77cc Binary files /dev/null and b/docs/website/static/img/uralabs.png differ diff --git a/docs/website/static/mithril-shield.mp4 b/docs/website/static/mithril-shield.mp4 new file mode 100644 index 00000000000..f5b3c34fe4a Binary files /dev/null and b/docs/website/static/mithril-shield.mp4 differ