I would like to organize all of my Docusaurus docs under a docs directory. However, I would also like to reference existing markdown documents such as README.md etc. How can I reference documents that are outside the docs directory from sidebar.js?
My solution has been to include them as React Component
e.g. if you want to include the Readme from the root, place a file like this in your docs dir:
---
title: Custom README title (for sidebar etc)
hide_title: true
---
import Readme, { toc as ReadmeTOC } from '#site/../READ';
<Readme />
export const toc = ReadmeTOC;
Related
Using OroCommerce v4.1.8 (latest stable version).
I have created my custom theme (extended from "default" theme) which renders correctly (all css is loaded and applied as defined), but for my custom JS file that does not appear to be included in the page. Below is my \Resources\views\layouts\mytheme\config\jsmodules.yml file:
shim:
jquery:
expose:
- $
- jQuery
magnificPopup:
imports:
- jQuery=jquery
owlCarousel:
imports:
- jQuery=jquery
exports: owlCarousel
aliases:
magnificPopup$: mytheme/js/magnific-popup.min
owlCarousel$: mytheme/js/owl.carousel.min
my-main$: mytheme/js/main
dynamic-imports:
mytheme:
- magnificPopup
- owlCarousel
- my-main
On the webserver, I can see a compiled mytheme.js file getting created under /var/www/oroapp/public/layout-build/mytheme/chunk folder, but looking into the HTML for the home page, there is no line/reference to load this file.
Please advise what am I missing or how to troubleshoot this?
OroCommerce uses Webpack to build JS dependencies. By default, all the configured JavaScript dependencies files are combined to the single file, e.g.:
<script src="/layout-build/mytheme/app.js"></script>
Where mytheme is your theme name.
To use one of the above dependencies in your ES6 module, you have to require it manually with the import statement or using the require function.
For more details, see the official documentation about JavaScript Modularity in the OroCommerce Application.
By default project root README.md with some YML configuration is used as a home page in Vuepress. Is there any way to use some other file for the same?
I want to use README.md for some other purpose, like creating project build and deployment notes!
I made an inquiry in the source code version 1.0.2, I didn't know this extension of vue, so it was a good exercise.
I looked at all occurrences of readme, case insensitive, and it turns out that what you want is not configurable, as readme is hardcoded in several files.
I changed several occurrences of readme in the source code, and managed to change the landing page to test.md.
Here are the files you need to change in the source code:
vuepress/packages/#vuepress/shared-utils/src/isIndexFile.ts
vuepress/packages/#vuepress/markdown/lib/link.js
vuepress/packages/#vuepress/core/lib/node/Page.js
vuepress/packages/#vuepress/markdown-loader/index.js
There, in the relevant strings, you have to replace readme (or README, depending) with your desired file name.
Another solution:
Nest your vuepress inside a folder looking like:
- src/
|
-- README.md
-- vuepress/
|
-- README.md
I created a really simple vuepress project with the following folder tree:
| README.md
| .vuepress
-- config.js
| package.json
My README.md has some markdown headings with # symbols and some text.
I just want to get a sidebar in the left with links to the headings.
In order to do so, I setup the config.js as follows:
module.exports = {
title: 'title',
description: 'description',
themeConfig: {
sidebar: 'auto',
},
}
Also, in the readme page I have a metadata section at the beginning with the following:
---
home: true
---
Thee page is clearly getting the default theme styles and behavior, if I add other main theme stuff like features it works as expected.
However, there is no sidebar with links in the left.
What am I missing?
It seems that a page marked as homepage via metadata cannot render a sidebar. In order to get sidebar: auto to work, I needed to create another readme page inside a dedicated folder, like:
| README.md
| .vuepress/
-- config.js
| package.json
| docs/
-- README.md
Then, the /docs/ route displays a page with the sidebar properly formatted.
Hello I just want to put a link to PDF file but it's impossible. There is a library in npm or by another way to do that in VUEJS
I checked this link but it doesn't work
VueJS 2: Local assets
// template
<img src="~assets/images/wtd.jpg">
// image folder
// error
SOLUTION
For images just use
<img src="#/assets/images/image.jpg">
For pdf just put your file in static folder and use this link. In my case I use
<a href="../../static/mypdf.pdf">
If you're using the project created by vue-cli, then below syntax will work
e.g
<img src="#/assets/images/{{imageName}}.png"/>
Hope this helps
With webpack, you can bundle assets with CopyWebpackPlugin.
Have a look at this webpack.config.js, it uses assets. https://github.com/BlueForestTrees/web/blob/master/webpack.config.js
Inside plugins section:
new CopyWebpackPlugin([{from: './img', to: 'img'}]),
If you used vue-cli to create the project. The default image type of 'png|jpe?g|gif|webp' is default supported
In template you can use
<img src="~assets/images/demo.png"/>
In script you can use
const demo = require("#/assets/images/demo.png") // # is a alias in webpack config
or:
import demo from "#/assets/images/demo.png")
For the .pdf file, there is no default loader for this type file. You need config a loader like url-loader for this: https://cli.vuejs.org/config/#configurewebpack
I am currently evaluating using Docusaurus to generate a static web site. The site itself is not documentation focused, in fact, the site is not even computer or technology related. But as a techie myself, I want a CI and Git-powered publishing strategy for this web site.
Docusaurus uses Markdown for its page content (outside of custom React-based pages). However, when these Markdown pages are built, they are all placed in a top-level folder in the static site called docs. This folder naming doesn't really fit with the web site I want to produce.
There is a configuration setting for customDocsPath but this only changes where the build looks for Markdown files, not the output path in the created site content.
I'm not a React developer, but aside from hacking away at the JavaScript in the build engine to search/replace instances of docs, is there a better way to do this?
In docusaurus 2 changing main docs folder is quite straightforward:
rename docs/ to whatever/
add following to docusaurus.config.js
presets: [
[
'#docusaurus/preset-classic', // should be already there
{
docs: {
path: 'whatever',
routeBasePath: 'whatever',
// ...
We don't currently support routes other than /docs - yet. There is a pull request that started back in August, but has been recently resurrected again. The PR is being reviewed and updated to allow more customizable routes.
As of Docusaurus 1.6, this is now implemented. The pull request has been merged.
More details about this are found in the site configuration.
Simply add the following to the siteConfig section in siteConfig.js:
const siteConfig = {
title: 'My Awesome Site',
docsUrl: '',
// ...
};