We Keep Coding

TailwindCSS / PurgeCSS whitelist not working

I can't seem to get PurgeCSS to whitelist classes I use dynamically in the CMS.
Here are my config files:
/* postcss.config.js */
const purgecss = require('#fullhuman/postcss-purgecss')
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('postcss-nested'), // or require('postcss-nesting')
purgecss({
content: [
'**/*.twig',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
options: {
whitelist: [
'md:w-1/3',
],
},
})
]
}
/* tailwind.config.js */
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
container: {
center: true,
},
extend: {
fontSize: {
'9xl': '10rem',
},
fontFamily: {
'sans': ['Roboto', 'system-ui'],
},
lineHeight: {
'11': '2.75rem',
'12': '3rem',
'14': '3.5rem',
}
},
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
},
}
Tried various solutions I found, but nothing seem to do the trick, it keeps purging the classes I add to the whitelist. Any suggestions anyone?

I was using the wrong option name, it had to be safelist instead of whitelist.

As of today, I had to use the following code to safelist specific classes:
I used safelist on multiple classes I was using with random heights passed through React components as props.
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
{
pattern:
/h-(1|2|3|4)/,
},
{
pattern:
/w-(1|2|3|4)/,
},
],
theme: {},
plugins: [],
};

Google Search Console most blog posts are marked as: "Duplicate, submitted URL not selected as canonical" Nuxt JS

i'm using Nuxt JS and the Nuxt JS content module. I'm using the latest version of Nuxt JS and have been creating content, blog posts.
I've got my blog post structure URLs as: /blog/post-name and have the Search Console set up.
Oddly, for some reason, the majority of my content is being shown as "Duplicate, submitted URL not selected as canonical" by Google and I'm not sure how to fix this in Nuxt JS? Or if there's actually anything wrong at all?
My Nuxt JS config file is:
require('dotenv').config();
import axios from 'axios'
import getRoutes from './utils/getRoutes'
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'static',
/*
** Env variables
*/
env: {
BASE_URL: process.env.BASE_URL || "https://domain-monitor.io",
API_URL: process.env.API_URL || "http://127.0.0.1:8000",
ONESIGNAL_PUSH_APP_ID: process.env.ONESIGNAL_PUSH_APP_ID || "",
ONESIGNAL_SAFARI_WEB_ID: process.env.ONESIGNAL_SAFARI_WEB_ID || "",
GA_ID: process.env.GA_ID || ""
},
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: 'Domain Monitor',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'og:title', name: 'og:title', content: 'Domain Monitor' },
{ hid: 'description', name: 'description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' },
{ hid: 'og:description', name: 'og:description', content: 'Keep track of your expiring domains today for FREE with our FREE domain monitoring product.' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
]
},
/*
** Global CSS
*/
css: [
'#/assets/scss/domain-monitor.scss'
],
/*
** Bootstrap Vue
*/
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{ mode: 'client', src: '#/plugins/bootstrap-vue-icons' },
{ mode: 'client', src: '#/plugins/vue-axios' },
{ mode: 'client', src: '#/plugins/vee-validate' },
{ mode: 'client', src: '#/plugins/vue-moment' },
{ mode: 'client', src: '#/plugins/content-images' },
{ mode: 'client', src: '#/plugins/content-videos' }
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
['#nuxtjs/google-analytics', {
id: process.env.GA_ID
}]
],
/*
** Nuxt.js modules
*/
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/onesignal',
'#nuxtjs/pwa',
'#nuxt/content',
'#nuxtjs/sitemap',
['#nuxtjs/component-cache', { maxAge: 1000 * 60 * 5 }] // 5 minutes
],
/*
** Auth config
*/
auth: {
redirect: {
login: '/account/login',
logout: '/account/login',
callback: '/account/login',
home: '/account/domains'
},
strategies: {
local: {
login: { url: 'auth/login', method: 'post', propertyName: 'token' },
logout: { url: 'account/logout', method: 'post' },
user: { url: 'auth/user', method: 'get', propertyName: 'user' }
}
}
},
/*
** One Signal
*/
oneSignal: {
init: {
appId: process.env.ONESIGNAL_PUSH_APP_ID,
safari_web_id: process.env.ONESIGNAL_SAFARI_WEB_ID,
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: true
}
}
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: process.env.API_URL
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
extractCSS: true,
extend (config, ctx) {
const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
vueLoader.options.transformAssetUrls = {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
}
},
/*
** Sitemap configuration
** See https://www.npmjs.com/package/#nuxtjs/sitemap#setup
*/
sitemap: {
hostname: process.env.BASE_URL, // https://www.yoursite.com
exclude: [
'/account/recovery',
'/account/reset',
'/account/profile',
'/account/domains/add',
'/account/domains',
'/account/monitors/add',
'/account/monitors',
'/help/account/introduction',
'/help/monitors/introduction',
'/help/domains/introduction'
],
routes() {
return getRoutes();
},
}
}
And here's a screenshot of what Google Search Console is telling me about one of these pages.
I'm not sure why all of my posts are appearing under this and whether I should be concerned? I haven't long launched the website, and recently have been posting every day.
See: https://domain-monitor.io/blog for the content

vuepress additionalPages added to sidebar

