-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* first pass * try new homepage * single create client doc for v2 and v3 * add chatbot to left nav * provide chat widget page * add floating inbox * Update docs/pages/dms/client.mdx Co-authored-by: Naomi Plasterer <[email protected]> * Update docs/pages/dms/client.mdx Co-authored-by: Naomi Plasterer <[email protected]> * Update docs/pages/dms/client.mdx Co-authored-by: Naomi Plasterer <[email protected]> * edits from Naomi <3 * tweaks * improve table formatting * move client file --------- Co-authored-by: Naomi Plasterer <[email protected]>
- Loading branch information
1 parent
6b91197
commit 6f3d11d
Showing
14 changed files
with
734 additions
and
429 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
--- | ||
description: "Embed a floating inbox chat widget built with XMTP on your website" | ||
--- | ||
|
||
# Embed a floating inbox chat widget built with XMTP | ||
|
||
You can embed a "floating inbox" chat widget built with XMTP on your website. | ||
|
||
You can use one of these floating inbox quickstart example apps to get started: | ||
|
||
- [For JavaScript](https://github.com/xmtp/xmtp-quickstart-reactjs) | ||
|
||
- [With React hooks](https://github.com/xmtp/xmtp-quickstart-hooks) | ||
|
||
- [With Next.js hooks](https://github.com/xmtp/xmtp-quickstart-hooks-next) | ||
|
||
For example, here's a screenshot of the floating inbox chat widget built with the JavaScript quickstart app. You can also try out the [JavaScript quickstart app](https://xmtp-quickstart-reactjs.vercel.app/). | ||
|
||
![Screenshot of the floating inbox chat widget](https://raw.githubusercontent.com/xmtp/docs-xmtp-org/main/docs/pages/img/floating-inbox.png) |
Oops, something went wrong.