Related
I'm trying to correctly define OpenAPI spec for the purposes of generating api client from that spec. I've encoutered a problem where we have a complex query object with nested objects and arrays of objects for get a GET route.
Lets take these classes as an example.
class Person {
#ApiProperty()
name!: string
#ApiProperty()
location!: string
}
class CompanyDto {
#ApiProperty()
name!: string
#ApiProperty({
type: [Person],
})
employees!: Person[]
}
And a get request with #Query decorator.
#Get('test')
async testing(#Query() dto: CompanyDto): Promise<void> {
// ...
}
What I'm getting is.
{
get: {
operationId: 'testing',
parameters: [
{
name: 'name',
required: true,
in: 'query',
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'location',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
],
responses: {
'200': {
description: '',
},
},
tags: ['booking'],
},
}
I've also tries to define Query params by adding #ApiQuery decorator and it almost works.
#ApiQuery({
style: 'deepObject',
type: CompanyDto,
})
--
{
get: {
operationId: 'testing',
parameters: [
{
name: 'name',
required: true,
in: 'query',
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'location',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'name',
in: 'query',
required: true,
schema: {
type: 'string',
},
},
{
name: 'employees',
in: 'query',
required: true,
schema: {
type: 'array',
items: {
$ref: '#/components/schemas/Person',
},
},
},
],
responses: {
'200': {
description: '',
},
},
tags: ['booking'],
},
}
However now I'm getting duplicate query definitions mashed in to one. Is there a way to prevent or overwrite #Query definition? Or just a better way to define complex #Query in general?
Ended up creating a custom decorator to extract query without generating OpenAPI Spec.
export const SilentQuery = createParamDecorator(
(data: string | undefined, ctx: ExecutionContext) => {
const request = ctx.switchToHttp().getRequest()
if (data) {
return request.query[data]
} else {
return request.query
}
},
)
So now you can use #ApiQuery with deepObject style.
Also if your're using ValidationPipes with class-validator for example. Make sure to set validateCustomDecorators to true
#SilentQuery(new ValidationPipe({ validateCustomDecorators: true }))
I need to add some custom CSS to the fastify-swagger. My fastify-swagger version is: 3.5.0.
Now I did checked the fastify-swagger PR #353. However not able to figure out in the uiConfig .. how to pass the custom css.
Suppose I have a simple css file as MyCSS.scss:
.introduction {
.summary {
text-shadow: 0in;
}
}
.code {
background-color: gray;
color: black;
}
My swagger config looks like:
const swaggerConfig = {
swagger: {
info: {
title: 'My swagger',
description: `something`,
version: '2.0.0'
},
externalDocs: {
url: 'https://swagger.io',
description: 'Find more info here'
},
schemes: [`${schema}`],
consumes: ['application/json'],
produces: ['application/json'],
tags: [
{ name: 'tag1', description: 'desc1' },
{ name: 'tag2', description: 'desc2' },
],
securityDefinitions: {
Authorization_Token: {
type: 'apiKey',
name: 'Authorization',
in: 'header'
},
User_Token: {
type: 'apiKey',
name: 'X-User-token',
in: 'header'
}
}
},
exposeRoute: true,
routePrefix: `${constants.EXTERNAL_PATH}/api-docs`
};
fastify.register(require('fastify-swagger'), swaggerConfig);
The UI config doc says something like this (only literal value):
Any help would be highly appreciated.
I followed this tutorial for adding social media cards to my site: https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/
However, my url https://www.peregrinastro.com/articles/jupiter-saturn-conjunction-in-aquarius-part-1-fresh-air still returns this in twitter card validator:
INFO: Page fetched successfully
INFO: 5 metatags were found
ERROR: No card found (Card error)
I can see that I have all the metatags, so what can be the issue?
SEO component :
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, image: metaImage, title }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
keywords
author
url
twitter
facebook
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const image =
metaImage && metaImage.src
? `${site.siteMetadata.url}${metaImage.src}`
: null
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
name: "keywords",
content: site.siteMetadata.keywords.join(","),
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
property: `og:site_name`,
content: title,
},
{
property: `og:url`,
content: site.siteMetadata.url,
},
]
.concat(
metaImage
? [
{
property: "og:image",
content: image,
},
{
property: "og:image:width",
content: metaImage.width,
},
{
property: "og:image:height",
content: metaImage.height,
},
{
name: "twitter:card",
content: "summary_large_image",
},
{
name: "twitter:image:src",
content: image,
},
]
: [
{
name: "twitter:card",
content: "summary",
},
]
)
.concat([
{
name: `twitter:creator`,
content: site.siteMetadata.twitter,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
{
name: `twitter:site`,
content: site.siteMetadata.twitter,
},
])
.concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
image: PropTypes.shape({
src: PropTypes.string.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
}),
}
export default SEO
gatsby-config.js
const { isNil } = require("lodash")
const mapPagesUrls = {
index: "/",
}
module.exports = {
siteMetadata: {
title: `Peregrin Astrology`,
description: `astrology blog, horoscopes, mundane, historical astrology, birth chart consultations.`,
keywords: [
"astrology",
"astrologer",
"zodiac",
"signs",
"aries",
"taurus",
"gemini",
"cancer",
"leo",
"virgo",
"libra",
"scorpio",
"sagittarius",
"capricorn",
"aquarius",
"pisces",
"horoscope",
"forecast",
"mundane",
"birth chart",
],
author: `Pedro Coelho`,
url: "https://www.peregrinastro.com",
siteLanguage: "english",
twitter: "#peregrinastro",
facebook: "peregrinastro",
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`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/images/favicon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `https://astrobeats-cms.herokuapp.com`,
queryLimit: 10000, // Default to 100
contentTypes: [`article`, `category`, `author`],
//If using single types place them in this array.
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "fonts",
path: `${__dirname}/src/fonts/`,
},
},
{
resolve: "gatsby-plugin-web-font-loader",
options: {
google: {
families: ["Merriweather", "Montserrat", "Lato:100,300,400,700,900"],
},
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/,
},
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
}
I have this ==>
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
But my _ab_x_style has the data which is not user-friendly as I have wanted them to be. So I need a function to return a translation of those data to user-friendly words. The problem is HOW???
For that purpose, you need to apply a cellFilter to the cell content. And a translate function to drop down options which also has those non-userfriendly data.
cellFilter is a filter to apply to the content of each cell.
$scope.uiGrid306 = {
rowTemplate:rowtpl,
columnDefs: [{
field: '_ab_area', name: 'Area', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS }
}, { ...
}, {
field: '_ab_x_style', name: 'Groups', width: "5%", cellFilter: 'TranslateMe'
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
}
}
]//columnDefs
, enableFiltering: true
};//-->gridOptions
Right after your angular controller, you implement that filter by
Yours.controller('BodyController', function($scope, $http, $filter, uiGridConstants, $timeout, $resource) {
})
.filter( 'TranslateMe', function (){
return(function(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':(value=='dataExcepNew'?'aqua':'neutral')))));
});
});
Then, for your drop-down options, you also have to apply a function
function TranslateMe(value){
return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':'neutral'))));
}
for your options building as such
function loadOptions( $scope, serverdata ){
_.forEach( _.sortBy( _.uniq( _.pluck( serverdata, '_ab_x_style' )) ), function ( eachOpt ) {
RISKS.push( { value: eachOpt, label: TranslateMe(eachOpt) } )
} );
$scope.uiGrid306.columnDefs[10].filter.selectOptions = RISKS;
}
Result (instead of user unfriendly data, I have the names of the colors) --
this is my configuration in apostrophe-assets. did i miss something?
// This configures the apostrophe-assets module to push a 'site.less'
// stylesheet by default, and to use jQuery 3.x
module.exports = {
jQuery: 3,
stylesheets: [
{
name: 'bootstrap.min',
minify: true
},
{
name:'font-awesome.min',
path: 'fonts/css',
minify:true
},
{
name: 'style',
minify: false
},
{
name: 'site'
}
],
scripts: [
{
name: 'jquery-3.2.1.min',
minify:true
},{
name: 'popper'
},{
name: 'bootstrap.min'
},
{
name: 'custom'
},
{
name: 'site'
}
]
};
i have referred https://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html. also i have overwrite the existing module in apostrophe.
It would be interesting to know if its necessary to add jQuery: 3
look at my code:
lib/modules/apostrophe-assets/index.js
module.exports = {
stylesheets: [
{
name: 'site'
}
],
scripts: [
{
name: 'site'
},
{
name: 'lethargy.min'
},
{
name: 'smartscroll.min'
}
]
};
my js files are located in the default path like that:
lib/modules/apostrophe-assets/public/js/lethargy.min.js
You can push assets as well from every widget here for example in index js of :
lib/modules/example-widget/index.js
//Create functions for pushing assets to browser
afterConstruct: function(self) {
self.pushAssets();
},
//load third party styles and scripts
//init has all settings for fullpage
construct: function(self, options) {
self.pushAssets = function() {
self.pushAsset('stylesheet', 'vendor/materialize.min', { when: 'always' });
self.pushAsset('stylesheet', 'overrides', { when: 'always' });
self.pushAsset('script', 'vendor/materialize', { when: 'always' });
self.pushAsset('script', 'init', { when: 'always' });
};
}