46 | 5. Website is deployed!
47 | 6. (Add purchased domain)
48 |
49 | ## Meta Tags
50 | To use the gem `middlman-metaman`, [follow these setup instructions](https://github.com/cacheventures/middleman-metaman/)
51 |
52 | ## Preinstalled
53 | - [Bootstrap 4.6 CSS & JS](https://getbootstrap.com/docs/4.6/getting-started/introduction/)
54 | - Font Awesome CDN
55 | - Webpack
56 |
57 | ## Contributing
58 |
59 | 1. Fork it
60 | 2. Create your feature branch (`git checkout -b my-new-feature`)
61 | 3. Commit your changes (`git commit -am 'Add some feature'`)
62 | 4. Push to the branch (`git push origin my-new-feature`)
63 | 5. Create a new Pull Request
64 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | require 'rainbow'
2 |
3 | linters = [
4 | {
5 | name: 'ESLint',
6 | language: 'JavaScript',
7 | command: 'node_modules/.bin/eslint source/**/*.js --fix'
8 | },
9 | {
10 | name: 'stylelint',
11 | language: 'CSS/SCSS',
12 | command: 'stylelint **/*.scss --fix'
13 | },
14 | {
15 | name: 'RuboCop',
16 | language: 'Ruby',
17 | command: 'rubocop -a'
18 | }
19 | ]
20 |
21 | default_tasks = []
22 |
23 | linters.each do |linter|
24 | desc "Check your #{linter[:language]} files with #{linter[:name]}"
25 | task linter[:name].downcase.to_sym do
26 | puts Rainbow(
27 | "Checking your #{linter[:language]} files with #{linter[:name]}..."
28 | ).bright.orange
29 | run_linter(linter[:command])
30 | end
31 | default_tasks << linter[:name].downcase.to_sym
32 | end
33 |
34 | task default: default_tasks
35 |
36 | def run_linter(command)
37 | output = `#{command}`
38 | if output.empty?
39 | puts Rainbow('✔︎ Perfect style!').bright.green
40 | else
41 | system command
42 | end
43 | end
44 |
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "useBuiltIns": "usage",
7 | "corejs": "3"
8 | }
9 | ]
10 | ]
11 | }
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | # General config
2 | # http://localhost:4567/__middleman
3 |
4 | # For the metaman gem
5 | require "active_support/core_ext/hash/indifferent_access"
6 | # Import custom libraries and helpers
7 | Dir['./*/*.rb'].each { |file| load file }
8 |
9 | # Load Sass from node_modules
10 | config[:sass_assets_paths] << File.join(root, 'node_modules')
11 |
12 | set :css_dir, 'assets/stylesheets'
13 | set :fonts_dir, 'assets/fonts'
14 | set :images_dir, 'assets/images'
15 | set :js_dir, 'assets/javascripts'
16 |
17 | # Activate and configure extensions
18 | # https://middlemanapp.com/advanced/configuration/#configuring-extensions
19 |
20 | activate :autoprefixer do |config|
21 | config.browsers = '>0.25%, not ie 11, not op_mini all, not dead'
22 | end
23 |
24 | activate :external_pipeline,
25 | name: :webpack,
26 | command: build? ? 'npm run build' : 'npm run start',
27 | source: 'dist',
28 | latency: 1
29 |
30 | page '/*.xml', layout: false
31 | page '/*.json', layout: false
32 | page '/*.txt', layout: false
33 |
34 | configure :development do
35 | set :debug_assets, true
36 | end
37 |
38 | configure :build do
39 | ignore File.join(config[:js_dir], '*') # handled by webpack
40 | set :relative_links, true
41 | activate :asset_hash
42 | activate :gzip
43 | activate :minify_css
44 | activate :relative_assets
45 | end
46 |
47 | activate :metaman, host: 'https://domain.com'
48 |
--------------------------------------------------------------------------------
/data/meta_tags.yml:
--------------------------------------------------------------------------------
1 | # IMPORTANT: at the bottom of your config.rb, make sure you update your domain
2 | og:
3 | project_name: "MY NAME - Web Developer"
4 | title: "MY NAME - Web Developer"
5 | description: "A portfolio of my web apps."
6 | # image: "og_image.png"
7 |
--------------------------------------------------------------------------------
/data/products.yml:
--------------------------------------------------------------------------------
1 | - name: Some product
2 | image: some_product.png
3 | - name: Other product
4 | image: other_product.png
5 |
--------------------------------------------------------------------------------
/features/homepage.feature:
--------------------------------------------------------------------------------
1 | # language: en
2 | Feature: homepage
3 | I expect the homepage to work
4 |
5 | Scenario:
6 | When I visit the homepage
7 | Then I should see the text 'Hello world'
8 |
--------------------------------------------------------------------------------
/features/step_definitions/homepage_steps.rb:
--------------------------------------------------------------------------------
1 | When('I visit the homepage') do
2 | visit('/')
3 | end
4 |
5 | Then('I should see the text {string}') do |string|
6 | expect(page).to have_content(string)
7 | end
8 |
--------------------------------------------------------------------------------
/features/support/env.rb:
--------------------------------------------------------------------------------
1 | Bundler.require :default, :test
2 |
3 | require 'capybara/cucumber'
4 |
5 | middleman_app = ::Middleman::Application.new do
6 | config[:environment] = :test
7 | end
8 |
9 | Capybara.app = ::Middleman::Rack.new(middleman_app).to_app
10 | Capybara.asset_host = 'http://localhost:4567'
11 | Capybara.server = :webrick
12 |
13 | Capybara.register_driver :selenium do |app|
14 | Capybara::Selenium::Driver.new(app, browser: :chrome)
15 | end
16 |
17 | Capybara.default_driver = :selenium
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "middleman-webpack",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "browserslist": ">0.25%, not ie 11, not op_mini all, not dead",
6 | "devDependencies": {
7 | "@babel/core": "^7.11.0",
8 | "@babel/preset-env": "^7.11.0",
9 | "babel-loader": "^8.0.6",
10 | "css-loader": "^4.2.0",
11 | "eslint": "^7.6.0",
12 | "eslint-config-airbnb-base": "^14.2.0",
13 | "eslint-plugin-import": "^2.22.0",
14 | "postcss-loader": "^3.0.0",
15 | "style-loader": "^1.1.3",
16 | "stylelint": "^13.6.1",
17 | "stylelint-config-recommended-scss": "^4.1.0",
18 | "stylelint-scss": "^3.18.0",
19 | "webpack": "^4.44.1",
20 | "webpack-cli": "^3.3.12"
21 | },
22 | "scripts": {
23 | "start": "NODE_ENV=development ./node_modules/webpack/bin/webpack.js --watch -d --color",
24 | "build": "NODE_ENV=production ./node_modules/webpack/bin/webpack.js --bail -p"
25 | },
26 | "dependencies": {
27 | "bootstrap": "^4.5.2",
28 | "core-js": "^3.6.4",
29 | "jquery": "^3.6.0",
30 | "popper.js": "^1.16.1",
31 | "terser-webpack-plugin": "^3.0.8"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/source/assets/fonts/.keep:
--------------------------------------------------------------------------------
1 | # Import your .eot, .svg, .ttf, and .woff files here
2 |
--------------------------------------------------------------------------------
/source/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dmbf29/middleman-boilerplate/5fa6d1328b2b7363c3a8e8be8236418c03996f6b/source/assets/images/favicon.ico
--------------------------------------------------------------------------------
/source/assets/javascripts/index.js:
--------------------------------------------------------------------------------
1 | import 'bootstrap';
2 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/app.css.scss:
--------------------------------------------------------------------------------
1 | // Graphical variables
2 | @import "config/fonts";
3 | @import "config/colors";
4 | @import "config/bootstrap_variables";
5 |
6 | // External libraries
7 | // Using CDN for font-awesome
8 | @import 'bootstrap/scss/bootstrap';
9 |
10 |
11 | // Your CSS partials
12 | @import "components/index";
13 | @import "pages/index";
14 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/components/_alert.scss:
--------------------------------------------------------------------------------
1 | .alert {
2 | position: fixed;
3 | bottom: 16px;
4 | right: 16px;
5 | z-index: 1000;
6 | }
7 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/components/_avatar.scss:
--------------------------------------------------------------------------------
1 | .avatar {
2 | width: 40px;
3 | border-radius: 50%;
4 | }
5 | .avatar-large {
6 | width: 56px;
7 | border-radius: 50%;
8 | }
9 | .avatar-bordered {
10 | width: 40px;
11 | border-radius: 50%;
12 | box-shadow: 0 1px 2px rgba(0,0,0,0.2);
13 | border: white 1px solid;
14 | }
15 | .avatar-square {
16 | width: 40px;
17 | border-radius: 0px;
18 | box-shadow: 0 1px 2px rgba(0,0,0,0.2);
19 | border: white 1px solid;
20 | }
21 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/components/_index.scss:
--------------------------------------------------------------------------------
1 | // Import your components CSS files here.
2 | @import "alert";
3 | @import "avatar";
4 | @import "navbar";
5 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/components/_navbar.scss:
--------------------------------------------------------------------------------
1 | .navbar-lewagon {
2 | justify-content: space-between;
3 | background: white;
4 | }
5 |
6 | .navbar-lewagon .navbar-collapse {
7 | flex-grow: 0;
8 | }
9 |
10 | .navbar-lewagon .navbar-brand img {
11 | width: 40px;
12 | }
13 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/config/_bootstrap_variables.scss:
--------------------------------------------------------------------------------
1 | // This is where you override default Bootstrap variables
2 | // 1. All Bootstrap variables are here => https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss
3 | // 2. These variables are defined with default value (see https://robots.thoughtbot.com/sass-default)
4 | // 3. You can override them below!
5 |
6 | // General style
7 | $font-family-sans-serif: $body-font;
8 | $headings-font-family: $headers-font;
9 | $body-bg: $light-gray;
10 | $font-size-base: 1rem;
11 |
12 | // Colors
13 | $body-color: $gray;
14 | $primary: $blue;
15 | $success: $green;
16 | $info: $yellow;
17 | $danger: $red;
18 | $warning: $orange;
19 |
20 | // Buttons & inputs' radius
21 | $border-radius: 2px;
22 | $border-radius-lg: 2px;
23 | $border-radius-sm: 2px;
24 |
25 | // Override other variables below!
26 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/config/_colors.scss:
--------------------------------------------------------------------------------
1 | // Define variables for your color scheme
2 |
3 | // For example:
4 | $red: #FD1015;
5 | $blue: #167FFB;
6 | $yellow: #FFC65A;
7 | $orange: #E67E22;
8 | $green: #1EDD88;
9 | $gray: #0E0000;
10 | $light-gray: #F4F4F4;
11 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/config/_fonts.scss:
--------------------------------------------------------------------------------
1 | // Import Google fonts
2 | @import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Work+Sans:400,700&display=swap');
3 |
4 | // Define fonts for body and headers
5 | $body-font: "Work Sans", "Helvetica", "sans-serif";
6 | $headers-font: "Nunito", "Helvetica", "sans-serif";
7 |
8 | // To use a font file (.woff) uncomment following lines
9 | // @font-face {
10 | // font-family: "Font Name";
11 | // src: font-url('FontFile.eot');
12 | // src: font-url('FontFile.eot?#iefix') format('embedded-opentype'),
13 | // font-url('FontFile.woff') format('woff'),
14 | // font-url('FontFile.ttf') format('truetype')
15 | // }
16 | // $my-font: "Font Name";
17 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/pages/_home.scss:
--------------------------------------------------------------------------------
1 | // Specific CSS for your home-page
2 |
--------------------------------------------------------------------------------
/source/assets/stylesheets/pages/_index.scss:
--------------------------------------------------------------------------------
1 | // Import page-specific CSS files here.
2 | @import "home";
3 |
--------------------------------------------------------------------------------
/source/index.html.erb:
--------------------------------------------------------------------------------
1 | Bootstrap and Font Awesome already installed.
6 |