I would like to know if it's possible to force prettier to write my "path" in one line:
This is what I have:
<a href="{{ path('product_conf', { slug: product.slug }) }}">
But prettier write this element like this:
<a href="{{
path(
'product_conf',
{
slug: product.slug
}
)
}}">
Same for my h3, p, etc :
<h3>
Let's go!
</h3>
(I would like: <h3> Let's go! </h3>)
My prettierrc.json
{
"singleQuote": true,
"useTabs": true,
"printWidth": 180,
"tabWidth": 2,
"singleAttributePerLine": true,
"plugins": [
"./node_modules/prettier-plugin-twig-melody"
]
}
Add "twigAlwaysBreakObjects": false in your .prettierrc.json.
Related
when i used vuetify(2.4.3) with vuejs(2.6.11) and vuetify-loader(1.7.0).
everything is fine, but the v-text-field, v-select components cannot display, when i create a page with form.
this is my code(no any error):
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-select
v-model="select"
:items="items"
:rules="[v => !!v || 'Item is required']"
label="Item"
required
></v-select>
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'You must agree to continue!']"
label="Do you agree?"
required
></v-checkbox>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
#click="validate"
>
Validate
</v-btn>
<v-btn
color="error"
class="mr-4"
#click="reset"
>
Reset Form
</v-btn>
<v-btn
color="warning"
#click="resetValidation"
>
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+#.+\..+/.test(v) || 'E-mail must be valid',
],
select: null,
items: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
checkbox: false,
}),
methods: {
validate () {
this.$refs.form.validate()
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
},
},
}
</script>
this is the source of the page:
the v-text-field v-select ... only display a 'div' tag like this:
<form data-v-b5dd6ec2="" novalidate="novalidate" class="v-form">
<div><!----></div>
<div><!----></div>
<div><!----></div>
<div><!----></div>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default success">
<span class="v-btn__content"> Validate </span>
</button>
<button type="button" class="mr-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default error">
<span class="v-btn__content"> Reset Form </span>
</button>
<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default warning">
<span class="v-btn__content"> Reset Validation </span>
</button>
</form>
this is the source of the page
how can i use v-form and v-text-field v-select ... correctly？
other components work fine in my project, except the form elements, can anybody help me?
When I reinstall the vuetify from my vuejs project, the problem is solved
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
I tried a firebase read script,
if the ket is of the type 0 1 2 3 4 reads, but if it is ramdom type (M5ppDoMZ8lnqBtT8Zme) it is not read and I don't understand why?
import {gamesRef} from './firebase'
import { GameTypeEnum, PiattaformaEnum,nuovofilm } from './models/game'
export default {
firebase: {
games: gamesRef.orderByChild('titolo')
//games : gamesRef
},
data() {
return {
gameTypes: GameTypeEnum.properties,
gamePlatforms: PiattaformaEnum.properties,
nuoevo : nuovofilm,
games : gamesRef,
film: gamesRef,
// gam : gamesRef.orderByChild('titolo'),
fields: ['Indice','titolo', 'regista','locandina', 'anno','Modifica','Cancella','piattaforma'],
//fields: ['titolo', 'autore', 'anno', ''],
datas : [1,2,3,4],
// fields: ['first_name', 'last_name', 'age'],
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' }
],
newGame: {
Titolo: '',
SoftwareHouse: '',
Tipo: GameTypeEnum.FPS,
Piattaforma: PiattaformaEnum.PC
},
<b-table striped hover :items="games" :fields="fields">
<template v-slot:cell(indice)="data">
{{ data.index + 1 }}
</template>
<template v-slot:cell(locandina)>
<img :src="valore" width="100" />
</template>
<template v-slot:cell(Modifica)>
<button type="button" class="btn btn-warning">x</button>
</template>
<template v-slot:cell(Cancella)>
<button type="button" class="btn btn-danger">y</button>
</template>
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
<b-btn size="sm" variant="warning">X</b-btn>
{{ data.index + 1 }}
<b-btn size="sm" variant="warning">y</b-btn>
</template>
94/5000
I have also tried with the v-for the problem seems that it doesn't understand what it has to do with key random
Many thanks in advance
I have created a vue.js router and inserting the links found in an array using the structure found hereafter. This displays the links horizontally. However, I would like to insert dropdowns, instead of simple links. Can this be done using this or similar structure somehow?
<nav style="text-align: right">
<router-link class="spacing" v-for="routes in links"
v-bind:key="routes.id"
:to="`${routes.page}`">{{routes.text}}</router-link>
</nav>
links: [
{
id: 0,
text: 'Buy',
page: '/Buy'
},
{
id: 1,
text: 'Sale',
page: '/Sale'
},
{
id: 2,
text: 'Transactions',
page: '/Transactions'
},
{
id: 3,
text: 'Help',
page: '/Help'
}
]
Yeah, there are a few ways you could do that, though you'll have to loop over something different than the <router-link>, since that component renders an <a> tag.
I would first adjust your HTML to allow for the drop-down interaction you want, whether it's hover- or click-based, then change your data structure and loop to support it.
I might do something like this:
<nav style="text-align: right">
<div
class="nav-item"
v-for="link in links" // Move loop to container of shown link and it's dropdown markup
>
<router-link
:key="link.id"
:to="`${link.page}`"
>
{{ link.text }}
</router-link>
<div class="nav-item-drawer">
<router-link
v-for="subLink in link.subLinks"
:key="subLink.id"
:to="`${subLink.page}`"
>
{{ subLink.text }}
</router-link>
</div>
</div>
</nav>
with the following data structure:
links: [
{
id: 0,
text: 'Buy',
page: '/Buy',
subLinks: [
{
id: 0,
text: 'Buy Sublink 1',
page: '/Buy-more'
},
{
id: 1,
text: 'Buy Sublink 2',
page: '/Buy-less'
},
]
},
{
id: 1,
text: 'Sale',
page: '/Sale'
},
//...
]
I have a custom widget:
module.exports = {
extend: 'apostrophe-widgets',
label: 'Banner',
addFields: [
{
name: 'bannerImg',
type: 'attachment',
label: 'Picture',
def: 'http://via.placeholder.com/350x150'
}
]
};
And widget view:
<img class="logo" src="{{ apos.attachments.url(data.widget.bannerImg) }}" />
If I load image It's Ok I see it. But I don't have the default value. Also can I choose file from gallery without upload?
I spent a half of the day and found the solution:
as answered in: How to define widgets with default values in Apostrophe CMS
{% if apos.areas.isEmpty(data.widget, 'bannerImg') %}
<h1>Default Value</h1>
{% endif %}
{{ apos.singleton(data.widget, 'bannerImg', 'apostrophe-images', { limit: 1 }) }}
And also if we want to get href of this images:
{{ apos.attachments.url(apos.images.first(data.widget.bannerImg)) }}
Also in index.js I changed on:
{
name: 'bannerImg',
type: 'singleton',
label: 'Banner',
widgetType: 'apostrophe-images',
options: {
limit: 1
}
},