class LoadingComponent extends React.Component { constructor(props) { super(props); this.settings = { inject: `.fill-remaining { height: calc(100vh - 56px);} .loader { border: 16px solid #f3f3f3; border-top: 16px solid #212121; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`, }; } render() { return ( <div> <style>{this.settings.inject}</style> <div className="container-fluid fill-remaining"> <div className="row text-center pt-4 pb-2 align-items-center fill-remaining justify-content-center flex-grow-1"> <div className="col-lg-4 text-center col-md-4 mx-auto col-sm-12 col-xs-12"> <div className="col-lg-4 text-center col-md-4 mx-auto col-sm-12 col-xs-12"> <div className="loader d-block mx-auto" /> </div> </div> </div> </div> </div> ); } } class GoogleTranslator extends React.Component { constructor(props) { super(props); this.settings = { timeout: 1000 }; this.googleTranslatator = this.googleTranslatator.bind(this); } googleTranslatator() { let el = document.createElement("script"); el.id = "bigG"; el.defer = "defer"; el.type = "text/javascript"; el.src = `https://translate.google.com/translate_a/element.js`; document.body.appendChild(el); try { window.google.translate.TranslateElement( { pageLanguage: "lt" }, "google_translate_element" ); document .querySelectorAll(".goog-te-combo")[0] .classList.add("form-control"); } catch (error) { setTimeout(() => { window.google.translate.TranslateElement( { pageLanguage: "lt" }, "google_translate_element" ); document .querySelectorAll(".goog-te-combo")[0] .classList.add("form-control"); }, this.settings.timeout); } } componentDidMount() { this.googleTranslatator(); } render() { return <div id="google_translate_element"></div>; } } class GoogleAnalytics extends React.Component { constructor(props) { super(props); this.settings = { timeout: 1000 }; } componentDidMount() { if (config.gA.enabled === true && config.gA.gtagId !== "") { if (!window.dataLayer) { let ga = document.createElement("script"); ga.defer = "defer"; ga.src = `https://www.googletagmanager.com/gtag/js?id=${config.gA.gtagId}`; document.body.appendChild(ga); try { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", config.gA.gtagId); } catch (error) { setTimeout(() => { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", config.gA.gtagId); }, this.settings.timeout); } } else { try { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", config.gA.gtagId); } catch (error) { setTimeout(() => { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", config.gA.gtagId); }, this.settings.timeout); } } } } render() { return <div id="gAnalytics" />; } } class FbChat extends React.Component { constructor(props) { super(props); this.state = { flag: null }; } componentDidMount() { if ( config.messenger.enabled === true && config.messenger.fbpageId !== "" && this.state.flag === null ) { var chatbox = document.getElementById("fb-customer-chat"); chatbox.setAttribute("page_id", config.messenger.fbpageId); chatbox.setAttribute("attribution", "biz_inbox"); window.fbAsyncInit = function () { FB.init({ xfbml: true, version: "v12.0" }); }; (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"; fjs.parentNode.insertBefore(js, fjs); })(document, "script", "facebook-jssdk"); this.setState({ flag: true }); } } render() { return ( <div className="row"> <div id="fb-root"></div> <div id="fb-customer-chat" className="fb-customerchat" attribution="setup_tool" page_id={ config.messenger.enabled === true ? config.messenger.fbpageId : "" } theme_color="#212121" ></div> </div> ); } } class NotFound extends React.Component { constructor(props) { super(props); this.style = { backgroundColor: "#212121", color: "white" }; this.heightStyle = {}; } render() { return ( <div className="container-fluid fill-remaining" style={this.containerStyle} > <div className="row text-center align-items-center fill-remaining justify-content-center flex-grow-1" style={this.style} > <div className="col-lg-8 col-md-8 col-sm-12 col-xs-12 mx-auto text-center"> <h1>{config.notfoundError}</h1> <h4>{config.notfoundTitle}</h4> <h4>{config.notfoundText}</h4> </div> </div> </div> ); } } class AdsenseComponent extends React.Component { constructor(props) { super(props); this.state = { shouldUpdate: null }; this.settings = { timeout: 700 }; this.adElementStyle = { width: 80 + "%", height: 14 + "rem", display: "block", marginLeft: "auto", marginRight: "auto", }; } componentDidMount() { if (config.adsense.adsenseId !== "" && config.adsense.enabled === true) { if (config.adsense.adSlot !== "") { let el = document.createElement("script"); el.async; el.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js`; el.crossorigin = "anonymous"; document.body.appendChild(el); window.adsbygoogle.push({}); } } } render() { return config.adsense.adsenseId !== "" && config.adsense.enabled === true ? ( <div className="row py-4 text-center"> <ins className="adsbygoogle" style={this.adElementStyle} data-ad-client={`ca-pub-${config.adsense.adsenseId}`} data-ad-slot={config.adsense.adSlot} data-ad-layout="in-article" data-ad-format="fluid" data-adtest="on" ></ins> </div> ) : ( "" ); } } class OneSignalComponent extends React.Component { constructor(props) { super(props); this.settings = { timeout: 1000, }; this.oneSignalInit = this.oneSignalInit.bind(this); } oneSignalInit(passedId) { window.OneSignal = window.OneSignal || []; OneSignal.push(function () { OneSignal.init({ appId: passedId, }); }); } componentDidMount() { if ( !window.OneSignal && config.oneSignal.enabled === true && config.oneSignal.onesignalId !== "" ) { let el = document.createElement("script"); el.src = "https://cdn.onesignal.com/sdks/OneSignalSDK.js"; el.async; document.body.appendChild(el); try { this.oneSignalInit(config.oneSignal.onesignalId); } catch (error) { setTimeout(() => { this.oneSignalInit(config.oneSignal.onesignalId); }, this.settings.timeout); } } } render() { return <div className="OneSignal"></div>; } } class PostComponent extends React.Component { constructor(props) { super(props); this.state = { data: null, searchData: null, searchWord: null, maxResults: config.maxCount, carouselItems: null, }; this.webType = { type: "website" }; this.cardStyle = { maxHeight: 20 + "rem", minHeight: 20 + "rem" }; this.cardWidth = { width: 100 + "%" }; this.carouselStyle = { width: 100 + "%", height: 28 + "rem", filter: `contrast(${60 + "%"})`, borderRadius: 10 + "px", }; this.buttonValues = { loadmoreText: config.loadmoreTitle }; this.getVal = this.getVal.bind(this); this.loadmore = this.loadmore.bind(this); this.settings = { key: config.key, blogId: config.blogid }; this.importantUrls = { mainFeed: `https://www.googleapis.com/blogger/v3/blogs/${this.settings.blogId}/posts?maxResults=${this.state.maxResults}&status=live&fetchImages=true&fetchBodies=true&key=${this.settings.key}`, }; } getVal() { if ( document.getElementById("searField").value !== "" && this.state.data !== null ) { let searchWord = document.getElementById("searField").value; let temp = []; this.state.data.forEach((element) => { if (element.content.includes(String(searchWord).toLowerCase())) { temp.push(element); } }); if (temp.length === 0) { this.setState({ searchData: null }); } else { this.setState({ searchData: temp }); } } else if (document.getElementById("searField").value === "") { let search = async function (passedUrl) { let r = await fetch(passedUrl); let d = await r.json(); return d; }; let s = search(this.importantUrls.mainFeed); s.then((d) => { this.setState({ data: d.items }); }); } } loadmore() { this.setState({ maxResults: this.state.maxResults + 9 }, () => { this.importantUrls.mainFeed = `https://www.googleapis.com/blogger/v3/blogs/${this.settings.blogId}/posts?maxResults=${this.state.maxResults}&status=live&fetchImages=true&fetchBodies=true&key=${this.settings.key}`; let fethcer = async function (passedUrl) { let r = await fetch(passedUrl); let dat = await r.json(); return dat; }; let getter = fethcer(this.importantUrls.mainFeed); getter.then((s) => { this.setState({ data: s.items }); }); }); } componentDidMount() { let feedFetch = async function (passedUrl) { let r = await fetch(passedUrl); let d = await r.json(); let c = await d.items.slice(0, 4); return { maindata: d.items, carouseldata: c }; }; let fetcher = feedFetch(this.importantUrls.mainFeed); fetcher.then((s) => { this.setState({ data: s.maindata, carouselItems: s.carouseldata }); }); } render() { if (this.state.data !== null && this.state.searchData === null) { return ( <div className="container"> <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <GoogleTranslator /> <GoogleAnalytics /> <FbChat /> <OneSignalComponent /> </div> </div> <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <input id="searField" onKeyPress={this.getVal} className="form-control form-control-lg" placeholder={config.searchplaceholderText} ></input> </div> </div> {config.carousel === true && this.state.carouselItems !== null && config.carousel !== false && this.state.data.length >= 3 ? ( <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="carouselId" className="carousel slide" data-ride="carousel" > <ol className="carousel-indicators"> {this.state.carouselItems.map((item, ind) => { return ( <li key={ind} data-target="#carouselId" data-slide-to={ind} className="active" ></li> ); })} </ol> <div className="carousel-inner" role="listbox"> {this.state.carouselItems.map((item, x) => { return x === 0 ? ( <div className="carousel-item active" key={x}> <Link to={{ pathname: `${ item.url.split( window.location.host.split(".")[ window.location.host.split(".").length - 1 ] )[1] }`, message: item[x], dataStream: this.state.data, in: x, goUp: true, }} > <img loading="lazy" style={this.carouselStyle} src={ item.images ? item.images[0].url : graphImageUrl } data-src={ item.images ? item.images[0].url : graphImageUrl } alt={`${x} slide`} /> </Link> <div className="carousel-caption"> <h3>{item.title}</h3> </div> </div> ) : ( <div className="carousel-item" key={x}> <Link to={{ pathname: `${ item.url.split( window.location.host.split(".")[ window.location.host.split(".").length - 1 ] )[1] }`, message: item[x], dataStream: this.state.data, in: x, goUp: true, }} > <img loading="lazy" style={this.carouselStyle} src={ item.images ? item.images[0].url : graphImageUrl } data-src={ item.images ? item.images[0].url : graphImageUrl } alt={`${x} slide`} /> </Link> <div className="carousel-caption"> <h3>{item.title}</h3> </div> </div> ); })} </div> <a className="carousel-control-prev" href="#carouselId" role="button" data-slide="prev" > <span className="carousel-control-prev-icon" aria-hidden="true" ></span> <span className="sr-only">Previous</span> </a> <a className="carousel-control-next" href="#carouselId" role="button" data-slide="next" > <span className="carousel-control-next-icon" aria-hidden="true" ></span> <span className="sr-only">Next</span> </a> </div> </div> </div> ) : ( "" )} <div className="row"> {this.state.data.map((post, index) => { return ( <div className="col-lg-4 col-md-4 mx-auto col-sm-12 col-xs-12 d-flex align-items-stretch" key={this.state.data[index].published} > <div className="card mt-4 mb-4" style={this.cardWidth}> <img loading="lazy" className="card-img-top" style={this.cardStyle} src={ this.state.data[index].images ? this.state.data[index].images[0].url : graphImageUrl } alt={window.location.hostname} /> <div className="card-header"> {config.publishedonText} {new Date( this.state.data[index].published ).toLocaleString()} </div> <div className="card-body"> <div className="card-title"> <h4>{this.state.data[index].title}</h4> </div> <p> <Link className="btn btn-md btn-dark" to={{ pathname: `${ this.state.data[index].url.split( window.location.host.split(".")[ window.location.host.split(".").length - 1 ] )[1] }`, message: this.state.data[index], dataStream: this.state.data, in: index, goUp: true, }} > {config.readmoreTitle} </Link> </p> </div> <div className="card-footer text-muted"> {config.publishedbyTitle + this.state.data[index].author.displayName} </div> </div> </div> ); })} </div> <div className="row pt-4 pb-4 text-center mb-4"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> {this.state.data.length === this.state.maxResults ? ( <button id="loadMore" className="btn btn-md btn-lg btn-dark" onClick={this.loadmore} > {this.buttonValues.loadmoreText} </button> ) : ( "" )} </div> </div> </div> ); } else if (this.state.data !== null && this.state.searchData !== null) { return ( <div className="container"> <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <GoogleTranslator /> </div> </div> <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <input id="searField" onKeyUp={this.getVal} className="form-control form-control-lg" placeholder={config.searchplaceholderText} ></input> </div> </div> <div className="row"> {this.state.searchData.map((post, index) => { return ( <div className="col-lg-4 col-md-4 mx-auto col-sm-12 col-xs-12 d-flex align-items-stretch" key={this.state.searchData[index].published} > <div className="card mt-4 mb-4" style={this.cardWidth}> <img loading="lazy" className="card-img-top" style={this.cardStyle} src={ this.state.searchData[index].images ? this.state.searchData[index].images[0].url : graphImageUrl } alt={window.location.hostname} /> <div className="card-header"> {config.publishedonText} {new Date( this.state.searchData[index].published ).toLocaleString()} </div> <div className="card-body"> <h4 className="card-title"> <h4>{this.state.searchData[index].title}</h4> </h4> <p> <Link className="btn btn-md btn-dark" to={{ pathname: `/posts/${this.state.searchData[index].id}`, message: this.state.searchData[index], dataStream: this.state.searchData, in: index, goUp: true, }} > {config.readmoreTitle} </Link> </p> </div> <div className="card-footer text-muted"> {config.publishedbyTitle + this.state.searchData[index].author.displayName} </div> </div> </div> ); })} </div> <div className="row pt-4 pb-4 text-center mb-4"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> {this.state.data.length === this.state.maxResults - 1 ? ( <button id="loadMore" className="btn btn-md btn-lg btn-dark" onClick={this.loadmore} > {this.buttonValues.loadmoreText} </button> ) : ( "" )} </div> </div> </div> ); } else { return <LoadingComponent />; } } } class OnePost extends React.Component { constructor(props) { super(props); this.cardStyle = { maxHeight: 26 + "rem", minHeight: 26 + "rem" }; this.cardWidth = { width: 100 + "%" }; this.state = { id: "sharethis-inline-buttons", count: null, message: null, data: null, stream: null, menuBar: null, nextMessage: null, previousMessage: null, nextUrl: null, prevUrl: null, next: null, shouldgoUp: null, previous: null, nextIndex: null, previousIndex: null, repeat: false, maxResults: 1, config: { alignment: "left", background_color: "#212121", color: "custom", enabled: true, font_size: 16, has_spacing: true, labels: "none", language: "en", min_count: 0, networks: [ "facebook", "twitter", "pinterest", "email", "sms", "sharethis", ], num_networks: 6, padding: 12, radius: 20, show_total: true, size: 48, size_label: "large", spacing: 8, text_color: "#fff", use_native_counts: true, }, }; this.webType = { type: "website" }; this.settings = { key: config.key, blogId: config.blogid }; this.disquscheck = this.disquscheck.bind(this); this.shareThis = this.shareThis.bind(this); this.gen = this.gen.bind(this); this.getNext = this.getNext.bind(this); this.getNextButton = this.getNextButton.bind(this); this.getPrevious = this.getPrevious.bind(this); this.getPreviousButton = this.getPreviousButton.bind(this); this.goUp = this.goUp.bind(this); } disquscheck() { if (config.discusScript !== "") { let disqus_config = function () { this.page.url = window.location.href; this.page.identifier = this.page.url; }; if (!window.DISQUS) { (function () { var d = document, s = d.createElement("script"); s.src = config.discusScript; s.setAttribute("data-timestamp", +new Date()); (d.head || d.body).appendChild(s); })(); } else { DISQUS.reset({ reload: true, config: disqus_config }); } } } goUp() { if (this.state.shouldgoUp !== null && this.state.shouldgoUp === true) { window.scrollTo(0, 0); this.setState({ shouldgoUp: null }); } } shareThis() { if (config.shareKey !== "") { if (window.__sharethis__) { window.__sharethis__.load("inline-share-buttons", this.state.config); } else { let shareThisScript = document.createElement("script"); shareThisScript.src = `https://platform-api.sharethis.com/js/sharethis.js#property=${config.shareKey}&product=sop`; shareThisScript.defer = "defer"; document.body.appendChild(shareThisScript); shareThisScript.addEventListener("load", () => { __sharethis__.initialize(); }); } } } componentDidMount() { if (this.props.location.message) { this.setState( { count: this.props.location.in, message: this.props.location.message, stream: this.props.location.dataStream, shouldgoUp: this.props.location.goUp, }, () => { if ( this.state.stream !== null && this.state.message !== null && this.state.count !== null && typeof this.props.location.reset === "undefined" ) { this.setState({ repeat: true }, () => { this.gen(); this.disquscheck(); this.goUp(); }); } } ); } else { let postId = window.location.pathname; let url = `https://www.googleapis.com/blogger/v3/blogs/${this.settings.blogId}/posts/bypath?path=${postId}&fetchBodies=true&fetchImages=true&key=${this.settings.key}`; async function fetcher() { let response = await fetch(url); if (response.ok) { return await response.json(); } else { throw "No such post"; } } let d = fetcher().catch((err) => { console.log(err); let notfoundMessage = { title: config.notfoundError, content: config.notfoundText, published: new Date().toLocaleString(), images: [{ url: config.graphImageUrl }], author: { displayName: "Artifact theme" }, }; return notfoundMessage; }); d.then((r) => { this.setState({ message: r, shouldgoUp: true }, () => { this.disquscheck(); this.shareThis(); this.goUp(); }); }); } } gen() { let ob = { newer: this.getPrevious(), older: this.getNext() }; ob.older.answer !== false ? this.setState({ next: true, nextUrl: ob.older.answer.url.split( window.location.host.split(".")[ window.location.host.split(".").length - 1 ] )[1], }) : this.setState({ next: false, nextUrl: null }); ob.newer.answer !== false ? this.setState({ previous: true, prevUrl: ob.newer.answer.url.split( window.location.host.split(".")[ window.location.host.split(".").length - 1 ] )[1], }) : this.setState({ previous: false, prevUrl: null }); } getNext() { if (this.state.repeat === true && this.state.count !== null) { let thisArray = this.state.stream; let thiselIndex = this.state.count; let nextPostindex = thiselIndex + 1; let nextEl; switch (true) { case typeof thisArray[nextPostindex] !== "undefined": nextEl = thisArray[nextPostindex]; break; case typeof thisArray[nextPostindex] === "undefined": nextEl = false; break; default: break; } return { answer: nextEl }; } } getNextButton() { if (this.state.repeat === true && this.state.count !== null) { let thisArray = this.state.stream; let thiselIndex = this.state.count; let nextPostindex = thiselIndex + 1; let nextEl; switch (true) { case typeof thisArray[nextPostindex] !== "undefined": nextEl = thisArray[nextPostindex]; break; case typeof thisArray[nextPostindex] === "undefined": nextEl = false; break; default: break; } let ob = { answer: nextEl }; if (ob.answer !== false) { this.setState( { message: ob.answer, count: this.state.count + 1 }, () => { this.gen(); } ); window.scrollTo(0, 0); } } } getPrevious() { let thisArray = this.state.stream; let thiselIndex = this.state.count; let previousPostindex = thiselIndex - 1; let previousEl; switch (true) { case typeof thisArray[previousPostindex] !== "undefined": previousEl = thisArray[previousPostindex]; break; case typeof thisArray[previousPostindex] === "undefined": previousEl = false; break; default: break; } return { answer: previousEl }; } getPreviousButton() { let thisArray = this.state.stream; let thiselIndex = this.state.count; let previousPostindex = thiselIndex - 1; let previousEl; switch (true) { case typeof thisArray[previousPostindex] !== "undefined": previousEl = thisArray[previousPostindex]; break; case typeof thisArray[previousPostindex] === "undefined": previousEl = false; break; default: break; } let ob = { answer: previousEl }; if (ob.answer !== false) { this.setState({ message: ob.answer, count: this.state.count - 1 }, () => { this.gen(); }); window.scrollTo(0, 0); } } componentDidUpdate() { if ( typeof this.props.location.reset !== "undefined" && this.props.location.reset === true ) { let postId = window.location.pathname; let url = `https://www.googleapis.com/blogger/v3/blogs/${this.settings.blogId}/posts/bypath?path=${postId}&fetchBodies=true&fetchImages=true&key=${this.settings.key}`; let updater = async function (passedUrl) { let r = await fetch(passedUrl); let d = await r.json(); return d; }; let dataFetch = updater(url); dataFetch.then((data) => { this.setState({ message: data }, () => { this.disquscheck(); this.shareThis(); this.props.location.reset = false; }); }); } if (this.state.shouldhideNav === true) { this.setState({ shouldhideNav: false }); this.disquscheck(); this.shareThis(); } else { this.disquscheck(); this.shareThis(); } } render() { return ( <div> {this.state.message !== null ? ( <div className="row"> <div className="col-lg-7 col-md-7 mx-auto col-sm-12 col-xs-12 d-flex align-items-stretch"> <div className="card mt-4 mb-4" style={this.cardWidth}> <img loading="lazy" className="card-img-top" style={this.cardStyle} src={ this.state.message.images !== "undefined" ? this.state.message.images ? this.state.message.images[0].url : config.graphImageUrl : config.graphImageUrl } alt={window.location.hostname} /> <div className="card-header"> {config.publishedonText} {new Date(this.state.message.published).toLocaleString()} </div> <div className="card-body"> <h4 className="card-title">{this.state.message.title}</h4> <div className="row pt-4 pb-2"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <GoogleTranslator /> </div> </div> <div className="row py-4"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div id="sharethis-inline-buttons" className="sharethis-inline-share-buttons" data-url={window.location.href} data-title={document.title} /> <AdsenseComponent /> </div> </div> <div dangerouslySetInnerHTML={{ __html: this.state.message.content, }} ></div> <div className="row py-4"> <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <FbChat /> <GoogleAnalytics /> <div id="disqus_thread"></div> </div> </div> <div className="row text-center py-4" id="postNav"> <div className="col-lg-6 text-center col-md-6 col-sm-12 col-xs-12 mx-auto"> {this.state.previous !== null && this.state.previous !== false ? ( <Link id="previousTap" className="btn btn-lg btn-dark d-block my-2 mx-1" onClick={this.getPreviousButton} to={{ pathname: `${this.state.prevUrl}`, message: this.state.message, }} > {config.previousTitle} </Link> ) : ( "" )} {this.state.next !== null && this.state.next !== false ? ( <Link id="forwardTap" className="btn btn-lg btn-dark d-block my-2 mx-1" onClick={this.getNextButton} to={{ pathname: `${this.state.nextUrl}`, message: this.state.message, }} > {config.nextTitle} </Link> ) : ( "" )} </div> <div className="col-lg-12 text-center col-md-12 col-sm-12 col-xs-12 mx-auto"> <Link className="btn btn-md btn-dark mt-4 d-block" to="/"> {config.backtomainTitile} </Link> </div> </div> </div> <div className="card-footer text-muted"> {this.state.message.author.displayName !== "undefined" ? config.publishedbyTitle + this.state.message.author.displayName : ""} </div> </div> </div> </div> ) : ( <LoadingComponent /> )} </div> ); } } const Link = ReactRouterDOM.Link; const Route = ReactRouterDOM.Route; const Switch = ReactRouterDOM.Switch; const App = () => ( <ReactRouterDOM.BrowserRouter> <nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <Link to="/" className="navbar-brand"> {window.location.hostname} <span className="sr-only">(current)</span> </Link> <button className="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation" > <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="collapsibleNavId"> <ul className="navbar-nav mr-auto mt-2 mt-lg-0"> <li className="nav-item active"> <Link to="/" className="nav-link"> {config.mainpageTitle} <span className="sr-only">(current)</span> </Link> </li> {config.contactsPostUrl !== "" ? ( <li className="nav-item"> <Link className="nav-link" to={{ pathname: `/${ config.contactsPostUrl.split( config.contactsPostUrl.split("//")[1].split("/")[0] + "/" )[1] }`, reset: true, message: null, }} > {config.contactpageTitle} </Link> </li> ) : ( "" )} {config.aboutMepostUrl !== "" ? ( <li className="nav-item"> <Link className="nav-link" to={{ pathname: `/${ config.aboutMepostUrl.split( config.aboutMepostUrl.split("//")[1].split("/")[0] + "/" )[1] }`, reset: true, message: null, }} > {config.aboutmepageTitle} </Link> </li> ) : ( "" )} </ul> </div> </nav> <Switch> <Route exact path="/" component={PostComponent} /> <Route path="/:postId" component={OnePost} /> <Route component={NotFound} /> </Switch> </ReactRouterDOM.BrowserRouter> ); ReactDOM.render(<App />, document.querySelector("#posts"));