Related
I have plain TYPO3 version 11.5.x setup with headless version 3.1.2. Backend working perfect and frontend URL returning proper JSON data.
API URL looks like: https://t3-pwa.ddev.site:4403/typo3/
I created front directory in the project root. Project directory looks like this.
Directory
fileadmin
front - created front app with nuxt-typo3 contain node package
node_modules
server
jsconfig.json
nuxt.config.js
package.json
tsconfig.json
typo3
typo3conf
vendor
typo3temp
.ddev
index.php
.htaccess
Command
Created app with yarn create nuxt-typo3
Configured with default settings
Run yarn dev
It starts application properly but when I visit frontend on default url: http://localhost:3000 It does not starting.
Console Start app : https://i.stack.imgur.com/LDr6U.png
Front: https://i.stack.imgur.com/ms6l2.png
Console: https://i.stack.imgur.com/9ZoBm.png
nuxt.config.js: Looks like this
export default {
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#ff8700' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/macopedia/nuxt-typo3-theme
'nuxt-typo3-tailwind',
// Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
'nuxt-typo3',
],
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/pwa',
],
/*
** TYPO3 module configuration
** https://github.com/TYPO3-Initiatives/nuxt-typo3
*/
typo3: {
baseURL: process.env.NUXT_HOST,
forms: true,
api: {
baseURL: 'https://t3-pwa.ddev.site'
},
},
typo3tailwind: {
layouts: false
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
Also, default frontend URL returns the same JSON URL. Can anyone share some hint? Also, minimal solution from scratch?
It looks like your baseURL in frontend application is not valid. You should keep only https://t3-pwa.ddev.site:4403 in baseURL in nuxt.config.js file.
Please remember that nuxt-typo3 frontend application tries to fetch ?type=834 URL at start, and if you add /typo3 at start, it's not valid anymore.
You should adjust your baseURL, rebuild and you are ready to go. You can also take a look at our pwa-demo, which uses nuxt-typo3 and TYPO3 Headless with ddev https://github.com/TYPO3-Headless/pwa-demo.
I wanna try to use the global "authors" in the blog markdown file "authorsMapPath" this parameter in the docusaurus.config.js file.
However, whatever I tried in the presets or plugins, I always got this error.
A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.
ValidationError: "authorsMapPath" is not allowed
Here is my partial setting in the docusaurus.config.js file.
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
// authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
'#docusaurus/plugin-content-blog',
{
authorsMapPath: 'authors.yml',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
},
],
],
Is there any idea about my error?
Thank you!
I could resolve this issue after I upgraded #docusaurus/preset-classic version from 2.0.0-alpha.72 to 2.0.0-beta.21.
The code became like below:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
As I know, Docusaurus supports customized pages, but is there a way to have two docs in one Docusaurus project?
The original Navbar items have:
Docs
Blog
...
I want to have something like this:
Docs 1
Docs 2
Blog
...
I know I can make many subfolders just in one doc, but for some reason, I want a two Docs structure, which gives me a cleaner way to access docs.
If Docusaurus cannot offer this feature currently, I want to ask is there other documentation frameworks offer this feature?
You need to use the plugin-content-docs.
First, create the other docs folder, like docs, docs-api, docs-system.
(1) In your docusaurus.config.js file, configure your "default" docs:
(module.exports = { // start of the module.export declaration
[…]
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
routeBasePath: 'docs',
path: 'docs',
sidebarPath: require.resolve('./sidebars.js'),
lastVersion: 'current',
onlyIncludeVersions: ['current'],
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
[…]
}); // end of the module-export declaration
(2) Now, the magic!: in the same file, configure your other documents:
(module.exports = { // start of the module.export declaration
[…]
plugins: [
[…]
[
'#docusaurus/plugin-content-docs',
{
id: 'docs-api',
path: 'docs-api',
routeBasePath: 'docs-api',
sidebarPath: require.resolve('./sidebars.js'),
},
],
[
'#docusaurus/plugin-content-docs',
{
id: 'docs-system',
path: 'docs-system',
routeBasePath: 'docs-system',
sidebarPath: require.resolve('./sidebars.js'),
},
],
],
[…]
}); // end of the module-export declaration
(3) Now you probably want these documents in your NavBar, right? So add then!
(module.exports = { // start of the module.export declaration
[…]
navbar: {
hideOnScroll: true,
title: 'your title',
logo: {
alt: '',
src: 'img/favicon.ico',
},
items: [
{
to: '/docs/Intro', // ./docs/Intro.md
label: 'Docs Title',
position: 'left',
activeBaseRegex: `/docs/`,
},
{
to: '/docs-api/Intro', // ./docs-api/Intro.md
label: 'API',
position: 'left',
activeBaseRegex: `/docs-api/`,
},
{
to: '/docs-system/Introducao', // ./docs-system/Intro.md
label: 'My System',
position: 'left',
activeBaseRegex: `/docs-system/`,
},
],
},
[…]
}); // end of the module-export declaration
IMPORTANT
Sometimes you will modify your docusaurus.config.js and will not "work", so close the docusaurus service (just Ctrl+C in your terminal/power shell) and restart it -- I could have saved a few hours if a had known this before.
If you don't have the plugin-content-docs plugin, just install it:
npm install --save #docusaurus/plugin-content-docs
ROADMAP
I had a hard time figuring this out. What I did was download the whole docusaurus project, get the website part, trim everything that I did not need and this is what I got.
REFERENCES (Update 2022/03/02)
https://docusaurus.io/docs/docs-multi-instance
This solution worked for me. Using the 'autogenerated' sidebar in Docusaurus v2.0.0-beta.15
sidebars.js
/** #type {import('#docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
newone: [{type: 'autogenerated', dirName: 'newone'}], // foldername
newtwo: [{type: 'autogenerated', dirName: 'newtwo'}], // foldername
};
module.exports = sidebars;
docusaurus.config.js
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
// {
// type: 'doc',
// docId: 'intro',
// position: 'left',
// label: 'Tutorials',
// },
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newone', // foldername
label: 'NEWONE', // navbar title
},
{
type: 'docSidebar', // docSidebar
position: 'left',
sidebarId: 'newtwo', // foldername
label: 'NEWTWO', // navbar title
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
Your docs folder:
docs/
newone/
intro.md
newtwo/
intro.md
I tried this way and it's working.
[Edit 1]: But when I select API then both API and Docs in Navbar becomes green. Can you tell us what's the reason behind this #Yangshun Tay and can you suggest the edit for that?
[Edit 2]: I read the documentation, it's written in #docusaurus/theme-classic, if we set activeBasePath property then links with that common path (docs in this case) will have active attribute.
sidebar.js
module.exports = {
someSidebar: {
Docusaurus: ['doc1', 'doc2'],
Features: ['doc3']
},
someOtherSidebar: {
Test: ['mdx']
}
};
docusaurus.config.js
The navbar links are like this -
links: [
{
to: 'docs/doc1',
// activeBasePath: 'docs', // [Edit 3]
label: 'Docs',
position: 'left'
},
{
to: 'docs/mdx',
label: 'API',
position: 'left'
},
]
Folder structure of docs folder is like this -
docs
├── docs1.md
├── mdx.md
Regardless of whether you're using v1 or v2, the sidebars.js configuration can contain multiple keys, each having its own sidebar.
You need to use the doc type in docusaurus config. I think the "to" type is for pages not docs.
To make the sidebar correct, you need to also set the activeSidebarClassName value in the config to let it know which sidebar (among those you exported in the sidebars.js) you want to use for this doc.
activeSidebarClassName: 'navbar__link--active',
https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link
Setting up Docusaurus to be multi-instance spans changes across many files. To make it easier to set up, I've created a base install with all the necessary changes to go multi-instance, and have released it as a GitHub template.
Fork it here:
mg0716/docusaurus-multi
Many of the changes in this repo were a result from #d-kastier's original comment.
Very open to feedback and pull requests, so feel free to give it a shot!
on my test, you MUST Include path "docs-xxxxxxxxx" ! do not create another name such "education" you will get page crash !
I'm getting a strange error in Gatsby Cloud when I try to host the website.This happened since I added code syntax highlighting. The weird thing is it works perfectly when I run it locally on localhost, but it fails when I build it using Gatsby Cloud. (Gatsby Cloud uses the github repo of my website)
The error message I'm getting:
There was a problem loading plugin /usr/src/app/www/node_modules/#gatsby-cloud-pkg/gatsby-plugin-preview/dist/index.js. Perhaps you need to install its package?
My gatsby-config.js file:
module.exports = {
siteMetadata: {
...
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {},
}
]
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `software`,
path: `${__dirname}/src/software`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `post`,
path: `${__dirname}/src/post`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-image`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GetMyIsland Portfolio`,
short_name: `GetMyIsland Portfolio`,
start_url: `/`,
background_color: `#000000`,
theme_color: `#000000`,
display: `standalone`,
icon: `src/images/icon/LogoTransparent.png`,
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Like I said the error appeared after installing prismjs and gatsby-remark-prismjs.
Does anyone have an idea on how I can fix this error message, since I wasn't able to find anything on the internet. If you need more information please tell me I'm happy to help.
Just try to remove the plugin that's causing issue and also that plugin/pakage which you think is causing issue and re install them freshly
My first question here on Stackoverflow :) I'm trying to make an app with Ionic&Vue, and as a CMS I'm using Umbraco. I want to connect the two, which I'm now trying by configuring Webpack, so that Webpack will take my main.ts file that Ionic&Vue created and do stuff with it and put it in the main Umbraco folder as a source file where I can reference Umbraco content.
I'm not having a lot of luck with it unfortunately. I've tried configuring a webpack.config.js file and installing a bunch of libraries like 'vue-loader', 'ts-loader', 'vue-template-compiler', 'vue-style-loader' et cetera. Some stuff is getting compiled, it's just that I keep getting an error that there's a mismatch in versions (vue is #3.0.2 and vue-template-compiler is #2.6.12). Ionic won't work with Vue under version 3 though so I feel like I'm stuck.
So my question: am I missing something? Is it really not possible or is there another way to compile a file from .ts to .js to a folder of my wish?
Edit (webpack config file):
var { HotModuleReplacementPlugin } = require('webpack');
var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = (env, argv) => {
let transpileOnly = argv.transpileOnly === 'true';
return {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundledwebpack.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
}
]
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
compiler: '#vue/compiler-sfc'
}
}
]
},
plugins: [
new HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
].concat(transpileOnly ? [
new ForkTsCheckerWebpackPlugin({
reportFiles: ['src/**/*.{ts,tsx,vue}', '!src/**/*.js.vue'],
tslint: true,
vue: true
})
] : [])
,
mode: 'development'
}
}
This sounds more like a vue issue than a Umbraco one. You should be able to do it. After a quick google there is a working project here:
https://github.com/ionic-team/ionic-vue-conference-app
Have you tried explicitly installing packages with version numbers that work, e.g.
npm install #ionic/vue#0.0.4