there's some way to make fluid an image imported in a .mdx file?
I have a Gatsby site base on mdx file post, I install gatsby-remark-image-attributes and gatsby-remark-images.
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/templates/blog-post.js"),
default: require.resolve("./src/components/layout.js"),
},
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 966,
withWebp: true,
},
},
{
resolve: `gatsby-remark-image-attributes`,
options: {
styleAttributes: true,
dataAttributes: false
},
},
{
resolve: `gatsby-remark-highlight-code`,
},
]
},
The style seems to work, but the images I pass in my mdx files aren't fluid at all.
Anyone knows if it is possible to have fluid images in mdx file?
What about adding something like:
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
},
}
Credits: gatsby-remark-images docs
Disclaimer: _ stands for lodash dependency. As you can see in the package.json (line 15) it's a dependency of the gatsby-remark-images. I would not recommend installing a huge library as lodash is only for this utility since it will increase your bundle size. You can achieve the same result as _.round using some vanilla JavaScript approach but as testing purposes may be interesting to try lodash to know if with this approach you are able to create a fluid wrapper.
Related
So I'm using vite to build my Vue 3 application for a legacy website which still uses jQuery and a few other JS frameworks.
I'm using the esm bundler as I would still like to boot it up and use it with slotted components.
<div id="app">
<vue-component-name></vue-component-name>
</div>
And it works perfectly. But when jQuery is used on the page, no where near my components it seems the esm bundled version of Vue has set a global variable named $ which breaks jQuery.
Has anyone had this issue or know of a way to fix it?
import { defineConfig } from 'vite';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
import svgLoader from 'vite-svg-loader';
import vue from '#vitejs/plugin-vue';
import path from 'path';
const vitestConfig : VitestUserConfigInterface = {
test: {
globals: true,
include: ['./tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
};
export default defineConfig({
test: vitestConfig.test,
plugins: [vue(), svgLoader()],
base: '/',
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
'#': path.resolve(__dirname, '/src'),
},
},
build: {
outDir: '../wwwroot/dist',
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: {
main: './src/main.ts',
},
output: {
entryFileNames: 'assets/js/[name].js',
chunkFileNames: 'assets/js/[name].js',
assetFileNames: ({ name }) => {
if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
return 'assets/images/[name][extname]';
}
if ((name ?? '').endsWith('.css')) {
return 'assets/css/[name][extname]';
}
return 'assets/[name][extname]';
},
globals: {
vue: 'Vue',
},
},
},
},
server: {
hmr: {
protocol: 'ws',
},
},
});
EDIT:
More information, I've tracked this down to using
#input="handleInput($event.target, index)"
This right here breaks existing jQuery. Still no idea how to get around it
For anyone interested, How to wrap Vite build in IIFE and still have all the dependencies bundled into a single file?
I'm using "gatsby-plugin-sitemap": "^2.4.2" tho, it doesn't work after install "gatsby-plugin-intl": "^0.3.3" on Amplify even tho it works on Local env well.
This is the URL, but automatically it's moved to https://www.babylook.mom/.
https://www.babylook.mom/sitemap.xml
Below is the gatsby-config.js
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
The plugin's order is important in Gatsby, try putting the gatsby-plugin-intl above since it's the one in charge of prefix all the URLs with the provided locales:
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
In addition, you may want to explore all the query options that the gatsby-plugin-sitemap provides.
My site file structure is something like this:
app
less
themes
default
modern
etc
public
themes
default
css
modern
css
etc
So /app/less/themes/{{ themeName }}/*.less will compile into /public/themes/{{ themeName }}/css/*.css.
I have my Grunt Less task set up dynamically and working fine.
Example: grunt less:compileTheme:modern
less: {
compileTheme: {
options: {
compress: false,
yuicompress: false,
optimization: 2,
sourceMap: true,
sourceMapFilename: "public/themes/<%= grunt.task.current.args[0] %>/css/styles.css.map",
sourceMapURL: "/themes/<%= grunt.task.current.args[0] %>/css/styles.css.map"
},
files: {
"public/themes/<%= grunt.task.current.args[0] %>/css/styles.css": "app/less/themes/<%= grunt.task.current.args[0] %>/styles.less"
}
}
}
But I'm not sure how to get the Grunt Watch task working. Ideally, it'll see the theme folder name and run the grunt task as grunt less:compileTheme:{{ themeName }}:
watch: {
themeCss: {
files: "app/less/themes/{{ themeName }}/**/*.less",
tasks: ["less:compileTheme:{{ themeName }}"],
options: {
spawn: false
}
}
}
Is this possible? And/or is there a better way I should be doing this?
edit your watch task to run the less:compileTheme-task without themeName, and watch all less files in your themes folder:
watch: {
themeCss: {
files: "app/less/themes/**/*.less",
tasks: ["less:compileTheme"],
options: {
spawn: false
}
}
}
now you can add a watch event-handler where you get the changed file. extract the themeName, and configure your less-task:
grunt.event.on('watch', function(action, filepath) {
var themeName = filepath.split('/')[3];
grunt.config('less.compileTheme.files', {
"public/themes/" + themeName + "/css/styles.css": "app/less/themes/" + themeName + "/styles.less"
});
});
of course the detection of your themeName should be more reliable, but i think you get the idea on how to do dynamic watching!
I use requirejs to distribute the code into a single file.
In grunt.initConfig, I have:
grunt.initConfig({
requirejs: {
compile: {
options: {
paths: requirejs_path,
shim:require_shim,
baseUrl : "./mobile",
name: "mobilemain",
out: "./mobile/dist/main.js",
removeCombined: true,
findNestedDependencies: true,
optimize: "uglify2",
wrap: true,
uglify2: requirejs_uglify2
}
}
}
}
this this part of code to set up requirejs. and I use
grunt.registerTask("distribute", ["typescript", "requirejs"]);
to register it to a task distribute, all works fine.
Now I want to call requirejs twice in the distribute task, once for mobile and once for desktop. Basically I will need to change the baseUrl, name, and out config in the above code.
How can I do that?
grunt-contrib-requirejs is a multitask where you can simply configure as much sub-tasks as you want (using the options property)
grunt.initConfig({
requirejs: {
// define your base options which are the same for both tasks
options: {
paths: requirejs_path,
shim:require_shim,
removeCombined: true,
findNestedDependencies: true,
optimize: "uglify2",
wrap: true,
uglify2: requirejs_uglify2
},
// your first task which contains the 3 options which should be used
compile: {
options: {
baseUrl : "./mobile",
name: "mobilemain",
out: "./mobile/dist/main.js"
}
},
// your second task which contains the 3 options which should be used
compile2: {
options: {
baseUrl : "...",
name: "...",
out: "..."
}
}
}
}
then you can leave your alias-task distribute as it is, because grunt will run all sub-tasks if none is specified
grunt.registerTask("distribute", ["typescript", "requirejs"]);
or you can simply just run a single sub-task using the colon-notation:
grunt.registerTask("distribute", ["typescript", "requirejs:compile", "requirejs:compile2"]);
the second one would be useful if you absolutly must guarantee, that compile needs to be run before compile2 (remember: javascript does not guarantee property order in objects)
I have the following build profile for a small app:
var profile = (function(){
var copyOnly = function(filename, mid){
/* ..snip.. */
};
return {
basePath: "../../src",
releaseDir: "../dist",
releaseName: "lib",
action: "release",
packages: [
'dojo',
'dijit',
//'dojox',
'amd',
{
name: 'lodash',
location: 'lodash',
trees: [
[".", ".", /(\/\.)|(~$)|(vendor|test)/]
]
},
{
name: 'd3',
location: 'd3',
main: 'd3.min',
trees: [
[".", ".", /(\/\.)|(~$)|(src|lib|test)/]
]
},
{ name: 'app', location: 'app' }
],
layers: {
"dojo/dojo": {
include: [ "dojo/dojo", "amd/d3","amd/gmaps",
"app/main", "app/run" ],
customBase: true,
boot: true
}
},
resourceTags: {
/* ..snip.. */
}
};
})();
The problem is this: all I need is the lodash.min.js file to be processed by the Dojo build system. Unfortunately, when you include a package definition in your profile, the build system looks at all files in the relevant directory using an implicit trees value. You can overwrite it (as I have done here) and add some ignore directives, but this is ugly and leaves you open to missing something of. What I'd like to do is affirmatively indicate precisely which file(s) that I'm interested in processing for my build process.
Does Dojo allow you to do this? The documentation is a little scant in this area, but if you can help me find a resource that explains this more clearly, that would be great!
As of 1.9 at least, I believe this can be done:
// ... snip ...
{
name:'lodash',
location:'lodash',
trees:[],
dirs:[],
files:[
["lodash.min.js"]
]
},
This explicitly lists the files, while also squashing implicit tree and directory discovery.
My belief here is based on a cursory review of util/build/discover.js -- but as I read the documentation files only should be supported.