I am using the vuepress mediumish blog theme.
It seems that vuepress markdown containers are not supported by default in this theme. This has been discussed in the git vuepress issues at
https://github.com/vuepress/vuepress-theme-blog/issues/20
https://github.com/vuepress/vuepress-theme-blog/issues/70
https://github.com/vuepress/vuepress-theme-blog/issues/76
the response is
The blog theme doesn't include the container plugin, so you can import it by yourself
I tried to follow the instructions at Using a Plugin but I am not sure how to include the containers package. It does not seem to be an official package?
If I am not mistaken, I need to add it to index.js to the plugins array (also tried to add it to docs/.vuepress/config.js directly but makes no difference.
I tried to add custom-containers (as this is the heading in the docs), containers (as this is what someone at GitHub mentioned), and #vuepress/register-containers (as this is an official vuepress package including the name containers..). But this all didn't work.
What's the correct way to include it?
Related
Is there any easy way to remove any query to google font api "fonts.gstatic.com" in Nuxt.Js ? I would rather provide font files myself.
So far I tried to remove any mention of fonts.gstatic.com from .nuxt/components/index.js, but it seems that the command build reset my modifications, so nothing changed.
My configuration is quite simple, I initialized an app with #nuxt/content-theme-docs.
Since the concern is more aimed towards GAFAM (avoid the usage of Google fonts), the solution would be to fork the package for the Nuxt team and strip the related module.
Here is where to find it: https://github.com/nuxt/content/search?q=fonts
This module of Nuxt is aimed towards so fast, pain-free and easy to setup documentation. Hence probably why, Nuxt's team was using such package (since it's still the goto as of today to use Google fonts).
You can follow this answer if you want to use a module on build time: https://stackoverflow.com/a/68166329/8816585
Otherwise, you can use this website to have your fonts locally (link those to your CSS file and you should be fine): https://google-webfonts-helper.herokuapp.com/fonts
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´m starting with Vuepress (https://vuepress.vuejs.org), and i´d followed the docs to integrate it with an existing project (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the sugested docs directory.
But now i need to "really" integrate with my project and i need to when my users access the my-project.com/docs, to reach the Vuepress docs
If i make (yarn docs:build), the /dist folder will be generated to be used anywhere as a statics HTML files. I tought in put the /dist/ content in the /static/ files of my project. But the vue-router response to /docs is a 404.
And i will still need to make 2 builds, my project and the docs.
The questions are:
How can i make the vue-router "see" the vuepress build files? Where to put them?
How can i integrate the run build of project to make them both?
I have 2 projects, one with quasar and the other i´m using vue-cli 3.
Thank you all.
How can i make the vue-router "see" the vuepress build files? Where to put them?
You don't, it's basically an external link. A simple <a href="/docs"> should be sufficient.
How can i integrate the run build of project to make them both?
You don't, you add a new task that does them both.
// package.json
{
"scripts": {
"build-project": "node build-project.js"
}
}
from a terminal
# yarn run build-project
I think maybe the point problem is to solve the Vue-Router to make the vue-router don't handle the link when we external link the /docs as like.
I created a small vue.js library that is using scss for styling and published that as npm package. It works well with a default theme included into the package. But what if I would like to provide a custom theme from the application that consumes that npm package, how would you do that?
The source for a very basic version of the library is here: https://github.com/gwildu/gwi-vue-components
The idea is, that you would copy paste the styling folder somewhere (e.g., into your application directory or into another npm package) and configure the library package to import from that copyied directory.
I did some investigation myself and found that there is a big discussion about having dynamic imports in sass since years. This issue (open since 2013) claims to add such a feature (they call it load). Not sure, how actively sass is still developed and when this feature will be supported. For now I see 3 possible solutions:
move to LESS as it supports dynamic imports. Semantic UI gives you a hint about how theming could be done in LESS
It is possible to import from relative paths in SASS. That way you are also able to import from a parent directory of your package root directory (your application directory) like, e.g., #import '../../theme/index';. You would support somewhere in your package an example of a theme that the consumer then would have to copy to, e.g., the root directory of his application and adjust it to his needs. In your package you would then import the theme from that directory in the consumers application folder. The downside is, that the package would not work out of the box
You have a default theme in your package and you add some instructions into the readme how the user can override that theme in a build script. The consumer would have to copy the default theme to his application directory, adjust it to his needs and in the build script he would replace the theme in, e.g., node_modules/your-library-package-folder/theme/ by the theme in your application folder.
To be complete here is the approach with a dynamic import (that is not yet supported by SASS):
In your main theme file in the library package (that would be imported by the components) you would do a relative import of kind of a config file from the consumers application folder like in approach 2 (see above) but that config file yould not contain the theme but only the import path of the theme in a variable. that variable then would be used by the package main theme file to import the theme. For making the library work out of the box, I guess there would be a way to have a default theme as backup if the config file in the consumers directory would not exist (not tested)
Update:
I tried approach 3 but failed to get something useful. The issue with that approach is that you would have to somehow sync your custome theme with the default theme when you update the library to a higher version which might get too complex to handle in a reasonable way. Then I tried to use the overwrite feature of SASS as described here: How to overwrite SCSS variables when compiling to CSS which led me to approach
In your library component you first import a file with possible custom variables and you declare your variables in the library as default.
The issue with that approach is that SASS does not support optional imports. The file with the custom variables have to exist somewhere. So if the library updates you again have to sync your custom theme files for each component / file that was changed in the library. Apparently SASS also don't want to support such a feature in the future: https://github.com/sass/sass/issues/779 which is sad, as it seems to me an essential feature for being able to do theming without a highly complex build step.
Overall, it seems SASS itself is making every effort to prevent a simple theming approach which makes me think of moving back to LESS again. Not having a simple way for static theming in SASS in my opinion outweight the cons of not having an easy way to define custom functions in LESS.
i am new to aurelia, and when including it into my project as the api frontend i ran into an issue i need clarification about.
i followed the basic starting guide and made sure the code could load. which it does if i name the main.js as main.ts (and app.js also).
due to the fact, that i did not find any explanation or configuation option in the code nor "the internet" i wonder what i did do wrong
does someone else did have that problem.
it tries to load typescript even though the documentation says app.js there
Minimal Project
download http://aurelia.io/downloads/basic-aurelia-project.zip
copy the code in http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start as js
run any webserver with it. (e.g. python -m SimpleHTTPServer 8000)
The startup package is configured by default to work with TypeScript so to change this you need to replace the script
<script src="scripts/config-typescript.js"></script>
in index.html with
<script src="scripts/config-esnext.js"></script>
to use Javascript / ES next
This is mentioned in the documentation but may be easily missed, and the rest of the startup documentation follows the javascript approach.
Note that this tutorial is a quick startup - a more comprehensive one is http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial and some more alternative seeds (e.g. JSPM / webpack) can be found in this repo: https://github.com/aurelia/skeleton-navigation