A Notebook

# Note 1

# For starters

https://nodejs.org/en/docs (opens new window)

https://nodejs.org/en/docs/guides/getting-started-guide (opens new window)

Install tools and configuration manually: (after install NodeJs)

https://github.com/nodejs/node-gyp#on-windows (opens new window)

https://topdev.vn/blog/npm-la-gi/">https://topdev.vn/blog/npm-la-gi/ (opens new window)

https://hexo.io/themes (opens new window)

found 0 vulnerabilities
npm notice
npm notice New patch version of npm available! 8.1.0 -> 8.1.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.1
npm notice Run npm install -g npm@8.1.1 to update!
npm notice

wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 15.75s

√ Server
  Compiled successfully in 8.93s

wait Rendering static HTML...
success Generated static files in docs.

cd C:\VuePress
git init
git add -A
git commit -m 'deploy'

# VuePress Resources:

A curated list of awesome things related to VuePress: https://github.com/vuepress/awesome-vuepress (opens new window)

https://github.com/vuepress/awesome-vuepress#themes (opens new window)

https://vuepress.vuejs.org/guide/getting-started.html#prerequisites (opens new window)

https://ehkoo.com/bai-viet/static-web-vuepress-github-pages (opens new window)

https://blog.howar31.com/vuepress-blog-tutorial/#so-why-vuepress-and-gitlab-pages (opens new window)

You can use this component in a header to add some status for an API:

### Badge <Badge text="beta" type="warning"/> <Badge text="default theme"/>

type - string, optional value: "tip"|"warning"|"error", defaults to tip.

color name's cheat sheet: https://htmlcolorcodes.com/color-names/ (opens new window)

# Add Logo to nav bar:

https://vuepress.vuejs.org/theme/default-theme-config.html#navbar-logo (opens new window)

# MathJax support:

https://vuepress-community.netlify.app/en/plugins/mathjax/#installation (opens new window)

You can also explicitly overwrite or disable them for individual pages with YAML front matter:

---
prev: ./some-other-page
next: false
---

# APlayer:

themeConfig: {
//  other stuff...
      plugins: [
                [
                  'vuepress-plugin-mathjax',
                  {
                    target: 'svg',
                    macros: {
                      '*': '\\times',
                    },
                  },
                ], ['aplayer'],
            //  other stuff...    
                  ]
}

More commands and options: aplayer.js.org (opens new window)

# External js Code

https://coderedirect.com/questions/53896/how-to-add-external-js-scripts-to-vuejs-components

https://titanwolf.org/Network/Articles/Article?AID=1fa12010-da8c-4df5-86af-19ab0bbcb3df

https://stackoverflow.com/questions/52836660/how-to-add-jquery-into-a-vuepress-file <===

https://github.com/vuejs/vuepress/issues/790

# Darkmode

Install this plugin:

https://tolking.github.io/vuepress-theme-default-prefers-color-scheme (opens new window)

# VuePress Themes:

# Theme-hope

(experimental)

👉 https://vuepress-theme-hope.github.io/basic/tutorial/ (opens new window)


nvm list

nvm install 16.13.0

nvm use 16.13.0

npm i -g yarn

cd C:\ProjectVue

yarn config set registry https://registry.npm.taobao.org

yarn create vuepress-theme-hope docs

yarn run docs:dev

Note: shouldn't use Yarn 2 because of https://github.com/yarnpkg/berry/issues/543 (opens new window). Read more here (opens new window)

# Theme-vdoing

See here: https://foxdie987.github.io (opens new window)

# VuePress Video:

Video display example:

<video width="560" height="240" controls>
  <source src="https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_1mb.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

WebM format:

<video width="754" height="446" controls>
  <source src="https://files.abc.xyz/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

# Issues:

  • https://github.com/vuejs/vuepress/issues/1935

See: https://vuepress.vuejs.org/guide/deploy.html#github-pages (opens new window)

For example, I use base: "/course-material/" ok, and that works for me.

=> not neccessary anymore if you custom domain like https://vue.pquan.info (opens new window)

  • Weird encounter but solved by change the name of post's picture folder by something shorter and is not same name as post's name, log provided for future reference:
(undefined) ./abcd/xyz.md?vue&type=template&id=37f20fd6& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/@vuepress/core/node_modules/.cache/vuepress","cacheIdentifier":"4b61893c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??ref--1-1!./node_modules/@vuepress/markdown-loader??ref--1-2!./draft/concrete1.md?vue&type=template&id=37f20fd6&)
03:29:16.854	Module not found: Error: Can't resolve /abcd/xyz.

# CNAME

And furthermore, about CNAME and DNS: [https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/troubleshooting-custom-domains-and-github-pages#cname-errors](CNAME error)

also, every vuepress build destroys CNAME in docs folder.

[https://stackoverflow.com/questions/58287673/vuepress-build-deletes-cname-file-in-docs-needed-for-github-pages-custom-domain](Possible fix?)

# Hero Image

The Hero image must go in the public directory (for default theme)

The default theme looks for its hero image not in the /assets/img directory but in the /.vuepress/public directory.

Add the YAML line heroImage: /banner.png. The default theme looks for its hero image the public directory, which is found in /.vuepress/public. The next thing to add is the directive heroText: ...

GO TO: [ note2 ]

Note 2 →