add sharing buttons

This commit is contained in:
lingdocs 2021-07-12 19:16:40 +03:00
parent aa9b0c6e93
commit ac6b579afd
2 changed files with 36 additions and 2 deletions

View File

@ -11,11 +11,29 @@ import TableOfContents from "./TableOfContents";
import Footer from "./Footer"; import Footer from "./Footer";
const Chapter = ({ children: chapter }) => { const Chapter = ({ children: chapter }) => {
console.log(chapter)
const Content = chapter.content; const Content = chapter.content;
function handleShare() {
if (!navigator.share) {
// should be impossible
alert("Sorry, Sharing links are not supported on your device.", chapter.path);
return;
}
navigator.share && navigator.share({
title: chapter.frontMatter.title + " | LingDocs Pashto Grammar",
url: "https://grammar.lingdocs.com" + chapter.path,
});
}
return <> return <>
<main className="col bg-faded py-3 d-flex flex-column"> <main className="col bg-faded py-3 d-flex flex-column">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<h1>{chapter.frontMatter.title}</h1> <div className="mb-2" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
<h1>{chapter.frontMatter.title}</h1>
{navigator.share && <div onClick={handleShare} className="clickable">
<i className="fas fa-share-alt" style={{ fontSize: "1.8rem" }} />
</div>}
</div>
<Content /> <Content />
</div> </div>
<Footer chapter={chapter} /> <Footer chapter={chapter} />

View File

@ -12,10 +12,26 @@ import Footer from "../components/Footer";
import { content } from "../content/index"; import { content } from "../content/index";
const TableOfContentsPage = () => { const TableOfContentsPage = () => {
function handleShare() {
if (!navigator.share) {
// should be impossible
alert("Sorry, Sharing links are not supported on your device.");
return;
}
navigator.share && navigator.share({
title: "LingDocs Pashto Grammar",
url: "https://grammar.lingdocs.com",
});
}
return <> return <>
<main className="col bg-faded py-3 d-flex flex-column"> <main className="col bg-faded py-3 d-flex flex-column">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<h2 className="mb-3">Table of Contents</h2> <div className="mb-2" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", maxWidth: "700px" }}>
<h1>Table of Contents</h1>
{navigator.share && <div onClick={handleShare} className="clickable">
<i className="fas fa-share-alt" style={{ fontSize: "1.8rem" }} />
</div>}
</div>
{content.map((section) => ( {content.map((section) => (
section.path ? section.path ?
<Link to={section.path} className="plain-link"> <Link to={section.path} className="plain-link">