jafaircl / gatsby-plugin-amp Goto Github PK
View Code? Open in Web Editor NEWGatsby plugin for creating AMP pages
Gatsby plugin for creating AMP pages
I am trying to style my amp-template however it is so difficult to do so due to the fact that I cant do it while in gatsby develop
. I have to gatsby build
in order to see any sort of changes.
Is there an easier way to do this?
I'm working on this gatsby template https://github.com/kalwalt/gatsby-starter-i18n-bulma in the header of the page i implemented an amp-accordion
and i have set the disable-session-states:
<amp-accordion class="accordion-menu" disable-session-states>
but when gatsby build the page attach a true value
<amp-accordion class="accordion-menu" disable-session-states="true">
and i get this error on the Amp validator:
The attribute 'disable-session-states' in tag 'amp-accordion' is set to the invalid value 'true'
if you want, check on this page: https://amp-feature--gatsby-starter-i18n-bulma.netlify.com/it/amp/
my code repo with amp code: kalwalt/gatsby-starter-i18n-bulma#110
Hi,
after a successfully build, new AMP pages have been generated and accessible using "http://example.com/page-title/amp ".
but the AMP tag is missing in the
<html lang="en">
the view-source of http://example.com/page-title/amp contains:
<link rel="amphtml" href="..../amp/amp"/>
gatsby-config like:
{ resolve: "gatsby-plugin-amp", options: { canonicalBaseUrl: 'http://example.com/', components: ['amp-form'], excludedPaths: ['/404*', '/'], pathIdentifier: '/amp/', relAmpHtmlPattern: '{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}', useAmpClientIdApi: true, } }
gatsby-node like:
createPage({ path: ``${node.path}/amp``, component: bookAmpTemplate, context: { slug: ``${node.path}``, } })
Sorry, i am new to amp. When pathIdentifier is eg. /amp/
, the /amp route doesnt have amp powered html, if i change it to /
, all pages will have amp powered html. i want only /amp/ pages will use amp. strangely, it only happens on develop
(local), when i push to netlify, it works fine
Setup below
config
resolve: 'gatsby-plugin-amp',
options: {
analytics: {
type: 'gtag',
dataCredentials: 'include',
config: {
vars: {
gtag_id: '{{tag}}',
config: {
'{{tag}}': {
page_location: '{{pathname}}',
},
},
},
},
},
canonicalBaseUrl: 'https://domain.com/',
components: ['amp-form'],
excludedPaths: ['/404*', '/'],
pathIdentifier: '/amp/',
relAmpHtmlPattern: '{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}',
useAmpClientIdApi: true,
},
node
createPage({
path: `${result.data.wordpressPost.slug}/amp`,
component: slash(ampPostTemplate),
context: {
id: result.data.wordpressPost.id,
},
});
My ampPostTemplate
is a condensed version of my original template. When I view the /amp/index.html I do not see the amp
tag in the head and I see js still, but my react-data-helmet
items are showing up in the index.html (they are in my post template). Do I need to change anything in my html.js
file?
render() {
return (
<html {...this.props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{this.props.headComponents}
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key="body"
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}
Also I am on Gatsby 2.0.66
Thanks for the help
I followed the instructions in the README but I'm running into an issue when I compile my template. No matter how simple the template is, I end up getting the following error:
error UNHANDLED REJECTION
TypeError: expected a string
The template exports this:
/** Renders a template for a blog post. */
const BlogPostAmpTemplate = props => {
const post = props.data.markdownRemark
const siteTitle = props.data.site.siteMetadata.title
const { previous, next } = props.pageContext
return (
<div>
Hello
</div>
)
}
export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
}
}
markdownRemark(fields: { slug: { eq: $slug } }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
}
}
}
`
export default BlogPostAmpTemplate
Removing the pageQuery
const fixes the compile issue, but my template depends on the data it provides.
Am I missing something?
Webpack breaks a normal import. eval('require(“jsdom”)')
works but feels very hacky and eval is evil
Some plugins such as gatsby-plugin-canonical-urls
will add canonical tags to all pages. Instead of creating a second it would make sense to replace it with the correct non-AMP URL.
onPreRenderHTML and replaceRenderer methods dont support pathname
and never called plugin code blocks
I'm developing for a gatsby template the amp version with your plugin. The problem is that i'm using animate.css package and it is included in <style amp-custom> </style>
in the head, even if i haven't any ref in the template and components. There is some way to avoid to parse it in the custom <style>
tag?
If you want take a look at a preview of a page https://amp-feature--gatsby-starter-i18n-bulma.netlify.com/it/amp/
If you want to check my code this is my PR kalwalt/gatsby-starter-i18n-bulma#110
Hi.
Is there a way to exclude everything. I tried all of these patterns excludedPaths: ['*', '**', '**/**', '*/**'],
but it doesn't work. IMO the include exclude pattern makes this plugin more complicated than it needs to be. Its fairly simple for me to add /amphtml
through react-helmet
and I can have fine grain control. I don't think this plugin should be changing non-amp
pages by adding amphtml link
to them.
In the process of pruning out javascript from the header, it'd be great to keep the JSONLD script tag:
<script type="application/ld+json">
[{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement": [],
...
}]
</script>
It's used by crawlers to easily get structured data about the page and as a result those pages get special treatment in search results (via "rich snippets")
Since switching over to gatsby-plugin-amp
, I noticed the application/ld+json tag is getting pruned. I'm no longer getting a "This page has valid structured data" message from Google's AMP tester.
Here are results from Google's search console AMP testing tool
9:57:56 PM: Build ready to start
9:57:58 PM: build-image version: 84aca9ba39e0ee86ba194760fbfc51a808f62543
9:57:58 PM: buildbot version: 1ac64ca11e029436ed45ac81a38b9839778ec314
9:57:58 PM: Fetching cached dependencies
9:57:58 PM: Starting to download cache of 194.1MB
9:57:59 PM: Finished downloading cache in 1.234613067s
9:57:59 PM: Starting to extract cache
9:58:05 PM: Finished extracting cache in 5.564049919s
9:58:05 PM: Finished fetching cache in 6.909738077s
9:58:05 PM: Starting to prepare the repo for build
9:58:05 PM: Preparing Git Reference refs/heads/master
9:58:06 PM: Starting build script
9:58:06 PM: Installing dependencies
9:58:07 PM: Started restoring cached node version
9:58:09 PM: Finished restoring cached node version
9:58:09 PM: v8.15.0 is already installed.
9:58:10 PM: Now using node v8.15.0 (npm v6.4.1)
9:58:10 PM: Attempting ruby version 2.3.6, read from environment
9:58:11 PM: Using ruby version 2.3.6
9:58:12 PM: Using PHP version 5.6
9:58:12 PM: Started restoring cached node modules
9:58:12 PM: Finished restoring cached node modules
9:58:12 PM: Installing NPM modules using NPM version 6.4.1
9:58:41 PM: npm
9:58:41 PM: WARN [email protected] requires a peer of react@^0.14.8 but none is installed. You must install peer dependencies yourself.
9:58:41 PM: npm WARN [email protected] requires a peer of slate@^0.32.0 but none is installed. You must install peer dependencies yourself.
9:58:41 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
9:58:41 PM: npm WARN notsup
9:58:41 PM: SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
9:58:41 PM: added 39 packages from 67 contributors and audited 37058 packages in 28.419s
9:58:41 PM: found 6 vulnerabilities (5 moderate, 1 high)
9:58:41 PM: run `npm audit fix` to fix them, or `npm audit` for details
9:58:41 PM: NPM modules installed
9:58:41 PM: Started restoring cached go cache
9:58:41 PM: Finished restoring cached go cache
9:58:41 PM: unset GOOS;
9:58:41 PM: unset GOARCH;
9:58:41 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
9:58:41 PM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
9:58:41 PM: go version >&2;
9:58:41 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
9:58:41 PM: go version go1.10 linux/amd64
9:58:41 PM: Installing missing commands
9:58:41 PM: Verify run directory
9:58:41 PM: Executing user command: gatsby build
9:58:44 PM: success open and validate gatsby-configs — 0.027 s
9:58:45 PM: success load plugins — 0.547 s
9:58:45 PM: Found 557 cached files for public directory with 0 files.
9:58:47 PM: Found 43 cached files for .cache directory with 1 files.
9:58:47 PM: Netlify cache restored
9:58:49 PM: success onPreInit — 4.031 s
9:58:49 PM: success delete html and css files from previous builds — 0.477 s
9:58:50 PM: success initialize cache — 0.151 s
9:58:50 PM: success copy gatsby files — 0.026 s
9:58:50 PM: success onPreBootstrap — 0.008 s
9:58:51 PM: success source and transform nodes — 0.916 s
9:58:51 PM: success building schema — 0.535 s
9:58:53 PM: success createPages — 1.878 s
9:58:53 PM: success createPagesStatefully — 0.319 s
9:58:53 PM: success onPreExtractQueries — 0.003 s
9:58:54 PM: success update schema — 0.369 s
9:58:54 PM: success extract queries from components — 0.669 s
9:59:03 PM: success run graphql queries — 8.741 s — 363/363 41.54 queries/second
9:59:03 PM: success write out page data — 0.013 s
9:59:03 PM: success write out redirect data — 0.001 s
9:59:04 PM: done generating icons for manifest
9:59:04 PM: success onPostBootstrap — 0.803 s
9:59:04 PM: info bootstrap finished - 22.478 s
9:59:49 PM: success Building production JavaScript and CSS bundles — 44.680 s
10:00:05 PM: error Building static HTML for pages failed
10:00:05 PM: See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
10:00:05 PM: 44 | const styles = headComponents.reduce((str, x) => {
10:00:05 PM: 45 | if (x.type === "style") {
10:00:05 PM: > 46 | str += x.props.dangerouslySetInnerHTML.__html;
10:00:05 PM: | ^
10:00:05 PM: 47 | } else if (x.key && x.key === "TypographyStyle") {
10:00:05 PM: 48 | str = `${x.props.typography.toString()}${str}`;
10:00:05 PM: 49 | }
10:00:05 PM:
10:00:05 PM: WebpackError: TypeError: Cannot read property '__html' of undefined
10:00:05 PM:
10:00:05 PM: - gatsby-ssr.js:46 headComponents.reduce
10:00:05 PM: [lib]/[gatsby-plugin-amp]/gatsby-ssr.js:46:1
10:00:05 PM:
10:00:05 PM:
10:00:05 PM: - gatsby-ssr.js:44 Object.onPreRenderHTML
10:00:05 PM: [lib]/[gatsby-plugin-amp]/gatsby-ssr.js:44:1
10:00:05 PM:
10:00:05 PM: - api-runner-ssr.js:52
10:00:05 PM: lib/.cache/api-runner-ssr.js:52:39
10:00:05 PM:
10:00:05 PM:
10:00:05 PM: - api-runner-ssr.js:48 ./.cache/api-runner-ssr.js.module.exports
10:00:05 PM: lib/.cache/api-runner-ssr.js:48:25
10:00:05 PM:
10:00:05 PM: - static-entry.js:364 Module../.cache/static-entry.js.__webpack_exports__.defa ult
10:00:05 PM: lib/.cache/static-entry.js:364:3
10:00:05 PM:
10:00:05 PM: - bootstrap:24 Promise
10:00:05 PM: lib/webpack/bootstrap:24:1
10:00:05 PM:
10:00:05 PM:
10:00:05 PM:
10:00:05 PM: - bootstrap:68 new Promise
10:00:05 PM: lib/webpack/bootstrap:68:1
10:00:05 PM:
10:00:05 PM:
10:00:05 PM: - bootstrap:5 tryCatcher
10:00:05 PM: lib/webpack/bootstrap:5:1
10:00:05 PM:
10:00:05 PM: - bootstrap:50 MappingPromiseArray._promiseFulfilled
10:00:05 PM: lib/webpack/bootstrap:50:1
10:00:05 PM:
10:00:05 PM: - api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate
10:00:05 PM: lib/.cache/api-runner-ssr.js:6:27
10:00:05 PM:
10:00:05 PM: - bootstrap:67 MappingPromiseArray.init
10:00:05 PM: lib/webpack/bootstrap:67:1
10:00:05 PM:
10:00:05 PM:
10:00:06 PM: Caching artifacts
10:00:06 PM: Started saving node modules
10:00:06 PM: Finished saving node modules
10:00:06 PM: Started saving pip cache
10:00:06 PM: Finished saving pip cache
10:00:06 PM: Started saving emacs cask dependencies
10:00:06 PM: Unhandled rejection Error [ERR_IPC_CHANNEL_CLOSED]: channel closed
10:00:06 PM: at process.target.send (internal/child_process.js:578:16)
10:00:06 PM: at reportSuccess (/opt/build/repo/node_modules/jest-worker/build/child.js:59:11)
10:00:06 PM: at tryCatcher (/opt/build/repo/node_modules/bluebird/js/release/util.js:16:23)
10:00:06 PM: at Promise._settlePromiseFromHandler (/opt/build/repo/node_modules/bluebird/js/release/promise.js:512:31)
10:00:06 PM: at Promise._settlePromise (/opt/build/repo/node_modules/bluebird/js/release/promise.js:569:18)
10:00:06 PM: at Promise._settlePromise0 (/opt/build/repo/node_modules/bluebird/js/release/promise.js:614:10)
10:00:06 PM: at Promise._settlePromises (/opt/build/repo/node_modules/bluebird/js/release/promise.js:694:18)
10:00:06 PM: at Promise._fulfill (/opt/build/repo/node_modules/bluebird/js/release/promise.js:638:18)
10:00:06 PM: at MappingPromiseArray.PromiseArray._resolve (/opt/build/repo/node_modules/bluebird/js/release/promise_array.js:126:19)
10:00:06 PM: at MappingPromiseArray._promiseFulfilled (/opt/build/repo/node_modules/bluebird/js/release/map.js:101:18)
10:00:06 PM: at Promise._settlePromise (/opt/build/repo/node_modules/bluebird/js/release/promise.js:574:26)
10:00:06 PM: at Promise._settlePromise0 (/opt/build/repo/node_modules/bluebird/js/release/promise.js:614:10)
10:00:06 PM: at Promise._settlePromises (/opt/build/repo/node_modules/bluebird/js/release/promise.js:694:18)
10:00:06 PM: at _drainQueueStep (/opt/build/repo/node_modules/bluebird/js/release/async.js:138:12)
10:00:06 PM: at _drainQueue (/opt/build/repo/node_modules/bluebird/js/release/async.js:131:9)
10:00:06 PM: at Async._drainQueues (/opt/build/repo/node_modules/bluebird/js/release/async.js:147:5)
10:00:06 PM: Finished saving emacs cask dependencies
10:00:06 PM: Started saving maven dependencies
10:00:06 PM: Finished saving maven dependencies
10:00:06 PM: Started saving boot dependencies
10:00:07 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
10:00:06 PM: Finished saving boot dependencies
10:00:06 PM: Started saving go dependencies
10:00:07 PM: Shutting down logging, 21 messages pending
I installed this and build on with develop but it failed.
How do I fix this?
success onPostBootstrap — 0.007 s
here ./node_modules/jsdom/lib/jsdom/utils.js
Module not found: Error: Can't resolve 'canvas' in '/my/local/path/node_modules/jsdom/lib/jsdom'
resolve 'canvas' in '/my/local/path/node_modules/jsdom/lib/jsdom'
Parsed request is a module
using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./lib/jsdom)
resolve as module
looking for modules in /my/local/path/node_modules
using description file: /my/local/path/package.json (relative path: ./node_modules)
using description file: /my/local/path/package.json (relative path: ./node_modules/canvas)
no extension
/my/local/path/node_modules/canvas doesn't exist
.mjs
/my/local/path/node_modules/canvas.mjs doesn't exist
.js
/my/local/path/node_modules/canvas.js doesn't exist
.jsx
/my/local/path/node_modules/canvas.jsx doesn't exist
.wasm
/my/local/path/node_modules/canvas.wasm doesn't exist
.json
/my/local/path/node_modules/canvas.json doesn't exist
as directory
/my/local/path/node_modules/canvas doesn't exist
/my/local/path/node_modules/jsdom/lib/jsdom/node_modules doesn't exist or is not a directory
/my/local/path/node_modules/jsdom/lib/node_modules doesn't exist or is not a directory
/my/local/path/node_modules/node_modules doesn't exist or is not a directory
/my/home/React/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /my/home/node_modules
No description file found
looking for modules in /my/local/path/node_modules/jsdom/node_modules
using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./node_modules)
using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./node_modules/canvas)
no extension
/my/local/path/node_modules/jsdom/node_modules/canvas doesn't exist
looking for modules in /my/local/path/node_modules
using description file: /my/local/path/package.json (relative path: ./node_modules)
using description file: /my/local/path/package.json (relative path: ./node_modules/canvas)
no extension
/my/local/path/node_modules/canvas doesn't exist
.mjs
/my/local/path/node_modules/jsdom/node_modules/canvas.mjs doesn't exist
.mjs
/my/local/path/node_modules/canvas.mjs doesn't exist
No description file found
.js
/my/local/path/node_modules/jsdom/node_modules/canvas.js doesn't exist
.js
/my/local/path/node_modules/canvas.js doesn't exist
no extension
/my/home/node_modules/canvas doesn't exist
.jsx
/my/local/path/node_modules/jsdom/node_modules/canvas.jsx doesn't exist
.jsx
/my/local/path/node_modules/canvas.jsx doesn't exist
.mjs
/my/home/node_modules/canvas.mjs doesn't exist
.wasm
/my/local/path/node_modules/jsdom/node_modules/canvas.wasm doesn't exist
.wasm
/my/local/path/node_modules/canvas.wasm doesn't exist
.js
/my/home/node_modules/canvas.js doesn't exist
.json
/my/local/path/node_modules/jsdom/node_modules/canvas.json doesn't exist
.json
/my/local/path/node_modules/canvas.json doesn't exist
.jsx
/my/home/node_modules/canvas.jsx doesn't exist
as directory
/my/local/path/node_modules/jsdom/node_modules/canvas doesn't exist
as directory
/my/local/path/node_modules/canvas doesn't exist
.wasm
/my/home/node_modules/canvas.wasm doesn't exist
.json
/my/home/node_modules/canvas.json doesn't exist
as directory
/my/home/node_modules/canvas doesn't exist
[/my/local/path/node_modules/canvas]
[/my/local/path/node_modules/canvas.mjs]
[/my/local/path/node_modules/canvas.js]
[/my/local/path/node_modules/canvas.jsx]
[/my/local/path/node_modules/canvas.wasm]
[/my/local/path/node_modules/canvas.json]
[/my/local/path/node_modules/jsdom/lib/jsdom/node_modules]
[/my/local/path/node_modules/jsdom/lib/node_modules]
[/my/local/path/node_modules/node_modules]
[/my/home/React/node_modules]
[/Users/node_modules]
[/node_modules]
[/my/home/node_modules/package.json]
[/my/local/path/node_modules/jsdom/node_modules/canvas]
[/my/local/path/node_modules/jsdom/node_modules/canvas.mjs]
[/my/home/node_modules/canvas/package.json]
[/my/local/path/node_modules/jsdom/node_modules/canvas.js]
[/my/home/node_modules/canvas]
[/my/local/path/node_modules/jsdom/node_modules/canvas.jsx]
[/my/home/node_modules/canvas.mjs]
[/my/local/path/node_modules/jsdom/node_modules/canvas.wasm]
[/my/home/node_modules/canvas.js]
[/my/local/path/node_modules/jsdom/node_modules/canvas.json]
[/my/home/node_modules/canvas.jsx]
[/my/home/node_modules/canvas.wasm]
[/my/home/node_modules/canvas.json]
@ ./node_modules/jsdom/lib/jsdom/utils.js 166:2-27 172:17-34
@ ./node_modules/jsdom/lib/jsdom/browser/Window.js
@ ./node_modules/jsdom/lib/api.js
@ ./node_modules/gatsby-plugin-amp/gatsby-ssr.js
@ ./.cache/api-runner-ssr.js
@ ./.cache/develop-static-entry.js
error There was an error compiling the html.js component for the development server.
Gatsby add <link rel="preload" ... />
scripts to each page. The browser will download these, but never execute them. Chrome warns about this issue with the console message:
The resource https://path/to/script.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
as
value and it is preloaded intentionally.
Add code to remove these (inside here?) when calling replaceHeadComponents()
.
PR here: #32
i receive this Amp error:
Custom javascript is not allowed
it point to this line:
<script async="" custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js">
maybe because add the =""
after async?
page to check: https://amp-feature--gatsby-starter-i18n-bulma.netlify.com/it/amp/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.