I'm making a blog in Gatsby.js using markdown and I want to use CSS grid in my blogposts to display a nice grid of images.
So I know Gatsby has got fantastic plugins to solve almost every problem.
I found out about gatsby-remark-images-grid which is supposed to solve my problem, but I can't seem to get it to work.
I did install it correctly (I think: npm install gatsby-remark-images-grid --save), put it in my gatsby-config.js, which looks like this:
module.exports = {
siteMetadata: {
title: 'Kids and Coconuts',
siteUrl: 'https://kidsandcoconuts.com',
},
plugins: [
'gatsby-plugin-react-helmet',
`gatsby-plugin-sharp`,
`gatsby-transformer-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/gatsby-icon.png', // This path is relative to the root of the site.
},
},
`gatsby-plugin-catch-links`,
'gatsby-plugin-offline',
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`,
{
resolve: "gatsby-remark-images-grid",
options: {
},
},
]
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content`,
name: "pages",
},
},
],
}
and I tried to put a image grid in one of my blogpost:
```
```
Does somebody see what am I forgetting or doing wrong?
Define the path in the markdown file. If markdown files are in src/pages/index.md and in src/images/image.jpg you would put this in the MD file.
images:
- /images/image1.jpg
- /images/image2.jpg
- /images/image3.jpg
Related
I'm facing a problem with CKeditor (V4.17.0). I'm using it in a Symfony (V5) project. I installed the WYSIWYG with this doc. Then I downloaded the Non-breaking space plugin, I placed it in the path public/bundles/fosckeditor/plugins and I configured my yaml file:
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
default_config: config
configs:
config:
allowedContent: true
extraPlugins: 'nbsp'
removePlugins: 'elementspath,exportpdf,image,media, about'
toolbar:
- { name: "styles", items: [ 'Bold', 'Italic', 'Strike' ] }
- { name: "plugins", items: ['insertNbsp'] }
- { name: "paragraph", items: ['NumberedList'] }
plugins:
nbsp:
path: 'ckeditor/plugins/nbsp/'
filename: 'plugin.js'
My webpack.config.js :
.copyFiles([
{
from: './assets/images',
to: 'images/[path][name].[ext]',
},
{
from: './node_modules/ckeditor4/',
to: 'ckeditor/[path][name].[ext]',
pattern: /\.(js|css)$/,
includeSubdirectories: false,
},
{
from: './node_modules/ckeditor4/adapters',
to: 'ckeditor/adapters/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/lang',
to: 'ckeditor/lang/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/skins',
to: 'ckeditor/skins/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/vendor',
to: 'ckeditor/vendor/[path][name].[ext]'
},
{
from: './public/bundles/fosckeditor/plugins',
to: 'ckeditor/plugins/[path][name].[ext]'
},
])
The editor appear on the page, in my toolbar I've got everything I asked except the Non-breaking space plugin.
How can I insert into it ?
I don't think this plugin is used that way. You can't, if I'm not mistaken, load that into the toolbar.
Would it be possible for you to use this source code instead of the original plugin.js
CKEDITOR.plugins.add( 'nbsp',
{
init : function( editor )
{
editor.ui.addButton('Insert  ', {
label: 'Insert ',
command: 'insertNbsp',
toolbar: 'insert',
icon: this.path + 'icons/icon.png'
});
// Insert if Ctrl+Space is pressed:
editor.addCommand( 'insertNbsp', {
exec: function( editor ) {
editor.insertHtml( ' ', 'text' );
}
});
editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
}
} );
think about creating an icons folder as well as an icon of your choice to see a button in your toolbar.
my Test config file is not able to find the spec file. i already have spec files created. previously i ran those scripts also.. but for more framework update i updated the paths of the files.. that makes spec files error and even i gave the full path also it is not able to find the spec file.
Spec File
var utilityInit,page2//browser2;
page1=new facebook(firstBrowser);
module.exports=function(){
this.Given(/^Open the browser and Load the URL$/,async function(){
await firstBrowser.get(properties.get("url1"));
browser.logger.info("Title of the window is :"+await browser.getTitle());
//screenshots.takesScreenshot("filename");
});
this.When(/^User entered the text in the search box$/,async function(){
firstBrowser.sleep(3000);
await page1.email().sendKeys(testData.Login.CM[0].Username);
browser.sleep(3000);
await page1.password().sendKeys(testData.Login.CM[0].Password);
});
this.Then(/^click on login button$/,async function(){
browser.sleep(3000);
await facebook.submit().click();
});
this.Then(/^User tried to open in new browser instance$/,async function(){
browser2=await openNewBrowser.newBrowserInit(firstBrowser);
utilityInit=new utility(browser2);
utilityInit.ignoreSync(properties.get("url2"));
browser2.manage().window().maximize();
console.log(await utilityInit.title()+" title");
browser2.sleep(5000);
});
this.When(/^User entered the text in the email field$/,async function(){
page2=new facebook(browser2);
console.log(await page2.title()+" browser2");
await page2.search().sendKeys("testing");
browser2.sleep(3000);
page1=new facebook(firstBrowser);
console.log(await page1.title()+" browser1")
await page1.email().sendKeys(testData.Login.CM[0].Username);
screenshots.takeScreenshot("newScreenshot");
firstBrowser.sleep(5000);
})
}
Config file
const log4js = require('log4js');
var fs=require('fs');
global.screenshots = require('protractor-take-screenshots-on-demand');
global.browser2;
var propertiesReader=require('properties-reader');
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect:true,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome',
metadata: {
browser: {
name: 'chrome',
version: '79'
},
device: 'MacBook Pro 15',
platform: {
name: 'OSX',
version: '10.12.6'
},
disableLog:true,
durationInMS:true,
openReportInBrowser:true
}
},
ignoreUncaughtExceptions:false,
// Spec patterns are relative to this directory.
specs: [
'../Proc/src/test/java/com/proc/features/test.feature'
],
beforeLaunch:function(){
if (fs.existsSync('./logs/ExecutionLog.log')) {
fs.unlink('./logs/ExecutionLog.log')
}
log4js.configure({
appenders: {
out: { type: 'console' },
info:{ type: 'dateFile', filename: '../Reports/logs/info', "pattern":"-dd.log",alwaysIncludePattern:false},
"console" : {
"type": "console",
"category": "console"
},
"file" : {
"category": "test-file-appender",
"type": "file",
"filename": "../Reports/logs/log_file.log",
"maxLogSize": 10240,
// "backups": 3,
// "pattern": "%d{dd/MM hh:mm} %-5p %m"
}
},
categories: {
"info" :{"appenders": ["console"], "level": "info"},
"default" :{"appenders": ["console", "file"], "level": "DEBUG"},
//"file" : {"appenders": ["file"], "level": "DEBUG"}
}
});
},
cucumberOpts: {
require:['../src/test/resources/com.proc.utility/timeOutConfig.js','../src/test/java/com/proc/TestCases/spec.js'],
tags: false,
profile: false,
format:'json:../Reports/jsonResult/results.json',
'no-source': true
},
onPrepare: function () {
const logDefault = log4js.getLogger('default');
const logInfo=log4js.getLogger('info');
screenshots.browserNameJoiner = ' - '; //this is the default
//folder of screenshot
screenshots.screenShotDirectory = '../Screenshots';
global.openNewBrowser=require("../src/test/resources/com.proc.utility/newBrowserinstance.js")
global.testData=require("../TestData/testData.json");
browser.logger = log4js.getLogger('protractorLog4js');
global.firstBrowser=browser;
global.properties=propertiesReader("../TestData/propertyConfig.properties");
browser.waitForAngularEnabled(false);
browser.manage().window().maximize();
global.facebook=require("../src/test/java/com/proc/pages/fbPageObjects.js");
global.utility=require("../src/test/resources/com.proc.utility/testFile.js");
},
plugins: [{
package: '../Proc/node_modules/protractor-multiple-cucumber-html-reporter-plugin',
options:{
// read the options part for more options
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true,
reportPath:"../Reports/HtmlReports",
reportName:"test.html"
},
customData: {
title: 'Run info',
data: [
{label: 'Project', value: 'Framework Setup'},
{label: 'Release', value: '1.2.3'},
{label: 'Cycle', value: 'Test Cycle'}
]
},
}]
};
Log
H:\workspace\Proc\Configuration>protractor testConfig.js
[23:38:00] I/launcher - Running 1 instances of WebDriver
[23:38:00] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:51680/devtools/browser/e9688f83-2047-4535-91ba-bf2100fe6016
0 scenarios
0 steps
0m00.000s
can some one please help me to clear this issue.. this is related to my project framework POC..
To clarify some other comments I have seen being made by others here, you do not have to give the exact file path. You can do
specs: [
'../Proc/src/test/java/com/proc/features/']
This path does not look correct to me ^ are you sure that is the correct path? also you have a javascript project but your file structure is a java structure src/test/java why?
it's a simple thing that makes my framework works..
npm install cucumber#1.3.3 --save-dev
This because of the Spec path
specs: [
'../Proc/src/test/java/com/proc/features/test.feature' //Provide a complete path to your test file along with file extension(.ts)
],
Hope it helps you
I have a simple angular application (https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html) and I am attempting to add graphical overlays using hopscotch.js (http://linkedin.github.io/hopscotch/). I got hopscotch to run successfully from my index.html by calling this script:
` //my_tour.js
// Define the tour!
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "title",
placement: "bottom"
}
]
};
// Start the tour!
hopscotch.startTour(tour);`
but when trying to make it apart of my angular app I cannot/do not know how to correctly connect it with its dependencies(hopscotch.js, hopscotch.css). I am very new to angular2 and have spent most of today researching this but to no avail. Something as simple as a .ts file that is apart of my app and can make a call to hopscotch.startTour(tour); would be sufficient. Any help would be appreciated! Thanks.
This is what I did with Angular 4.4.6:
Install hopscotch.
npm install hopscotch --save
In ".angular-cli.json"...
{
"apps": [
{
"styles": [
"../node_modules/hopscotch/dist/css/hopscotch.min.css"
]
}
]
}
In "your.component.html"...
<div #elementOneId>Element One</div>
<div #elementTwoId>Element Two</div>
<button (click)="doTour()">Do Tour</button>
In "your.component.ts"...
import * as hopscotch from 'hopscotch';
export class YourComponent {
#ViewChild('elementOneId') elementOne: ElementRef;
#ViewChild('elementTwoId') elementTwo: ElementRef;
doTour() {
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "Step 1",
content: "blah blah blah",
target: this.elementOne.nativeElement,
placement: "left"
},
{
title: "Step 2",
content: "I am the step for element 2...",
target: this.elementTwo.nativeElement,
placement: "bottom"
},
]
};
hopscotch.startTour(tour);
}
}
We are using dojo in our product extensively and recently all pages with Enhanced grid were updated to gridx and its working fine.
We had compressed gridx files into dojo through Dojo custom build without errors ( i have included all these js files into profile.js file and gridx folder is at the same level where dojo,dijit,dojox are there),i still see my pages requesting few gridx/modules files when page is loaded.
Can someone tell how to avoid downloading these files.
This is profile.js used,its trimmed down to show only gridx related files.
var profile = (function() {
return {
basePath: "./",
releaseDir: "blinkx",
releaseName: "dojo_lib22",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "warn",
selectorEngine: "lite",
resourceTags: {
amd: function(filename, mid) {
return false;
}
},
packages: [{
name: "dojo",
location: "dojo"
}, {
name: "dijit",
location: "dijit"
}, {
name: "dojox",
location: "dojox"
}, {
name: "gridx",
location: 'gridx'
}],
layers: {
"dojo": {
include: ["gridx/nls/gridx",
"gridx/modules/extendedSelect/Column",
"gridx/modules/extendedSelect/Cell",
"gridx/modules/extendedSelect/_RowCellBase",
"gridx/modules/extendedSelect/_Base",
"gridx/modules/AutoScroll",
"gridx/modules/select/Row",
"gridx/modules/CellWidget",
"gridx/modules/NavigableCell",
"gridx/modules/Edit",
"gridx/core/model/extensions/Modify",
"gridx/core/model/extensions/Mark",
"gridx/modules/HiddenColumns",
"gridx/modules/RowLock",
"gridx/core/model/cache/Async",
"gridx/core/model/cache/Sync",
"gridx/core/model/_Extension",
"gridx/core/model/Model",
"gridx/core/Row",
"gridx/core/Column",
"gridx/core/Cell",
"gridx/core/_Module",
"gridx/core/model/extensions/Query",
"gridx/modules/Header",
"gridx/modules/View",
"gridx/modules/Body",
"gridx/support/query",
"gridx/modules/VLayout",
"gridx/modules/HLayout",
"gridx/modules/VScroller",
"gridx/modules/HScroller",
"gridx/modules/ColumnWidth",
"gridx/modules/Focus",
"gridx/modules/Pagination",
"gridx/modules/pagination/PaginationBar",
"gridx/support/Summary",
"gridx/modules/Bar",
"gridx/support/LinkPager",
"gridx/support/LinkSizer",
"gridx/support/GotoPageButton",
"gridx/support/GotoPagePane",
"gridx/modules/SingleSort",
"gridx/core/model/extensions/Sort",
"gridx/modules/Filter",
"gridx/core/model/extensions/ClientFilter",
"gridx/modules/filter/FilterBar",
"gridx/modules/filter/FilterDialog",
"gridx/modules/filter/FilterPane",
"gridx/modules/filter/DistinctComboBoxMenu",
"gridx/modules/filter/FilterConfirmDialog",
"gridx/modules/filter/FilterTooltip",
"gridx/modules/filter/QuickFilter",
"gridx/support/QuickFilter",
"gridx/modules/Puller",
"gridx/modules/VirtualVScroller",
"gridx/modules/Menu",
"gridx/modules/ColumnResizer",
"dijit/form/FilteringSelect",
"gridx/modules/RowHeader"
],
customBase: true,
boot: true
}
}
};
})();
I'm following the official documentation page about the topic but I cannot configure it to ignore .txt files.
I have a all.profile.js on the root of my project:
var profile = (function(){
return {
basePath: "./",
releaseDir: "../web",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{ name: "myapp", location: "myapp" }
]
};
})();
And this is the package.json inside the folder myapp:
{
"dojoBuild": "myapp.profile.js",
"name": "my-app",
"description": "This is My App",
"version": "1.0",
"main": "src"
}
And this is the myapp.profile.js also inside the folder myapp:
var profile = (function(){
return {
// don't need to do anything on the 'test' folder so don't define it on the trees.
trees: [
["libs","libs",/txt$/], // ignore .txt files -> DOESN'T WORK!
["src","src",/txt$/] // ignore .txt files -> DOESN'T WORK!
],
resourceTags: {
test: function(filename, mid){
console.log("[test] filename: ",filename);
return filename.indexOf("test/") !== -1;
},
copyOnly: function(filename, mid){
//console.log("[copyOnly] mid: ",mid);
return false;
},
miniExclude: function (filename, mid) {
console.log("[miniExclude] filename: ",filename);
return mid in {
'myapp/myapp.profile': 1,
'myapp/package.json': 2
} || mid.indexOf(".txt") !== -1; // .txt are not ignored so exclude them...
},
amd: function(filename, mid) {
//console.log("[amd] mid: ",mid);
// myapp is not AMD but this will 'convert' it
return false;
}
}
};
})();
Finally, this is the folder structure:
web_dev/
-- myapp/
---- libs/
---- src/
---- test/
---- myapp.profile.js
---- package.json
-- all.profile.js
The build tool runs fine, it reads and process all files but the .txt files are still on the release dir.
Please let me know if you spot any mistakes on my logic or how I'm configuring the build system. I'm using Dojo 1.9.1.
Thanks in advance.
I'm not sure what is wrong with my initial scenario but here are the changes that I made to have the desired result:
Move the trees declaration from the myapp.profile.js to
all.profile.js inside the 'myapp' package definition.
Instead of specifying the root of the trees, check
everything and exclude accordingly: [".", ".",
/(\/\.)|(~$)|(test|txt)/]
The final all.profile.js:
var profile = {
basePath: "./",
releaseDir: "../web",
releaseName: "built",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{
name: "myapp",
location: "myapp",
trees: [
// don't bother with .hidden, tests and txt.
[".", ".", /(\/\.)|(~$)|(test|txt)/]
]
}
]
};
If anyone can pin point exactly what I was doing wrong, please share.