I'm trying to create an AdditionalPage and add it inside the navbar.
I cannot find out how to make it happen:
This is my plugin:
async additionalPages() {
...
errorsPages.push({
path: '/errors',
content: '## Errors',
frontmatter: {
sidebar: true,
},
})
return errorsPages
When I only do this, of course no sidebar are present. This is because I did not add my /errors page inside the navbar.
When I try to add it to
config.js in the sidebar option:
'sidebar': {
'/references/': [
{
title: '📒 API References',
path: '/references/',
collapsable: false,
children: [
'/references/indexes',
'/references/keys',
{
title: 'Errors',
path: '/errors/',
collapsable: false,
},
]
}
]
}
Then the build failes.
Any idea how to add my additionalpages inside my sidebar ?

For add groups in sidebar, try this code:
sidebar: {
'/guide/': [
{
title: 'Group Guide',
children: ['', 'introduction-guide', 'details-guide'],
},
],
'/api/': [
{
title: 'Group API',
children: ['', 'introduction-api', 'details-api'],
},
],
},
The introduction-guide and details-guide are files presents in guide directory.
The introduction-api and details-api are files presents in api directory.
For more details: https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar-groups

Why is my ES6 having different exports (exports || exports.default + named) depending on the scope of the import?

I have this in a yargs script:
const pkg = require(join(argv.path, 'package.json'));
const exported = require(join(argv.path, pkg.main));
console.log(exported);
If i try to read this source within the yargs script package pkg.main:
import SiteService, { SiteFunction } from 'site-service';
export const siteService = new SiteService('management', {
id: 1000,
othersIds: 1000,
});
export const siteFunction = new SiteFunction(siteService, {
id: 1000,
othersIds: 1000,
});
export default siteService;
The the value of exported is :
{ siteService:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] },
siteFunction:
SiteFunction {
siteService:
SiteService {
name: 'management',
config: [Object],
siteFunctionList: [] },
config: { id: 1000, othersIds: 1000 } },
default:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] } }
If i read the pkg.main of a different module with this content:
import React from 'react';
import Resource from 'ra-core/lib/Resource';
import Route from 'react-router-dom/Route';
import SiteService, { SiteFunction } from 'site-service';
const siteService = new SiteService('management', {
id: 1000,
otherIds: [1, 2],
});
import {
UsersList,
UsersCreate,
UsersEdit,
UsersShow,
} from './resources/users';
export const siteFunction = new SiteFunction(siteService, ({ pages, roles, permissions }) => [
<Resource
name="users"
list={UsersList}
edit={UsersEdit}
create={UsersCreate}
show={UsersShow}
/>,
], ({ pages, roles }) => [
], ({ pages, roles }) => [
{
name: 'management',
redirect: true,
from: '/management',
to: '/',
description: 'management',
},
]);
export default siteFunction;
I have the following output
SiteFunction {
siteService:
SiteService {
name: 'management',
config: { id: 1000, otherIds: [Array] },
siteFunctionList: [] },
config: [Function] }
Both project babel configuration in babel.config.js:
{
only: [
'src',
'styleguide',
],
comments: false,
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
'#babel/preset-react',
],
plugins: [
'babel-plugin-array-includes',
'#babel/plugin-transform-runtime',
'#babel/plugin-transform-async-to-generator',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-syntax-import-meta',
'#babel/plugin-proposal-json-strings',
[
'#babel/plugin-proposal-decorators',
{
legacy: true,
},
],
],
env: {
production: {
plugins: [
'babel-plugin-add-module-exports',
'#babel/plugin-transform-modules-commonjs',
],
},
test: {
plugins: [
'#babel/plugin-transform-modules-commonjs',
'babel-plugin-dynamic-import-node',
],
},
},
}
In both case, the pkg.main imported was in ES6 syntax, while the yargs script run was a ES5 transpiled file.
I believe this is not good, am I correct?
Where does the bug happen? Both projects have the same babel configuration.
Within my script, should I assume both cases can happen and should I support both?

good module is not working as expected

I have registered good plugin in hapi server and all of my responses are getting logged in. But when I do a console.log, console.error, console.warn, console.info all the logs are getting printed in plain text but not in the good plugin way.
Can anyone help me with what I might have missed.
I have read following documentation:
https://github.com/hapijs/good/blob/HEAD/API.md
https://hapijs.com/tutorials/getting-started?lang=en_US

console.log naturally goes to console. If you want to print things to console use something like:
request.server.log(['error', 'contentFetch'], err);
This is my good plugin configuration maybe you can ditch and find something works for you.
logging: {
$filter: 'env',
production: {
reporters: {
file: [{
module: 'good-squeeze',
name: 'Squeeze',
args: [{error: '*', log: ['error'], ops: '*'}]
}, {
module: 'good-squeeze',
name: 'SafeJson',
args: [
null,
{separator: '\n'}
]
}, {
module: 'rotating-file-stream',
args: [
'error.log',
{
size: '10M', // rotate every 10 MegaBytes written
interval: '1d', // rotate daily
compress: 'gzip', // compress rotated files
path: './logs'
}
]
}]
}
},
$default: {
ops: {
interval: 1000
},
reporters: {
console: [{
module: 'good-squeeze',
name: 'Squeeze',
args: [{log: '*', response: '*'}]
}, {
module: 'good-console'
}, 'stdout']
}
}
},
Registering like this
{
plugin: {
register: 'good',
options: Config.get('/logging')
}
}