buttons to dictionary and grammar

content/blog/pashto-verbs-master-chart/index.mdx

@@ -8,6 +8,7 @@ image: "./math-book.jpg"
 
 import TensesChart from "../../../src/components/tenses-chart/TensesChart";
 import Example from "../../../src/components/example/Example";
+import VideoPlayer from "../../../src/components/VideoPlayer";
 import {
     getVerbInfo,
     RootsAndStems,
@@ -50,6 +51,8 @@ Over the course of this post we'll do three things:
     <p>If you find this article helpful you can find <em>much more</em> in the <a href="https://grammar.lingdocs.com/">LingDocs Pashto Grammar</a> and <a href="https://dictionary.lingdocs.com/">LingDocs Pashto Dictionary</a>.</p>
 </div>
 
+<VideoPlayer src="https://www.youtube.com/watch?v=JhAeiitwfdo&ab_channel=LingDocs" />
+
 ## Two Aspects in Pashto Verbs
 
 The first thing to realize in that in Pashto, **every verb has two main roots**, based on two different [aspects](https://en.wikipedia.org/wiki/Grammatical_aspect).

gatsby-config.js

@@ -30,16 +30,6 @@ module.exports = {
         name: `assets`,
       },
     },
-    {
-      resolve: `gatsby-plugin-umami`,
-      options: {
-        websiteId: 'c5ba0f61-f546-4122-919f-7f02bfa2191d',
-        srcUrl: 'https://ua.lingdocs.com/umami.js',
-        includeInDevelopment: false,
-        autoTrack: true,
-        respectDoNotTrack: true
-      },
-    },
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
@@ -102,20 +92,26 @@ module.exports = {
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
     {
-      resolve: `gatsby-plugin-google-analytics`,
+      resolve: `gatsby-plugin-google-gtag`,
       options: {
-        // The property ID; the tracking code won't be generated without it
+        // You can add multiple tracking ids and a pageview event will be fired for all of them.
-        trackingId: "G-FNB8658Z2J",
+        trackingIds: [
-        // Defines where to place the tracking script - `true` in the head and `false` in the body
+          "G-FNB8658Z2J", // Google Analytics / GA
+        ],
+        // This object gets passed directly to the gtag config command
+        // This config will be shared across all trackingIds
+        // gtagConfig: {
+        //   optimize_id: "OPT_CONTAINER_ID",
+        //   anonymize_ip: true,
+        //   cookie_expires: 0,
+        // },
+        // This object is used for configuration specific to this plugin
+        pluginConfig: {
+          // Puts tracking script in the head instead of the body
           head: false,
-        // Setting this parameter is optional
-        anonymize: true,
           // Setting this parameter is also optional
           respectDNT: true,
-        // Delays sending pageview hits on route update (in milliseconds)
+        },
-        pageTransitionDelay: 0,
-        // Defers execution of google analytics script after page load
-        defer: false,
       },
     },
   ],

package.json

@@ -14,6 +14,7 @@
     "gatsby": "^3.0.4",
     "gatsby-image": "^2.4.16",
     "gatsby-plugin-feed": "^2.5.11",
+    "gatsby-plugin-google-gtag": "^3.14.0",
     "gatsby-plugin-manifest": "^2.4.24",
     "gatsby-plugin-mdx": "^1.2.40",
     "gatsby-plugin-postcss": "^4.0.0",
@@ -22,7 +23,6 @@
     "gatsby-plugin-sharp": "^2.6.28",
     "gatsby-plugin-sitemap": "^2.4.17",
     "gatsby-plugin-typography": "^2.5.10",
-    "gatsby-plugin-umami": "^0.1.3",
     "gatsby-remark-autolink-headers": "^2.3.13",
     "gatsby-remark-copy-linked-files": "^2.3.12",
     "gatsby-remark-images": "^3.3.26",
@@ -39,6 +39,7 @@
     "react-bootstrap": "^1.3.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^5.2.1",
+    "react-player": "^2.10.1",
     "react-typography": "^0.16.19",
     "typeface-merriweather": "0.0.72",
     "typeface-montserrat": "0.0.75",

src/components/HeadingLinks.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+function HeadingLinks() {
+    return <div className="d-flex flex-row justify-content-center" style={{ marginTop: "3rem"}}>
+        <a href="https://dictionary.lingdocs.com" className="plain-link">
+        <div style={{
+            border: "2px solid white",
+            padding: "0.75rem",
+            margin: "0 1rem",
+        }}>
+            Pashto Dictionary
+        </div>
+        </a>
+        <a href="https://grammar.lingdocs.com" className="plain-link">
+        <div style={{
+            border: "2px solid white",
+            padding: "0.75rem",
+            margin: "0 1rem",
+        }}>
+            Pashto Grammar
+        </div>
+        </a>
+    </div>;
+}
+
+export default HeadingLinks;

src/components/VideoPlayer.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import ReactPlayer from "react-player";
+
+function VideoPlayer(props) {
+    const [errored, setErrored] = useState(false);
+    if (errored) {
+        return <div className="my-4 text-center">
+            <div>Offline / Video Not Available</div>
+            <button className="btn btn-light mt-4 mb-4" onClick={() => setErrored(false)}>RETRY</button>
+        </div>;
+    }
+    const url = "url" in props ? props.url : props.src;
+    return <div className="player-wrapper" style={{ position: "relative", paddingBottom: "56.25%", marginBottom: "2rem" }}>
+        <ReactPlayer
+            url={url}
+            controls={true}
+            width='100%'
+            height='100%'
+            style={{ 
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            }}
+            onError={() => setErrored(true)}
+        /> 
+    </div>
+}
+
+export default VideoPlayer;

src/components/css/clean-blog.css

@@ -10,6 +10,19 @@ body {
   /* font-family: 'Lora', 'Times New Roman', serif; */
 }
 
+.heading-button {
+  display: block;
+  padding: "3rem";
+  border: "10px solid red";
+}
+
+.plain-link {
+  color: inherit;
+}
+.plain-link:hover {
+  color: inherit;
+}
+
 p {
   line-height: 1.5;
   margin: 30px 0;
@@ -196,7 +209,7 @@ header.masthead .overlay {
 header.masthead .page-heading,
 header.masthead .post-heading,
 header.masthead .site-heading {
-  padding: 200px 0 150px;
+  padding: 150px 0 150px;
   color: white;
 }
 
@@ -204,7 +217,7 @@ header.masthead .site-heading {
   header.masthead .page-heading,
   header.masthead .post-heading,
   header.masthead .site-heading {
-    padding: 200px 0;
+    padding: 150px 0;
   }
 }
 

src/components/layout.js

@@ -34,6 +34,12 @@ const Layout = ({ location, title, children }) => {
         <Navbar.Collapse id="basic-navbar-nav navbarRepsonsive">
           <Nav className="ml-auto">
             <ul className="navbar-nav">
+              <li className="nav-item">
+                <Link to="https://www.youtube.com/channel/UC1-yjDec5VDtia5s1gcMw4A" className="nav-link">YouTube</Link>
+              </li>
+              <li className="nav-item">
+                <Link to="https://www.twitter.com/@lingdocs" className="nav-link">Twitter</Link>
+              </li>
               <li className="nav-item">
                 <Link to="/projects" className="nav-link">Projects</Link>
               </li>

src/pages/index.js

@@ -4,6 +4,7 @@ import { Link, graphql } from "gatsby";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 import homeBackground from "../assets/images/home-bg.jpg";
+import HeadingLinks from "../components/HeadingLinks";
 
 const BlogIndex = ({ data, location }) => {
   const { title, siteUrl, tagline } = data.site.siteMetadata;
@@ -23,6 +24,7 @@ const BlogIndex = ({ data, location }) => {
               <div className="site-heading">
                 <h1>{title}</h1>
                 <span className="subheading">{tagline}</span>
+                <HeadingLinks />
               </div>
             </div>
           </div>

src/pages/projects.js

@@ -4,11 +4,6 @@ import SEO from "../components/seo";
 import aboutBackground from "../assets/images/about-bg.jpg";
 
 const projects = [
-    {
-        title: "Pashto Verb Explorer",
-        description: "An interactive playground for exploring and learning about how Pashto verbs are conjugated. This is based on a verb conjugation engine that runs in the browser.",
-        link: "https://verbs.lingdocs.com",
-    },
     {
         title: "Pashto Grammar",
         description: "A Pashto grammar reference. This is extremely new and only in the very beginning stages.",
@@ -19,6 +14,11 @@ const projects = [
         description: "A Pashto dicitionary with smart-search and inflection/conjugation",
         link: "https://dictionary.lingdocs.com",
     },
+    {
+      title: "Pashto Verb Explorer",
+      description: "An interactive playground for exploring and learning about how Pashto verbs are conjugated. This is based on a verb conjugation engine that runs in the browser.",
+      link: "https://verbs.lingdocs.com",
+    },
     {
         title: "Dari Dictionary",
         description: "A Dari dictionary in progress",

src/templates/blog-post.js

@@ -5,14 +5,14 @@ import {
 } from "gatsby";
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import { DiscussionEmbed } from 'disqus-react';
-// import Commento from "../components/commento";
+import HeadingLinks from "../components/HeadingLinks";
 
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 
 const BlogPostTemplate = ({ data, pageContext, location }) => {
   const post = data.mdx;
-  const { siteTitle, siteUrl, commentoUrl } = data.site.siteMetadata;
+  const { siteTitle, siteUrl } = data.site.siteMetadata;
   // const { previous, next } = pageContext;
   const mainImage = `${siteUrl}${post.frontmatter.image.publicURL}`;
   return (
@@ -31,6 +31,7 @@ const BlogPostTemplate = ({ data, pageContext, location }) => {
                 <h1>{post.frontmatter.title}</h1>
                 <h2 className="subheading">{post.frontmatter.description}</h2>
                 <span className="meta">{post.frontmatter.date}</span>
+                <HeadingLinks />
               </div>
             </div>
           </div>