Prerequisites

Getting started

VuePress changelogs and upgrade

VuePress theme upgrade

Using the demo for your need

• Git bash
• NodeJS 18.0.0
• Latest Visual Studio Code

Using yarn makes the installation much quicker.

npm install --global yarn #(or use the .msi => https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
yarn

Then, launch the project locally:

npm run docs:dev

Or to build it:

npm run docs:build

See this link.

When upgrading and having issues with builds, use the following commands:

1. run yarn upgrade [email protected]
2. run rm -R node_modules && rm yarn.lock && yarn install
3. run npm run docs:build
4. run npm run docs:dev to see if the site loads and renders well :)

See this link.

Run:

yarn upgrade [email protected]

To use this template, you will need to:

Update you need the dual locales setup. By default, you have english (default language) and french enabled.

If you only need one, remove from locales the head configuration you don't need.

If you want another language as default, update the lang value with a valid locale. See this list.

WARNING: Not all locales are supported in terms of translation with the Mr Hope theme.

• replace the danielwilson.netlify.app with the URL of your site.
• set the author.
• set the proper repository name, url, default branch and directory
• set the proper locales, depending on what you did in config.js
• update the comment plugin if you need it. See the theme documentation
• set the option you want from mdEnhance plugin. BE CAREFUL: activiting too many options may fail while deploying to Netlify because of memory limit. The default options actived work.
• disable the pwa (for Progressive Web Apps) if you don't need it. But as it is configured, it works very nicely.

You will need replace the ones under docs/.vuepress/public/icons

Using this icon generator, you can generate an icon using a text value.

1. Pick 2 colors: a dark (it doesn't black or brown) and a light one.
2. First set the Font Color to your light color and Background color to your dark color.
3. Type whatever text you want. **I usually use one or two letters so it fits in the icon.
4. Select the font you prefer and the font size
5. Click Download
6. Extract the files and rename about.txt to about-light-over-dark.txt
7. Copy everything except the manifest file to docs/.vuepress/public/icons to replace the template files.
8. Invert the colors on the icon generator
9. Click Download again
10. Extract the files and rename
    • about.txt to about-dark-over-light.txt
    • prefix all other images with dark-
11. Copy everything except the manifest file to docs/.vuepress/public/icons to replace the template files.

From docs/.vuepress/public/icons, copy the favicon.ico to docs/.vuepress/public.

IMPORTANT: if you use the plugin pwa, you will need to update the webmanisfest files under docs/.vuepress/public/.

If you use two locales, you will need to update all variants.

• Only the name, short_name, description and start_url, theme_color and background_color need to be updated.
• Use the same color for theme_color and background_color that you pick in Generate the icons

See the theme documentation for further information

The template implements the Theme Color Palette. See the documentation.

You will need to update the file docs/.vuepress/styles/palette.scss with the dark color picked in the icon generator.

Head to docs/.vuepress/configs/head/ folder to update each local file. The variables you need to update are found at the top of each file.

Just update them.

Head to docs/.vuepress/configs/navbar/ folder to update each local file.

The sample menu show you a few example.

Not setting the text property for a link will default back to the page title.

The parent of a dropdown menu is not clickable.

Let me know in the issues on GitHub or head to the theme documentation. It is well done.

You will a client ID and a client secret before setting up the Netlify site.

Go to your Developer settings. Under OAuth Apps, add a new OAuth App or Register a new application, if you have no application registered yet.

You will need to input:

• a application name
• the application's homepage URL: https://my-app.netlify.app/
• the authorization callbacl URL: set to https://api.netlify.com/auth/done

Copy the Client ID from the OAuth application settings.

Finally, click `` and copy the value generated. It won't be given again!

Make sure you've configured the API credentials for Github from the Access part of your Netlify site dashboard.

You can find it under: Site settings > Access control > OAuth.

Then,

• Install a provider,
• Choose GitHub since you just created a OAuth application on GitHub.
• Input the Client ID in the Key input and Client secret in the Secret input.

Navigate to https://my-app.netlify.app/admin.

You will see a Login with GitHub.

Click it and authorize your account.

And you are done!