I use Strapi with Nuxt and i18n to produce a static site in English and Danish.
The site should be able to produce URLs like these:
mysite.com/
mysite.com/da
mysite.com/news/a-story
mysite.com/da/nyheder/en-historie
mysite.com/cases/a-case
mysite.com/da/case/en-case
I have a pages folder structure like this
_cases
_slug.vue <-- for case pages
_news
_slug.vue <-- for news pages
_slug.vue <-- for other pages
index.vue <-- for my frontpage
I use the following code to list links for nice URLs that renders just fine
h2 case
router-link(:to="localePath({ name: 'cases-slug', params: { cases: $t('slugs.cases'), slug: aCasePage.slug }})") {{aCasePage.title}}
h2 news
router-link(:to="localePath({ name: 'news-slug', params: { news: $t('slugs.news'), slug: aNewsPage.slug }})") {{aNewsPage.title}}
The problem is, that no matter if I click and go to a news page or a case page, I get served the same _cases -> _slug.vue component.
Looking into the .nuxt/router.js file, the routes seems to be generated correct:
routes: [{
path: "/da",
component: _1ea75fec,
name: "index___da"
}, {
path: "/da/:slug",
component: _2214a27c,
name: "slug___da"
}, {
path: "/da/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___da"
}, {
path: "/da/:news/:slug?",
component: _3988eeb6,
name: "news-slug___da"
}, {
path: "/",
component: _1ea75fec,
name: "index___en"
}, {
path: "/:slug",
component: _2214a27c,
name: "slug___en"
}, {
path: "/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___en"
}, {
path: "/:news/:slug?",
component: _3988eeb6,
name: "news-slug___en"
}],
How can I avoid Nuxt mixing up these routes? and the page Vue-components matched to them?
can you share you solution for the _slug pages data fetching ?
I am using findOne (slug,_locale:i18n.locale) from strapi .it's not working
so still hold on this issue
Related
I have several collections with my Netlify CMS site, all worked fine, but needed to add a new one which is not working on the live site.
I’ve added a new collection to the config file, which works flawlessly in a local environment (I can see the content of the folder referenced in the CMS, all entries are editable, I can create new ones or delete them) but this new collection shows up empty in the live environment - no entries are visible in the live CMS.
I got no error in the console, no build errors either.
I’ve tried to create an entry on the live site, which shows up in the CMS, but not on the site itself, and when I pull it, the newly created page/.md is not getting added to the folder where the other entries are - cannot be found locally.
The site itself displays the content of the folder - all articles show up on the site that were visible in the local CMS environment.
The newly created collection is a copy of a working one (tried it multiple times with different naming) and no matter how I renamed it, each try produced the same result - shows up locally, not in the live CMS.
Any ideas what should I do to display the content of the folder in the live CMS?
a trimmed version of the config file:
backend:
name: git-gateway
branch: main
media_folder: "public/logos"
public_folder: "/logos"
logo_url: "/img/cb_logo.svg"
local_backend: true
collections:
- name: "review"
editor:
preview: false
label: "Reviews"
folder: "src/review"
create: true
slug: "{{slug}}"
fields:
- {label: "Page Title", name: "pagetitle", widget: "string", hint: "Displayed in browser tabs", default: "placeholder text" }
- {label: "Page meta description", name: "pagemeta", widget: "string", required: false }
- name: "article"
editor:
preview: false
label: "Articles"
folder: "src/article"
create: true
slug: "{{slug}}"
fields:
- {label: "Title for Page URL", name: "title", widget: "string", default: "url-friendly-text" }
- {label: "Page Title", name: "pagetitle", widget: "string", default: "placeholder text" }
"Articles" is the one that shows as an empty collection on the live site.
The project folder structure:
src/
_data/
_includes/
assets/
article/
review/
I have been trying to get Rewrites working in NextJS for my API Paths. It was to avoid CORS issues.
I followed the solution from: NextJs CORS issue.
It is working on localhost but does not work in a production environment (I was deploying on Vercel itself).
I basically tried with all the types of rewrites:
async rewrites() {
return {
beforeFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
afterFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
fallback: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
};
},
This rewrite works on localhost but on production, the rewrite stops working and the API calls go to /api/:path* itself.
The /api path is reserved for their Serverless Functions. Changing the source path to something else would resolve the issue.
So I'm getting a routing problem whenever I use nuxt ssr with serverless. When I use either deploy to AWS lambda or use serverless-offline it generates the url prefixed with /{stage}, but nuxt can't seem to handle this and either throws 403, 404 or 500 errors because the routes to static files aren't prefixed with /{stage}.
I have tried adding {stage} to the public path on build, the results in a 404 because now the static file path needs to prefixed with another /{stage}. If I go directly to {stage}/{stage}/_nuxt/{file} it works.
build: {
publicPath: '/{stage}/_nuxt'
}
So looking around I found that I can update the router base to the below
router: {
base: '/{stage}'
}
but now the file only loads if its {stage}/{stage}/{stage}/_nuxt/{file} and removing the publicPath code above doesn't make it work either.
And this is for the static files, when it comes to the actual routes the homepage set at '/' either works but any other pages don't because the nuxt-links to them aren't prefixed with /{stage} or if I add the prefix to the base I get a Cannot GET / error when I visit /{stage}.
I have tried many different ways of doing this such as using express however I have had no luck and any tutorials that I found online are at least 2 years old and the github repos have the same problem. The closest thing I have found on stackoverflow that is somewhat similar to what I have is here but this is for a static site.
Anybody have any ideas? Below is the code for the serverless.yaml, handler.js, nuxt.js, nuxt.config.js.
Github Repo
serverless.yaml
service: nuxt-ssr-lambda
provider:
name: aws
runtime: nodejs12.x
stage: ${env:STAGE}
region: eu-west-1
lambdaHashingVersion: 20201221
environment:
NODE_ENV: ${env:STAGE}
apiGateway:
shouldStartNameWithService: true
functions:
nuxt:
handler: handler.nuxt
events:
- http: ANY /
- http: ANY /{proxy+}
plugins:
- serverless-apigw-binary
- serverless-dotenv-plugin
- serverless-offline
custom:
apigwBinary:
types:
- '*/*'
handler.js
const sls = require('serverless-http')
const binaryMimeTypes = require('./binaryMimeTypes')
const nuxt = require('./nuxt')
module.exports.nuxt = sls(nuxt, {
binary: binaryMimeTypes
})
nuxt.js
const { Nuxt } = require('nuxt')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt({ ...config, dev: false })
module.exports = (req, res) =>
nuxt.ready().then(() => nuxt.server.app(req, res))
nuxt.config.js
module.exports = {
telemetry: false,
head: {
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
],
components: true,
buildModules: [
'#nuxtjs/tailwindcss',
],
modules: [
],
router: {
base: '/prod'
},
build: {
}
}
Are you passing it as
<p>Path: {{ $route.path }}</p>
<NuxtLink to="/">Back to Mountains</NuxtLink>
if Yes then it should work else try going with redirect('/{stage}/_nuxt')
for an if statement put this inside else , I think it should work.
I have tried following numerous tutorials on connecting Drupal, and GatsbyJS. For instance, in this article, I get to step 4.3b, "Pull Content from the Drupal 8 site using GraphQL" before everything fails.
I have followed every instruction, but GraphQL seems to be pulling from the temporary Gatsby page rather than the Drupal site I made. Queries such as "allNodeBlog" don't exist, and I'm not sure how to fix everything so I can get to pulling information from my Drupal JSON API page rather than the Gatsby site.
Any help/advice would be great. And/or articles that aren't simply the first Googled "Drupal and Gatsby" help sites (as I've looked at them all).
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-drupal',
options: {
baseUrl: 'http://gatsbydrupal.dd:8083/',
apiBase: 'api', // endpoint of Drupal server
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
},
},
'gatsby-plugin-offline',
],
}
I am using TYPO3 8.7.8 and have to provide a javascript link to deactivate Google Analytics.
The link should look like this:
Deactivate Google Analytics
Unfortunately the link doesn't appear in the frontend, that means it's just a normal text inside a <p> tag. However in the backend everything is fine and it shows up as a link there...
Here is my yaml-configuration for the CKeditor:
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
allowedContent: true
linkJavaScriptLinksAllowed: true
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:my_extension/Resources/Public/Stylesheets/styles.css", "EXT:my_extension/Resources/Public/Stylesheets/fonts.css"]
resize_enabled: true
stylesSet:
# block level styles
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default', 'role': 'button', 'aria-pressed': 'true'}}
format_tags: "p;h1;h2;h3;h4;h5;pre"
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
buttons.:
link.:
queryParametersSelector.:
enabled: true
What am I missing here?
we just run into the same problem - we wrote a small linkhandler for typo3 allowing only the javascript:gaOptOut(); link.
Get it here:
https://www.infoworxx.de/download/ifx_linkhandler_googleAnalytics.zip
Sebastian
That is not a problem of ckeditor but is prohibited by TYPO3 itself to avoid security issues - XSS.
A solution I use is something like this TYPO3 force internal links to cross domain pages to use https in news so that an editor e.g. links to http://ga-output.tld and this will be replaced by the JS link.
You can add a class to your link in ckeditor using the source button (<>).
<a class="gaOptout" href="#">your linked text</a>
and now you just rewrite your function to an onclick event like this:
$('.gaOptout').on('click', function(){
your function
});
This still seems to be an issue in T3 9.5, especially with this Google OptOut Script.
Easy workaround without coding: we cut out the paragraph containing the javascript and put it in a separated html-element. Just cut it out from CKEs Source-view an paste it in a new element. To keep the article in sequence, just cut out the rest of the text an paste it in a new text-element.