diff --git a/README_FRONT.md b/README_FRONT.md index a7cace82..ceada661 100644 --- a/README_FRONT.md +++ b/README_FRONT.md @@ -1,33 +1,83 @@ cfp-devoxxfr ============ -Tailwind is used to generate the stylesheets for the website. +Tailwind is used to generate the stylesheets for the website and the home page. # Pre-requisites -Install `nvm` - +- Install `nvm` +- Install and activate the correct version of nodejs +- Install `npm` +- Install `tailwindcss` and its dependencies +- Install `postcss` and its dependencies +- Install `autoprefixer` and its dependencies + ## Install node v16.4.0 -`nvm install v16.4.0` +``` +nvm install v16.4.0 +v16.4.0 is already installed. +Now using node v16.4.0 (npm v6.13.4) +``` + +Load the version from the `.nvmrc` file + +``` +nvm use +Found '~/Dev/cfp-devoxx/.nvmrc' with version <16.4.0> +Now using node v16.4.0 (npm v6.13.4) +``` After the installation, restart a shell and check that the node version is v16.4.0 : -```cfp-devoxx git:(dev) ✗ node -v -v16.4.0 +``` +npm -v +6.13.4 + +``` + +## How to install Tailwind + +Update browserlits : + +``` +npx browserslist@latest --update-db +``` + +Then : + +``` +npm install --save-dev "browserslist@>= 4.21.0" ``` -## Check your version of node +Install Tailwind and additional modules : -# How to install Tailwind +``` +npm install -D tailwindcss postcss autoprefixer +``` -```npm install``` +This is the version we used : ++ tailwindcss@3.2.4 ++ autoprefixer@10.4.13 ++ postcss@8.4.19 # For local developpement +## For the main CFP website + +``` +npx tailwindcss -i ./tailwind/src/cfp_devoxx_fr_2023.css -o ./public/devoxx_fr_2023/devoxx_fr_2023.css --watch +``` + +## Public web pages for program + If you need to work on the public web pages of the CFP (program, speakers's bio, agenda, etc.), you can use the following command to generate the stylesheets: -```npx tailwindcss -i ./public/css/dvx_tailwind.css -o ./public/css/devoxx_generated_tailwind.css --watch``` +``` +npx tailwindcss -i ./public/css/dvx_tailwind.css -o ./public/css/devoxx_generated_tailwind.css --watch +``` + +## CFP pages ## For production before deployment @@ -35,13 +85,17 @@ If you need to work on the public web pages of the CFP (program, speakers's bio, Make sure to update and to save on Git the generated CSS file. No extra npm tasks are executed on the production environment at deployment time. -```npx tailwindcss -i ./public/css/dvx_tailwind.css -o ./public/css/devoxx_generated_tailwind.css --minify``` +``` + +npx tailwindcss -i ./public/css/dvx_tailwind.css -o ./public/css/devoxx_generated_tailwind.css --minify +``` -# Trouble shooting +# Trouble shooting on MacOS If `npx` returns the following error, you need to install the latest version of node -```cfp-devoxx git:(dev) ✗ npx +``` +cfp-devoxx git:(dev) ✗ npx :32 #unloaded = false ^ diff --git a/app/views/Application/home.scala.html b/app/views/Application/home.scala.html index 98f8f8ad..80d01619 100644 --- a/app/views/Application/home.scala.html +++ b/app/views/Application/home.scala.html @@ -2,7 +2,7 @@ @import helper.twitterBootstrap._ -@main(Messages("cfp.title")) { +@main(Messages("cfp.title"), showNav=false) {