gatsby load custom script specific page every visit - javascript

i have a blog website that i write using gatsby and i tried to load a isso custom script for specific page, which is my article page.
It load for once only and it didn't load after i visit the page again
im using Script element for it
here's my custom script component:
const Comment = ({post_id}) => {
return (
<>
<Script data-isso="//comments.example.ltd/"
src="//comments.example.ltd/js/embed.min.js"
id={post_id}
/>
</>
)
}
and here's the main layout for my article page
<Base>
<div className="post template">
<SEO title="{`${post.title}" | ${config.siteTitle}`} />
<div className="post page">
<div className="article figure">
<div className="HeaderContainer">
<small className="sub">
{post.date}
</small>
<h1 className="title">
{post.title}
</h1>
</div>
<MDXProvider>
{children}
</MDXProvider>
</div>
</div>
</div>
<Comment post_id={post.title}/>
</Base>

Related

Next.js Link Tag does not scroll the page on top

I am using the overflow tailwind class in my div which is supposedly causing this issue.
The class which I am using is
// the scrollable navbar component in the left side of the web page
<div className="overflow-y-auto mb-20 pb-4">
<div className="max-w-[15rem] text-neutral-300 pl-4">
{o.items?.map((data) => (
<Link href={`/data/${data.id}`} key={data.id} scroll={true}>
<p
className="leading-loose text-sm font-semibold truncate ..."
key={data.id}
>
{data.name}
</p>
</Link>
))}
</div>
</div>
//this data changes when item id is changed from the navbar but it does not scroll to top.
<div className="h-screen flex flex-col bg-neutral-900">
<div className="grow max-w-7xl m-4 mb-20 pb-4 overflow-y-scroll">
{data}
</div>
</div>
If this class is removed, the page is updated and the scroll works properly.
I need assistance in solving this question, some help is appreciated

Why Mac VoiceOver doesn't detect after mounting ReactJs Component?

I have this code in App.js. Mac's voice over can detect all the elements on this page and it keeps spelling out the text on each one by one.
const WelcomePage = () => {
const [isWarningPage, setisWarningPage] = useState(false);
if (!isWarningPage) {
return (
<>
<div class="container-fluid">
<div className="welcome-section">
<div className="logo-container">
<img src={logo} alt="" />
</div>
<div className="welcome-content">
<h2 aria-level="1">Welcome to My Website</h2>
<h5 aria-level="5">
Connecting you to my web.
</h5>
<h5 className="child2" aria-level="5">
We are happy to see you.
</h5>
</div>
<div>
<button
onClick={() => setisWarningPage(true)}
id="GetStartedBtn"
aria-label="Get Started"
>
Get Started
</button>
</div>
</div>
</div>
</>
);
}
return PhishingWarningPage;
};
But, when I click on the "Get Started" button, Mac's Voice Over cannot detect the mounted component (Warning page). Then I focused the element using some javascript. Why does it happens?
What are my options here?
Thank you!

Page breaks after reload VueJS + Nuxt.js

I have strange problem. I'm creating my application where I have a couple of pages. Normally it looks ok:
But this is what happens when I reload the page:
As you can see, I pressed Ctrl + A just to show you that there is a text. Second reload doesn't help. My application is made on VueJS + NuxtJS. Did anyone meet that?
Here is HTML, if it can be useful:
<template>
<div>
<SideBar :subpages='subpages' #clicked="filterByDate" />
<div class='blog-header'>
<div class='search-div'>
<input class='search-field' placeholder='Search...'>
</div>
</div>
<div class='post-content'>
<div v-if='$route.params.id'>
<h1 class='big-text post-title'>{{ post.title }}</h1>
<h1 class='big-text post-title'>{{ post }}</h1>
</div>
<div v-else>
<div v-for='title in categoriesAndPretitles' :key='title.section'>
<div v-if='$route.params.category === title.section'>
<h1 class='big-text post-title'>{{title.title}}</h1>
<p class='description-text'>{{title.text}}</p>
</div>
</div>
<div v-for='p of posts' :key='p.id'>
<div class='post-preview' #click='toPost(p.id, p.type)'>
<div class='post-preview-img'></div>
<div class='post-preview-content'>
<p>{{ p.title }}</p>
<p class='plot'>{{ p.plot }}</p>
<p class='date'>{{ p.created_at }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- <Footer />-->
</div>
</template>
Actually, answer is kinda silly, because it was about styles. I mean, styles wasn't import correctly. For main page I have this style:
body {
margin: 0;
background-color: #181919;
}
And for some reason this style also worked, for which I didn't import file with this style. And after reload it crused, but now, just by importing it work fine :p

Page Refresh Necessary for Route re-Load in ReactJS?

I have set up a few routes (menu links labeled Home|About|What I Do|Experience) for my portfolio site like so using BrowswerRouter..
When I click on any of the links the components do not load on the page or at least they are not rendering properly. In order for them to load I have to refresh the page. I know this is not the appropriate behavior. I am still learning the way of React Router. I need help with understanding why this behavior is happening and resolving this issue. Below is the import I used and the render set up I have. I just want to reiterate that when I refresh the page once I have routed to the component I want, it renders and loads correctly.
Thank you fellow coders!
A few files for your reference and the Git Repo :-)
App.js
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css";
import Introduction from "./components/introduction";
import About from "./components/about";
import WhatIDo from "./components/whatido";
import Timeline from "./components/timeline";
import Footer from "./components/footer";
const App = () => {
const [email, setEmail] = useState("");
const [summary, setSummary] = useState("");
const [myLinks, setMyLinks] = useState([]);
useEffect(() => {
fetch("https://gitconnected.com/v1/portfolio/kevindennyii")
.then((response) => response.json())
.then((data) => {
//setName(data.basics.name);
setEmail(data.basics.email);
setSummary(data.basics.summary);
setMyLinks(data.basics.profiles);
});
}, []);
return (
<Router>
<div id="colorlib-page" style={{ backgroundColor: "#F4F5F4" }}>
<div
id="container-wrap"
style={{ marginLeft: "5rem", marginRight: "5rem" }}
>
<div>
<section
className="colorlib-experience"
style={{
marginTop: "0px",
marginBottom: "0px",
paddingBottom: "0px",
paddingTop: "0px",
}}
data-section="home"
>
<Introduction myLinks={myLinks} email={email} />
<nav style={{ textAlign: "center" }}>
<Link to="/">Home</Link>|<Link to="/about">About</Link>|
<Link to="/expertise">What I Do</Link>|
<Link to="/experience">Experience</Link>
</nav>
</section>
<hr className="divider gradient" contentEditable />
</div>
<Switch>
{/* use the render attribute to pass props to the route with the */}
{/* arrow function because this will update the component as opposed to */}
{/* component={() => <Dashboard isAuthed={true} /> */}
<Route
path="/about"
render={(props) => <About {...props} summary={summary} />}
/>
<Route path="/expertise" render={() => <WhatIDo />} />
<Route path="/experience" component={Timeline} />
</Switch>
</div>
<Footer />
</div>
</Router>
);
};
export default App;
Couple of components
whatido.jsx
import React from "react";
const WhatIDo = () => {
return (
<section className="colorlib-about" data-section="whatido">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">What I do?</span>
<h2 className="colorlib-heading">Here are some of my expertise</h2>
</div>
</div>
<div className="row row-pt-md">
<div className="col-md-4 text-center animate-box">
<div className="services color-1">
<span className="icon">
<i className="icon-bulb" />
</span>
<div className="desc">
<h3>Web Development </h3>
<p>
I have experience building websites using Content Management
Systems like Wordpress. I have professional experience coding
in JavaScript, HTML, CSS, and object-oriented languages.
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-3">
<span className="icon">
<i className="icon-phone3" />
</span>
<div className="desc">
<h3>Data Structures & Algorithms</h3>
<p>
As coming from the CS background, I have good grasp over
fundamental concepts of DSA
</p>
</div>
</div>
</div>
<div className="col-md-4 text-center animate-box">
<div className="services color-5">
<span className="icon">
<i className="icon-data" />
</span>
<div className="desc">
<h3>Dev Ops</h3>
<p>
I am Amazon Web Services (AWS) certified as a Developer
Associate. I have 3 years of experiences in configuring and
managing data solution with AWS
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default WhatIDo;
timeline.jsx
import React from "react";
// TODO
const Timeline = () => {
return (
<div>
<section className="colorlib-experience" data-section="timeline">
<div className="colorlib-narrow-content">
<div className="row">
<div
className="col-md-6 col-md-offset-3 col-md-pull-3 animate-box"
data-animate-effect="fadeInLeft"
>
<span className="heading-meta">highlights</span>
<h2 className="colorlib-heading animate-box">Timeline</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="timeline-centered">
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Director of Operations at{" "}
<a
href="https://www.ohhdennyservices.com"
style={{ color: "#2c98f0" }}
target="_blank"
rel="noopener noreferrer"
>
OhhDenny Services, LLC
</a>{" "}
<br />
<span>June 2015 - present</span>
</h2>
<div>
<p>
We assist smaller business, mostly concentrating on
HIPPA, with Cyber Security, Software & Hardware
Installation and Updates, and Network Configuration.
We also build websites using Content Management
Systems like WordPress and technologies such
JavaScript, CSS3 & HTML5.{" "}
</p>
<p>
Network Upgrade for Ideal Nursing Services, Inc.: For
this project, I hired two other professionals to
assist with taking Ideal Nursing from a wired network
to a wireless network. Measurements of the building
were taken to create proper network diagrams for
approval by Ideal Nursing. Wires were removed and
Wireless Access Points (WAPs) were then installed and
configured. All machines were upgraded and/or
configured to connect to the WAPs. In addition, a new
rack with POE ports was installed in their server room
for their server, multi-port hub and router. This
created a more efficient working space and alleviated
unnecessary clutter.
</p>
<div>
Websites:
<ul>
<li>
<a
href="https://jacobdavidproperties.com/"
target="_blank"
rel="noopener noreferrer"
>
Jacob David Properties, LLC
</a>{" "}
- Selma , TX
</li>
<li>
<a
href="https://www.diamondgrovebaptist.com"
target="_blank"
rel="noopener noreferrer"
>
Diamond Grove Baptist Church, Inc
</a>{" "}
- Franklin, VA
</li>
<li>
<a
href="https://www.oberryamezionchurch.org"
target="_blank"
rel="noopener noreferrer"
>
O'Berry A. M. E. Zion Church
</a>{" "}
- Franklin, VA
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInTop"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-4">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Engineer at iHeartMedia, Inc <br />
<span>Feb 2019 - July 2020</span>
</h2>
<p>
Currently working on iHeartMedia's Music Lab team. I
assist in the maintaining and improving of a web
application that assist in helping program directors of
iHeartRadio stations determine how air time (spins) for
songs will be distributed across radio stations. I am
working as both a Software Engineer and Data Analytics
team liaison on the Music Lab team. Some of my tasks
include architecting solutions with NodeJS, automating
AWS CodeBuilds using CloudWatch events for our MySQL
databases, improving technical documentation, and
learning both our data analytics and software
development stack (ReactJS) for Music Lab.
</p>
<p>
I conducted a Proof of Concept analysis to present to VP
of Data Engineering & Analytics for using an aiWare
platform that uses GraphQL. This was an idea to help
iHeartMedia automate the analysis of some of its market
data like spots and digital impression
</p>
<p>
Previously apart of the Salesforce team, working with
the Campaign Recap application which kept track of
iHeartMedia's clients radio ad campaigns. I briefly
worked with our Kibana instance in attempt to improve
logging. I updated our software architecture. I also
performed a technical analysis with Vertione One in
using there development platform with GraphiQ that could
possible help iHeartMedia automate some of its
processes.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Lead Technologist at Booz Allen Hamilton, Inc <br />
<span>Oct 2015 - Jan 2019</span>
</h2>
<div>
I have written training documentation for the Air Force
serving as an Elastic Stack Subject Matter Expert (SME)
creating Elastic Stack training courses. This included
modules for:
<ul>
<li>The Overview of Elastic Stack</li>
<li>The understanding and use of Elasticsearch</li>
<li>The understanding and use of Logstash</li>
<li>
The understanding and use of Kibana The
understanding of Beats
</li>
</ul>
I have created learning documentation for server
configuration (Puppet) and YAML
<br />
<br />
I participated as a member of an Agile Coaching team for
the Air Force, practicing Scrum using Sprints. I wrote
guidance for development teams such as how-to-guides and
best practices for use of Agile methodologies.
<br />
<br />
I served as a member of the DoD community working as an
Application Lead/Senior Developer working with and
managing Amazing Web Services (AWS) EC2 instances
building a Java application that would create and
maintain IT disaster recovery plans.
<br />
<br />
I lead and participated on projects working with
technologies such as PostgreSQL, MongoDB, ExpressDB,
AngularJS and NodeJS (MEAN) web development, Java and
other Microsoft technologies.
<br />
<br />
Internally, for Booz Allen Hamilton, I have configured
and implemented a prototype website using Drupal with
Acquia cloud.
</div>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-6">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Senior Web Developer at Sevatec, Inc <br />
<span>Nov 2014 - Jun 2015</span>
</h2>
<p>
I fulfilled the role of Web Developer as a member of the
Implementation Team for Content Management System (CMS),
redesigning of the <b>US Embassy websites</b> at the IIP
bureau of the <b>Department of State</b>. We were part
of the UI/UX team with this task. We conducted wireframe
testing, user interviews, and analysis on the both
tasks.
<br />
<br />
As a web developer, I was responsible for the
development of websites and mobile applications on
Amazon Web Services (AWS) via WordPress, assisting with
technical documentation and end-user training &
development transition plans. I participated in weekly
calls with WordPress VIP and Automattic (creators and
founders of WordPress) to receive guidance towards
implementing possible solutions for the client. I also
created and implemented the US Embassy Travel Alert
Wordpress plugin which incorporates travel warnings and
alerts using a JSON file from travel.state.gov.
</p>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-5">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Buchanan & Edwards, Inc <br />
<span>Nov 2013 - Oct 2014</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-3">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Software Developer at Creative Information Technology,
Inc
<br />
<span>May 2010 - Oct 2013</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-2">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
Web Developer/IT Consultant at Intepros Federal
Consulting, Inc
<br />
<span>Sep 2009 - Apr 2010</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry animate-box"
data-animate-effect="fadeInLeft"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-1">
<i className="icon-pen2" />
</div>
<div className="timeline-label">
<h2>
IT Specialist at IBM, Inc <br />
<span>Aug 2007 - Sep 2009</span>
</h2>
</div>
</div>
</article>
<article
className="timeline-entry begin animate-box"
data-animate-effect="fadeInBottom"
>
<div className="timeline-entry-inner">
<div className="timeline-icon color-none" />
</div>
</article>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Timeline;
Nothing really showing up in the console when I inspect either...
I discovered the issues was not a React Router issues at all. It was in fact a CSS issue with this specific code found in my style.css
.js .animate-box {
opacity: 0;
}
when the routes are rendering their components, respectively the opacity is automatically set to 0. Once the page is refreshed it that using the opacity as only a transition. If I comment out the opacity, the components showed without having to refresh the page

Transition on conditional rendering in react JS

I have this conditional render function ready and it works fine.
render() {
if (this.state.guess === 'guessing') {
return (
<div style={rightBarStyle.guessingGameStyle}>
<div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
<h3> Who is this? </h3>
<ul className={'optionsContainer'}>
<PeopleNames onClick={(e) => this.handleClick(e)}/>
</ul>
</div>
<div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
<img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
alt={"profile pic"}/>
</div>
</div>
)
}
else if (this.state.guess === 'correct') {
return (
<div style={rightBarStyle.guessingGameStyle}>
<div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
<FadeIn>
<p className={['details','title'].join(' ')}>{name} </p>
<p className={['details','designation'].join(' ')}>Software Developer</p>
<p className={['details','team'].join(' ')}>Software Department</p>
</FadeIn>
</div>
<div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
<img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
alt={"profile pic"}/>
</div>
</div>
)
}
else return <div></div>
}
Issues:
I need to apply a transition whenever new DOM elements are rendered on state change. I read about CSSTransitions but they work on child elements.
Here is the sandbox link on which I want to have a smooth transition onclick of the button: SandBox
I have to include that last 'else' otherwise it throws an error that render didn't find anything to be rendered on DOM. It works but is there a workaround for this? It does not look neat.

Categories