Git Product home page Git Product logo

cascadingnews-gatsby's Introduction

Netlify Status

Cascading News

Cascading News is a website whose purpose is to provide the latest news and tutorials on frontend development.

🚀 How it's built

This site is built using WordPress for the backend, Gatsby + React for the statically generated frontend, and Netlify for awesome hosting and CI.

🧩 Contributing

Useful links

🔀 Git flow

  1. Fork the repo on GitHub.
  2. Create a Feature branch from develop (ex: feature/add-cool-stuff)
  3. Commit changes to this branch.
  4. Push your work back up to your fork.
  5. Submit a Pull request so that we can review your changes and merge it.

Any Pull Request is automatically deployed on Netlify, see Deploy Previews.

Once merged, develop branch is deployed on Netlify. All develop builts are accessible here.

[For repository admins] How to publish a new release:

  1. Create a new Release branch from develop (ex: release/1.5.0)
  2. On this branch, update version number in package.json and proceed to last fixes.
  3. Merge the release branch on master and develop.

Master branch in automatically built by Netlify and deployed on cascading-news.com. All master builts are accessible here

⚛️ Set up

If you want to contribute to the frontend code, here's how to set up the project locally.

  1. Checkout this project
  2. Create .env.development containing:
    GATSBY_WP_URL=admin.cascading-news.com
    GATSBY_WP_PROTOCOL=https
    GATSBY_REPLACEMENT_URL=http://localhost:8000
  3. Install the Gatsby CLI
    npm install -g gatsby-cli
    
  4. Start the site in develop mode.
    $ yarn develop
  5. Site is now running on http://localhost:8000, and GraphQL client on http://localhost:8000/__graphql.

🔗Links

Unordered list of projects and libraries used for this:

cascadingnews-gatsby's People

Contributors

kaayru avatar renovate-bot avatar

Stargazers

 avatar

Watchers

 avatar  avatar

cascadingnews-gatsby's Issues

Fix CSS flash effect

When loading the site, it first loads with partial CSS (without the CSS in styled component).

Add source below each post

Add source (domain.ext) at the left of the date : By {source} on {date}.
Example : "By alligator.io on March 24, 2020".

Regexp to use: (?P<domain>[a-z0-9][a-z0-9\-]{1,63}\.[a-z\.]{2,6})

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm eslint-loader Unavailable
npm gatsby-image Unavailable

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Update dependency @types/gray-percentage to v2.0.3
  • Update dependency @types/react-helmet to v5.0.27
  • Update dependency @types/styled-components to v5.1.34
  • Update dependency @types/typography to v0.16.7
  • Update dependency @types/typography-breakpoint-constants to v0.16.2
  • Update dependency gatsby-plugin-root-import to v2.0.9
  • Update typography-js monorepo to v0.16.23 (react-typography, typography)
  • Update dependency babel-plugin-styled-components to v1.13.3
  • Update dependency dotenv to v8.6.0
  • Update dependency eslint to v7.32.0
  • Update dependency eslint-config-prettier to v6.15.0
  • Update dependency gatsby-plugin-mailchimp to v5.2.2
  • Update dependency gatsby-plugin-react-svg to v3.3.0
  • Update dependency husky to v4.3.8
  • Update dependency styled-components to v5.3.11
  • Update react monorepo (eslint-plugin-react-hooks, react, react-dom, react-test-renderer)
  • Update testing-library monorepo (@testing-library/jest-dom, @testing-library/react)
  • Update dependency babel-plugin-styled-components to v2
  • Update dependency dotenv to v16
  • Update dependency eslint to v9
  • Update dependency eslint-config-airbnb to v19
  • Update dependency eslint-config-airbnb-base to v15
  • Update dependency eslint-config-prettier to v9
  • Update dependency eslint-plugin-jest to v28
  • Update dependency eslint-plugin-prettier to v5
  • Update dependency gatsby-plugin-eslint to v4
  • Update dependency husky to v9
  • Update dependency prettier to v3
  • Update dependency styled-components to v6
  • Update dependency typescript to v5
  • Update gatsby monorepo (major) (babel-preset-gatsby, gatsby, gatsby-image, gatsby-plugin-feed, gatsby-plugin-google-analytics, gatsby-plugin-manifest, gatsby-plugin-react-helmet, gatsby-plugin-sitemap, gatsby-plugin-styled-components, gatsby-plugin-typescript, gatsby-plugin-typography, gatsby-remark-copy-linked-files, gatsby-remark-images, gatsby-remark-responsive-iframe, gatsby-remark-smartypants, gatsby-source-filesystem, gatsby-transformer-remark)
  • Update graphqlcodegenerator monorepo (major) (@graphql-codegen/cli, @graphql-codegen/introspection, @graphql-codegen/typescript, @graphql-codegen/typescript-operations)
  • Update jest monorepo to v29 (major) (@types/jest, babel-jest, jest, ts-jest)
  • Update react monorepo to v18 (major) (react, react-dom, react-test-renderer)
  • Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
  • Update typefaces monorepo to v1 (major) (typeface-merriweather, typeface-montserrat)
  • Update typescript-eslint monorepo to v8 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
  • 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

