Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade from vuepress to vitepress #132

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions .babelrc

This file was deleted.

8 changes: 0 additions & 8 deletions .eslintignore

This file was deleted.

47 changes: 0 additions & 47 deletions .eslintrc.js

This file was deleted.

5 changes: 3 additions & 2 deletions .github/workflows/build-and-deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ on:
push:
branches:
- master

jobs:
build-and-deploy:
runs-on: ubuntu-latest
Expand All @@ -13,9 +14,9 @@ jobs:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: 16
node-version: '20'
- run: npm ci
- run: npm run test-and-build
- run: npm run docs:build

- name: Deploy to ${{ env.TARGET_URL }}
uses: peaceiris/actions-gh-pages@v3
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
node-version: '20'

- name: Install dependencies
run: npm ci
Expand Down
9 changes: 5 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules
target
.idea
/*.iml
/src/.vitepress/.temp
/src/.vitepress/cache
/src/.vitepress/dist
/node_modules
/target
11 changes: 3 additions & 8 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
node_modules
target
.idea
!.vuepress
/src/usage-examples/precompilation/example.precompiled.js
/src/usage-examples/precompilation/precompile-in-nodejs.output.js
/src/*/usage-examples/precompilation/example.precompiled.js
/src/*/usage-examples/precompilation/precompile-in-nodejs.output.js
!.vitepress
/src/snippets/precompilation/example.precompiled.js
/src/snippets/precompilation/precompile-in-nodejs.output.js
15 changes: 0 additions & 15 deletions .vscode/launch.json

This file was deleted.

43 changes: 15 additions & 28 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Development setup

This site uses [VuePress](https://v1.vuepress.vuejs.org/) as static page generator. It is a static page generator based
This site uses [VitePress](https://vitepress.dev/) as static page generator. It is a static page generator based
on [Vue.js](https://vuejs.org/) and created to write the documentation of that framework.

VuePress is based on markdown files. Each HTML-page on the site has a corresponding markdown file in this repository.
VitePress is based on markdown files. Each HTML-page on the site has a corresponding markdown file in this repository.

# Requirements and recommended tools

The following tools are required to build and develop the site.

- NodeJS (latest LTS) and the corresponding version of `npm`
- Node.js (latest LTS) and the corresponding version of `npm`

The following tools will help you developing

Expand All @@ -24,25 +24,23 @@ The following tools will help you developing
After cloning the repository you probaby want to run the following commands:

- `npm install` (required) installs the dependencies libraries and is required for building the site.
- `npm run dev` runs a webpack-dev-server, usually on port 8080. This server features live-reloading. Styles will
- `npm run docs:dev` runs a vite-dev-server. This server features live-reloading. Styles will
automatically be updated when you change the source files. Changes in markdown changes and Vue.js components will be
visible immediately. _Note that changes to the file `src/.vuepress/config.js` are not part of the live-reload and
visible immediately. _Note that changes to the file `src/.vitepress/config.js` are not part of the live-reload and
require a restart of the command._
- `npm run preview` should be run prior to creating a pull-request. It will clean the build-directories, run tests and
- `npm run docs:preview` should be run prior to creating a pull-request. It will clean the build-directories, run tests and
linters, the site. A production-like preview of the site can be viewed at port 9080

Other commands are not needed as often:

- `npm run fix` trys to fix all `eslint` errors and runs `prettier` to format everything. This is also done in a
pre-commit hook so it should not be necessary to run this command manually.
- `npm run clean` removes all cached and built files. This can be helpful if you have errors that you cannot explain and
that just won't go away.
- The scripts `test`,`lint`, `format` and `build` just exist to make the other commands in the `package.json` more
- The scripts `test`,`lint`, `format` and `docs:build` just exist to make the other commands in the `package.json` more
readable.

## Differences between dev-server and production

The VuePress site is a Vue.js application. While the dev-server runs the whole application in the browser, the
The VitePress site is a Vue.js application. While the dev-server runs the whole application in the browser, the
production site is pre-rendered with subsequent changes running in the browser.

Vue.js components that only work in the browser will work correctly in the dev-server, but will fail in production.
Expand All @@ -60,24 +58,13 @@ A few notes on the site and the build processes

The `src` folder contains all sources of the page. That includes

- `src/**/*.md`: Markdown files, one for each HTML files containing the actual content.
- `src/.vuepress/styles`: [stylus](http://stylus-lang.com/) files that adjust the CSS styles of the website (TODO add
documentation link)
- `src/.vuepress/components`: custom Vue.js components and Layouts created for this site (TODO add documentation link)
- `src/.vuepress/public/`: root directory for public files that are copied to the site as-is.
- `src/.vuepress/plugins/`: VuePress-plugins created for this site.
- `src/**/*.md`: Markdown files, one for each HTML files containing the actual content
- `src/.vitepress/styles`: CSS files that adjust the styles of the website
- `src/.vitepress/components`: custom Vue.js components and Layouts created for this site
- `src/.vitepress/public/`: root directory for public files that are copied to the site as-is
- `src/.vitepress/plugins/`: VitePress-plugins created for this site

# Deployment

The deployment has two phases:

- The preview site at https://handlebars-draft.knappi.org is automatically updated when changes are pushed to the
`master`-branch. The Github-pages are hosted in the `gh-pages`-branch of this repository.
- The production site (currently the temporary site https://handlebars-prod.knappi.org) is updated when changes are
pushed to the `production`-branch. The Github-pages for the production site are hosted in the `master`-branch of the
[docs-prod-ghpages](https://github.com/handlebars-lang/docs-prod-ghpages) repository.

In both cases, the deployment itself is performed via [Travis-CI job](https://travis-ci.org/handlebars-lang/docs)

The Travis-CI job uses the [handlebars-site-bot](https://github.com/handlebars-site-bot) account to update the
github-pages of this repository.
The site at https://handlebarsjs.com is automatically updated when changes are pushed to the
`master`-branch. The Github-pages are hosted in the `gh-pages`-branch of this repository.
23 changes: 0 additions & 23 deletions README.markdown

This file was deleted.

24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
[![CI](https://github.com/handlebars-lang/docs/actions/workflows/ci.yml/badge.svg)](https://github.com/handlebars-lang/docs/actions/workflows/ci.yml)

This is the repository for the Handlebars documentation site.

* Target-URL: https://handlebarsjs.com

# Why VitePress?

There are a lot of static page generators out there nowadays.
I have chosen [VitePress](https://vitepress.dev/) over other systems for several reasons:

* I like [vuejs](https://vuejs.org).
* VitePress builds fast loading static sites with modern PWA technologies.
* VitePress is centered around markdown, but leaves the opportunity to inject interactive parts if needed.
* VitePress has a simple predefined way of adapting stylesheets, which makes it easy to adapt colors from the
original site without rewriting the whole css
* The vuejs documentation site is build with VitePress, so it will hopefully be around for a while.

You can challenge me and propose other solutions, but you might be asked to help out if you do.

-- Nils

:rocket: :rocket:

Loading