I'm trying to add the wowhead tooltips to a docusaurus page.
The wowhead documentation suggests you need to add the following to your <head> section:
<script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
<script src="https://wow.zamimg.com/widgets/power.js"></script>
I can add the https://wow.zamimg.com/widgets/power.js fine using the scripts configuration option which works fine with defer or async:
module.exports = {
// Snipped rest of configuration
scripts: [
{
src:
'https://wow.zamimg.com/widgets/power.js',
defer: true,
},
],
For the inline portion <script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script> I have tried using a <Head> component in my index.js <Layout> section and had no success.
How can I add this inline script properly to docusaurus so it loads before the wowhead script?
Using the advice from D.Kastier, I successfully solved my problem, granted it wasn't very elegant.
To load the script properly, and have it update after the page initially loads:
injectHtmlTags() {
return {
headTags: [
// https://www.wowhead.com/tooltips
{
tagName: 'script',
innerHTML: `
const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
console.log('Updating tooltips from plugin');
window.$WowheadPower.refreshLinks();
}
});
`,
},
{
tagName: 'script',
attributes: {
defer: true,
src: 'https://wow.zamimg.com/widgets/power.js',
},
},
],
};
},
Then to update the tooltips each time the page changes:
onRouteUpdate({location}) {
setTimeout(function() {
window.$WowheadPower.refreshLinks();
}, 0);
},
Related
Edit: Restarting react fixed the issue, the following code works as expected.
I am trying to enable the DebugView mode in Google analytics but events are not being shown or are logging in any way. I am using react-ga4: https://www.npmjs.com/package/react-ga4 and it says here you can enable debug by passing in the config: https://support.google.com/analytics/answer/7201382?hl=en#zippy=%2Cglobal-site-tag-websites
I believe the following code should enable the DebugView mode in the google analytics:
ReactGA.initialize([
{
trackingId: "G-TRACKINGID",
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
},
]);
Then to trigger event I have the following code in an onClick handler:
ReactGA.event({
action: "action_button",
category: "category_button",
label: "label_button",
value: 44,
});
This worked for me :
ReactGA.initialize("G-TRACKINGID", {
gaOptions: {
debug_mode: true,
},
gtagOptions: {
debug_mode: true,
},
});
I've built a static website for my next JS app that uses tailwind CSS for styling. I'm using statically as a CDN. The website in the development server(local host) works perfectly alright. However, in production, certain parts of styling seem to be broken (Header, Footer, and toggling between dark/light mode to be precise). Attaching screenshots for reference.
Local server:
Production:
When I inspect the corresponding elements in local and production env, there seems to be no difference in the HTML structure and class names, but when I hover over the broken elements (nav items in this case) in production, the corresponding elements are not being highlighted.
So far this is what I was able to find. Below are few config files:
next.config.js:
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
reactStrictMode: true,
images: {
// domains: ['raw.githubusercontent.com','ibb.co'],
domains: ['raw.githubusercontent.com'],
loader:'imgix',
path:''
},
assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}
tailwind.config.css :
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
How do I go about fixing this?
Thanks.
Ensure to add a complete list of paths you need your CSS applied to in the purge array of tailwind.config.css.
module.exports = {
// ▼ here you need to add all paths according to your needs
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
It is a project composed of Vite & React & antd.
I want to handle antd theme dynamically in vite.config.ts.
I would appreciate it if you could tell me how to modify less.modifyVars value in React component.
This is the current screen.
light state /
dark state
In dark mode, the style of the select component does not work properly.
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true // dynamic
})
}
}
}
}
}
You need to import 'antd/dist/antd.less' instead of 'antd/dist/antd.css'
Install dependency for less npm add -D less. Vite will automatically catch it.
Use the following config:
css: {
preprocessorOptions:{
less: {
modifyVars: {
'primary-color': '#1DA57A',
'heading-color': '#f00',
},
javascriptEnabled: true,
},
},
},
It's been a while, but this is works for me now:
You need to make sure you import less on demand. I use plugin vite-plugin-imp to achieve. And then getThemeVariables should be work well.
import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
resolve: {
alias: [
// { find: '#', replacement: path.resolve(__dirname, 'src') },
// fix less import by: #import ~
// https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
{ find: /^~/, replacement: '' },
],
},
css: {
preprocessorOptions: {
less: {
// modifyVars: { 'primary-color': '#13c2c2' },
modifyVars: getThemeVariables({
dark: true,
// compact: true,
}),
javascriptEnabled: true,
},
},
},
});
Moreover: you can get more inspiration from here: vite-react/vite.config.ts
OK, I'm pretty new to JAMstack, React, GatsbyJS, NetlifyCMS and Netlify, so do forgive me if this is simple.
I have a site running using React and GatsbyJS, and have NetlifyCMS running too to control the content. For the most part the site is running fine, however I keep running into an issue when it comes to images between the different environments.
When I add an image into the body section of any page through NetlifyCMS, I then pull the repo the image simply doesn't appear and is replaced with the broken image icon. However, it seems to work fine when on Netlify.
Occasionally, it appears, but after a push or a pull or restarting the Gatsby develop server, it just breaks again.
It only seems to happen when adding an image via NetlifyCMS into the body content so it appears in the main content of the markdown file; it is seemingly working fine when in frontmatter.
I've spent many hours on this it seems. I've got the full range of plugins installed, and I can't seem to find anyone else that is facing this issue.
All the other HTML seems to work fine but these images really don't want to.
gatsby-config.js
siteMetadata: {
title: 'Sheringham Shantymen',
description: 'The Shantymen travel widely throughout the UK and Ireland supporting Lifeboat Stations in their fundraising efforts and are always considering how they can help in others to raise funds by performing concerts.',
},
plugins: [
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
"gatsby-remark-copy-linked-files",
"gatsby-plugin-netlify-cms-paths",
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 1600,
},
}
],
},
},
'gatsby-plugin-react-helmet',
'gatsby-plugin-sass',
{
// keep as first gatsby-source-filesystem plugin for gatsby image support
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/img`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/img`,
name: 'images',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/gigs`,
name: 'gigs',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/discography`,
name: 'discography',
},
},
{
resolve: 'gatsby-plugin-web-font-loader',
options: {
google: {
families: ['Source Sans Pro', 'Source Serif Pro']
}
}
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Sheringham Shantymen",
short_name: "Shantymen",
start_url: "/",
background_color: "#172957",
theme_color: "#FAC43E",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/img/logo-badge.png", // This path is relative to the root of the site.
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
{
resolve:'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
options: {
develop: true, // Activates purging in npm run develop
purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
},
}, // must be after other CSS plugins
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
}
Content.js component
import PropTypes from 'prop-types'
export const HTMLContent = ({ content, className }) => (
<div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)
const Content = ({ content, className }) => (
<div className={className}>{content}</div>
)
Content.propTypes = {
content: PropTypes.node,
className: PropTypes.string,
}
HTMLContent.propTypes = Content.propTypes
export default Content
Called on the page template:
<PageContent className="content" content={content} />
I expect to add an image into the body of markdown, for Gatsby to process the image and output it as a processed/blur up loading image, and for this to work consistently across all servers (localhost and Netlify).
Instead, when it outputs initially (sometimes) it's a huge image, breaking out of containers, then following a server restart or similar the image simply breaks.
Turns out this was a small bug in the version of Netlify CMS I was running - I updated from 2.6.1 to 2.8.0 and this has fixed the issue (as of 2.7.0).
I'm using aloha editor on my project but when I try to use a plugin I have always the same problem:
Aloha-Editor Error: The following module failed to load: css!format/css/format.css
Aloha-Editor Error: The following module failed to load: css!image/css/image.css
Aloha-Editor Error: The following module failed to load: css!image/vendor/ui/ui-lightness/jquery-ui-1.8.10.cropnresize.css
I think I'm missing something but I couldn't find which is the real error, here is part of my code.
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}aloha_editor/aloha/css/aloha.css" id="aloha-style-include" type="text/css">
<script type="text/javascript" src="/media/jquery.js"></script>
<script type="text/javascript" src="/media/script.js"></script>
<script src="/media/aloha_editor/aloha/lib/aloha.js" data-aloha-plugins="common/format,extra/draganddropfiles,common/image,common/link"></script>
</head>
<body>
<script type="text/javascript">
(function(window,document) {
var
$ = window.jQuery,
GENTICS = window.GENTICS,
$body = $('body');
Aloha.settings = {
logLevels: {'error': true, 'warn': true, 'info': true, 'debug': true},
errorhandling : false,
ribbon: false,
"i18n": {
// let the system detect the users language
"acceptLanguage": '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>'
//"acceptLanguage": 'fr,de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'
},
"plugins": {
"format": {
// all elements with no specific configuration get this configuration
config : [ 'b', 'i','sub','sup'],
editables : {
// no formatting allowed for title
'#title' : [ ],
// content is a DIV and has class .article so it gets both buttons
'#content' : [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
}
},
"dragndropfiles": {
config : { 'drop' : {'max_file_size': '200000',
'upload': {//'uploader_class':GENTICS.Aloha.Uploader, //this is the default
'config': {
'url': '/media/images_dragged/',
'extra_headers':{'Accept':'application/json'},
'additional_params': {"location":""},
'www_encoded': false }}}}
},
"table": {
config: ['table']
},
"image": {
config : { 'img': { 'max_width': '50px',
'max_height': '50px' }},
editables : {
'#title' : {},
}
}
}
};
$body.bind('alohaReady',function(){
$('#content').aloha();
});
})(window, document);
</script>
...
...
</body>
You've some issues in your code... eg. to use .aloha() use Aloha.jQuery not your own jQuery version (it's fine to use your jQuery for other stuff), settings need to be initialized before loading Aloha Editor, there's a new/better way to check for Aloha.ready ...
See here for a working example of your code: https://gist.github.com/1993723
All the best,
Rene
BTW:
you can also use the Aloha Editor forum here: http://getsatisfaction.com/aloha_editor