I need multy-regions(different content and pages at regions) and languages. I try use i18n, but i have alot problems with it.
I need structure like this:
/* (default en-EU)
/en-EU/*
/en-US/*
my nuxt.config.js:
seo: true,
parsePages: false,
strategy: 'prefix_and_default',
pages: {
fees: {
'en-US': false,
},
},
locales: [
{
code: 'en-US',
iso: 'en-us',
file: 'en-us.json',
},
{
code: 'en-EU',
iso: 'en-eu',
file: 'en-eu.json',
},
],
defaultLocale: 'en-EU',
langDir: 'locales/',
lazy: true,
and in pages I render my components by name + currentLocale
but i have problems with meta and redirects
when I on page /fees and use landSwitcher it change lang, but not change content because I haven't en-US/fees page(and it not redirect to 404)
<link data-n-head="ssr" data-hid="i18n-alt-en" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en">
<link data-n-head="ssr" data-hid="i18n-alt-en-us" rel="alternate" href="https://localhost:5050/en-EU/fees" hreflang="en-us">
<link data-n-head="ssr" data-hid="i18n-alt-en-eu" rel="alternate" href="https://localhost:5050/fees" hreflang="en-eu">
wtf where he find en? and why it have en-US version? (in config false for this page)
it generate me <html lang="en-eu" /> but its now valid, because EU is not region code
Related
I need to include the following code in a Nuxt 3 project but I can't seem to get it to work:
<script type="text/javascript">
var sc_project=XXXXXXXX;
var sc_invisible=1;
var sc_security="XXXXXXXX";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics
Made Easy - Statcounter" href="https://statcounter.com/"
target="_blank"><img class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
In Vue (without Nuxt) there is/was an index.html page that I used to place this code in, but there isn't an index.html file in a Nuxt 3 project anymore.
useHead()
you can use this in your app.vue file's script:
useHead({
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children:
"var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
});
Learn more: https://nuxt.com/docs/getting-started/seo-meta#components
or
app config
use this in your nuxt.config.ts file:
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { dir: "ltr", lang: "en" },
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [
{ src: "https://www.statcounter.com/counter/counter.js", body: true },
{
children: "var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security='XXXXXXXX'; ",
body: true,
},
],
noscript: [
{
children: "<div class='statcounter'><a title='Web Analytics Made Easy - Statcounter' href='https://statcounter.com/' target='_blank'><img class='statcounter' src='https://c.statcounter.com/XXXXXX/0/XXXXXX/1/' alt='Web Analytics Made Easy - Statcounter' referrerPolicy='no-referrer-when-downgrade'></a></div>",
body: true,
},
],
},
},
Learn more: https://nuxt.com/docs/api/configuration/nuxt-config#head
Components
use <NoScript> and <Script> components in your template:
<template>
<Script :body="true">
var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security="XXXXXXXX";
</Script>
<Script
type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
:async="true"
></Script>
<NoScript :body="true">
<div class="statcounter">
<a
title="Web Analytics Made Easy - Statcounter"
href="https://statcounter.com/"
target="_blank"
><img
class="statcounter"
src="https://c.statcounter.com/XXXXXX/0/XXXXXX/1/"
alt="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"
/></a>
</div>
</NoScript>
</template>
Learn more: https://nuxt.com/docs/getting-started/seo-meta#body-tags
the result will be this :
I was trying using SystemJS to load React but it didn't loaded instead throwing an error message in Console > 'React is not defined'
I've read their documentation also searching through similar questions but doesn't satisfy my need, did i miss something?
Here's is what I was tried
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React 18 with SystemJS</title>
<script src="dependencies/systemjs-6.12.1.min.js"></script>
<script type="systemjs-importmap"> {
"imports": {
"react" : "/react.production-18.min.js"
, "reactDOM" : "/react-dom.production-18.min.js"
} }
</script>
</head><body>
<div id="root">
<script type="systemjs-module">
System.import('react');
System.import('reactDOM');
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
} }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>
</div></body></html>
Edit1: I'm using SystemJS version 6.12.1
You need a bit more configuration to get it going. It is also recommended to keep react code in separate files.
Full working example here.
SystemJS configuration for react:
System.config({
baseURL: '//npm.jspm.io/',
// CDN resolves
paths: {
'npm:*': '//npm.jspm.io/*',
'unpkg:*': '//unpkg.com/*',
'jsdelivr:*': '//cdn.jsdelivr.net/g/*',
'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*'
},
meta: {
'*.scss': { loader: "sass" }
},
map: {
// The Application path
'index': INDEX + '?' + Date.now(),
// SystemJS plugins
'plugin-babel': 'unpkg:systemjs-plugin-babel#0/plugin-babel.js',
'systemjs-babel-build': 'unpkg:systemjs-plugin-babel#0/systemjs-babel-browser.js',
// 'scss': 'npm:scss',
// Application modules
'react': 'jsdelivr:react#15/react.js',
'react-dom': 'jsdelivr:react#15/react-dom.js'
},
packages: {
'https://npm.jspm.io/' : { defaultExtension: 'js' },
'https://cdn.rawgit.com/*' : { defaultExtension: false },
'https://unpkg.com/' : { defaultExtension: false },
'./index.scss' : { defaultExtension: false },
},
transpiler: 'plugin-babel',
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});
I am using Reactjs, redux, webpack and webpack server to develop a website.
The website crashes when I refresh a certain pages. To be more specific when I visit http://localhost:8080/article/Id the page works like a charm, but when I hit refresh the page turns to white with errors.
GET http://localhost:8080/article/scripts/vendor.bundle.js?cfd99d78961c5e13afca 404 (Not Found)
Refused to execute script from 'http://localhost:8080/article/scripts/vendor.bundle.js?cfd99d78961c5e13afca' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
The error displayed by Chrome is this and this.
My webpack config page looks like this :
//webpack.config.js
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var path = require('path')
var isProd = process.env.NODE_ENV === 'production'
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
minimize: 'true'
}
},
{
loader: 'sass-loader'
}
],
fallback: 'style-loader',
publicPath: '/docs'
})
var cssConfig = isProd ? cssProd : cssDev
module.exports = {
entry: {
'app': './src/app.js',
'vendor': './src/vendor.js'
},
output: {
path: path.resolve(__dirname, 'docs'),
filename: 'scripts/[name].bundle.js'
},
module: {
rules: [{
test: /\.jsx?/,
exclude: [/node_modules/, path.resolve(__dirname, './src/lib')],
use: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.s?css$/,
use: cssConfig
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?name=images/[name].[ext]',
'image-webpack-loader'
]
},
{
test: /\.(xml|json|ico)$/i,
use: [
'file-loader?name=images/[name].[ext]',
]
}
]
},
devServer: {
contentBase: path.join(__dirname, 'docs'),
compress: true,
hot: true,
stats: 'errors-only',
open: true,
disableHostCheck: true,
historyApiFallback: true, //when refreshing
inline: true //reloads the entire browser page
},
plugins: [
new ExtractTextPlugin({
filename: 'styles/[name].bundle.css',
disable: !isProd,
allChunks: true
}),
new HtmlWebpackPlugin({
title: 'React MovieDB - Powered by The Movie Database',
minify: {
collapseWhitespace: true
},
hash: true,
template: './src/index.ejs'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new UglifyJsPlugin()
],
watch : true
}
And I run the project with : "dev": "webpack-dev-server",
And this how my index.ejs looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="apple-touch-icon" sizes="180x180" href="<%= require('./icons/apple-touch-icon.png') %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= require('./icons/taleed.png') %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%= require('./icons/taleed.png') %>">
<link rel="manifest" href="<%= require('./icons/manifest.json') %>">
<link rel="mask-icon" href="<%= require('./icons/safari-pinned-tab.svg') %>" color="#01d277">
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.5/wavesurfer.min.js"></script>
<meta name="theme-color" content="#ffffff">
<title>
Archive Search Engine
</title>
</head>
<body>
<div class="smoke-screen"></div>
<div id="root">
</div>
</body>
</html>
Honestly, I can't manage to figure out the main source of the problem because the project is based on a template and I couldn't get in touch with the template' maker.
You're trying to grab the bundle from the base path, which works just fine. But when you go to a different part of the app, you are requesting to get the bundle from /articles/app.bundle.... So you need to change the index file to pull from the absolute path from the server for the bundle instead of a relative path.
You need to do something like this to your server.js (if you use node);
app.get('/*', (req, res) => {
res.send(template({
css: bundle.css,
js: bundle.js,
}));
});
for example on using mustache as the template engine.
I am new to extJS and met a serious problem described as follows:
I used the Sencha Architect to build my client-side UI. After finishing it, I copy the generated app folder and app.js to my asp.net mvc project(located in ROOT/Scripts/app and ROOT/Scripts/app.js), and I also copy some dependencies(exr-all.js .etc) from the SDK directory to ROOT/Scripts/extjs.I was using Ext.Loader.setPath() method in my ROOT/Scripts/app.js file to indicate the mapping from specific class name to the specific location, but It does not work.
In my asp.net mvc project, I have a controller class and the Index action method just return a View(ROOT/Views/RepairList/Index.cshtml) whose code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RepairList</title>
<script type="text/javascript" src="../../Scripts/extjs/ext-all.js"></script>
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Scripts/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../Scripts/app.js">
</script>
</head>
<body>
</body>
</html>
In my ROOT/Scripts/app.js, the code is as follows:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('repairList', '../../Scripts/app');
Ext.application({
name:'RepairList',
requires: [
'Ext.Loader'
],
models: [
'LineChart',
'RadarChart'
],
stores: [
'MenuStore',
'LineChart',
'RadarChart'
],
views: [
'MainEntry',
'chartPanel'
],
controllers: [
'management',
'forms',
'Info',
'content'
],
name: 'repairList',
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});
I dont know why the setPath does not work. I think it is because the view file is in ROOT/Views/RepairList/Index.cshtml, while the app.js and the app directory is in ROOT/Scripts/app. Moreover, the name of my class generated in the sencha architect is repairlist.model.foo while now they were placed under Scripts folder instead of a directory named repairlist.
//the file is in the original repairlist/app/view/MainEntry.js file when creating in the sencha architect while now I copy it in the ROOT/Scripts/app/view/MainEntry.js
Ext.define('repairList.view.MainEntry', {
extend: 'Ext.container.Viewport',
alias: 'widget.fillerentry',
requires: [
'repairList.view.headerPanel',
'repairList.view.treeMenu',
'repairList.view.contentPanel',
'Ext.tree.Panel',
'Ext.tab.Panel'
],
margin: 0,
layout: {
type: 'border',
padding: 0
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'repairheader',
region: 'north'
},
{
xtype: 'repairtree',
region: 'west'
},
{
xtype: 'repaircontent',
region: 'center'
}
]
});
me.callParent(arguments);
}
});
![enter image description here][1]

the error message is as follows
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:27845/app/view/MainEntry.js?_dc=1434385119180 ......
![enter image description here][2]
could anyone tell me why this does not work? Thanks very much
Two things:
1 - You have set the name config in your application twice.
2 - When using Ext.application set your paths in the paths config.
Ext.application({
name: 'repairList',
paths : {
'repairList' : '../../Scripts/app'
},
//...
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});
I have Chrome installed and I would want to add my windows store app protocol to the protocol_handler. I want to know if there is any way to do with javascript . I want for every person visiting my page, ask to add my apps protocol to that list and then launch an external app with some arguments. I have searched for 6 hours, found that there is a way to add a protocol handler in Chrome, web+, but this is only for web apps, and does not work for external apps. I tried this but doesn't work:
<html>
<head>
<title>
Iframe test
</title>
</head>
<body>
Open in "My App"
<script type="text/javascript">
function register() {
navigator.registerProtocolHandler("web+myTrip", "myTrip:place:/%s", "title");
document.getElementById("iframeTest").src = "myTrip:place:/m/0942y1";
}
</script>
<p><input type="button" value="Run ad hoc test"
onclick="register()">
<iframe id="iframeTest"/>
</body>
This is the list where I want to add my protocol, you can locate on c:\Users|[local user]\AppData\Google\Chrome\UserData|LocalState:
"protocol_handler": {
"excluded_schemes": {
"afp": true, "data": true, "disk": true, "disks": true, "file": true, "hcp": true, "javascript": true, "magnet": false, "mailto": false, "ms-help": true, "ms-windows-store": false,
"news": false, "nntp": true, "shell": true, "snews": false, "unknown": false, "vbscript": true, "view-source": true, "vnd": {
"ms": {
"radio": true
}
}
}
I only want to insert my protocol
"mytrip": false,
If I modify the file manually it works, but I has to be bia Javascript & HTML.
Any ideas?