├── .env.example
├── gatsby-ssr.js
├── .gitignore
├── src
    ├── pages
    │   ├── 404.js
    │   ├── index.js
    │   └── about.js
    ├── templates
    │   ├── metadata.css
    │   ├── weekly-articles-stats.css
    │   ├── metadata.js
    │   ├── weekly-articles-summary.css
    │   ├── weekly-articles.css
    │   ├── weekly-articles-stats.js
    │   ├── article.css
    │   ├── weekly-articles-summary.js
    │   ├── article.js
    │   └── weekly-articles.js
    ├── utils
    │   └── typography.js
    └── components
    │   ├── MainCTA
    │       ├── index.js
    │       └── mainCTA.css
    │   ├── layout.css
    │   ├── layout.js
    │   ├── Header
    │       ├── header.css
    │       └── index.js
    │   ├── WeekSummary
    │       └── weekly-articles-stats.css
    │   ├── SocialCard
    │       └── index.js
    │   ├── WeekNav
    │       ├── navigation.css
    │       └── index.js
    │   └── Footer
    │       └── index.js
├── gatsby-browser.js
├── .vscode
    └── launch.json
├── web.config
├── LICENSE
├── npm-debug.log
├── package.json
├── gatsby-config.js
├── wercker.yml
├── README.md
└── gatsby-node.js


/.env.example:
--------------------------------------------------------------------------------
1 | POCKET_CONSUMER_KEY=
2 | POCKET_ACCESS_TOKEN=
3 | WEEKS_OF_HISTORY=
4 | API_MAX_RECORDS=
5 | GET_CURRENT_WEEKS_ARTICLES_ONLY=
6 | GA_TRACKING_ID=


--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 |  */
6 | 
7 |  // You can delete this file if you're not using it


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Project dependencies
 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 3 | node_modules
 4 | .cache/
 5 | # Build directory
 6 | public/
 7 | .DS_Store
 8 | yarn-error.log
 9 | #secrets
10 | .env
11 | 


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const NotFoundPage = () => (
 4 |   <div>
 5 |     <h1>NOT FOUND</h1>
 6 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
 7 |   </div>
 8 | )
 9 | 
10 | export default NotFoundPage
11 | 


--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Implement Gatsby's Browser APIs in this file.
 3 |  *
 4 |  * See: https://www.gatsbyjs.org/docs/browser-apis/
 5 |  */
 6 | 
 7 | exports.onRouteUpdate = ({ location }) => {
 8 |   console.log("new pathname", location.pathname);
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/templates/metadata.css:
--------------------------------------------------------------------------------
 1 | .metadata-container {
 2 |   display: flex;
 3 |   flex-wrap: wrap;
 4 |   padding: 0.45rem 1.0875rem 0.45rem;
 5 | }
 6 | 
 7 | .metadata {
 8 |   white-space: nowrap;
 9 |   flex: 1;
10 |   text-align: center;
11 |   color: #3c3a40;
12 |   font-size: 1rem;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/utils/typography.js:
--------------------------------------------------------------------------------
 1 | import Typography from "typography";
 2 | 
 3 | const typography = new Typography({
 4 |   baseFontSize: "16px",
 5 |   baseLineHeight: 1.45,
 6 |   headerFontFamily: ["Merriweather", "serif"],
 7 |   bodyFontFamily: ["Kadwa", "serif"]
 8 |   // See below for the full list of options.
 9 | });
10 | 
11 | export default typography;
12 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Helmet from "react-helmet";
 3 | 
 4 | const IndexPage = () => {
 5 |   return (
 6 |     <div className="page-main-container">
 7 |       <Helmet>
 8 |         <meta http-equiv="refresh" content={`0;url=lastweek`} />;
 9 |       </Helmet>
10 |       <a href="lastweek">Articles read in the last week</a>
11 |     </div>
12 |   );
13 | };
14 | 
15 | export default IndexPage;
16 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "node",
 9 |             "request": "launch",
10 |             "name": "Launch Program",
11 |             "program": "${workspaceFolder}/n/a"
12 |         }
13 |     ]
14 | }


--------------------------------------------------------------------------------
/web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 |   <configuration>
 3 |     <location path="static">
 4 |       <system.webServer>
 5 |         <staticContent>
 6 |           <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
 7 |           <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
 8 |           <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
 9 |         </staticContent>
10 |       </system.webServer>
11 |     </location>
12 | </configuration>


--------------------------------------------------------------------------------
/src/components/MainCTA/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./mainCTA.css";
 3 | const MainCTA = () => (
 4 |   <div className="cta-background">
 5 |     <div className="cta-container">
 6 |       <h4>Make your weekly digest with Readstor</h4>
 7 |       <a
 8 |         href="http://eepurl.com/drvaWj"
 9 |         target="_blank"
10 |         className="cta-button"
11 |         rel="noopener noreferrer"
12 |       >
13 |         Register<br />
14 |       </a>
15 |     </div>
16 |   </div>
17 | );
18 | 
19 | export default MainCTA;
20 | 


