Fix Gatsby Hashes (codesandbox#391)

* Hopefully fix hashes

* Footer everywhere

* Fix layout

* Fix query

* Fix another cache

* Another change to pageQuery

* Yarn revert

Author: CompuIves

packages/codesandbox-api/package.json

@@ -6,7 +6,9 @@
   "main": "dist/codesandbox.umd.js",
   "module": "dist/codesandbox.es5.js",
   "typings": "dist/types/codesandbox.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "author": "Ives van Hoorne <[email protected]>",
   "repository": {
     "type": "git",
@@ -20,41 +22,47 @@
     "lint": "tslint -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
     "prebuild": "rimraf dist",
     "build:clean": "tsc && rollup -c",
-    "build":
-      "tsc && rollup -c && rimraf compiled && typedoc --out dist/docs --target es6 --theme minimal src",
-    "start":
-      "nodemon --watch \"src/**/*.ts\" -e ts --exec \"npm run build:clean\"",
+    "build": "tsc && rollup -c && rimraf compiled && typedoc --out dist/docs --target es6 --theme minimal src",
+    "start": "nodemon --watch \"src/**/*.ts\" -e ts --exec \"npm run build:clean\"",
     "test": "echo TODO",
     "test:watch": "jest --watch",
     "test:prod": "npm run lint && npm run test -- --coverage --no-cache",
     "deploy-docs": "ts-node tools/gh-pages-publish",
     "report-coverage": "cat ./coverage/lcov.info | coveralls",
     "commit": "git-cz",
-    "semantic-release":
-      "semantic-release pre && npm publish && semantic-release post",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
     "semantic-release-prepare": "ts-node tools/semantic-release-prepare",
     "precommit": "lint-staged"
   },
   "lint-staged": {
-    "./{src,test}/**/*.ts": ["prettier --write --no-semi", "git add"]
+    "./{src,test}/**/*.ts": [
+      "prettier --write --no-semi",
+      "git add"
+    ]
   },
   "config": {
     "commitizen": {
       "path": "node_modules/cz-conventional-changelog"
     },
     "validate-commit-msg": {
       "types": "conventional-commit-types",
-      "helpMessage":
-        "Use \"npm run commit\" instead, we use conventional-changelog format :) (https://github.com/commitizen/cz-cli)"
+      "helpMessage": "Use \"npm run commit\" instead, we use conventional-changelog format :) (https://github.com/commitizen/cz-cli)"
     }
   },
   "jest": {
     "transform": {
       ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
-    "moduleFileExtensions": ["ts", "tsx", "js"],
-    "coveragePathIgnorePatterns": ["/node_modules/", "/test/"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/test/"
+    ],
     "coverageThreshold": {
       "global": {
         "branches": 90,

packages/homepage/gatsby-node.js

@@ -79,6 +79,7 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
   // Redirect /index.html to root.
   createRedirect({
     fromPath: '/index.html',
+    redirectInBrowser: true,
     toPath: '/',
   });
 
@@ -129,3 +130,13 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
     }
   });
 };
+
+exports.modifyWebpackConfig = ({ config }) => {
+  config.merge({
+    resolve: {
+      root: resolve(__dirname, './src'),
+      extensions: ['', '.js', '.jsx', '.json'],
+    },
+  });
+  return config;
+};

packages/homepage/package.json

@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "gatsby-cli": "^1.1.20",
-    "prettier": "^1.7.4"
+    "prettier": "^1.8.2"
   },
   "browserslist": [
     "> 1%",

…ages/homepage/src/screens/home/Footer.js …ckages/homepage/src/components/Footer.jspackages/homepage/src/screens/home/Footer.js renamed to packages/homepage/src/components/Footer.js packages/homepage/src/screens/home/Footer.js renamed to packages/homepage/src/components/Footer.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import Link from 'gatsby-link';
+
 import MaxWidth from 'common/components/flex/MaxWidth';
 
-import media from '../../utils/media';
+import media from '../utils/media';
 
 const Container = styled.div`
   display: flex;
@@ -59,12 +61,14 @@ const Authors = styled.div`
 `;
 
 const Background = styled.div`
+  position: relative;
   background-color: ${props => props.theme.background2.darken(0.2)};
-  padding: 2rem;
+  padding: 1rem;
+  z-index: 100;
 `;
 
 export default () => (
-  <Background>
+  <Background id="footer">
     <MaxWidth width={1280}>
       <Container>
         <Column>
@@ -80,6 +84,12 @@ export default () => (
                 Search
               </a>
             </li>
+            <li>
+              <Link to="/changelog">Recent Updates</Link>
+            </li>
+            <li>
+              <Link to="/docs">Documentation</Link>
+            </li>
             <li>
               <a href="/patron" target="_blank" rel="noopener noreferrer">
                 Patron

packages/homepage/src/components/StickyNavigation.js

@@ -21,6 +21,13 @@ const Navigation = styled.nav`
       height: 100vh;
     `};
 
+  ${props =>
+    props.absoluteTop &&
+    css`
+      position: absolute;
+      top: ${props.absoluteTop}px;
+    `};
+
   ${media.phone`
     padding-bottom: 1rem;
     position: relative;
@@ -100,8 +107,15 @@ export default class StickyNavigation extends React.PureComponent<Props> {
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll);
     const { y } = getScrollPos(Date.now(), false);
-    this.top =
-      y + document.getElementById('navigation').getBoundingClientRect().top;
+
+    const { top, height } = document
+      .getElementById('navigation')
+      .getBoundingClientRect();
+
+    this.top = y + top;
+    this.height = height;
+    this.footerTop =
+      y + document.getElementById('footer').getBoundingClientRect().top;
   }
 
   componentWillUnmount() {
@@ -111,10 +125,15 @@ export default class StickyNavigation extends React.PureComponent<Props> {
   handleScroll = () => {
     const { y } = getScrollPos(Date.now(), false);
 
-    if (y > this.top && !this.state.fixed) {
-      this.setState({ fixed: true });
+    if (y + this.height + 32 > this.footerTop) {
+      this.setState({
+        absoluteTop: this.footerTop - 32 - this.height,
+        fixed: false,
+      });
+    } else if (y > this.top && !this.state.fixed) {
+      this.setState({ fixed: true, absoluteTop: null });
     } else if (y < this.top && this.state.fixed) {
-      this.setState({ fixed: false });
+      this.setState({ fixed: false, absoluteTop: null });
     }
   };
 
@@ -127,7 +146,11 @@ export default class StickyNavigation extends React.PureComponent<Props> {
     };
 
     return (
-      <Navigation fixed={this.state.fixed} id="navigation">
+      <Navigation
+        fixed={this.state.fixed}
+        absoluteTop={this.state.absoluteTop}
+        id="navigation"
+      >
         <ul>
           {docs.map(({ node }) => (
             <NavigationItem key={node.frontmatter.title}>

packages/homepage/src/layouts/index.css packages/homepage/src/css/global.csspackages/homepage/src/layouts/index.css renamed to packages/homepage/src/css/global.css

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import * as PropTypes from 'prop-types';
 import { TypographyStyle } from 'react-typography';
 import typography from './utils/typography';
 
@@ -12,13 +11,8 @@ if (process.env.NODE_ENV === `production`) {
   }
 }
 
-const propTypes = {
-  headComponents: PropTypes.node.isRequired,
-  body: PropTypes.node.isRequired,
-  postBodyComponents: PropTypes.node.isRequired,
-};
-
-class Html extends Component {
+// eslint-disable-next-line react/prefer-stateless-function
+export default class HTML extends Component {
   render() {
     let css;
     if (process.env.NODE_ENV === `production`) {
@@ -82,7 +76,3 @@ class Html extends Component {
     );
   }
 }
-
-Html.propTypes = propTypes;
-
-module.exports = Html;

packages/homepage/src/html.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled, { ThemeProvider } from 'styled-components';
 
 import theme from 'common/theme';
+import '../css/global.css';
 
 import Navigation from '../components/Navigation';
-
-import './index.css';
+import Footer from '../components/Footer';
 
 const Absolute = styled.div`
   position: absolute;
@@ -15,23 +14,16 @@ const Absolute = styled.div`
   z-index: 20;
 `;
 
-const Header = () => (
-  <Absolute>
-    <Navigation />
-  </Absolute>
-);
-
 const TemplateWrapper = ({ children }) => (
   <ThemeProvider theme={theme}>
     <div>
-      <Header />
+      <Absolute>
+        <Navigation />
+      </Absolute>
       <div style={{ maxWidth: '100vw', overflowX: 'hidden' }}>{children()}</div>
+      <Footer />
     </div>
   </ThemeProvider>
 );
 
-TemplateWrapper.propTypes = {
-  children: PropTypes.func,
-};
-
 export default TemplateWrapper;

packages/homepage/src/layouts/index.js

@@ -163,7 +163,7 @@ export default ({ data }) => {
   );
 };
 
-export const query = graphql`
+export const pageQuery = graphql`
   query Changelogs {
     allMarkdownRemark(
       filter: { id: { regex: "/changelog/" } }

packages/homepage/src/pages/changelog.js

@@ -4,12 +4,11 @@ import Animation from '../screens/home/Animation';
 import NPMFeature from '../screens/home/NPMFeature';
 import CycleFeature from '../screens/home/CycleFeature';
 import ExtraFeatures from '../screens/home/ExtraFeatures';
-import Footer from '../screens/home/Footer';
 import RecentPublications from '../screens/home/RecentPublications';
 import Patron from '../screens/home/Patron';
 import TitleAndMetaTags from '../components/TitleAndMetaTags';
 
-export default class HomePage extends React.PureComponent {
+export default class HomePage extends React.Component {
   componentDidMount() {
     window.addEventListener('scroll', this.scrollCheck, false);
   }
@@ -19,7 +18,7 @@ export default class HomePage extends React.PureComponent {
   }
 
   scrollCheck = () => {
-    clearTimeout(this.timertimer);
+    clearTimeout(this.timer);
     if (!document.body.classList.contains('disable-hover')) {
       document.body.classList.add('disable-hover');
       window.scrolling = true;
@@ -42,13 +41,12 @@ export default class HomePage extends React.PureComponent {
         <ExtraFeatures />
         <RecentPublications sizes={this.props.data.publicationImages.edges} />
         <Patron />
-        <Footer />
       </div>
     );
   }
 }
 
-export const query = graphql`
+export const pageQuery = graphql`
   query ImageSizesQuery {
     publicationImages: allImageSharp(
       filter: { id: { regex: "/RecentPublications/" } }