Algolia search, sticky media, emailjs improvements

.env.development

@@ -1,3 +1,5 @@
 EMAILJS_SERVER_ID=service_sedddrb
 EMAILJS_TEMPLATE_ID=template_2w42djr
-EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+APPLICATION_ID=QREGAGU3YC
+API_KEY=95b0c6179810e72eefdf5f0e8915ac85

.env.example

@@ -1,3 +1,5 @@
 EMAILJS_SERVER_ID=service_sedddrb
 EMAILJS_TEMPLATE_ID=template_2w42djr
-EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+APPLICATION_ID=QREGAGU3YC
+API_KEY=95b0c6179810e72eefdf5f0e8915ac85

config.json

@@ -0,0 +1,44 @@
+{
+    "index_name": "docsearch",
+    "sitemap_urls": [
+        "https://docs.appseed.us/sitemap.xml"
+    ],
+    "sitemap_alternate_links": true,
+    "selectors": {
+        "lvl0": {
+            "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
+            "type": "xpath",
+            "global": true,
+            "default_value": "Documentation"
+        },
+        "lvl1": "header h1",
+        "lvl2": "article h2",
+        "lvl3": "article h3",
+        "lvl4": "article h4",
+        "lvl5": "article h5, article td:first-child",
+        "lvl6": "article h6",
+        "text": "article p, article li, article td:last-child"
+    },
+    "strip_chars": " .,;:#",
+    "custom_settings": {
+        "separatorsToIndex": "_",
+        "attributesForFaceting": [
+            "language",
+            "version",
+            "type",
+            "docusaurus_tag"
+        ],
+        "attributesToRetrieve": [
+            "hierarchy",
+            "content",
+            "anchor",
+            "url",
+            "url_without_anchor",
+            "type"
+        ]
+    },
+    "conversation_id": [
+        "833762294"
+    ],
+    "nb_hits": 46250
+}

docs/content/how-to/sticky-media.md

@@ -0,0 +1,25 @@
+---
+title: Sticky Media
+sidebar_label: Sticky Media
+---
+
+# Sticky media
+
+You may add a sticky video by giving `sticky-popup` class to an `a` tag.
+
+```html
+<!-- md content above -->
+
+<a className="sticky-popup" target="_blank" href="https://www.youtube.com/watch?v=uRgQ_TpTj4g">Sticky video</a>
+
+<!-- md content below -->
+```
+
+## Try it!
+
+<a
+    className="sticky-popup"
+    target="_blank"
+    href="https://www.youtube.com/watch?v=uRgQ_TpTj4g"
+    data-video-id="uRgQ_TpTj4g"
+    >Sticky video</a>

docusaurus.config.js

@@ -6,6 +6,7 @@ const lightCodeTheme = require("prism-react-renderer/themes/github");
 // const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 // const Embed = require("./plugins/remark/embed");
 const darkCodeTheme = require("prism-react-renderer/themes/shadesOfPurple");
+require('dotenv').config()
 const customFields = {
 	meta: {
 		title: "An atom based state manager for JavaScript apps.",
@@ -52,6 +53,16 @@ const config = {
 		defaultLocale: "en",
 		locales: ["en"],
 	},
+
+	scripts: [
+        {
+            src: '//cdn.jsdelivr.net/gh/app-generator/sticky-media@0.0.17/dist/index.min.js',
+            id: 'stickyVideoScript',
+            defer: true,
+            class: 'sticky-popup',
+        },
+    ],
+
 	// themes: ["@docusaurus/theme-live-codeblock"],
 	plugins: [
 		// "docusaurus-plugin-sass",
@@ -253,8 +264,8 @@ const config = {
 				darkTheme: darkCodeTheme,
 			},
 			algolia: {
-				appId: "QREGAGU3YC",
-				apiKey: "95b0c6179810e72eefdf5f0e8915ac85",
+                appId: process.env.APPLICATION_ID,
+                apiKey: process.env.API_KEY,
 				indexName: "docsearch",
 				contextualSearch: true,
 				searchParameters: {},

src/css/custom.css

@@ -265,3 +265,11 @@ ul.menu__list > li > a.menu__link--active {
 }
 
 /* Home Page Header */
+
+/* Sticky media */
+.sticky-video-modal {
+    width: 100%;
+    height: 100%;
+    right: 0;
+    bottom: 0;
+}

src/theme/NotFound.js

@@ -10,24 +10,37 @@ export default function NotFound() {
 	const location = useLocation();
 	const { siteConfig } = useDocusaurusContext();
 
-	const serverId   = 'service_3xvalkw'  ; // process.env.EMAILJS_SERVER_ID;
-	const templateId = 'template_gpdzs7i' ; // process.env.EMAILJS_TEMPLATE_ID;
-	const publicKey  = 'mbYWDBjQhv-h3CLXl'; // process.env.EMAILJS_PUBLIC_KEY;
+	const serverId = siteConfig.customFields.EMAILJS_SERVER_ID 
+    const templateId = siteConfig.customFields.EMAILJS_TEMPLATE_ID 
+    const publicKey = siteConfig.customFields.EMAILJS_PUBLIC_KEY 
 
-	//console.log('serverId   :' + serverId   );
-	//console.log('templateId :' + templateId );
-	//console.log('publicKey  :' + publicKey  );
-
-	useEffect(async () => {
-		emailjs.send(serverId, templateId, { url: "https://docs.appseed.us" + location.pathname }, publicKey).then(
-			function (response) {
-				console.log("SUCCESS!", response.status, response.text);
-			},
-			function (error) {
-				console.log("FAILED...", error);
-			}
-		);
-	}, []);
+	useEffect(() => {
+        if (!serverId || !templateId || !publicKey) return
+
+        async function emailJS() {
+            emailjs
+                .send(
+                    serverId,
+                    templateId,
+                    {
+                        url:
+                            'https://docusaurus-soft-design.onrender.com' +
+                            location.pathname,
+                    },
+                    publicKey
+                )
+                .then(
+                    function (response) {
+                        console.log('SUCCESS!', response.status, response.text)
+                    },
+                    function (error) {
+                        console.log('FAILED...', error)
+                    }
+                )
+        }
+
+        emailJS()
+    }, [])
 	return (
 		<>
 			<PageMetadata
@@ -45,18 +58,18 @@ export default function NotFound() {
 									Page Not Found
 								</Translate>
 							</h1>
-							<p>
+							<div>
 								<Translate id="theme.NotFound.p1" description="The first paragraph of the 404 page">
 									Sorry but the page you were looking for could not be found.
 								</Translate>
-							</p>
-							<p>
+							</div>
+							<div>
 								<div className="py-4 md:mr-20 justify-center ">
 									<Link className="bg-white  no-underline hover:no-underline rounded-md text-black px-4 py-2   " to="/">
 										Back to Home Page
 									</Link>
 								</div>
-							</p>
+							</div>
 						</div>
 					</div>
 				</main>