testsigma-tutorials/src/templates/page.jsx at doc-124 · testsigmahq/testsigma-tutorials

198 lines (184 loc) · 33.1 KB
/* eslint-disable react/no-danger */
import React  from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import LeftNav from "../components/LeftNav";
import 'prismjs/themes/prism-tomorrow.css';
import './page.scss';
import SideBar from "../components/SideBar";
import EditDoc from "../components/EditButton";
import SEO from "../components/seo";
import {Link} from "../../.cache/gatsby-browser-entry";
import SearchInputBox from "../components/SearchInputBox";
import MobileView from "../components/MobileView";
import Footer from "../components/Footer"
import {environment} from "../environment";
export default ({ data, pageContext }) => {
    const prev = pageContext.prev
            url: `${pageContext.prev.fields.slug}`,
            title: pageContext.prev.frontmatter.title
        : null;
    const next = pageContext.next
            url: `${pageContext.next.fields.slug}`,
            title: pageContext.next.frontmatter.title
        : null;
    const post = data.markdownRemark;
    let contextualLinks;
    if (post.frontmatter.contextual_links) {
        contextualLinks = <SideBar links={post.frontmatter.contextual_links} />;
    if(environment.isStaging()) {
        post.frontmatter.noindex = true;
    return (
        <Layout>
            <SEO
                title={post.frontmatter.page_title || post.frontmatter.title}
                slug={post.fields.slug}
                canonical={post.frontmatter.canonical}
                metadesc={post.frontmatter.metadesc}
                keywords={post.frontmatter.keywords}
                social_share_summary={post.frontmatter.social_share_summary}
                social_share_desc={post.frontmatter.social_share_desc}
                social_share_image={post.frontmatter.social_share_image}
                noindex={post.frontmatter.noindex}
            <header id="root_header">
                <div className="flex items-stretch">
                    <nav className="flex max-w-sm w-1/4">
                        <svg width="188" height="26" viewBox="0 0 188 26" fill="none" xmlns="http://www.w3.org/2000/svg" className="ml-10 my-6">
                            <path d="M117.914 10.092H113.72L113.864 8.184H124.574L124.43 10.092H120.254L119.39 21H117.05L117.914 10.092ZM132.602 11.91L131.882 21H129.704L129.812 19.704C129.5 20.16 129.086 20.514 128.57 20.766C128.066 21.018 127.502 21.144 126.878 21.144C125.882 21.144 125.12 20.874 124.592 20.334C124.076 19.782 123.818 18.984 123.818 17.94C123.818 17.7 123.824 17.514 123.836 17.382L124.268 11.91H126.518L126.086 17.238L126.068 17.58C126.068 18.768 126.614 19.362 127.706 19.362C128.354 19.362 128.87 19.152 129.254 18.732C129.65 18.3 129.878 17.712 129.938 16.968L130.352 11.91H132.602ZM137.457 17.67C137.373 18.738 137.823 19.272 138.807 19.272C139.083 19.272 139.395 19.23 139.743 19.146L139.599 20.91C139.203 21.054 138.711 21.126 138.123 21.126C137.175 21.126 136.449 20.88 135.945 20.388C135.441 19.884 135.189 19.158 135.189 18.21C135.189 18.03 135.195 17.892 135.207 17.796L135.531 13.602H133.785L133.929 11.91H135.657L135.837 9.696L138.141 8.94L137.907 11.91H140.337L140.193 13.602H137.781L137.457 17.67ZM145.555 21.144C144.631 21.144 143.827 20.964 143.143 20.604C142.459 20.232 141.931 19.71 141.559 19.038C141.187 18.366 141.001 17.58 141.001 16.68C141.001 15.672 141.193 14.79 141.577 14.034C141.973 13.278 142.525 12.696 143.233 12.288C143.941 11.88 144.763 11.676 145.699 11.676C146.611 11.676 147.409 11.862 148.093 12.234C148.777 12.606 149.299 13.128 149.659 13.8C150.031 14.472 150.217 15.252 150.217 16.14C150.217 17.16 150.025 18.048 149.641 18.804C149.257 19.56 148.711 20.142 148.003 20.55C147.307 20.946 146.491 21.144 145.555 21.144ZM145.555 19.398C146.347 19.398 146.947 19.098 147.355 18.498C147.775 17.886 147.985 17.076 147.985 16.068C147.985 15.216 147.787 14.562 147.391 14.106C147.007 13.65 146.449 13.422 145.717 13.422C144.913 13.422 144.301 13.728 143.881 14.34C143.461 14.94 143.251 15.738 143.251 16.734C143.251 18.51 144.019 19.398 145.555 19.398ZM157.414 11.694C157.774 11.694 158.08 11.742 158.332 11.838L158.152 13.872C157.816 13.728 157.426 13.656 156.982 13.656C156.202 13.656 155.596 13.878 155.164 14.322C154.732 14.754 154.492 15.342 154.444 16.086L154.048 21H151.798L152.32 14.484C152.368 13.668 152.392 13.05 152.392 12.63C152.392 12.306 152.386 12.066 152.374 11.91H154.48L154.516 13.296C154.78 12.792 155.17 12.402 155.686 12.126C156.214 11.838 156.79 11.694 157.414 11.694ZM159.566 11.91H161.816L161.096 21H158.846L159.566 11.91ZM162.248 7.788L162.086 10.002H159.584L159.746 7.788H162.248ZM172.954 11.91L172.234 21H170.02L170.128 19.74C169.816 20.184 169.408 20.532 168.904 20.784C168.412 21.024 167.872 21.144 167.284 21.144C166.516 21.144 165.838 20.97 165.25 20.622C164.674 20.262 164.224 19.752 163.9 19.092C163.576 18.42 163.414 17.64 163.414 16.752C163.414 15.756 163.594 14.874 163.954 14.106C164.314 13.338 164.818 12.744 165.466 12.324C166.114 11.892 166.864 11.676 167.716 11.676C168.388 11.676 168.97 11.814 169.462 12.09C169.966 12.366 170.356 12.756 170.632 13.26L170.74 11.91H172.954ZM167.986 19.398C168.73 19.398 169.318 19.11 169.75 18.534C170.182 17.958 170.398 17.178 170.398 16.194C170.398 15.294 170.2 14.61 169.804 14.142C169.408 13.662 168.844 13.422 168.112 13.422C167.344 13.422 166.744 13.71 166.312 14.286C165.88 14.862 165.664 15.654 165.664 16.662C165.664 17.538 165.862 18.216 166.258 18.696C166.666 19.164 167.242 19.398 167.986 19.398ZM175.746 7.752H177.996L176.934 21H174.684L175.746 7.752ZM182.834 21.144C181.358 21.144 180.032 20.76 178.856 19.992L179.63 18.426C180.65 19.134 181.736 19.488 182.888 19.488C184.052 19.488 184.634 19.152 184.634 18.48C184.634 18.168 184.478 17.934 184.166 17.778C183.866 17.61 183.38 17.424 182.708 17.22C182.072 17.04 181.544 16.86 181.124 16.68C180.704 16.5 180.344 16.242 180.044 15.906C179.756 15.558 179.612 15.108 179.612 14.556C179.612 13.692 179.96 12.996 180.656 12.468C181.352 11.94 182.276 11.676 183.428 11.676C184.1 11.676 184.748 11.778 185.372 11.982C185.996 12.186 186.518 12.468 186.938 12.828L186.182 14.358C185.282 13.674 184.352 13.332 183.392 13.332C182.828 13.332 182.396 13.422 182.096 13.602C181.796 13.782 181.646 14.046 181.646 14.394C181.646 14.718 181.796 14.964 182.096 15.132C182.408 15.288 182.906 15.468 183.59 15.672C184.25 15.864 184.784 16.05 185.192 16.23C185.6 16.398 185.948 16.656 186.236 17.004C186.536 17.352 186.686 17.802 186.686 18.354C186.686 19.23 186.338 19.914 185.642 20.406C184.946 20.898 184.01 21.144 182.834 21.144Z" fill="#03A973"/>
                    </nav>
                    <nav className="flex-auto flex  items-center">
                        <nav className="flex w-4/5">
                            <div className="flex items-stretch font-semibold ml-20">
                                <a className="btn btn-ghost btn-sm pr-2 rounded-btn" href={'/docs/'}>
                                <a className="btn btn-ghost btn-sm border-b-2 border-green-500 rounded-btn ml-10 text-green-600" >
                                <a className="btn btn-ghost btn-sm rounded-btn ml-10" target={'_blank'} href={'https://github.com/Testsigmahq/testsigma/'}>
                                <a className="btn btn-ghost btn-sm rounded-btn ml-10" href={'https://discord.com/invite/5caWS7R6QX'}>
                                <a className="btn btn-ghost btn-sm rounded-btn ml-10" href={'https://testsigma.com/products'}>
                                    Enterprise
                                <a className="btn btn-ghost btn-sm rounded-btn ml-10" href={'https://testsigma.com/'}>
                                    Testsigma Cloud
                        <div className="relative flex items-center justify-between w-2/5 pl-9 pr-9">
                            <SearchInputBox></SearchInputBox>
                            <a id={'signup-btn'} target={'_blank'} className="border border-green-600 font-bold px-4 py-1.5 text-green-600 rounded" href='https://testsigma.com/signup'>Get started for free</a>
                    </nav>
                </div>
            </header>
            <hr/>
            {/*<SubNav></SubNav>*/}
            <div className="w-full">
                <div className="flex items-stretch">
                    <MobileView></MobileView>
                    <nav className="w-1/4 max-w-sm bg-gray-50">
                        <LeftNav />
                    </nav>
                    <div className="flex-auto w-4/5">
                        <div className="flex items-stretch w-full">
                            <main className="w-4/5">
                                <div className="doc-page px-20 py-14">
                                    <h1>{post.frontmatter.title}</h1>
                                    <span dangerouslySetInnerHTML={{ __html: post.html }} />
                            <aside className="w-1/5">
                                <hr className="d-block lg:hidden"/>
                                <div className="top-0 top-1 border-l pl-4 py-16 sticky">
                                    <div className="edit-button">
                                        <EditDoc className="items-end btn edit-button-styles flex inline-flex items-center" />
                                    {contextualLinks}
                            </aside>
                        <div className="pagination_buttons">
                            <div className={prev ? 'flex justify-between' : 'overflow-hidden'}>
                                    <div className="prev_button">
                                    <Link to={prev.url}>
                                        <span>Previous</span>
                                        <svg stroke="" fill="#78757a" strokeWidth="0"
                                             viewBox="0 0 24 24" className="css-1hyj6ne" height="1.6em" width="1.6em"
                                             xmlns="http://www.w3.org/2000/svg">
                                                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
                                        <h3 className="perviousLink">
                                            {prev.title}</h3>
                                    <div className="next_button">
                                    <Link to={next.url}>
                                        <span>Next</span>
                                        <svg stroke="" fill="#78757a" strokeWidth="0" viewBox="0 0 24 24"
                                             className="css-jmo9lw" height="1.6em" width="1.6em"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
                                        <h3 className="next_link">
                                            {next.title}
                            <Footer/>
                    </div>
                </div>
            </div>
        </Layout>
export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        page_title
        metadesc
        canonical
        keywords
        social_share_summary
        social_share_desc
        social_share_image
        noindex
        contextual_links {
          type
          name
          url
      fields {
        slug
/* eslint-enaable */
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

page.jsx

Latest commit

History

page.jsx

File metadata and controls
