<commit_before>import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import { Location } from '@reach/router';
import Img from 'gatsby-image';
import './LinkPreview.scss';

const LinkPreview = ({ data, name, path }) => {
  const encodePath = path => path
    .replace(data.site.pathPrefix, '')
    .replace('?', '/?')
    .replace(/ /g, '%20')
    .replace(/\//g, '!');

  return (
    <Location>
      {({ location }) => {
        let fileNameFromUrl = encodePath(path);
        if (fileNameFromUrl.split('!').length < 3) {
          // It's a PF4 md page, clearly too short
          fileNameFromUrl = encodePath(location.pathname + path + '/');
        }
        const previewScreenshot = data ? data.allFile.edges.filter(({ node }) => node.relativePath.endsWith(`${fileNameFromUrl}.png`)) : null;
        if (previewScreenshot && previewScreenshot.length > 0) {
          return (
            <div className="Preview__body">
              <a href={path.replace(/ /g, '%20')} target="_blank" rel="noopener noreferrer">
                <div className="preview-container">
                  <Img
                    fluid={previewScreenshot[0].node.childImageSharp.fluid}
                    alt={name}
                    className="preview-image"
                  />
                  <div className="preview-overlay">
                    <div className="preview-icon">
                      <i className="fas fa-external-link-alt"></i> 
                    </div>
                  </div>
                </div>
              </a>
            </div>
          );
        } else {
          return (
            <div className="Preview__body">
              This Preview can only be accessed in&nbsp;
              <a href={path.replace(/ /g, '%20')} target="_blank" rel="noopener noreferrer">
                full page mode
              </a>.
            </div>
          );
        }
      }
    }
    </Location>
  );
}

export default props => (
  <StaticQuery
    query={graphql`
    {
      site {
        pathPrefix
      }
      allFile(filter: {sourceInstanceName: {eq: "previews"}}) {
        edges {
          node {
            relativePath
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
    `}
    render={data => <LinkPreview data={data} {...props} />}
  />
);<commit_msg>add slash before question mark for full screen links<commit_after>import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import { Location } from '@reach/router';
import Img from 'gatsby-image';
import './LinkPreview.scss';

const LinkPreview = ({ data, name, path }) => {
  const filenamePath = path => path
    .replace(data.site.pathPrefix, '')
    .replace('?', '/?')
    .replace(/ /g, '%20')
    .replace(/\//g, '!');

  const encodePath = path => path
    .replace('?', '/?')
    .replace(/ /g, '%20');

  return (
    <Location>
      {({ location }) => {
        let fileNameFromUrl = filenamePath(path);
        if (fileNameFromUrl.split('!').length < 3) {
          // It's a PF4 md page, clearly too short
          fileNameFromUrl = filenamePath(location.pathname + path + '/');
        }
        const previewScreenshot = data ? data.allFile.edges.filter(({ node }) => node.relativePath.endsWith(`${fileNameFromUrl}.png`)) : null;
        if (previewScreenshot && previewScreenshot.length > 0) {
          return (
            <div className="Preview__body">
              <a href={encodePath(path)} target="_blank" rel="noopener noreferrer">
                <div className="preview-container">
                  <Img
                    fluid={previewScreenshot[0].node.childImageSharp.fluid}
                    alt={name}
                    className="preview-image"
                  />
                  <div className="preview-overlay">
                    <div className="preview-icon">
                      <i className="fas fa-external-link-alt"></i> 
                    </div>
                  </div>
                </div>
              </a>
            </div>
          );
        } else {
          return (
            <div className="Preview__body">
              This Preview can only be accessed in&nbsp;
              <a href={encodePath(path)} target="_blank" rel="noopener noreferrer">
                full page mode
              </a>.
            </div>
          );
        }
      }
    }
    </Location>
  );
}

export default props => (
  <StaticQuery
    query={graphql`
    {
      site {
        pathPrefix
      }
      allFile(filter: {sourceInstanceName: {eq: "previews"}}) {
        edges {
          node {
            relativePath
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
    `}
    render={data => <LinkPreview data={data} {...props} />}
  />
);
{'fraction_non_alphanumeric': 0.14351573461615555, 'fraction_numerical': 0.004810583283223091, 'mean_word_length': 1.535569105691057, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 60, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '137456', 'n_tokens_mistral': 1440, 'n_tokens_neox': 1374, 'n_words': 290}