[
  {
    "path": "LICENSE",
    "content": "© 2023 La Loco SAS, head of Le Wagon Group - All rights reserved\n"
  },
  {
    "path": "README.md",
    "content": "First of all make sure you've created a rails app\n\n```bash\nrails new APP_NAME -d postgresql\n```\n\n## Setup\n\nRails 8 uses Propshaft by default, but we need Sprockets for SCSS compilation. Update your `Gemfile`:\n\n```ruby\n# Gemfile\n\n# REMOVE this line:\n# gem \"propshaft\"\n\n# ADD these gems:\ngem \"sprockets-rails\"\ngem \"sassc-rails\"\ngem \"bootstrap\", \"~> 5.3\"\ngem \"autoprefixer-rails\"\ngem \"font-awesome-sass\", \"~> 6.1\"\ngem \"simple_form\"\n```\n\nCreate the Sprockets manifest file (Rails 8 doesn't have this by default):\n\n```bash\nmkdir -p app/assets/config\ntouch app/assets/config/manifest.js\n```\n\n```js\n// app/assets/config/manifest.js\n//= link_tree ../images\n//= link_tree ../../javascript .js\n//= link_directory ../stylesheets .css\n```\n\nThen replace Rails' stylesheets by Le Wagon's stylesheets:\n\n```bash\nrm -rf app/assets/stylesheets\ncurl -L https://github.com/lewagon/rails-stylesheets/archive/rails-8.zip > stylesheets.zip\nunzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-rails-8 app/assets/stylesheets\n```\n\nIn your terminal, generate Simple Form Bootstrap config:\n\n```bash\nbundle install\nrails generate simple_form:install --bootstrap\n```\n\nUpdate your layout to use the correct stylesheet tag:\n\n```erb\n<!-- app/views/layouts/application.html.erb -->\n<!-- replace this line -->\n<%= stylesheet_link_tag :app, \"data-turbo-track\": \"reload\" %>\n<!-- with this line -->\n<%= stylesheet_link_tag \"application\", \"data-turbo-track\": \"reload\" %>\n```\n\n**On Ubuntu/Windows**: if the `unzip` command returns an error, please install it first by running `sudo apt install unzip`.\n\nNote that when you update the colors in `config/colors`, the (text) color of your buttons might change from white to black. This is done automatically by Bootstrap using the [WCAG 2.0 algorithm](https://getbootstrap.com/docs/5.1/customize/sass/#color-contrast) which makes sure that the contrast between the text and the background color meets accessibility standards.\n\n## Bootstrap JS\n\nInstall Bootstrap JS:\n```bash\nimportmap pin bootstrap\n```\n\nImport Bootstrap:\n\n```js\n// app/javascript/application.js\nimport \"bootstrap\"\nimport \"@popperjs/core\"\n```\n\nAdd the Bootstrap JS files to your manifest:\n\n```js\n// app/assets/config/manifest.js\n//= link_tree ../images\n//= link_tree ../../javascript .js\n//= link_directory ../stylesheets .css\n//= link popper.js\n//= link bootstrap.min.js\n```\n\n```rb\n# config/importmap.rb\n\n# replace these lines:\n# pin \"bootstrap\" # @5.3.2\n# pin \"@popperjs/core\", to: \"@popperjs--core.js\" # @2.11.8\n# with this:\npin \"bootstrap\", to: \"bootstrap.min.js\", preload: true\npin \"@popperjs/core\", to: \"popper.js\", preload: true\n```\n\n## Adding new `.scss` files\n\nLook at your main `application.scss` file to see how SCSS files are imported. There should **not** be a `*= require_tree .` line in the file.\n\n```scss\n// app/assets/stylesheets/application.scss\n\n// Graphical variables\n@import \"config/fonts\";\n@import \"config/colors\";\n@import \"config/bootstrap_variables\";\n\n// External libraries\n@import \"bootstrap\";\n@import \"font-awesome-sprockets\";\n@import \"font-awesome\";\n\n// Your CSS partials\n@import \"components/index\";\n@import \"pages/index\";\n```\n\nFor every folder (**`components`**, **`pages`**), there is one `_index.scss` partial which is responsible for importing all the other partials of its folder.\n\n**Example 1**: Let's say you add a new `_contact.scss` file in **`pages`** then modify `pages/_index.scss` as:\n\n```scss\n// pages/_index.scss\n@import \"home\";\n@import \"contact\";\n```\n\n**Example 2**: Let's say you add a new `_card.scss` file in **`components`** then modify `components/_index.scss` as:\n\n```scss\n// components/_index.scss\n@import \"card\";\n```\n\n## Navbar template\n\nOur `layouts/_navbar.scss` code works well with our home-made ERB template which you can find here:\n\n- [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb)\n- [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb)\n\nDon't forget that `*.html.erb` files go in the `app/views` folder, and `*.scss` files go in the `app/assets/stylesheets` folder. Also, our navbars have a link to the `root_path`, so make sure that you have a `root to: \"controller#action\"` route in your `config/routes.rb` file.\n"
  },
  {
    "path": "application.scss",
    "content": "// Graphical variables\n@import \"config/fonts\";\n@import \"config/colors\";\n@import \"config/bootstrap_variables\";\n\n// External libraries\n@import \"bootstrap\";\n@import \"font-awesome\";\n\n// Your CSS partials\n@import \"components/index\";\n@import \"pages/index\";\n"
  },
  {
    "path": "components/_alert.scss",
    "content": ".alert {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 1000;\n}\n"
  },
  {
    "path": "components/_avatar.scss",
    "content": ".avatar {\n  width: 40px;\n  border-radius: 50%;\n}\n.avatar-large {\n  width: 56px;\n  border-radius: 50%;\n}\n.avatar-bordered {\n  width: 40px;\n  border-radius: 50%;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n  border: white 1px solid;\n}\n.avatar-square {\n  width: 40px;\n  border-radius: 0px;\n  box-shadow: 0 1px 2px rgba(0,0,0,0.2);\n  border: white 1px solid;\n}\n"
  },
  {
    "path": "components/_form_legend_clear.scss",
    "content": "// In bootstrap 5 legend floats left and requires the following element\n// to be cleared. In a radio button or checkbox group the element after\n// the legend will be the automatically generated hidden input; the fix\n// in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden\n// input and has no visual effect. Here we try to fix matters by\n// applying the clear to the div wrapping the first following radio button\n// or checkbox.\nlegend ~ div.form-check:first-of-type {\n  clear: left;\n}\n"
  },
  {
    "path": "components/_index.scss",
    "content": "// Import your components CSS files here.\n@import \"alert\";\n@import \"avatar\";\n@import \"form_legend_clear\";\n@import \"navbar\";\n"
  },
  {
    "path": "components/_navbar.scss",
    "content": ".navbar-lewagon {\n  justify-content: space-between;\n  background: white;\n}\n\n.navbar-lewagon .navbar-collapse {\n  flex-grow: 0;\n}\n\n.navbar-lewagon .navbar-brand img {\n  width: 40px;\n}\n"
  },
  {
    "path": "config/_bootstrap_variables.scss",
    "content": "// This is where you override default Bootstrap variables\n// 1. Find all Bootstrap variables that you can override at the end of each component's documentation under the `Sass variables` anchor\n// e.g. here are the ones you can override for the navbar https://getbootstrap.com/docs/5.3/components/navbar/#sass-variables\n// 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default)\n// 3. You can override them below!\n\n// General style\n$font-family-sans-serif: $body-font;\n$headings-font-family:   $headers-font;\n$body-bg:                $light-gray;\n$font-size-base:         1rem;\n\n// Colors\n$body-color: $gray;\n$primary:    $blue;\n$success:    $green;\n$info:       $yellow;\n$danger:     $red;\n$warning:    $orange;\n\n// Buttons & inputs' radius\n$border-radius-sm:            .0625rem;\n$border-radius:               .125rem;\n$border-radius-lg:            .25rem;\n$border-radius-xl:            .5rem;\n$border-radius-xxl:           1rem;\n\n// Override other variables below!\n"
  },
  {
    "path": "config/_colors.scss",
    "content": "// Define variables for your color scheme\n\n// For example:\n$red: #FD1015;\n$blue: #0D6EFD;\n$yellow: #FFC65A;\n$orange: #E67E22;\n$green: #1EDD88;\n$gray: #0E0000;\n$light-gray: #F4F4F4;\n"
  },
  {
    "path": "config/_fonts.scss",
    "content": "// Import Google fonts\n@import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap');\n\n// Define fonts for body and headers\n$body-font: \"Work Sans\", \"Helvetica\", \"sans-serif\";\n$headers-font: \"Nunito\", \"Helvetica\", \"sans-serif\";\n\n// To use a font file (.woff) uncomment following lines\n// @font-face {\n//   font-family: \"Font Name\";\n//   src: font-url('FontFile.eot');\n//   src: font-url('FontFile.eot?#iefix') format('embedded-opentype'),\n//        font-url('FontFile.woff') format('woff'),\n//        font-url('FontFile.ttf') format('truetype')\n// }\n// $my-font: \"Font Name\";\n"
  },
  {
    "path": "pages/_home.scss",
    "content": "// Specific CSS for your home-page\n"
  },
  {
    "path": "pages/_index.scss",
    "content": "// Import page-specific CSS files here.\n@import \"home\";\n"
  }
]