circleci
.circleci/config.yml
github-actions
.github/workflows/main.yml
npm
package.json
  • babel-plugin-styled-components ^1.10.7
  • dotenv ^8.0.0
  • esm ^3.2.25
  • gatsby ^2.13.64
  • gatsby-image ^2.2.8
  • gatsby-plugin-feed ^2.3.6
  • gatsby-plugin-google-analytics ^2.1.7
  • gatsby-plugin-mailchimp ^5.1.2
  • gatsby-plugin-manifest ^2.3.5
  • gatsby-plugin-react-helmet ^3.1.3
  • gatsby-plugin-react-svg ^3.0.0
  • gatsby-plugin-sitemap ^2.3.4
  • gatsby-plugin-styled-components ^3.2.1
  • gatsby-plugin-typescript ^2.3.1
  • gatsby-plugin-typography ^2.3.2
  • gatsby-remark-copy-linked-files ^2.1.6
  • gatsby-remark-images ^3.1.11
  • gatsby-remark-responsive-iframe ^2.2.4
  • gatsby-remark-smartypants ^2.1.2
  • gatsby-source-filesystem ^2.1.9
  • gatsby-source-wordpress ^3.1.15
  • gatsby-transformer-remark ^2.6.14
  • react ^16.9.0
  • react-dom ^16.9.0
  • react-helmet ^5.2.1
  • react-typography ^0.16.19
  • styled-components ^5.0.0
  • typeface-merriweather 0.0.72
  • typeface-montserrat 0.0.75
  • typography ^0.16.19
  • typography-breakpoint-constants ^0.16.19
  • @babel/preset-typescript 7.10.1
  • @graphql-codegen/cli 1.15.0
  • @graphql-codegen/introspection 1.15.0
  • @graphql-codegen/typescript 1.15.0
  • @graphql-codegen/typescript-operations 1.15.0
  • @testing-library/jest-dom 5.9.0
  • @testing-library/react 10.0.4
  • @types/color 3.0.1
  • @types/gray-percentage 2.0.0
  • @types/jest 25.2.3
  • @types/react-helmet 5.0.16
  • @types/styled-components 5.1.0
  • @types/typography 0.16.3
  • @types/typography-breakpoint-constants 0.16.0
  • @typescript-eslint/eslint-plugin 3.0.1
  • @typescript-eslint/parser 3.0.1
  • babel-jest 26.0.1
  • babel-preset-gatsby 0.4.7
  • eslint 7.1.0
  • eslint-config-airbnb 18.1.0
  • eslint-config-airbnb-base 14.1.0
  • eslint-config-prettier 6.11.0
  • eslint-import-resolver-alias 1.1.2
  • eslint-loader 4.0.2
  • eslint-plugin-import 2.20.2
  • eslint-plugin-jest 23.13.2
  • eslint-plugin-jsx-a11y 6.2.3
  • eslint-plugin-prettier 3.1.3
  • eslint-plugin-react 7.20.0
  • eslint-plugin-react-hooks 4.0.4
  • gatsby-plugin-eslint 2.0.8
  • gatsby-plugin-root-import 2.0.5
  • husky 4.2.5
  • identity-obj-proxy 3.0.0
  • jest 26.0.1
  • prettier 1.19.1
  • react-test-renderer 16.13.1
  • ts-jest 26.0.0
  • typescript 3.8.3

  • Check this box to trigger a request for Renovate to run again on this repository

Subscribe to mailing list

Allow user to subscribe to our weekly newsletter.

  •  Add link in menu "Mailing list"
  •  Add page Mailing List containg a form with a single field email, and a button Subscribe to mailing list
  •  On submit, call Mailchimp endpoint, and display success or error message to user.
  •  Add link to manage subscriptions on Mailchimp

Mailchimp Gatsby plugin : https://www.gatsbyjs.org/packages/gatsby-plugin-mailchimp/
Mailchimp endpoint: https://cascading-news.us19.list-manage.com/subscribe/post?u=c1ab33a63729c222c2676ad0b&amp;id=647c8d2bcb

Force secure links

For security reasons, we do not allow unsecure content to be linked on the site.

Expected: we should replace every occurence of "http://" in links by "https://".

Customize footer

©2013 - 2020. Built with Wordpress + Gatsby + Netlify

Do not use Wordpress widget.

Support add to screen feature

Use https://www.gatsbyjs.org/docs/add-a-manifest-file/

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: 'Cascading News',
    short_name: 'CN',
    start_url: '/',
    background_color: '#f7f7f7',
    theme_color: '#ff483b',
    display: 'browser',
    icons: [
      {
        src: 'static/favicon-app-192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'static/favicon-app-256.png',
        sizes: '256x256',
        type: 'image/png',
      },
      {
        src: 'static/favicon-app-512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
    crossOrigin: `use-credentials`,
  },
}

favicon-app-192
favicon-app-256
favicon-app-512

Add title for tags page

  • Add a title on tag pages : "{tagName} ({count} articles)" , as <h1>
  • In Homepage, add site description as page title, as <h1>
  • In header, site title should be a <p>

Add load more button

  • Add a Load More button below the posts list
  • Limit to 20 posts per page
  • On click on Load More, dynamically load the 20 next posts
  • Should be on index page and on all tag pages

Update About page and README.md

Mention github repo

Cascading News is a side project built using Wordpress's REST API, Gatsby and react for the (static) frontend, and Netlify for hosting.

Remove posts from static content

Gatsby is currently generating static page for all posts, which we do not need.

Acceptance :

  • Remove posts from static content
  • Wordpress__Post should still be queryable in GraphQL

Improve SEO

  • Set title, description and H1 for HP
  • Set title, description and H1 for tag pages
  • Add sitemap.xml (Moved to its own issue)
  • No follow on outbound links
  • Add hreflang meta
  • Add schema.org microdata ?
  • Add og:url meta

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.