-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
317 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react' | ||
|
|
||
| const Root: React.FC<{ children: React.ReactNode }> = ({ children }) => ( | ||
| <div className="custom-homepage">{children}</div> | ||
| ); | ||
|
|
||
| const Headline: React.FC<{ children: React.ReactNode }> = ({ children }) => { | ||
| return ( | ||
| <h1 className="custom-homepage-headline"> | ||
| {React.Children.map(children, child => { | ||
| if (React.isValidElement(child) && child.type === 'p') { | ||
| return React.cloneElement(child, { | ||
| className: `custom-homepage-headline-text ${child.props.className || ''}`.trim() | ||
| }); | ||
| } | ||
| return <span className="custom-homepage-headline-text">{child}</span>; | ||
| })} | ||
| </h1> | ||
| ); | ||
| }; | ||
|
|
||
| const Subhead: React.FC<{ children: React.ReactNode }> = ({ children }) => { | ||
| return ( | ||
| <div className="custom-homepage-subhead"> | ||
| {React.Children.map(children, child => { | ||
| if (React.isValidElement(child) && child.type === 'p') { | ||
| return React.cloneElement(child, { | ||
| className: `custom-homepage-subhead-text ${child.props.className || ''}`.trim() | ||
| }); | ||
| } | ||
| return <span className="custom-homepage-subhead-text">{child}</span>; | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const TileGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => ( | ||
| <div className="custom-homepage-grid">{children}</div> | ||
| ); | ||
|
|
||
| interface TileProps { | ||
| href: string; | ||
| title: string; | ||
| description: string; | ||
| icon?: string; | ||
| isExternal?: boolean; | ||
| } | ||
|
|
||
| const ExternalLinkIcon = () => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="custom-homepage-tile-external-icon"> | ||
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | ||
| <polyline points="15 3 21 3 21 9"></polyline> | ||
| <line x1="10" y1="14" x2="21" y2="3"></line> | ||
| </svg> | ||
| ); | ||
|
|
||
| const Tile: React.FC<TileProps> = ({ href, title, description, icon, isExternal }) => ( | ||
| <a | ||
| href={href} | ||
| className={`custom-homepage-tile ${isExternal ? 'custom-homepage-tile-external' : ''}`} | ||
| target={isExternal ? "_blank" : undefined} | ||
| rel={isExternal ? "noopener noreferrer" : undefined} | ||
| > | ||
| {icon && <span className="custom-homepage-tile-icon">{icon}</span>} | ||
| <h2 className="custom-homepage-tile-title">{title}</h2> | ||
| <p className="custom-homepage-tile-description">{description}</p> | ||
| {isExternal && <img src="/.vocs/icons/arrow-diagonal.svg" alt="" className="custom-homepage-tile-external-icon" />} | ||
| </a> | ||
| ); | ||
|
|
||
| export const CustomHomePage = { | ||
| Root, | ||
| Headline, | ||
| Subhead, | ||
| TileGrid, | ||
| Tile, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { CustomHomePage } from '../components/CustomHomePage' | ||
|
|
||
| <CustomHomePage.Root> | ||
| <CustomHomePage.Headline> | ||
| Build with XMTP | ||
| </CustomHomePage.Headline> | ||
| <CustomHomePage.Subhead> | ||
| A secure and resilient communications protocol—for the next phase of the internet | ||
| </CustomHomePage.Subhead> | ||
| <CustomHomePage.TileGrid> | ||
| <CustomHomePage.Tile | ||
| href="/get-started/intro" | ||
| title="Introduction to XMTP" | ||
| description="Get a quick intro to XMTP, including FAQ and how try an XMTP app" | ||
| icon="📚" | ||
| /> | ||
| <CustomHomePage.Tile | ||
| href="https://github.com/ephemeraHQ/converse-app" | ||
| title="Explore Converse" | ||
| description="Explore open source code for Converse apps built with XMTP" | ||
| icon="👩🏽💻" | ||
| isExternal={true} | ||
| /> | ||
| <CustomHomePage.Tile | ||
| href="/consent/subscribe" | ||
| title="Broadcast notifications" | ||
| description="Build subscriber lists and broadcast notifications to them" | ||
| icon="🔔" | ||
| /> | ||
| <CustomHomePage.Tile | ||
| href="/get-started/developer-quickstart" | ||
| title="Build chat inboxes" | ||
| description="Build standalone chat inbox apps for mobile and web" | ||
| icon="📥" | ||
| /> | ||
| <CustomHomePage.Tile | ||
| href="https://message-kit.vercel.app/" | ||
| title="Build chat bots" | ||
| description="Build bots that can send messages in XMTP chats" | ||
| icon="🤖" | ||
| isExternal={true} | ||
| /> | ||
| <CustomHomePage.Tile | ||
| href="/protocol/xmtp-versions" | ||
| title="Learn protocol concepts" | ||
| description="Dive deeper into XMTP by learning about key protocol concepts" | ||
| icon="🧠" | ||
| /> | ||
| </CustomHomePage.TileGrid> | ||
| </CustomHomePage.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.