I would like to change-replace the default (green) background image shown on my Docusaurus landing page.
Is there a way to do this in a simple way, given that I have limited experience with CSS & Javascript?
Thank you,
Add the classic preset to your docusaurus.config.js, and configure a custom.css file to be used.
module.exports = {
// […]
presets: [
[
'#docusaurus/preset-classic',
{
// […]
theme: {
customCss: [require.resolve('./src/css/custom.css')],
},
},
],
],
};
Then go to the custom.css file and add the following lines.
NOTE: If the the css file doesn't exist, create a it at: src/css/custom.css — and create the directories, if necessary.
:root {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
}
Now change to colors to your like!
IMPORTANT
It may be necessary to shutdown the docusaurus service and restart it.
REFERENCE
Note: I recommend that you check this reference, because it contains information that will help you.
https://docusaurus.io/docs/styling-layout
With classic theme, set your image into static/img.
-> src/css/custom.css :
.hero {
background-image: url("/static/img/back.jpg");
}
Go to file src/pages/index.js
add style={{backgroundImage: `url('/img/bg.jpg')`}} to of HomepageHeader().
Because the Docusaurus is based on React, thus the css style here follows the React JSX style which uses "backgroundImage" instead of "background-image". You can check the React documents for details.
An example of src/pages/index.js:
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: `url('/img/bg.jpg')`}}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
href="">
Hire Me
</Link>
</div>
</div>
</header>
);
}
Related
I'm looking for the right url to reference static assets, like images within Vue javascript.
For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found):
Main.vue:
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
I've tried putting the images in the assets folder and the static folder with no luck. Do I have to tell vue to load those images somehow?
For anyone looking to refer images from template, You can refer images directly using '#'
Example:
<img src="#/assets/images/home.png"/>
In a Vue regular setup, /assets is not served.
The images become src="data:image/png;base64,iVBORw0K...YII=" strings, instead.
Using from within JavaScript: require()
To get the images from JS code, use require('../assets.myImage.png'). The path must be relative (see below).
So your code would be:
var icon = L.icon({
iconUrl: require('./assets/img.png'), // was iconUrl: './assets/img.png',
// iconUrl: require('#/assets/img.png'), // use # as alternative, depending on the path
// ...
});
Use relative path
For example, say you have the following folder structure:
- src
+- assets
- myImage.png
+- components
- MyComponent.vue
If you want to reference the image in MyComponent.vue, the path sould be ../assets/myImage.png
Here's a DEMO CODESANDBOX showing it in action.
A better solution would be
Adding some good practices and safity to #acdcjunior's answer, to use # instead of ./
In JavaScript
require("#/assets/images/user-img-placeholder.png")
In JSX Template
<img src="#/assets/images/user-img-placeholder.png"/>
using # points to the src directory.
using ~ points to the project root, which makes it easier to access the node_modules and other root level resources
In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL.
computed: {
iconUrl () {
return require('./assets/img.png')
// The path could be '../assets/img.png', etc., which depends on where your vue file is
}
}
See VueJS templates - Handling Static Assets
Right after oppening script tag just add import someImage from '../assets/someImage.png'
and use it for an icon url iconUrl: someImage
this finally worked for me, image passed as prop:
<img :src="require(`../../assets/${image}.svg`)">
What system are you using? Webpack? Vue-loader?
I'll only brainstorming here...
Because .png is not a JavaScript file, you will need to configure Webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli has also configured this for you.
You can take a look at webpack.conf.js in order to see if it's well configured like
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
...
/assets is for files that are handles by webpack during bundling - for that, they have to be referenced somewhere in your javascript code.
Other assets can be put in /static, the content of this folder will be copied to /dist later as-is.
I recommend you to try to change:
iconUrl: './assets/img.png'
to
iconUrl: './dist/img.png'
You can read the official documentation here: https://vue-loader.vuejs.org/en/configurations/asset-url.html
Hope it helps to you!
It works for me by using require syntax like this:
$('.eventSlick').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
arrows: true,
draggable: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("#/assets/img/icon/Arrow_Left.svg")+'"></button>',
Having a default structure of folders generated by Vue CLI such as src/assets you can place your image there and refer this from HTML as follows <img src="../src/assets/img/logo.png"> as well (works automatically without any changes on deployment too).
I'm using typescript with vue, but this is how I went about it
<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class MyPage extends Vue {
MyImage = "../assets/images/myImage.png";
}
</script>
You could define the assets path depending on your environment
const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;
<template>
<img :src="`${assets}/logo.png`"/>
<p>path: {{assets}}</p>
</template>
<script>
export default {
data: () => ({
assets
})
}
</script>
Ideally this would be inside an utils js file, or as an extended app defineProperty, like:
const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);
and will be available as:
<template>
<img :src="`${$assets}/logo.png`"/>
<p>path: {{$assets}}</p>
</template>
<script>
export default {
mounted() {
console.log(this.$assets);
}
}
</script>
load them in created, mounted or where you need them
async created() {
try {
this.icon = (await import('#assets/images/img.png')).default;
} catch (e) {
// explicitly ignored
}
and then
<img :src=icon />
Inside code you can directly require image using.
const src = require("../../assets/images/xyz.png");
Or
In order to dynamically load image need this.
const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
};
Update 1
I tried the following as #kissu said but it didn't worked,
1.Adding the key directly in nuxt.config.js is not working :
chakra: {
extendTheme: {
breakpoints: ['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'],
}
},
Theme provider looks like this
<template>
<div class="container">
<CThemeProvider>
<CColorModeProvider>
<CBox font-family="body" as="main">
<CReset />
<siteHeader/>
<nuxt />
<siteFooter/>
</CBox>
</CColorModeProvider>
</CThemeProvider>
</div>
</template>
<script>
import {
CThemeProvider,
CColorModeProvider,
CReset,
CBox
} from '#chakra-ui/vue'
3.I tried applying classes corresponding to the breakpoints and also a custom color but it didn't helped too
<CBox bg="mpw.50" height="2rem" width="2rem">sadsad</CBox>
<CBox as="ul" list-style="none" d="flex" flexDirection="column">
<CBox as="li" list-style="none" borderBottom="2px solid #E8E8E8">
<CBox
:bg="[
'rebeccapurple','blue','yellow','orange','grey','#8B008B','#7FFF00'
]"
padding="1rem" d="flex" v-bind="mainStyles[colorMode]">
<CImage :src="require('#/assets/imgs/patient.png')" w="5rem" h="5rem" alt=""/>
<CBox flex="1 1 0" padding="1rem" paddingTop="0" paddingBottom="0" v-bind="mainStyles[colorMode]">
<CText fontSize="2xl" >
Home Isolation Patients
</CText>
<CText pr="0.5rem">
Lorem ipsum xyzzzz
</CText>
anything else that I should try now ?
Original Post is below
I am unable to extendTheme in Chakra UI in my NUXT JS app. I want to use my own breakpoints as per my designs, which means that I need to have more than 4 breakpoints in my app.
In my nuxt.config.js I am importing it and using like below :
import customTheme from './customTheme/custom-theme.js'
chakra: {
extendTheme : customTheme
},
The file custom-theme.js
console.log("LOADING CUSTOM THEME")
export default {
// '38rem', '48rem', '62rem', '80rem',
breakpoints:[ '89rem','86rem','90rem','120rem','200rem','300rem'],
colors:{
mpw:{
50:"#EBEBEB",
}
}
}
When I do console.log in my index.vue
mounted() {
if(process.server){
console.log("ON SERVER")
console.log(this)
}
if(process.client){
console.log("ON CLIENT")
console.dir(this.$chakra.theme)
}
},
then I don't see my custom breakpoints
How can I add my own set of breakpoints like those breakpoints:['89rem', '86rem', '90rem', '120rem', '200rem', '300rem'] ?
I was trying to use to embed the svg picture but it does not show anything. I looked at some other threads and it was suggested to add type="image/svg+xml", however, it did not solve the issue. When I am trying to look at the DOM for some reason it seems to create an endless loop. I attached the picture
This is the compononent
<template>
<div class="logo">
<object type="image/svg+xml" data="logo.svg">
</object>
</div>
</template>
This is the app.vue
template>
<div id="app">
<Demo></Demo>
</div>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'app',
components: {
Demo
}
}
</script>
```[![Snapshot][1]][1]
[1]: https://i.stack.imgur.com/Q6ipO.png
This happen because vue-loader doesn’t recognize paths in just any attribute. By default just recognize these ones: https://vue-loader.vuejs.org/options.html#transformasseturls
So, there are 3 possible solutions
Note: If you are not using eslint as linter you could remove eslint comments
1: Bind the route to your image
First add the next variable to your data in the component
data() {
return {
// eslint-disable-next-line global-require
mySvg: require('../assets/logo.svg'),
};
},
Next modify your template
<object type="image/svg+xml" :data="mySvg">
2: Add vue-loader rule
If you don't want to have to bind every svg image, you could add a rule to vue-loader in order to say how to handle data attribute in a object
Go to your webpack config file, if you created the project using vue-cli 3.x you have to create a vue.config.js file in the root (same level that package.json)
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap((options) => {
// eslint-disable-next-line no-param-reassign
options.transformAssetUrls = {
object: 'data',
};
return options;
});
},
};
if you want to check that the config was added, execute vue inspect > webpack.config and expect see something like this (inside webpack.config):
{
loader: 'vue-loader',
options: {
...
transformAssetUrls: {
object: 'data'
}
}
}
More info: https://cli.vuejs.org/guide/webpack.html#working-with-webpack
3: Replace default loader and use svg as vue components
Other option is use vue-svg-loader. This loader inlines the SVGs which enables you to modify them using css. Also optimize your files with SVGO
See more: https://vue-svg-loader.js.org/#vue-cli
It is worth checking that you don't have a CSS rule hiding object tags. Otherwise it seems correct. You probably need to check the path and make sure you can reach your image. I assume your filename is a dummy, but try to use an absolute path. And make sure you can hit the path and see the image in your browser.
I am trying to print a VueJS component with custom print style.
Three Vue plugins look interesting on this subject:
1.printd
2.vue-print-nb
3.html-to-paper
Out of the three only html-to-paper has a options object that can pass a custom css style in order to dynamically pass some print css.
My issue is that i can't seem to load the custom css, and also bootstrap classes are messed up on print action.
This is basically what i am doing.
import VueHtmlToPaper from 'vue-html-to-paper'
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'./myPrint.css'
]
}
Vue.use(VueHtmlToPaper, options)
Any suggestion is welcomed.
Thanks
I have tried all these three I think the best one is print.js which is not specifically for Vue.js but it is easily install-able and usable in the vue components.
For example
<script>
import print from "print-js";
export default {
methods: {
printing() {
const style =
"#page { margin-top: 400px } #media print { h1 { color: blue } }";
const headerStyle = "font-weight: 300;";
printJS({
printable: "rrr",
type: "html",
header: "Doctor Name",
headerStyle: headerStyle,
style: style,
scanStyles: false,
onPrintDialogClose: () => console.log("The print dialog was closed"),
onError: e => console.log(e)
});
},
printVisit(id) {
this.$htmlToPaper("rrr");
this.$htmlToPaper("rrr", () => {
console.log("Printing completed or was cancelled!");
});
}
}
};
</script>
VueHtmlToPaper opens a new window with its own style tag. So when you pass a CDN it works, if u pass a local file it does not because it tries to access the resource in your web server but in the wrong URL. Let's see how the page looks when we use a CDN and a local CSS file.
CDN
<html>
<head>
<link rel="style" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
</body>
</html>
Local CSS file
And let's say you are calling the print function from http://localhost:8080/somepage
<html>
<head>
<link rel="style" href="./myPrint.css">
</head>
<body>
</body>
</html>
This will try to open http://localhost:8080/somepage/myPrint.css. Obviously this will not be accessible to print dialogue.
Solution
Put your custom CSS file in the public or static folder (Where you usually keep favicon)
Modify script path in options, prepend server basepath with the CSS file
Sample Option
import VueHtmlToPaper from 'vue-html-to-paper'
/* This will change according to your server */
let basePath= 'http://localhost:8080';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
`${basePath}/myPrint.css`
]
}
Vue.use(VueHtmlToPaper, options)
Also, the simplest way to access root-relative path is to use /. User /style.css instead of ./style.css
Does anyone have examples of Google Street View working on Squarespace using the API?
I have been able to use other examples to display google maps (non street view) but when I try to get Google's street view example to work... nothing.
Here is my attempt:
http://keweenaw.squarespace.com/googlemapsapitest
I have this code in my page header code injection
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize">
</script>
And this in a code block on the page:
<div id="street-view""></div>
You've got a number of issues which, once corrected, do in fact generate a working embedded Google Street View on a test Squarespace account.
You have a space at the beginning of your API key, causing it to be invalid.
You have an extra set of double quotes on <div id="street-view""></div>
Your CSS rule `#street-view {height: 100%;} won't work. Briefly put, you'll have to define a height in pixels, like "400px" or a similar 'fixed' unit.
You are loading the API over HTTPS but your site is HTTP. You need to either enable SSL on your Squarespace site or change the API url to http://maps.googleapis.com/maps/...etc. The prior is likely preferred.
By opening your browser's console (F12) you can see the specific error messages and work through them one by one (although, having seen these before certainly makes diagnosis faster).
To get you back on the right track, I would put the following code entirely in a code block on the page, where you want the map to appear. You can adjust width and height via your CSS. Once you get it working, you can experiment (if you choose) with moving your CSS to the CSS Editor and your Javascript to Code Injection.
<div id="street-view"></div>
<style>
#street-view {
height: 400px;
width: 100%;
}
</style>
<script>
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1
}
);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSlsYgCGP7KfS5doe_q0X9guiJ3WNrfns&callback=initialize"></script>
Also, note that the code above is using HTTP for the Maps API so that it will work with your current configuration. If you choose to enable SSL as mentioned, you'll need to change the Maps API url to HTTPS.
Here is a working example, using HTTPS. This example will quit working soon.