I got error when I tried to create CouldCode by using
$parse new CloudCode
parse: error with status=404 and body="<!DOCTYPE html>\n<html>\n\n<head>\n <title>404 | Parse</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\">\n <style type=\"text/css\">\n html{\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility; \n }\n html,\n body,\n .four_oh_four {\n padding: 0px;\n margin: 0px;\n height: 100%;\n width: 100%;\n }\n .four_oh_four {\n background-image: -o-linear-gradient(-38deg, #1AB5C2 0%, #0572E0 100%);\n background-image: -moz-linear-gradient(-38deg, #1AB5C2 0%, #0572E0 100%);\n background-image: -ms-linear-gradient(-38deg, #1AB5C2 0%, #0572E0 100%);\n background-image: linear-gradient(128deg, #1AB5C2 0%, #0572E0 100%);\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n color: #fff;\n }\n .four_oh_four .logo {\n display: block;\n margin: 0 auto;\n top: 50px;\n position: relative;\n }\n .four_oh_four .nav {\n list-style: none;\n font-weight: 200;\n font-size: 18px;\n margin: 0 auto;\n position: absolute;\n padding: 0;\n bottom: 50px;\n width: 100%;\n text-align: center;\n }\n .four_oh_four .nav li {\n display: inline-block;\n margin: 0px 10px;\n }\n .four_oh_four .nav a {\n color: #fff;\n text-decoration: none;\n }\n .four_oh_four .nav a:hover {\n text-decoration: underline;\n }\n .four_oh_four .error {\n display: block;\n position: absolute;\n top: 50%;\n -moz-transform: translateY(-50%); \n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n margin: 0;\n padding: 0;\n text-align: center;\n width: 100%;\n }\n .four_oh_four h1 {\n font-weight: 100;\n font-size: 240px;\n margin: 0;\n padding: 0;\n }\n .four_oh_four h2 {\n font-weight: 200;\n font-size: 28px;\n margin: 0;\n padding: 0;\n }\n .four_oh_four #emoji {\n position: relative;\n top: 40px;\n background-image: url('/images/404/sprite.png');\n display: inline-block;\n width: 200px;\n height: 230px;\n background-size: 6000px;\n background-repeat: no-repeat;\n }\n #media (max-width: 500px) {\n .four_oh_four .logo {\n top: 30px;\n }\n .four_oh_four h1 {\n font-size: 120px;\n }\n .four_oh_four h2 {\n font-size: 22px;\n }\n .four_oh_four #emoji {\n width: 100px;\n height: 115px;\n top: 16px;\n background-size: 3000px;\n }\n .four_oh_four .nav {\n bottom: 30px;\n }\n .four_oh_four .nav li {\n margin: 5px 14px;\n }\n }\n </style>\n <script>\n var emojiCount = 30;\n function getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n }\n\n\n function catchFeelings() {\n var emoji = getRandomInt(0, emojiCount - 1)\n if(window.innerWidth > 400){\n var bgOffset = (emoji * 200 * -1) + \"px 0px\"\n } else {\n var bgOffset = (emoji * 100 * -1) + \"px 0px\" \n }\n document.getElementById('emoji').style.backgroundPosition = bgOffset;\n }\n </script>\n</head>\n\n<body>\n\n <div class=\"four_oh_four\">\n <img class=\"logo\" src=\"/images/parse-logo.png\" width=\"98\" height=\"31\" />\n\n <figure class=\"error\">\n <h1>4<div id=\"emoji\"></div>4</h1>\n <h2>Oh no, we can’t find that page!</h2>\n </figure>\n\n <ul class=\"nav\">\n <li>Home\n </li>\n <li>Products\n </li>\n <li>Pricing\n </li>\n <li>Docs\n </li>\n <li>Help\n </li>\n <li>Blog\n </li>\n </ul>\n </div>\n\n</body>\n<script>\n catchFeelings();\n\n setTimeout(function () {\n setInterval(function () {\n catchFeelings()\n }, 3000)\n }, 3000)\n \n document.addEventListener('keydown', function(e) {\n e = e || window.event;\n switch (e.which || e.keyCode) {\n case 32:\n for (var i = 0; i < 20; i++) {\n setTimeout(function () {\n catchFeelings();\n }, 50 * i)\n }\n break;\n\n default:\n return;\n }\n e.preventDefault();\n });\n</script>\n\n</html>\n"
What's the wrong?
Thanks.
This issues has been resolved. % parse deploy again and it will update your cli. Run once again and it will succeed.
% parse deploy repos/parse-model NV-MBP
Downloading binary from https://parse.com/downloads/cloud_code/cli/parse-osx/latest.
Successfully updated binary at: /usr/local/bin/parse
% parse deploy repos/parse-model NV-MBP
JS SDK version not set, setting it to latest available JS SDK version
Uploading source files
Uploading recent changes to scripts...
The following files will be uploaded:
/cloud/main.js
Uploading recent changes to hosting...
The following files will be uploaded:
/public/index.html
Finished uploading files
New release is named v1 (using Parse JavaScript SDK v1.4.2)
Related
VS2019 Rest service console app.
I call my Rest service via Powershell script.
It uses try-catch and during the call I receive the error
Request Error
BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}
Request Error
The server encountered an error processing the request. Please see the service help page for constructing valid requests to the service.
I see that no service method call but the error. How to understand the reason?
That is method
[OperationContract]
[WebInvoke(UriTemplate = "/createdbnode", Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json)]
Message CreateDbNode(string name, bool is_enabled, DbNode[] links);
And call, but note: dbnode is not only Guid, it is more complicated class:
$bodyx = #{
"name"="zztop";"links"="[18220000-FA8F-40C5-8014-99044C6B1700]";"is_enabled"="0";
}
$jsonbody = $bodyx | ConvertTo-Json
Write-Host $jsonbody
Write-Host "========================"
Invoke-WebRequest -UseBasicParsing $url2 -Headers $headers -ContentType "application/json" -Method POST -Body $jsonbody
I grab prices from Yahoo Finance using the code below. Worked fine until recently. The code still runs but returns no value instead telling me: IndexError: list index out of range.
I tried to reset the xpath to no avail. Thoughts on how to make it work?
import lxml.etree
import urllib.parse as urlparse
import requests
def parse_url(url):
tree = lxml.etree.fromstring(url, parser=lxml.etree.HTMLParser())
tree.xpath('.//table[#class="W(100%)"]')
return tree
if __name__ == "__main__":
urlivv = requests.get('http://finance.yahoo.com/q?s=IVV').text
docivv = parse_url(urlivv)
priceivv = docivv.xpath('//*[#id="quote-header-info"]/div[3]/div[1]/div/span[1]//text()')
ivv = priceivv[0]
Taking a look at what urlivv contains, I do not believe the information you want is in the html you're working with.
In [6]: urlivv
Out[6]: '<!DOCTYPE html>\n <html lang="en-us"><head>\n <meta http-equiv="content-type" content="text/html; charset=UTF-8">\n <meta charset="utf-8">\n <title>Yahoo</title>\n <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">\n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n <style>\n html {\n height: 100%;\n }\n body {\n background: #fafafc url(https://s.yimg.com/nn/img/sad-panda-201402200631.png) 50% 50%;\n background-size: cover;\n height: 100%;\n text-align: center;\n font: 300 18px "helvetica neue", helvetica, verdana, tahoma, arial, sans-serif;\n }\n table {\n height: 100%;\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border-spacing: 0;\n border: none;\n }\n h1 {\n font-size: 42px;\n font-weight: 400;\n color: #400090;\n }\n p {\n color: #1A1A1A;\n }\n #message-1 {\n font-weight: bold;\n margin: 0;\n }\n #message-2 {\n display: inline-block;\n *display: inline;\n zoom: 1;\n max-width: 17em;\n _width: 17em;\n }\n </style>\n <script>\n document.write(\'<img src="//geo.yahoo.com/b?s=1197757129&t=\'+new Date().getTime()+\'&src=aws&err_url=\'+encodeURIComponent(document.URL)+\'&err=%<pssc>&test=\'+encodeURIComponent(\'%<{Bucket}cqh[:200]>\')+\'" width="0px" height="0px"/>\');var beacon = new Image();beacon.src="//bcn.fp.yahoo.com/p?s=1197757129&t="+new Date().getTime()+"&src=aws&err_url="+encodeURIComponent(document.URL)+"&err=%<pssc>&test="+encodeURIComponent(\'%<{Bucket}cqh[:200]>\');\n </script>\n </head>\n <body>\n <!-- status code : 404 -->\n <!-- Not Found on Server -->\n <table>\n <tbody><tr>\n <td>\n <img src="https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage.png" alt="Yahoo Logo">\n <h1 style="margin-top:20px;">Will be right back...</h1>\n <p id="message-1">Thank you for your patience.</p>\n <p id="message-2">Our engineers are working quickly to resolve the issue.</p>\n </td>\n </tr>\n </tbody></table>\n </body></html>'
Built a portfolio page with Gatsby / GraphQL, using styled components. On my local machine, it looks and functions exactly as I want it to. When deployed, there seem to be button style issues and one of my images isn't rendering at all. I tried deploying on both Netlify and Surge.sh, but had the same result both times. What am I doing incorrectly? Edit: could my button styles be affected by how Link is used?
Here are how my button styles look locally:
Here's how they look deployed ('View Repo' doesn't even work deployed):
My 'About Me' section locally (2 columns):
My 'About Me' section deployed (only column 1 shows):
gatsby-config.js
module.exports = {
siteMetadata: {
title: `Portfolio`,
description: `Lorem ipsum.`,
author: `#jordanwhunter`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `videos`,
path: `${__dirname}/src/assets/videos`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/assets/images/memoji.jpeg`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-gatsby-cloud`,
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data/`,
},
},
],
}
package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"babel-plugin-styled-components": "^1.12.0",
"gatsby": "^3.0.1",
"gatsby-image": "^3.0.0",
"gatsby-plugin-gatsby-cloud": "^2.0.0",
"gatsby-plugin-image": "^1.0.0",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-offline": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-styled-components": "^4.0.0",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-transformer-json": "^3.0.0",
"gatsby-transformer-sharp": "^3.0.0",
"gh-pages": "^3.1.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"styled-components": "^5.2.1",
"surge": "^0.22.1"
},
"devDependencies": {
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
Portfolio.js (button code starts on line 226)
import React from 'react'
import { useStaticQuery, graphql } from "gatsby"
import { Button } from "./Button"
import Img from "gatsby-image"
import styled from "styled-components"
const PortfolioContainer = styled.div`
min-height: 100vh;
padding: 5rem calc((100vw - 1300px) / 2);
background: #fff;
color: #fff;
`
const PortfolioHeading = styled.div`
font-size: clamp(1.5rem, 5vw, 2.5rem);
text-align: center;
margin-bottom: 5rem;
color: #000;
`
const PortfolioImg = styled(Img)`
height: 100%;
max-width: 100%;
position: absolute;
border-radius: 10px;
filter: brightness(100%);
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
`
const PortfolioWrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
justify-items: center;
padding: 0 2rem;
#media screen and (max-width: 1200px) {
grid-template-columns: 1fr 1fr;
}
#media screen and (max-width: 868px) {
grid-template-columns: 1fr;
}
`
const PortfolioInfo = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
justify-items: center;
padding: 0 2rem;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
#media screen and (max-width: 280px) {
padding: 0 1rem;
justify-content: center;
align-content: center;
}
`
const PortfolioCard = styled.div`
line-height: 2;
width: 100%;
height: 500px;
position: relative;
border-radius: 10px;
transition: 0.2s ease;
&:hover ${PortfolioInfo}{
visibility: visible;
opacity: 1;
}
&:hover ${PortfolioImg}{
filter: brightness(50%)
}
`
const TextWrap = styled.div`
display: flex;
align-items: center;
text-align: center;
position: absolute;
top: 375px;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 87%;
`
const PortfolioTitle = styled.div`
font-weight: 400;
font-size: 1rem;
margin-left: 0.5rem;
#media screen and (max-width: 280px) {
font-size: 12px;
}
`
const PortfolioDescription = styled.div`
font-size: 1rem;
#media screen and (max-width: 280px) {
font-size: 12px;
}
`
const PortfolioTechnologies = styled.div`
font-size: 1rem;
#media screen and (max-width: 280px) {
font-size: 12px;
}
`
const ButtonLink = styled.a`
text-decoration: none;
cursor: pointer;
`
const ButtonWrap = styled.div`
display: flex;
flex-direction: row;
position: absolute;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: -400px;
z-index: 1;
gap: 10px;
#media screen and (max-width: 280px) {
padding: 0 1rem;
justify-content: center;
align-content: center;
}
`
const CustomButton = styled(Button)`
display: flex;
align-items: center;
position: relative;
font-size: 14px;
width: 100%;
cursor: pointer;
top: -60px;
#media screen and (max-width: 480px) {
background: none;
border: none;
padding: 0 !important;
font-family: arial, sans-serif;
color: #fff;
text-decoration: underline;
cursor: pointer;
width: 100%;
font-size: 12px;
justify-content: center;
}
`
const CustomP = styled.p`
font-size: 12px;
`
export default function Portfolio({ heading }) {
const data = useStaticQuery(graphql`
query PortfolioQuery {
allPortfolioJson {
edges {
node {
alt
button1
button2
description
name
technologies
demo
repo
img {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
`)
function getPortfolio(data) {
const portfolioArray = []
data.allPortfolioJson.edges.forEach((item, index) => {
portfolioArray.push(
<PortfolioCard key={index}>
<PortfolioImg
src={item.node.img.childImageSharp.fluid.src}
fluid={item.node.img.childImageSharp.fluid}
alt={item.node.alt}
/>
<PortfolioInfo>
<TextWrap>
<PortfolioTitle
css={`
margin-top: -500px;
`}
>
<strong><u>Project:</u></strong> <br />
{item.node.name}
</PortfolioTitle>
<PortfolioDescription
css={`
margin-top: -300px;
`}
>
<strong><u>Description:</u></strong> <br />
{item.node.description}
</PortfolioDescription>
<PortfolioTechnologies
css={`
margin-top: -100px;
`}
>
<strong><u>Technologies:</u></strong> <br />
{item.node.technologies}
</PortfolioTechnologies>
</TextWrap>
<ButtonWrap>
<ButtonLink
href={`${item.node.demo}`}
target="_blank"
>
<CustomButton
primary="true"
round="true"
>
{item.node.button1}
</CustomButton>
</ButtonLink>
<ButtonLink
href={`${item.node.repo}`}
target="_blank"
>
<CustomButton
primary="true"
round="true"
>
{item.node.button2}
</CustomButton>
</ButtonLink>
</ButtonWrap>
</PortfolioInfo>
</PortfolioCard>
)
})
return portfolioArray;
}
return (
<PortfolioContainer id="portfolio">
<PortfolioHeading>
{heading}
<CustomP>(Tap on Mobile)</CustomP>
</PortfolioHeading>
<PortfolioWrapper>
{getPortfolio(data)}
</PortfolioWrapper>
</PortfolioContainer>
)
};
About.js (column 2 code starts on line 137):
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby';
import { GrCircleInformation, GrCode, GrDocumentImage } from "react-icons/gr";
import styled from "styled-components"
import Img from "gatsby-image"
const AboutContainer = styled.div`
width: 100%;
background: #fcfcfc;
color: #000;
padding: 5rem calc((100vw - 1300px) / 2);
height: 100%;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
`
const TopLine = styled.div`
color: #077bf1;
font-size: 1rem;
padding-left: 2rem;
margin-bottom: 0.75rem;
`
const Description = styled.p`
text-align: start;
padding-left: 2rem;
margin-bottom: 4rem;
font-size: clamp(1.5rem, 5vw, 2rem);
font-weight: bold;
`
const ContentWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
`
const ColumnOne = styled.div`
display: grid;
grid-template-rows: 1fr 1fr;
`
const Biography = styled.div`
padding-top: 1rem;
padding-right: 2rem;
h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
font-style: italic;
}
p {
color: #3b3b3b;
}
`
const ColumnTwo = styled.div`
display: grid;
grid-template-columns: 1fr;
margin-top: 2rem;
grid-gap: 10px;
#media screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
`
const Image = styled(Img)`
border-radius: 10px;
height: 100%;
margin-top: -50px;
#media screen and (max-width: 375px) {
margin-top: 0;
}
`
export default function About() {
const data = useStaticQuery(graphql`
query MyQuery {
allFile(filter: {ext: {regex: "/(jpg)|(png)|(jpeg)/"}, name: {in: ["profile-photo"]}}) {
edges {
node {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`)
return (
<AboutContainer id="about">
<TopLine>
About Me
</TopLine>
<Description>
<div css={`display: flex;`}>
<GrDocumentImage /><h4 css={`font-style: italic;`}>Resumes</h4>
</div>
<div
css={`
display: flex;
font-size: 14px;
margin-bottom: -40px;
`}
>
<p>
Resume 2021 (ATS Version)<br />
Resume 2021 (Styled Version)
</p>
</div>
</Description>
<ContentWrapper>
<ColumnOne>
<Biography>
<div css={`display: flex;`}>
<GrCircleInformation /><h3>Brand Statement</h3>
</div>
<p>
Full stack web/software developer with an entrepreneurial spirit, and keen sense of efficiency and time management. A passionate, goal-oriented team player that strives to always write clean, precise code focused on mobile responsive themes. Maintains a problem solving, can-do attitude and exhibits consistent eagerness to learn new technologies/techniques.
</p>
</Biography>
<Biography>
<div css={`display: flex;`}>
<GrCode />
<h3>Technologies</h3>
</div>
<p>
JavaScript, React, Preact, Next, Gatsby, Svelte, Node, Express, Firebase, Vercel, MongoDB, MySQL, Handlebars, jQuery, D3, GraphQL, Material-UI, CSS3, Bootstrap, Materialize, Bulma, HTML5
</p>
</Biography>
</ColumnOne>
<ColumnTwo>
{data.allFile.edges.map((image, key) => (
<Image
key={key}
src={image.node.childImageSharp.src}
fluid={image.node.childImageSharp.fluid}
/>
))}
</ColumnTwo>
</ContentWrapper>
</AboutContainer>
)
};
Inspect generated html:
<div class="Portfolio__ButtonWrap-zwd7jb-14 boxtca">
<a href="https://filmapi.vercel.app/" target="_blank" class="Portfolio__ButtonLink-zwd7jb-13 dHdqal">
<a primary="true" round="true" class="Button-sc-1t76fnu-0 Portfolio__CustomButton-zwd7jb-15 iA-DhcJ cycuPQ">View App</a>
</a>
<a primary="true" round="true" class="Button-sc-1t76fnu-0 Portfolio__CustomButton-zwd7jb-15 iA-DhcJ cycuPQ">
<a primary="true" round="true" class="Button-sc-1t76fnu-0 Portfolio__CustomButton-zwd7jb-15 iA-DhcJ cycuPQ">View Repo</a>
</a>
</div>
Observation #1:
bad structure for a second button (not a ButtonLink);
Why:
messed virtual DOM [and as a result real DOM];
Possible reason:
multiple, the same kind children rendered without key prop (the most frequent bad React rendering reason?);
Solution #1: always use a key prop for [elements of] lists/arrays/groups!
'About me' missing column problem:
Observation #2:
before (at first render) and during [image] loading html/DOM structure is OK;
React update (rerendering) breaks child divs [of AboutContainer] - no keys used (then no unique identifiers for multiple divs in VDOM), result - the update breaks the content structure.
But this is not the only reason - the real one was using <Img/>-based component - outdated for new gatsby image plugins [versions].
Solution #2:
You should use <GatsbyImage/> components.
Always make sure the documentation you're referencing is current!
There are significant syntax changes with graphql and using the GatsbyImage / StaticImage components from gatsby-plugin-image instead of the Img component from gatsby-image.
To fix Portfolio.js - the image rendering was affecting the button links - code had to be refactored for the current syntax referencing the GatsbyImage component from gatsby-plugin-image. graphql and useStaticQuery syntax also had to be refactored. For more information, visit Gatsby's documentation (thanks to #xadm for pointing me in the right direction).
About.js was also fixed by updating syntax...except this Img tag was changed to StaticImage and graphql and useStaticQuery were removed entirely.
I''ve written an app in lua using the Corona SDK, I'm trying to download some images from a google drive folder.
I've used the OAth playground to authroize the scopes I need and I've obtained a refresh token and have a method to obtain a new access token when necessary. This is how I download the images:
network.download(
"https://drive.google.com/uc?export=download&id="..decodedResponse.files[index].id,
"GET",
networkListener,
params,
decodedResponse.files[index].name,
system.DocumentsDirectory
)
where decodedResponse refers to the json obtained that lists all the files in the specified folder. This was working fine a few days ago but now whenever I try it, the image downloaded is invalid and corrupt. I even tried using a new folder in the drive.
I've tried other links such like
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
and some others I've seen online but these give me a
code 403
"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
error. I read somewhere that specifying scope could fix the code 403 error but I'm not sure where exactly to specify this.
I'd appreciate the help, thanks!
Edit: I took a look at one of the images with a text editor, the result was some html that look to be code for a google auth page, some of it is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="description" content="Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Meet Google Drive – One place for all your files</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
I can't post the entire thing cause it exceeds the body character limit
I was able to get it to work by using a different url and adding this:
local params = {}
params.progress = true
params.headers = headers
This was the URL I used:
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
Using the RestClient gem, I need to create a request such as the following:
GET http://host/path?p=1&p=2
What is the proper syntax to accomplish this?
Note that the receiving host is not Rails.
Tried:
resource = RestClient::Resource.new( 'http://host/path' )
params = { p: '1', p: '2' }
# ^ Overrides param to have value of 2 (?p=2)
params = { p: ['1','2'] }
# ^ results in 'p[]=abc&p[]=cde' (array [] indicators not wanted)
resource.get( { params: params } )
You can pass the parameters in as a string:
resource.get(params: 'p=1&p=2')
For instance, using the restclient shell:
>> RestClient.log = Logger.new(STDOUT)
#<Logger:0x007fa444cbecc0 #progname=nil, #level=0, #default_formatter=#<Logger::Formatter:0x007fa444cbec70 #datetime_format=nil>, #formatter=nil, #logdev=#<Logger::LogDevice:0x007fa444cbebd0 #shift_size=nil, #shift_age=nil, #filename=nil, #dev=#<IO:<STDOUT>>, #mutex=#<Logger::LogDevice::LogDeviceMutex:0x007fa444cbeba8 #mon_owner=nil, #mon_count=0, #mon_mutex=#<Mutex:0x007fa444cbeb58>>>>
>> resource = RestClient::Resource.new( 'http://www.example.net' )
#<RestClient::Resource:0x007fa444c9fdc0 #url="http://www.example.net", #block=nil, #options={}>
>> resource.get(params: 'p=1&p=2')
RestClient.get "http://www.example.net", "Accept"=>"*/*; q=0.5, application/xml", "Accept-Encoding"=>"gzip, deflate", "Params"=>"p=1&p=2"
# => 200 OK | text/html 1270 bytes
"<!doctype html>\n<html>\n<head>\n <title>Example Domain</title>\n\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <style type=\"text/css\">\n body {\n background-color: #f0f0f2;\n margin: 0;\n padding: 0;\n font-family: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n \n }\n div {\n width: 600px;\n margin: 5em auto;\n padding: 50px;\n background-color: #fff;\n border-radius: 1em;\n }\n a:link, a:visited {\n color: #38488f;\n text-decoration: none;\n }\n #media (max-width: 700px) {\n body {\n background-color: #fff;\n }\n div {\n width: auto;\n margin: 0 auto;\n border-radius: 0;\n padding: 1em;\n }\n }\n </style> \n</head>\n\n<body>\n<div>\n <h1>Example Domain</h1>\n <p>This domain is established to be used for illustrative examples in documents. You may use this\n domain in examples without prior coordination or asking for permission.</p>\n <p>More information...</p>\n</div>\n</body>\n</html>\n"
If you don't want to write code to build a string, which you should avoid because it's not necessarily straightforward, let Ruby's URI class cobble it together:
require 'uri'
URI::encode_www_form([['p', 1], ['p', 2]])
# => "p=1&p=2"
Discovered this issue for RestClient : https://github.com/rest-client/rest-client/issues/59
so it seems that it can't be done 'natively' through params.
My solution was to modify the URL, using:
query_params = "?p=1&p=2"
resource[query_params].get