--------------------------------------------------------------------------------
/src/components/layout.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #fdfdfd;
 3 | }
 4 | 
 5 | iframe {
 6 |   margin: 0;
 7 | }
 8 | 
 9 | .page-main-container {
10 |   margin: 0 auto;
11 |   max-width: 960px;
12 |   padding: 0px 1.0875rem 1.45rem;
13 | }
14 | 
15 | .link-effect {
16 |   text-decoration: none;
17 |   color: #d81159;
18 | }
19 | 
20 | .link-effect span {
21 |   transition: all 0.25s ease-in-out;
22 |   border-bottom: 3px solid transparent;
23 | }
24 | 
25 | .link-effect:hover span {
26 |   border-bottom: 3px solid #d81159;
27 | }
28 | 
29 | @media (max-width: 460px) {
30 |   .page-main-container {
31 |     padding: 0;
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/MainCTA/mainCTA.css:
--------------------------------------------------------------------------------
 1 | .cta-background {
 2 |   background-color: #d81159;
 3 |   display: flex;
 4 |   align-items: center;
 5 |   justify-content: center;
 6 |   height: 125px;
 7 | }
 8 | 
 9 | .cta-container {
10 |   text-align: center;
11 |   font-family: sans-serif;
12 |   color: #fff;
13 | }
14 | 
15 | .cta-container h4 {
16 |   padding: 0.45rem;
17 |   margin-bottom: 0;
18 | }
19 | 
20 | .cta-button {
21 |   border: 2px solid #fff;
22 |   color: #fff;
23 |   border-radius: 4px;
24 |   text-decoration: none;
25 |   width: 170px;
26 |   margin: 0 auto;
27 |   display: inline-block;
28 | }
29 | 
30 | .cta-button small {
31 |   color: #bfbdc1;
32 | }
33 | 
34 | .cta-button:hover {
35 |   background-color: #ad0c47;
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Helmet from "react-helmet";
 3 | import Header from "./Header";
 4 | import Footer from "./Footer";
 5 | import "./layout.css";
 6 | import MainCTA from "./MainCTA";
 7 | 
 8 | const TemplateWrapper = ({ children, showCTA = false }) => (
 9 |   <div>
10 |     <Helmet
11 |       title="Articles I've read"
12 |       meta={[
13 |         { name: "description", content: "Sample" },
14 |         { name: "keywords", content: "sample, something" }
15 |       ]}
16 |     >
17 |       <script
18 |         defer
19 |         src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
20 |       />
21 |     </Helmet>
22 |     {showCTA && <MainCTA />}
23 |     <Header />
24 |     <div>{children}</div>
25 |     <Footer />
26 |   </div>
27 | );
28 | 
29 | export default TemplateWrapper;
30 | 


--------------------------------------------------------------------------------
/src/components/Header/header.css:
--------------------------------------------------------------------------------
 1 | .top-nav {
 2 |   border-bottom: solid 1px #78fecf;
 3 |   padding: 0.45rem 1rem;
 4 |   display: flex;
 5 |   font-size: 1.5rem;
 6 | }
 7 | 
 8 | .top-nav a {
 9 |   font-variant: small-caps;
10 |   font-family: sans-serif;
11 |   text-decoration: none;
12 | }
13 | 
14 | .top-nav-first,
15 | .top-nav-last {
16 |   width: 30px;
17 | }
18 | 
19 | .top-nav-last {
20 |   text-align: right;
21 | }
22 | 
23 | .top-nav-middle {
24 |   flex: 1;
25 | }
26 | 
27 | .top-nav-title {
28 |   text-align: center;
29 |   font-family: Cinzel Decorative, serif;
30 |   color: #bfbdc1;
31 |   margin-bottom: 0;
32 | }
33 | 
34 | .site-name-container {
35 |   display: flex;
36 | }
37 | .site-name {
38 |   margin: 0rem;
39 |   flex: 1;
40 |   text-align: center;
41 | }
42 | 
43 | @media (max-width: 460px) {
44 |   .top-nav {
45 |     font-size: 1rem;
46 |   }
47 |   .site-name {
48 |     font-size: 1.25rem;
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles-stats.css:
--------------------------------------------------------------------------------
 1 | .weekly-articles-stats-container .nav-week-previous,
 2 | .weekly-articles-stats-container .nav-week-next {
 3 |   display: none;
 4 | }
 5 | 
 6 | .metadata-container {
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 |   padding: 0.45rem 1.0875rem 0.45rem;
10 | }
11 | 
12 | .metadata {
13 |   white-space: nowrap;
14 |   flex: 1;
15 |   text-align: center;
16 |   color: #3c3a40;
17 |   font-size: 1rem;
18 | }
19 | 
20 | .image-thumbs {
21 |   /* display: grid; */
22 |   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
23 |   grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
24 |   height: 500px;
25 |   overflow: hidden;
26 | }
27 | 
28 | .metadata-image {
29 |   background-repeat: no-repeat;
30 |   background-size: cover;
31 |   background-position: center;
32 |   width: 100px;
33 |   height: 100px;
34 |   float: left;
35 |   max-width: 100%;
36 |   max-height: 100%;
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/WeekSummary/weekly-articles-stats.css:
--------------------------------------------------------------------------------
 1 | .weekly-articles-stats-container .nav-week-previous,
 2 | .weekly-articles-stats-container .nav-week-next {
 3 |   display: none;
 4 | }
 5 | 
 6 | .metadata-container {
 7 |   display: flex;
 8 |   flex-wrap: wrap;
 9 |   padding: 0.45rem 1.0875rem 0.45rem;
10 | }
11 | 
12 | .metadata {
13 |   white-space: nowrap;
14 |   flex: 1;
15 |   text-align: center;
16 |   color: #3c3a40;
17 |   font-size: 1rem;
18 | }
19 | 
20 | .image-thumbs {
21 |   /* display: grid; */
22 |   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
23 |   grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
24 |   height: 500px;
25 |   overflow: hidden;
26 | }
27 | 
28 | .metadata-image {
29 |   background-repeat: no-repeat;
30 |   background-size: cover;
31 |   background-position: center;
32 |   width: 100px;
33 |   height: 100px;
34 |   float: left;
35 |   max-width: 100%;
36 |   max-height: 100%;
37 | }
38 | 


--------------------------------------------------------------------------------
/src/templates/metadata.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./metadata.css";
 4 | 
 5 | class Metadata extends React.Component {
 6 |   render() {
 7 |     const {
 8 |       totalArticles,
 9 |       favouriteArticles,
10 |       totalWords,
11 |       readTimeText,
12 |       children
13 |     } = this.props;
14 |     return (
15 |       <nav className="metadata-container">
16 |         <div className="metadata">
17 |           {totalArticles} articles | {favouriteArticles} favourited |{" "}
18 |           {new Intl.NumberFormat().format(totalWords)} words | {readTimeText}
19 |         </div>
20 |         {children}
21 |       </nav>
22 |     );
23 |   }
24 | }
25 | 
26 | Metadata.propTypes = {
27 |   totalArticles: PropTypes.number,
28 |   favouriteArticles: PropTypes.number,
29 |   totalWords: PropTypes.number,
30 |   readTimeText: PropTypes.string,
31 |   children: PropTypes.object
32 | };
33 | 
34 | export default Metadata;
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Conrad Jackson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | <<<<<<< HEAD
23 | 
24 | =======
25 | >>>>>>> ecd1017a9a675d1ecd34f6982db884cf804e75ac
26 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles-summary.css:
--------------------------------------------------------------------------------
 1 | .weekly-articles-summary-container {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .weekly-articles-summary-container .image-overlay {
 6 |   background: linear-gradient(
 7 |     190deg,
 8 |     rgba(0, 0, 0, 0) 0%,
 9 |     rgba(0, 0, 0, 0.8) 90%
10 |   );
11 |   height: 100%;
12 |   width: 100%;
13 |   position: absolute;
14 | }
15 | 
16 | .weekly-summary {
17 |   position: absolute;
18 |   bottom: 0;
19 |   color: #ccc;
20 |   padding: 2rem;
21 | }
22 | 
23 | .weekly-summary .metadata-container {
24 |   display: flex;
25 |   flex-wrap: wrap;
26 |   padding: 0;
27 | }
28 | 
29 | .weekly-summary .metadata {
30 |   white-space: nowrap;
31 |   flex: 1;
32 |   text-align: left;
33 |   color: white;
34 |   font-size: 1rem;
35 | }
36 | 
37 | .image-thumbs {
38 |   display: grid;
39 |   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
40 |   grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
41 |   height: 75vh;
42 |   width: 100vw;
43 |   overflow: hidden;
44 |   gap: 10px;
45 | }
46 | 
47 | .metadata-image {
48 |   background-repeat: no-repeat;
49 |   background-size: cover;
50 |   background-position: center;
51 |   width: 100px;
52 |   height: 100px;
53 |   float: left;
54 |   max-width: 100%;
55 |   max-height: 100%;
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import { Link } from "gatsby";
 4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 5 | import { faHome } from "@fortawesome/free-solid-svg-icons/faHome";
 6 | import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 7 | 
 8 | import "./header.css";
 9 | 
10 | class Header extends React.Component {
11 |   render() {
12 |     return (
13 |       <header>
14 |         <nav className="top-nav">
15 |           <div className="top-nav-first">
16 |             <Link to="/thisweek" className="link-effect">
17 |               <span>
18 |                 <FontAwesomeIcon icon={faHome} />
19 |               </span>
20 |             </Link>{" "}
21 |           </div>
22 |           <div className="top-nav-middle">
23 |             <div className="site-name-container">
24 |               <h1 className="site-name">Weekly Digest</h1>
25 |             </div>
26 |           </div>
27 |           <div className="top-nav-last">
28 |             <Link to="/about" className="link-effect">
29 |               <span>
30 |                 <FontAwesomeIcon icon={faInfoCircle} />
31 |               </span>
32 |             </Link>
33 |           </div>
34 |         </nav>
35 |       </header>
36 |     );
37 |   }
38 | }
39 | 
40 | Header.propTypes = {
41 |   location: PropTypes.object
42 | };
43 | 
44 | export default Header;
45 | 


--------------------------------------------------------------------------------
/npm-debug.log:
--------------------------------------------------------------------------------
 1 | 0 info it worked if it ends with ok
 2 | 1 verbose cli [ '/Users/conrad/.nvm/versions/node/v8.9.3/bin/node',
 3 | 1 verbose cli   '/Users/conrad/node_modules/.bin/npm',
 4 | 1 verbose cli   'install' ]
 5 | 2 info using npm@3.3.6
 6 | 3 info using node@v8.9.3
 7 | 4 verbose stack Error: Cannot find module 'internal/util/types'
 8 | 4 verbose stack     at Function.Module._resolveFilename (module.js:536:15)
 9 | 4 verbose stack     at Function.Module._load (module.js:466:25)
10 | 4 verbose stack     at Module.require (module.js:579:17)
11 | 4 verbose stack     at require (internal/module.js:11:18)
12 | 4 verbose stack     at evalmachine.<anonymous>:31:26
13 | 4 verbose stack     at Object.<anonymous> (/Users/conrad/node_modules/npm/node_modules/cmd-shim/node_modules/graceful-fs/fs.js:11:1)
14 | 4 verbose stack     at Module._compile (module.js:635:30)
15 | 4 verbose stack     at Object.Module._extensions..js (module.js:646:10)
16 | 4 verbose stack     at Module.load (module.js:554:32)
17 | 4 verbose stack     at tryModuleLoad (module.js:497:12)
18 | 5 verbose cwd /Users/conrad/Sites/conradjreads
19 | 6 error Darwin 17.3.0
20 | 7 error argv "/Users/conrad/.nvm/versions/node/v8.9.3/bin/node" "/Users/conrad/node_modules/.bin/npm" "install"
21 | 8 error node v8.9.3
22 | 9 error npm  v3.3.6
23 | 10 error code MODULE_NOT_FOUND
24 | 11 error Cannot find module 'internal/util/types'
25 | 12 error If you need help, you may report this error at:
26 | 12 error     <https://github.com/npm/npm/issues>
27 | 13 verbose exit [ 1, true ]
28 | 


--------------------------------------------------------------------------------
/src/components/SocialCard/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Helmet from "react-helmet";
 3 | 
 4 | const SocialCard = ({ url, title, description, imageUrl, imageAlt }) => (
 5 |   <Helmet>
 6 |     <meta name="og:type" content="article" />
 7 |     <meta name="og:headline" content={title} />
 8 |     <meta name="og:headline" content={title} />
 9 |     <meta name="og:url" content={url} />
10 |     <meta name="og:title" content={title} />
11 |     <meta name="og:description" content={description} />
12 |     <meta name="og:image" content={imageUrl} />
13 |     <meta name="og:image:alt" content={imageAlt} />
14 |     <meta name="og:image:width" content="1000" />
15 |     <meta name="og:image:height" content="500" />
16 |     <meta property="og:type" content="article" />
17 |     <meta property="og:url" content={url} />
18 |     <meta property="og:headline" content={title} />
19 |     <meta property="og:title" content={title} />
20 |     <meta property="og:description" content={description} />
21 |     <meta property="og:image" content={imageUrl} />
22 |     <meta property="og:image:alt" content={imageAlt} />
23 |     <meta property="og:image:width" content="1000" />
24 |     <meta property="og:image:height" content="500" />
25 |     <meta itemprop="og:headline" content={title} />
26 |     <meta name="twitter:card" content="summary_large_image" />
27 |     <meta name="twitter:site" content="@conradj" />
28 |     <meta name="twitter:image:alt" content={imageAlt} />
29 |   </Helmet>
30 | );
31 | 
32 | export default SocialCard;
33 | 


--------------------------------------------------------------------------------
/src/components/WeekNav/navigation.css:
--------------------------------------------------------------------------------
 1 | .navigation-week {
 2 |   display: grid;
 3 |   /* grid-template-columns: [week-previous] 1fr [week-next] 1fr [week-title] 2fr [nav-home] 1fr [nav-about] 1fr [nav-user] 1fr; */
 4 |   grid-template-columns: repeat(3, 1fr);
 5 |   grid-template-rows: 1 10vh;
 6 |   grid-template-areas: "previous weekTxt next";
 7 |   background-color: #fdfdfd;
 8 |   font-family: sans-serif;
 9 |   font-size: 1rem;
10 |   padding: 1rem;
11 |   position: sticky;
12 |   top: 0;
13 |   border-bottom: #d81159 solid 2px;
14 |   white-space: nowrap;
15 |   z-index: 1000;
16 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
17 | }
18 | 
19 | .week-container.screenshot .navigation-week {
20 |   display: none;
21 | }
22 | 
23 | .nav-week-previous {
24 |   grid-area: previous;
25 |   align-self: start;
26 | }
27 | 
28 | .nav-week-next {
29 |   grid-area: next;
30 |   text-align: right;
31 | }
32 | 
33 | .week-container.screenshot .nav-week-previous,
34 | .week-container.screenshot .nav-week-next {
35 |   display: none;
36 | }
37 | 
38 | .nav-week-title {
39 |   grid-area: weekTxt;
40 |   align-self: center;
41 |   text-align: center;
42 |   font-family: "Merriweather,serif";
43 |   margin: 0 10px;
44 | }
45 | 
46 | @media (min-width: 460px) {
47 |   .navigation-week {
48 |     font-size: 1.25rem;
49 |     background-color: unset;
50 |     position: relative;
51 |     box-shadow: unset;
52 |   }
53 |   .nav-week-previous {
54 |     text-align: right;
55 |   }
56 |   .nav-week-next {
57 |     text-align: left;
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/components/WeekNav/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import format from "date-fns/format";
 4 | 
 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 6 | import { faCaretSquareLeft } from "@fortawesome/free-solid-svg-icons/faCaretSquareLeft";
 7 | import { faCaretSquareRight } from "@fortawesome/free-solid-svg-icons/faCaretSquareRight";
 8 | 
 9 | import "./navigation.css";
10 | 
11 | class Navigation extends React.Component {
12 |   render() {
13 |     const { currentWeek } = this.props;
14 |     const nextWeek = currentWeek + 604800;
15 |     const lastWeek = currentWeek - 604800;
16 |     const currentWeekDate = format(
17 |       new Date(currentWeek * 1000),
18 |       "Do MMMM YYYY"
19 |     );
20 |     return (
21 |       <nav className="navigation-week">
22 |         <div className="nav-week-title">{currentWeekDate}</div>
23 |         <a href={`./${lastWeek}`} className="nav-week-previous link-effect">
24 |           <FontAwesomeIcon icon={faCaretSquareLeft} />&nbsp;
25 |           <span>Previous</span>
26 |         </a>
27 |         {nextWeek < new Date().getTime() / 1000 ? (
28 |           <a
29 |             className="nav-week-next next-week link-effect"
30 |             href={`./${nextWeek}`}
31 |           >
32 |             <span>Next</span>
33 |             &nbsp;
34 |             <FontAwesomeIcon icon={faCaretSquareRight} />
35 |           </a>
36 |         ) : null}
37 |       </nav>
38 |     );
39 |   }
40 | }
41 | 
42 | Navigation.propTypes = {
43 |   currentWeek: PropTypes.number
44 | };
45 | 
46 | export default Navigation;
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-pocket-reads",
 3 |   "description": "Gatsby static site for pocket history",
 4 |   "version": "1.0.0",
 5 |   "author": "Conrad Jackson",
 6 |   "dependencies": {
 7 |     "@fortawesome/fontawesome-svg-core": "^1.2.17",
 8 |     "@fortawesome/free-brands-svg-icons": "^5.8.1",
 9 |     "@fortawesome/free-solid-svg-icons": "^5.8.1",
10 |     "@fortawesome/react-fontawesome": "^0.1.4",
11 |     "date-fns": "^1.30.1",
12 |     "dotenv-safe": "^6.1.0",
13 |     "gatsby": "^2.4.2",
14 |     "gatsby-cli": "^2.5.12",
15 |     "gatsby-link": "^2.1.1",
16 |     "gatsby-plugin-google-analytics": "^2.0.19",
17 |     "gatsby-plugin-google-fonts": "0.0.4",
18 |     "gatsby-plugin-react-helmet": "^3.0.12",
19 |     "gatsby-plugin-typography": "^2.2.13",
20 |     "gatsby-source-pocket": "^2.3.1",
21 |     "node-getpocket": "^1.0.0",
22 |     "react": "^16.8.6",
23 |     "react-dom": "^16.8.6",
24 |     "react-helmet": "^5.2.1",
25 |     "react-typography": "^0.16.19",
26 |     "rss-parser": "^3.7.0",
27 |     "stdio": "^0.2.7",
28 |     "typeface-kadwa": "0.0.72",
29 |     "typeface-merriweather": "0.0.72",
30 |     "typography": "^0.16.19"
31 |   },
32 |   "keywords": [
33 |     "gatsby pocket"
34 |   ],
35 |   "license": "MIT",
36 |   "main": "n/a",
37 |   "scripts": {
38 |     "build": "gatsby build",
39 |     "develop": "gatsby develop",
40 |     "format": "prettier --trailing-comma all --no-semi --single-quote --write \"src/**/*.js\"",
41 |     "test": "echo \"Error: no test specified\" && exit 1",
42 |     "deploy": "gatsby build --prefix-paths && gh-pages -d public"
43 |   },
44 |   "devDependencies": {
45 |     "gh-pages": "^2.0.1",
46 |     "prettier": "^1.17.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | require("dotenv-safe").load();
 2 | 
 3 | module.exports = {
 4 |   siteMetadata: {
 5 |     title: "Articles I've read"
 6 |   },
 7 |   plugins: [
 8 |     "gatsby-plugin-react-helmet",
 9 |     {
10 |       resolve: "gatsby-source-pocket",
11 |       options: {
12 |         consumerKey: process.env.POCKET_CONSUMER_KEY,
13 |         accessToken: process.env.POCKET_ACCESS_TOKEN,
14 |         weeksOfHistory: process.env.WEEKS_OF_HISTORY,
15 |         apiMaxRecordsToReturn: process.env.API_MAX_RECORDS,
16 |         getCurrentWeekOnly: process.env.GET_CURRENT_WEEKS_ARTICLES_ONLY,
17 |         stateFilterString: "archive",
18 |         tagFilter: false,
19 |         tagFilterString: "_untagged_",
20 |         favouriteFilter: false,
21 |         favouriteFilterValue: 1,
22 |         searchFilter: false,
23 |         searchFilterString: "t",
24 |         domainFilter: false,
25 |         domainFilterString: "stratechery.com"
26 |       }
27 |     },
28 |     {
29 |       resolve: `gatsby-plugin-google-analytics`,
30 |       options: {
31 |         trackingId: process.env.GA_TRACKING_ID,
32 |         // Puts tracking script in the head instead of the body
33 |         head: false,
34 |         // Setting this parameter is optional
35 |         anonymize: true
36 |       }
37 |     },
38 |     {
39 |       resolve: `gatsby-plugin-typography`,
40 |       options: {
41 |         pathToConfigModule: `src/utils/typography`
42 |       }
43 |     },
44 |     {
45 |       resolve: `gatsby-plugin-google-fonts`,
46 |       options: {
47 |         fonts: [
48 |           `Cinzel Decorative`,
49 |           `Kadwa`,
50 |           `Merriweather\:700`,
51 |           `Open Sans`
52 |           // `source sans pro\:300,400,400i,700` // you can also specify font weights and styles
53 |         ]
54 |       }
55 |     }
56 |   ],
57 |   pathPrefix: `/weeklyreads`
58 | };
59 | 


--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 3 | import { faTwitter } from "@fortawesome/free-brands-svg-icons/faTwitter";
 4 | import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
 5 | import { faExternalLinkSquareAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkSquareAlt";
 6 | 
 7 | const Footer = () => (
 8 |   <nav
 9 |     style={{
10 |       borderTop: "solid 1rem #78fecf",
11 |       paddingBottom: "1.45rem"
12 |     }}
13 |   >
14 |     <div
15 |       style={{
16 |         margin: "0 auto",
17 |         maxWidth: 960,
18 |         padding: "1.45rem 1.0875rem"
19 |       }}
20 |     >
21 |       <h4 style={{ margin: 0, float: "left" }}>
22 |         Site by{" "}
23 |         <a
24 |           href="https://conradj.co.uk/#contact"
25 |           target="_blank"
26 |           className="link-effect"
27 |           rel="noopener noreferrer"
28 |         >
29 |           <span>Conrad Jackson</span>
30 |           &nbsp;<FontAwesomeIcon icon={faExternalLinkSquareAlt} />
31 |         </a>
32 |       </h4>
33 |       <span style={{ float: "right" }}>
34 |         <a
35 |           href="https://twitter.com/conradj"
36 |           target="_blank"
37 |           className="link-effect"
38 |           rel="noopener noreferrer"
39 |         >
40 |           <span>
41 |             <FontAwesomeIcon icon={faTwitter} />
42 |           </span>
43 |         </a>{" "}
44 |         |{" "}
45 |         <a
46 |           href="https://github.com/conradj"
47 |           target="_blank"
48 |           className="link-effect"
49 |           rel="noopener noreferrer"
50 |         >
51 |           <span>
52 |             <FontAwesomeIcon icon={faGithub} />
53 |           </span>
54 |         </a>
55 |       </span>
56 |     </div>
57 |   </nav>
58 | );
59 | 
60 | export default Footer;
61 | 


--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const AboutPage = () => (
 4 |   <div className="page-main-container">
 5 |     <p />
 6 |     <h3>What is Weekly Digest?</h3>
 7 |     <p>
 8 |       I made this site to shows all of the articles I've read on Pocket, by
 9 |       week.
10 |     </p>
11 |     <p>
12 |       As I don't blog this is a different way of sharing the subjects and topics
13 |       that I find interesting.
14 |     </p>
15 |     <p>
16 |       Over time I plan to add more features, such as stats, and different ways
17 |       to search and order articles.
18 |     </p>
19 |     <p>
20 |       If you want something similar, send me a dm{" "}
21 |       <a
22 |         href="https://twitter.com/conradj"
23 |         target="_blank"
24 |         rel="noopener noreferrer"
25 |       >
26 |         @conradj on Twitter
27 |       </a>{" "}
28 |       or{" "}
29 |       <a
30 |         href="https://github.com/conradj/pocket-public-archive"
31 |         target="_blank"
32 |         rel="noopener noreferrer"
33 |       >
34 |         fork the project
35 |       </a>{" "}
36 |       and crack on!
37 |     </p>
38 |     <h3>What is Pocket?</h3>
39 |     <p>
40 |       I use the{" "}
41 |       <a href="https://getpocket.com" target="_blank" rel="noopener noreferrer">
42 |         Pocket
43 |       </a>{" "}
44 |       read it later app a lot. I add loads of articles, and when I get a spare
45 |       moment, I try and use Pocket, rather than hitting Twitter or Facebook.
46 |     </p>
47 |     <p>
48 |       Pocket is great, because it strips out all of the ads and other
49 |       extraeneous parts of an article, and just gives you the text. It also
50 |       works offline, which is a lifesaver on my daily commute, as I go through
51 |       quite a few reception cold spots. It's great having something interesting
52 |       to read wherever I am.
53 |     </p>
54 |   </div>
55 | );
56 | 
57 | export default AboutPage;
58 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *:before,
 3 | *:after {
 4 |   box-sizing: inherit;
 5 | }
 6 | 
 7 | img {
 8 |   max-width: 100%;
 9 | }
10 | 
11 | .wrapper {
12 |   list-style: none;
13 |   margin: 0 auto 0 auto;
14 |   padding: 0;
15 |   display: grid;
16 |   max-width: 960px;
17 |   grid-template-columns: 1fr;
18 |   grid-template-rows: auto;
19 |   grid-auto-flow: dense;
20 | }
21 | 
22 | @media (min-width: 460px) {
23 |   .wrapper {
24 |     grid-template-columns: 1fr 1fr;
25 |   }
26 | }
27 | 
28 | @media (min-width: 700px) {
29 |   .wrapper {
30 |     grid-template-columns: 1fr 1fr 1fr 1fr;
31 |   }
32 | }
33 | .week-header {
34 |   text-align: center;
35 | }
36 | .week-headline {
37 |   text-align: center;
38 |   font-size: 3rem;
39 | }
40 | 
41 | .week-current {
42 |   color: #3c3a40;
43 | }
44 | 
45 | .week-metadata-sort {
46 |   color: #d81159;
47 |   display: none;
48 | }
49 | .week-metadata-sort select {
50 |   font-family: "Merriweather,serif";
51 |   appearance: none;
52 |   font-size: 0.8rem;
53 |   float: right;
54 |   border: 0;
55 |   border-bottom: #78fecf4d 1px solid;
56 |   color: #3c3a40;
57 |   background: url("data:image/svg+xml;utf8,<svg aria-hidden='true' data-prefix='fas' data-icon='caret-down' class='svg-inline--fa fa-caret-down fa-w-10 ' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path style='stroke: %23d81159; fill: %23d81159;' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'></path></svg>")
58 |     right no-repeat;
59 |   padding-right: 1rem;
60 |   border-radius: 0px;
61 | }
62 | 
63 | .week-metadata-sort::after {
64 |   display: none;
65 |   font-family: "Font Awesome 5 Solid";
66 |   content: "\f007";
67 |   color: #d81159;
68 | }
69 | 
70 | .week-header .metadata {
71 |   color: #bfbdc1;
72 |   font-size: 0.8rem;
73 |   white-space: nowrap;
74 |   text-align: left;
75 |   flex: 1;
76 | }
77 | 
78 | @media (max-width: 460px) {
79 |   .week-header {
80 |     border-bottom: 1px solid #ccc;
81 |   }
82 | 
83 |   .week-header .metadata-container {
84 |     background-color: #3c3a40;
85 |     color: #ccc;
86 |   }
87 | 
88 |   .week-metadata-sort select {
89 |     width: 10px;
90 |     border-bottom: 0;
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/wercker.yml:
--------------------------------------------------------------------------------
 1 | # This references the default nodejs container from
 2 | # the Docker Hub: https://registry.hub.docker.com/_/node/
 3 | # If you want Nodesource's container you would reference nodesource/node
 4 | # Read more about containers on our dev center
 5 | # http://devcenter.wercker.com/docs/containers/index.html
 6 | box: node
 7 | # This is the build pipeline. Pipelines are the core of wercker
 8 | # Read more about pipelines on our dev center
 9 | # http://devcenter.wercker.com/docs/pipelines/index.html
10 | 
11 | # You can also use services such as databases. Read more on our dev center:
12 | # http://devcenter.wercker.com/docs/services/index.html
13 | # services:
14 |     # - postgres
15 |     # http://devcenter.wercker.com/docs/services/postgresql.html
16 | 
17 |     # - mongo
18 |     # http://devcenter.wercker.com/docs/services/mongodb.html
19 | build:
20 |   steps:
21 |     - npm-install
22 |     - script:
23 |       name: echo things
24 |       code: |
25 |         echo $GET_CURRENT_WEEKS_ARTICLES_ONLY
26 |         echo $TEST_VALUE
27 |         env
28 | 
29 | generate:
30 |   # The steps that will be executed to generate or regenerate the web pages
31 |   steps:
32 |     - script:
33 |       name: generate weekly pages
34 |       code: |
35 |         npm install gatsby-cli -g
36 |         echo $GET_CURRENT_WEEKS_ARTICLES_ONLY
37 |         echo $TEST_VALUE
38 |         env
39 |         gatsby build --prefix-paths
40 | 
41 | deploy:
42 |   # The steps that will be executed on deploy
43 |   # Steps make up the actions in your pipeline
44 |   # Read more about steps on our dev center:
45 |   # http://devcenter.wercker.com/docs/steps/index.html
46 |   steps:
47 |     # deploy to azure
48 |     - wercker-labs/azure-ftp-deploy:
49 |         cwd: public/
50 |         publish-url: $publish_url
51 |         username: $username
52 |         password: $password
53 | 
54 |   after-steps:
55 |     - kobim/notify-pushover:
56 |         token: $PUSHOVER_APP_TOKEN
57 |         user: $PUSHOVER_USER_TOKEN
58 |         title: Deployed Weekly Digest
59 |         
60 | screenshot:
61 |   # take a screenshot and ftp to site folder for twitter/facebook cards
62 |   box: markxnelson/phantomjs
63 |   steps:
64 |     - script:
65 |         code: |
66 |           export SCREENSHOT_URL="https://conradj.co.uk/weeklyreads/$(date -dlast-sunday +%s)/summary"
67 |           export SCREENSHOT_FILENAME="public/screenshots/$(date -dlast-sunday +%s).png"
68 |     - screenshot:
69 |         url: $SCREENSHOT_URL
70 |         filename: $SCREENSHOT_FILENAME
71 |         create_file_in_artifacts: false
72 |         viewport_width: 1000
73 |         viewport_height: 500
74 |           
75 | deploy-screenshot:
76 |   steps:
77 |     # deploy to azure
78 |     - wercker-labs/azure-ftp-deploy:
79 |         cwd: public/screenshots/
80 |         publish-url: $publish_url
81 |         username: $username
82 |         password: $password
83 | 
84 |   after-steps:
85 |     - kobim/notify-pushover:
86 |         token: $PUSHOVER_APP_TOKEN
87 |         user: $PUSHOVER_USER_TOKEN
88 |         title: Updated Screenshot
89 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles-stats.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { graphql } from "gatsby";
  3 | import Layout from "../components/layout";
  4 | import Metadata from "./metadata";
  5 | import Navigation from "../components/WeekNav";
  6 | import "./weekly-articles-stats.css";
  7 | 
  8 | class WeeklyArticlesStatsTemplate extends React.Component {
  9 |   render() {
 10 |     let totalWords = 0;
 11 |     let totalArticles = 0;
 12 |     let favouriteArticles = 0;
 13 |     const isData = this.props.data && this.props.data.allPocketArticle;
 14 |     let thisWeek;
 15 |     let data;
 16 |     if (isData) {
 17 |       data = this.props.data.allPocketArticle.edges;
 18 |       thisWeek = parseInt(data[0].node.readWeek);
 19 |     }
 20 | 
 21 |     const imageThumbs = isData
 22 |       ? data.map((edge, index) => {
 23 |           let article = edge.node;
 24 |           if (article.title && article.url && article.word_count > 0) {
 25 |             totalWords += article.word_count;
 26 |             totalArticles++;
 27 |             favouriteArticles += article.favourite ? 1 : 0;
 28 |           }
 29 | 
 30 |           if ((article.has_image, article.image)) {
 31 |             return (
 32 |               <div
 33 |                 className="metadata-image"
 34 |                 style={{
 35 |                   backgroundImage: `url(${article.image.src.replace(
 36 |                     /^http:\/\//i,
 37 |                     "https://"
 38 |                   )})`
 39 |                 }}
 40 |               />
 41 |             );
 42 |           }
 43 |           return null;
 44 |         })
 45 |       : null;
 46 | 
 47 |     const readTime = parseInt(totalWords / 275);
 48 |     const readTimeText = readTime < 2 ? "1 minute" : readTime + " minutes";
 49 |     return (
 50 |       <Layout>
 51 |         <div className="weekly-articles-stats-container">
 52 |           <Navigation currentWeek={thisWeek} />
 53 |           <Metadata
 54 |             totalArticles={totalArticles}
 55 |             favouriteArticles={favouriteArticles}
 56 |             totalWords={totalWords}
 57 |             readTimeText={readTimeText}
 58 |           />
 59 |           <div className="image-thumbs">{imageThumbs}</div>
 60 |         </div>
 61 |       </Layout>
 62 |     );
 63 |   }
 64 | }
 65 | 
 66 | export default WeeklyArticlesStatsTemplate;
 67 | 
 68 | export const pageQuery = graphql`
 69 |   query ArticlesWeekStatsQuery($currentWeekFilter: Int!) {
 70 |     allPocketArticle(
 71 |       filter: { readWeek: { eq: $currentWeekFilter } }
 72 |       sort: { fields: [favorite, time_read], order: DESC }
 73 |     ) {
 74 |       edges {
 75 |         node {
 76 |           id
 77 |           url
 78 |           title
 79 |           favourite
 80 |           excerpt
 81 |           is_article
 82 |           is_index
 83 |           has_video
 84 |           has_image
 85 |           word_count
 86 |           time_read
 87 |           readWeek
 88 |           articleDomain
 89 |           domainFavicon
 90 |           image {
 91 |             item_id
 92 |             src
 93 |             width
 94 |             height
 95 |           }
 96 |         }
 97 |       }
 98 |     }
 99 |   }
100 | `;
101 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pocket articles history by week
 2 | 
 3 | **[Deployed Site](https://conradj.co.uk/weeklyreads)**
 4 | 
 5 | ## Make Your Own
 6 | 
 7 | 1. Install Gatsby then run `npm install`
 8 | 
 9 | 2. Copy and rename `.env.example` to `.env`
10 | 
11 | 3. Go to https://getpocket.com/developer/ and create a new app to get your consumer key.
12 |    Set `POCKET_CONSUMER_KEY` in `.env` to the pocket consumer key value.
13 | 
14 | 4. Run `node node_modules/node-getpocket/authorise --consumerkey 'YOUR-CONSUMER-KEY'` and point your browser to http://127.0.0.1:8080 to get the `POCKET_ACCESS_TOKEN` string to put in `.env`.
15 | 
16 | (For more info on this process see https://github.com/vicchi/node-getpocket)
17 | 
18 | 5. There are three other `.env` variables, set here because you might want to have different values between dev and prod:
19 | 
20 | * `WEEKS_OF_HISTORY` will set the number of past weeks that will appear in your archive
21 | 
22 | * `API_MAX_RECORDS` will limit the number of records to return, to stop you hitting your api limit. If the number of articles you've archived in the last `WEEKS_OF_HISTORY` is more than this number then the site may exhibit weird behavior.
23 | 
24 | * `GET_CURRENT_WEEKS_ARTICLES_ONLY`: TRUE will only get articles for the this weeks and last (because it may be 1 minute into the week, it will always go back to the previous week). FALSE will get as many articles as it can based on `WEEKS_OF_HISTORY` and `API_MAX_RECORDS`.
25 | 
26 | 6. Finally, run `gatsby develop` to generate your site
27 | 
28 | ## Deploy
29 | 
30 | After deploying an initial build, set `GET_CURRENT_WEEKS_ARTICLES_ONLY` to `FALSE`. If your CI allows it, run a daily build to pick up the articles you read that day.
31 | 
32 | Alternatively your CI/CD pipeline might have an API which you can kick off with a Zapier scheduled task or similar.
33 | 
34 | I also run a weekly build that rebuilds all pages (`GET_CURRENT_WEEKS_ARTICLES_ONLY: FALSE`) so that all pages refresh with any styling or functionality that I've added.
35 | 
36 | ### FAQS
37 | 
38 | 1. Why have you made this?
39 | 
40 |    I've always wanted a way of easily seeing what I've recently read. Pocket gives you an infinitely scrolling list but I like the idea of a easily navigatable weekly digest.
41 | 
42 |    It's also a way of highlighting topics and issues that I find interesting - I could tweet or blog about them, but this is really low friction and gets straight to the source.
43 | 
44 | 2. Why is it a static site?
45 | 
46 |    Reading history doesn't change, so it seems a bit painful to get it from an API, do a load of transformations and stick it in a database, just to read it back out again. [I tried it once](https://github.com/conradj/Reading), and it was quite painful.
47 | 
48 | 3. What plans have you got for this?
49 | 
50 |    Loads! Awesome stats, tags, filter by domain, subject etc. Social stuff, sharing etc. One day it will be a social network, probably bigger than Facebook.
51 |    But, mostly if you're a big Pocket user, I'd be interested in finding out your use case.
52 | 
53 | Lastly, now I've done this, it turns out I mostly read about Tech hiring methods, Facebook/Amazon, Donald Trump and cryptocurrency so maybe it's got an audience of one. Perhaps though, your archive will be more interesting - send me a link!
54 | 


--------------------------------------------------------------------------------
/src/templates/article.css:
--------------------------------------------------------------------------------
  1 | .article {
  2 |   margin: 10px;
  3 |   border: 1px solid #ccc;
  4 |   border-radius: 5px;
  5 |   padding: 10px;
  6 |   position: relative;
  7 |   background-color: #fdfdfd;
  8 |   display: flex;
  9 |   flex-direction: column;
 10 | }
 11 | 
 12 | .article-headline {
 13 |   grid-column: 1 / -1;
 14 | }
 15 | 
 16 | .article-link {
 17 |   color: #3c3a40;
 18 |   text-decoration: none;
 19 |   font-variant: normal;
 20 | }
 21 | 
 22 | .article-title {
 23 |   color: #3c3a40;
 24 |   margin-bottom: 0px;
 25 |   padding-bottom: 0.1rem;
 26 |   overflow-y: hidden;
 27 |   word-break: break-word;
 28 | }
 29 | 
 30 | .article-metadata {
 31 |   margin-bottom: 1.45rem;
 32 |   color: #bfbdc1;
 33 | }
 34 | 
 35 | .article-metadata-read-time {
 36 |   display: none;
 37 | }
 38 | 
 39 | .article-domain {
 40 |   font-size: 0.8rem;
 41 |   /* font-weight: bold; */
 42 |   color: #808080;
 43 |   padding-bottom: 0.5rem;
 44 | }
 45 | 
 46 | .article-domain-favicon {
 47 |   margin-right: 0.25rem;
 48 |   margin-bottom: 0px;
 49 | }
 50 | 
 51 | .article-image {
 52 |   margin-left: auto;
 53 |   margin-right: auto;
 54 | }
 55 | 
 56 | .article-image a {
 57 |   display: block;
 58 |   background-repeat: no-repeat;
 59 |   background-size: cover;
 60 |   background-position: center;
 61 |   width: 100%;
 62 |   height: 100%;
 63 | }
 64 | 
 65 | .article-image img {
 66 |   display: none;
 67 | }
 68 | 
 69 | .article-excerpt {
 70 |   color: #3c3a40;
 71 |   font-size: 0.9rem;
 72 | }
 73 | 
 74 | .article-readmore-container {
 75 |   flex-grow: 1;
 76 | }
 77 | .pocket-button {
 78 |   margin-top: 1rem;
 79 | }
 80 | 
 81 | @media (max-width: 460px) {
 82 |   .article,
 83 |   .wide,
 84 |   .article-headline {
 85 |     border: 0;
 86 |     border-bottom: 1px solid #ccc;
 87 |     display: grid;
 88 |     flex-direction: column;
 89 |     grid-template-columns: 75% 25%;
 90 |     grid-template-rows: auto;
 91 |     margin: 0;
 92 |     padding: 0;
 93 |     border-radius: 0;
 94 |   }
 95 | 
 96 |   .article-domain {
 97 |     padding: 0.45rem 1.0875rem 0.45rem;
 98 |     grid-column: 1 / 2;
 99 |   }
100 | 
101 |   .article-excerpt,
102 |   .article-readmore-container {
103 |     display: none;
104 |   }
105 | 
106 |   .article-link {
107 |     /* autoprefixer: off */
108 |     grid-row: 2 / 3;
109 |   }
110 | 
111 |   .article-title {
112 |     padding: 0px 1.0875rem 0.45rem;
113 |     font-size: 0.9rem;
114 |   }
115 | 
116 |   .article-image {
117 |     margin: unset;
118 |     width: unset;
119 |     height: unset;
120 |     /* autoprefixer: off */
121 |     grid-row: 1 / 4;
122 |     grid-column: 2 / 3;
123 |   }
124 | 
125 |   .article-no-image .article-link {
126 |     grid-column: 1 / -1;
127 |   }
128 | 
129 |   .article-metadata {
130 |     margin-bottom: 0rem;
131 |     color: #bfbdc1;
132 |     /* autoprefixer: off */
133 |     grid-row: 3 / 4;
134 |     grid-column: 1 / 2;
135 |     padding: 0rem 1.0875rem 0.2rem;
136 |   }
137 | }
138 | 
139 | @media (min-width: 460px) {
140 |   .article-image a {
141 |     display: none;
142 |   }
143 | 
144 |   .article-image img {
145 |     display: block;
146 |   }
147 | 
148 |   .article-metadata-read-time {
149 |     display: inline-block;
150 |   }
151 | }
152 | 
153 | @media (min-width: 700px) {
154 |   .wide {
155 |     grid-column: auto / span 2;
156 |   }
157 | }
158 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles-summary.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { graphql } from "gatsby";
  3 | import Layout from "../components/layout";
  4 | import "./weekly-articles-summary.css";
  5 | import Metadata from "./metadata";
  6 | import format from "date-fns/format";
  7 | 
  8 | class WeeklyArticlesSummaryTemplate extends React.Component {
  9 |   render() {
 10 |     let totalWords = 0;
 11 |     let favouriteArticles = 0;
 12 |     const isData = this.props.data && this.props.data.allPocketArticle;
 13 |     let thisWeek;
 14 |     let data;
 15 |     if (isData) {
 16 |       data = this.props.data.allPocketArticle.edges;
 17 |       thisWeek = parseInt(data[0].node.readWeek);
 18 |     }
 19 | 
 20 |     const currentWeekDate = format(new Date(thisWeek * 1000), "Do MMMM YYYY");
 21 |     const totalArticles = data ? data.length : 0;
 22 |     const thumbSize = Math.sqrt(1000 * 395 / totalArticles);
 23 |     const imageThumbs = isData
 24 |       ? data.map((edge, index) => {
 25 |           let article = edge.node;
 26 |           if (article.title && article.url && article.word_count > 0) {
 27 |             totalWords += article.word_count;
 28 |             favouriteArticles += article.favourite ? 1 : 0;
 29 |           }
 30 | 
 31 |           if ((article.has_image, article.image)) {
 32 |             return (
 33 |               <div
 34 |                 key={index}
 35 |                 className="metadata-image"
 36 |                 style={{
 37 |                   width: `${thumbSize}px`,
 38 |                   height: `${thumbSize}px`,
 39 |                   backgroundImage: `url(${article.image.src.replace(
 40 |                     /^http:\/\//i,
 41 |                     "https://"
 42 |                   )})`
 43 |                 }}
 44 |               />
 45 |             );
 46 |           }
 47 |           return null;
 48 |         })
 49 |       : null;
 50 | 
 51 |     const readTime = parseInt(totalWords / 275);
 52 |     const readTimeText = readTime < 2 ? "1 minute" : readTime + " minutes";
 53 | 
 54 |     return (
 55 |       <Layout>
 56 |         <div className="weekly-articles-summary-container">
 57 |           <div
 58 |             className="image-thumbs"
 59 |             style={{
 60 |               gridTemplateColumns: `repeat(auto-fit,minmax(${thumbSize}px,1fr))`,
 61 |               gridTemplateRows: `repeat(auto-fit,minmax(${thumbSize}px,1fr))`
 62 |             }}
 63 |           >
 64 |             {imageThumbs}
 65 |             <div className="image-overlay" />
 66 |           </div>
 67 |           <div className="weekly-summary">
 68 |             <h1>Stories for {currentWeekDate}</h1>
 69 |             <Metadata
 70 |               totalArticles={totalArticles}
 71 |               favouriteArticles={favouriteArticles}
 72 |               totalWords={totalWords}
 73 |               readTimeText={readTimeText}
 74 |             />
 75 |           </div>
 76 |         </div>
 77 |       </Layout>
 78 |     );
 79 |   }
 80 | }
 81 | 
 82 | export default WeeklyArticlesSummaryTemplate;
 83 | 
 84 | export const pageQuery = graphql`
 85 |   query ArticlesWeekSummaryQuery($currentWeekFilter: Int!) {
 86 |     allPocketArticle(
 87 |       filter: { readWeek: { eq: $currentWeekFilter } }
 88 |       sort: { fields: [favorite, time_read], order: DESC }
 89 |     ) {
 90 |       edges {
 91 |         node {
 92 |           id
 93 |           url
 94 |           title
 95 |           favourite
 96 |           excerpt
 97 |           is_article
 98 |           is_index
 99 |           has_video
100 |           has_image
101 |           word_count
102 |           time_read
103 |           readWeek
104 |           articleDomain
105 |           domainFavicon
106 |           image {
107 |             item_id
108 |             src
109 |             width
110 |             height
111 |           }
112 |         }
113 |       }
114 |     }
115 |   }
116 | `;
117 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Implement Gatsby's Node APIs in this file.
  3 |  *
  4 |  * See: https://www.gatsbyjs.org/docs/node-apis/
  5 |  */
  6 | const path = require("path");
  7 | 
  8 | const startOfWeek = require("date-fns/start_of_week");
  9 | const endOfWeek = require("date-fns/end_of_week");
 10 | const getTime = require("date-fns/get_time");
 11 | var format = require("date-fns/format");
 12 | // You can delete this file if you're not using it
 13 | // Implement the Gatsby API “createPages”. This is called once the
 14 | // data layer is bootstrapped to let plugins create pages from data.
 15 | exports.createPages = ({ actions, graphql }) => {
 16 |   const { createPage } = actions;
 17 | 
 18 |   return new Promise((resolve, reject) => {
 19 |     const weeklyArticlesTemplate = path.resolve(
 20 |       `src/templates/weekly-articles.js`
 21 |     );
 22 | 
 23 |     const weeklyArticlesStatsTemplate = path.resolve(
 24 |       `src/templates/weekly-articles-stats.js`
 25 |     );
 26 | 
 27 |     const weeklyArticlesSummaryTemplate = path.resolve(
 28 |       `src/templates/weekly-articles-summary.js`
 29 |     );
 30 |     // Query for markdown nodes to use in creating pages.
 31 |     resolve(
 32 |       graphql(
 33 |         `
 34 |           {
 35 |             allPocketArticle(sort: { fields: readWeek }) {
 36 |               edges {
 37 |                 node {
 38 |                   id
 39 |                   url
 40 |                   title
 41 |                   favourite
 42 |                   excerpt
 43 |                   is_article
 44 |                   is_index
 45 |                   has_video
 46 |                   has_image
 47 |                   word_count
 48 |                   time_read
 49 |                   readWeek
 50 |                   articleDomain
 51 |                   domainFavicon
 52 |                   image {
 53 |                     item_id
 54 |                     src
 55 |                     width
 56 |                     height
 57 |                   }
 58 |                 }
 59 |               }
 60 |             }
 61 |           }
 62 |         `
 63 |       ).then(result => {
 64 |         if (result.errors) {
 65 |           reject(result.errors);
 66 |         }
 67 | 
 68 |         // default to create a page for this week in case there are no articles
 69 |         let firstArticleReadTime = format(new Date(), "X");
 70 | 
 71 |         if (
 72 |           result.data &&
 73 |           result.data.allPocketArticle &&
 74 |           result.data.allPocketArticle.edges
 75 |         ) {
 76 |           // if there are results then we'll create a page per week starting from that first article
 77 |           firstArticleReadTime = parseInt(
 78 |             result.data.allPocketArticle.edges[0].node.time_read
 79 |           );
 80 |         }
 81 |         // first week to create
 82 |         let startOfWeekTime = parseInt(
 83 |           format(startOfWeek(new Date(firstArticleReadTime * 1000)), "X")
 84 |         );
 85 | 
 86 |         // get all weeks up till now
 87 |         while (startOfWeekTime < parseInt(format(new Date(), "X"))) {
 88 |           createPage({
 89 |             path: startOfWeekTime + "",
 90 |             component: weeklyArticlesTemplate,
 91 |             context: {
 92 |               currentWeekFilter: startOfWeekTime
 93 |             }
 94 |           });
 95 |           createPage({
 96 |             path: `${startOfWeekTime}/stats`,
 97 |             component: weeklyArticlesStatsTemplate,
 98 |             context: {
 99 |               currentWeekFilter: startOfWeekTime
100 |             }
101 |           });
102 | 
103 |           createPage({
104 |             path: `${startOfWeekTime}/summary`,
105 |             component: weeklyArticlesSummaryTemplate,
106 |             context: {
107 |               currentWeekFilter: startOfWeekTime
108 |             }
109 |           });
110 |           // get next week timestamp
111 |           startOfWeekTime = startOfWeekTime + 604800;
112 |         }
113 | 
114 |         createPage({
115 |           path: "thisweek",
116 |           component: weeklyArticlesTemplate,
117 |           context: {
118 |             currentWeekFilter: startOfWeekTime - 604800
119 |           }
120 |         });
121 | 
122 |         createPage({
123 |           path: "lastweek",
124 |           component: weeklyArticlesTemplate,
125 |           context: {
126 |             currentWeekFilter: startOfWeekTime - 604800 - 604800
127 |           }
128 |         });
129 |       })
130 |     );
131 |   });
132 | };
133 | 


--------------------------------------------------------------------------------
/src/templates/article.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import "./article.css";
  4 | import format from "date-fns/format";
  5 | // import PocketButton from "../components/PocketButton";
  6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  7 | import { faExternalLinkSquareAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkSquareAlt";
  8 | 
  9 | class ArticleTemplate extends React.Component {
 10 |   saveGAEvent(event) {
 11 |     if (process.env.NODE_ENV === "production" && typeof ga === "function") {
 12 |       window.ga("send", {
 13 |         hitType: "event",
 14 |         eventCategory: event.target.hostname,
 15 |         eventAction: "read",
 16 |         eventLabel: event.target.pathname
 17 |       });
 18 |     }
 19 |   }
 20 | 
 21 |   render() {
 22 |     const {
 23 |       index,
 24 |       title,
 25 |       has_image,
 26 |       image,
 27 |       excerpt,
 28 |       url,
 29 |       favourite,
 30 |       word_count,
 31 |       articleDomain,
 32 |       domainFavicon,
 33 |       time_read
 34 |     } = this.props;
 35 |     const classNames = ["article"];
 36 | 
 37 |     if (favourite && has_image) {
 38 |       classNames.push("article-headline");
 39 |     } else if (favourite || has_image) {
 40 |       classNames.push("wide");
 41 |     }
 42 | 
 43 |     if (!has_image) {
 44 |       classNames.push("article-no-image");
 45 |     }
 46 | 
 47 |     const readTime = parseInt(word_count / 275);
 48 |     const readTimeText = readTime < 2 ? "1 minute" : readTime + " minutes";
 49 |     const style = { zIndex: 100 - index };
 50 |     return (
 51 |       <div id={url} className={classNames.join(" ")} style={style}>
 52 |         <div className="article-domain">
 53 |           <img
 54 |             className="article-domain-favicon"
 55 |             src={domainFavicon}
 56 |             alt={`${articleDomain} favicon`}
 57 |           />
 58 |           {articleDomain}
 59 |         </div>
 60 |         <a
 61 |           href={url}
 62 |           target="_blank"
 63 |           onClick={event => this.saveGAEvent(event)}
 64 |           className="article-link"
 65 |           rel="noopener noreferrer"
 66 |         >
 67 |           <h2 className="article-title">{title}</h2>
 68 |         </a>
 69 |         <div className="article-metadata">
 70 |           <small>
 71 |             {new Intl.NumberFormat().format(word_count)} words | {readTimeText}{" "}
 72 |             <span className="article-metadata-read-time">
 73 |               | {format(new Date(time_read * 1000), "dddd ha")}
 74 |             </span>
 75 |             {favourite ? " | Favourited" : ""}
 76 |           </small>
 77 |           {/* <PocketButton url={url} count="horizontal" /> */}
 78 |         </div>
 79 | 
 80 |         {image ? (
 81 |           <div className="article-image">
 82 |             <a
 83 |               href={url}
 84 |               target="_blank"
 85 |               onClick={event => this.saveGAEvent(event)}
 86 |               className="article-link"
 87 |               style={{
 88 |                 backgroundImage: `url(${image.src.replace(
 89 |                   /^http:\/\//i,
 90 |                   "https://"
 91 |                 )})`
 92 |               }}
 93 |               rel="noopener noreferrer"
 94 |             >
 95 |               &nbsp;
 96 |             </a>
 97 |             <img
 98 |               onError={e => {
 99 |                 e.target.src =
100 |                   "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
101 |                 e.target.alt = "";
102 |                 e.target.style.display = "none";
103 |               }}
104 |               src={image.src.replace(/^http:\/\//i, "https://")}
105 |               alt={title}
106 |             />
107 |           </div>
108 |         ) : null}
109 |         <p className="article-excerpt">{excerpt}</p>
110 |         <div className="article-readmore-container">
111 |           <a
112 |             href={url}
113 |             target="_blank"
114 |             onClick={event => this.saveGAEvent(event)}
115 |             className="link-effect"
116 |             rel="noopener noreferrer"
117 |           >
118 |             <span>Read more</span>
119 |             &nbsp;<FontAwesomeIcon icon={faExternalLinkSquareAlt} />
120 |           </a>
121 |         </div>
122 |       </div>
123 |     );
124 |   }
125 | }
126 | 
127 | ArticleTemplate.propTypes = {
128 |   index: PropTypes.number,
129 |   title: PropTypes.string,
130 |   has_image: PropTypes.bool,
131 |   image: PropTypes.object,
132 |   excerpt: PropTypes.string,
133 |   url: PropTypes.string,
134 |   domainFavicon: PropTypes.string,
135 |   articleDomain: PropTypes.string,
136 |   favourite: PropTypes.bool,
137 |   word_count: PropTypes.number,
138 |   time_read: PropTypes.number
139 | };
140 | 
141 | export default ArticleTemplate;
142 | 


--------------------------------------------------------------------------------
/src/templates/weekly-articles.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { graphql } from "gatsby";
  3 | import Layout from "../components/layout";
  4 | import ArticleTemplate from "./article";
  5 | import Metadata from "./metadata";
  6 | import Navigation from "../components/WeekNav";
  7 | import SocialCard from "../components/SocialCard";
  8 | import format from "date-fns/format";
  9 | import startOfWeek from "date-fns/start_of_week";
 10 | 
 11 | import "./weekly-articles.css";
 12 | 
 13 | class WeeklyArticlesTemplate extends React.Component {
 14 |   constructor(props) {
 15 |     super(props);
 16 |     const renderForScreenshot = this.props.location.search === "?screenshot";
 17 |     this.state = {
 18 |       renderForScreenshot: renderForScreenshot
 19 |     };
 20 |   }
 21 | 
 22 |   render() {
 23 |     const { renderForScreenshot } = this.state;
 24 |     console.log(this.props.location.href);
 25 |     let totalWords = 0;
 26 |     let totalArticles = 0;
 27 |     let favouriteArticles = 0;
 28 |     let thisWeek = parseInt(
 29 |       Date.parse(format(startOfWeek(new Date()), "YYYY-MM-DDT00:00:00.000")) /
 30 |         1000
 31 |     );
 32 |     const isData = this.props.data && this.props.data.allPocketArticle;
 33 |     let data;
 34 |     if (isData) {
 35 |       data = this.props.data.allPocketArticle.edges.sort((a, b) => {
 36 |         if (b.node.favourite < a.node.favourite) {
 37 |           return -1;
 38 |         }
 39 | 
 40 |         if (b.node.favourite > a.node.favourite) {
 41 |           return 1;
 42 |         }
 43 |         return b.node.word_count - a.node.word_count;
 44 |       });
 45 |       thisWeek = parseInt(data[0].node.readWeek);
 46 |     }
 47 |     const weekDate = format(new Date(thisWeek * 1000), "Do MMMM YYYY");
 48 | 
 49 |     const articleList = isData ? (
 50 |       data.map((edge, index) => {
 51 |         let article = edge.node;
 52 |         if (article.title && article.url && article.word_count > 0) {
 53 |           totalWords += article.word_count;
 54 |           totalArticles++;
 55 |           favouriteArticles += article.favourite ? 1 : 0;
 56 |           return (
 57 |             <ArticleTemplate key={article.title} {...article} index={index} />
 58 |           );
 59 |         } else {
 60 |           console.warn("Article not loaded", article);
 61 |         }
 62 |         return null;
 63 |       })
 64 |     ) : (
 65 |       <div>No Articles read yet this week</div>
 66 |     );
 67 | 
 68 |     const readTime = parseInt(totalWords / 275);
 69 |     const readTimeText = readTime < 2 ? "1 minute" : readTime + " minutes";
 70 |     data = renderForScreenshot ? [data[0]] : data;
 71 |     return (
 72 |       <Layout showCTA={true}>
 73 |         <div>
 74 |           <SocialCard
 75 |             url={`https://conradj.co.uk/weeklyarticles/${thisWeek}`}
 76 |             title={`Week of ${weekDate}: Stories I've read`}
 77 |             description={`${totalArticles} articles, ${new Intl.NumberFormat().format(
 78 |               totalWords
 79 |             )} words`}
 80 |             imageUrl={`https://puppeteer-screenshot.conradsjackson.now.sh/https://conradj.co.uk/weeklyreads/${thisWeek}/summary?width=1000&height=500`}
 81 |             imageAlt={`Stories @conradj has read this week. ${totalArticles} articles, ${new Intl.NumberFormat().format(
 82 |               totalWords
 83 |             )} words.`}
 84 |           />
 85 |           <div
 86 |             className={`week-container ${
 87 |               renderForScreenshot ? "screenshot" : ""
 88 |             }`}
 89 |           >
 90 |             <Navigation currentWeek={thisWeek} />
 91 |             <div className="page-main-container">
 92 |               <header className="week-header">
 93 |                 <Metadata
 94 |                   totalArticles={totalArticles}
 95 |                   favouriteArticles={favouriteArticles}
 96 |                   totalWords={totalWords}
 97 |                   readTimeText={readTimeText}
 98 |                 />
 99 |               </header>
100 |               <div>{articleList}</div>
101 |             </div>
102 |           </div>
103 |         </div>
104 |       </Layout>
105 |     );
106 |   }
107 | }
108 | 
109 | export default WeeklyArticlesTemplate;
110 | 
111 | export const pageQuery = graphql`
112 |   query ArticlesWeekQuery($currentWeekFilter: Int!) {
113 |     allPocketArticle(
114 |       filter: { readWeek: { eq: $currentWeekFilter } }
115 |       sort: { fields: [favorite, time_read], order: DESC }
116 |     ) {
117 |       edges {
118 |         node {
119 |           id
120 |           url
121 |           title
122 |           favourite
123 |           excerpt
124 |           is_article
125 |           is_index
126 |           has_video
127 |           has_image
128 |           word_count
129 |           time_read
130 |           readWeek
131 |           articleDomain
132 |           domainFavicon
133 |           image {
134 |             item_id
135 |             src
136 |             width
137 |             height
138 |           }
139 |         }
140 |       }
141 |     }
142 |   }
143 | `;
144 | 


--------------------------------------------------------------------------------