Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
gatsby-theme-contentful
Advanced tools
1. Auth0 - For authentication if the flag `isAuthApp` is set to true 2. Material-UI - For pre-built components and easy styling of an application 3. Theme-UI - Used with gatsby for theme level styling and a compliment to Material-UI 4. MDX - For page r
isAuthApp
is set to true/content
directory)You can just add a section named Placeholder Content with an Image and the CMS will load correctly
The data schema is as follows:
Create an Authenticated Site
In order to get an authentication enabled site up and going follow these steps:
Open a terminal of your choice (Terminal on mac, Command Prompt, Powershell or Bash on Windows)
Navigate to the directory where you store your repositories
Example:
cd Users/[username]/source
Clone the authentication demo
git clone https://github.com/ethriel3695/authentication-demo
Open the source code and start editing!
authentication-demo
directory in your code editor of choicecontent
folderpost
folderfirstPost
png
, jpg
or webp
formatmdx
file firstPost.mdx
mkdir [projectName]
cd [projectName]
// package.json
{
"private": true,
"name": "demo",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby clean && gatsby develop",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
},
"dependencies": {
"gatsby": "^2.19.12",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby-theme-contentful": "^0.0.16"
},
"devDependencies": {
"prettier": "^1.19.1"
}
}
npm i gatsby gatsby-theme-contentful react react-dom
In addition to the theme options, there are a handful of items you must modify via the siteMetadata
object in your site's gatsby-config.js
The Social tags, if left as an empty string will not appear in the footer
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-theme-contentful',
options: {},
},
],
siteMetadata: {
title: `Site Title`,
author: `Name of the Site Creator`,
description: `Site Description`,
greeting: `A more detailed description or greeting for the home page`,
copyright: `Copyright message unique to site or company`,
loginDesc:
'If isAuthApp then this is the name of the button to login (ex: Login, Login / Signup)',
isAuthApp: false, // default is true (If true, enables authentication)
newsletterTitle: 'Text description of the newsletter button', // If empty no newsletter shows up in Header
social: {
facebook: 'altcampus',
twitter: 'altcampus',
github: 'ethriel3695',
email: 'test@example.com',
},
externalLinks: [{ label: 'Google', link: 'https://www.google.com' }],
},
};
Authentication now works out of the box if you provide the credentials in the .env.development
and .env.production
files
Also, in gatsby-config.js
the isAuthApp
key needs to be set to true
Key | Default value | Description |
---|---|---|
contentPath | /content/post | Directory for blog posts |
assetPath | /content/assets | Location of assets |
logo | /content/assets/logo | An image in the logo directory will replace the title in the header with a brand logo instead |
newsletter | /content/assets/newsletter | A pdf in this directory will provide a static asset for a newsletter with the newsletter link in the header |
files | /content/assets/files | A directory to store files for use across the website |
mdx | true | MDX renders the additional pages in the site currently and will be used in the future alongside contentful |
NOTE:
Folder structure samplePost/images/[image]
, samplePost.mdx
---
slug: /sample
label: Navigation Text
title: Title of post
description: Description of post
date: Date post is written (Ex. 2020-02-07) (Not Required)
categories: ['react', 'node'] (Not currently rendered but in progress)
published: true
---
You can now create a Page in contentful and the page/post will be generated in the application
gatsby-node
object
allContentfulPage {
nodes {
title
pageType
slug
section {
id
order
title
image {
description
fluid(maxWidth: 1904) {
src
srcSet
srcSetWebp
sizes
}
}
description {
json
}
item {
title
subHeader
link
slug
}
}
}
}
env.development
file to hold your environment variablesenv.production
to test when running npm run build && npm run serve
// env.development
// Auth0 variables required only if isAuthApp set to true in gatsby-config.js
GATSBY_AUTH0_DOMAIN = domain.auth0.com; // Replace domain with your auth0 domain
GATSBY_AUTH0_CLIENT_ID = secret_client_id; // This ID can be found after creating an Application within Auth0 within the Application tab
GATSBY_AUTH0_CALLBACK_URL = `http://localhost:8000/callback`; //Remove the literal string character when replacing the callback url
GATSBY_AUTH0_REDIRECT_URL = `http://localhost:8000`; //Remove the literal string character when replacing the callback url
// Google Maps variables required only if you want to use the map
GATSBY_GOOGLE_MAPS_API_KEY = `Google maps api key`;
GATSBY_GOOGLE_LATITUDE = `Latitude position to render map marker`;
GATSBY_GOOGLE_LONGITUDE = `Longitude position to render map marker`;
GATSBY_GOOGLE_MAP_DESC = `Description of map marker`;
// Google calendar url if you want to embed the calendar
GATSBY_GOOGLE_CALENDAR_URL = `https://calendar.google.com/calendar/embed?src=[emailTextBefore@symbol]%40gmail.com&ctz=America%2FBoise`;
// Contentful credentials if you want to use contentful
GATSBY_CONTENTFUL_SPACEID = `space id from contentful`;
GATSBY_CONTENTFUL_API = `special token from contentful`;
GATSBY_FORM_API = `URL for submitting form contents REST API`;
GATSBY_FORM_GET_API = `URL for getting form contents REST API`;
GATSBY_GOOGLE_ANALYTICS_ID = `Google Analytics ID`;
// Example of using google map
import GoogleMaps from 'gatsby-theme-contentful/src/components/Maps/RegularGoogleMap';
<GoogleMaps />;
// Example of using google calendar
import GoogleCalendar from 'gatsby-theme-contentful/src/components/Calendar/GoogleCalendar';
<GoogleCalendar />;
/src
: You will probably want to customize your site to personalize it. The files within /src/gatsby-theme-contentful
shadow, or override, the files of the same name in the gatsby-theme-contentful
package.
To learn more about this, check out the guide to getting started with using the blog theme starter.
Example
: src/gatsby-theme-acontentful/components/layout.css
and then edit the following hex values for color scheme changes:
html,
body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.appHeader {
background: linear-gradient(
to bottom,
#02075d 0%,
#02075d 19%,
#02075d 30%,
#02075d 100%
);
box-shadow: inset 0 1px 6px 0 #040daf;
flex-grow: 1;
margin: auto 0;
}
.fontAwesomeFooterIcon {
color: #040daf;
cursor: pointer;
text-decoration: none;
text-shadow: 2px 2px #282828;
}
.socialLink {
cursor: pointer;
font-size: 25px;
margin: 1rem 1rem;
text-decoration: none;
}
.externalLink {
color: #040daf;
font-size: 18px;
margin: 1rem 1rem;
text-decoration: none;
text-shadow: 2px 2px #dddddd;
}
.gitignore
: This file tells git which files it should not track / not maintain a version history for.
.prettierrc
: This file tells Prettier which configuration it should use to format files.
gatsby-config.js
: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. When using themes, it's where you'll include the theme plugin, and any customization options the theme provides.
LICENSE
: Gatsby is licensed under the MIT license.
FAQs
1. Auth0 - For authentication if the flag `isAuthApp` is set to true 2. Material-UI - For pre-built components and easy styling of an application 3. Theme-UI - Used with gatsby for theme level styling and a compliment to Material-UI 4. MDX - For page r
The npm package gatsby-theme-contentful receives a total of 8 weekly downloads. As such, gatsby-theme-contentful popularity was classified as not popular.
We found that gatsby-theme-contentful demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.