How this site was built.

The Nuxt.js Project

Nuxt is a framework designed to give you a strong architecture following official Vue guidelines. The big innovation of Nuxt.js comes with the nuxt generate command. When building your application, it will generate the HTML for every one of your routes and store it in a file.
With this, you can host your generated web application on any static hosting! The NuxtJS site itself is in fact generated and hosted on Netlify.

Visit the NuxtJS guide for more info on the directory structure and any other NuxtJS question you might have.


When a page is generated, the following parts contribute to its final HTML:
- the App Template (located in the root folder: app.html)
- a Layout (located in the Layouts folder and selected at the bottom of each page template)
- a Page (located in the Pages folder) - Page components are Vue components, but Nuxt.js adds special attributes and functions to make the development as easy as possible.
- the HTML Head - Nuxt.js lets you define all default meta tags for your application inside nuxt.config.js.

The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router.


If we take a look at the page.vue layout used by most pages in this site, we can see that there are some custom tags being used:

    <headersection />
    <!-- the nuxt tag includes the actual page component -->
    <nuxt />
    <footersection />    
    <preloader />

These are components, defined inside the components folder.
Some components can also have parameters being passed to them. A good example, in this application, is the Cropped-image.vue which accepts the following parameters:

    export default {
        props: {
            wrapper: String,
            ratio: String,
            src: String,
            position: String

To use it inside a page, first you need to import it in the script section:
import croppedImg from '~/components/Cropped-image.vue'
And then you can use it in the template section:
<croppedimg wrapper="col-six" ratio="1:1" src="/images/.../07.jpg" />


Whenever editing the site, it is good practice to run the site in development mode using npm, since this gives you a real time preview of your changes before deployment.

First you need to switch to the correct project folder:
cd Documents/Projects/gallarotti-net/
and then you need to start the site in development mode:
npm run dev
The site will be built and eventually you will see a message that tells you that the site is available. To preview the site as you make edits leave the terminal window open and browse to:
Every time you save changes to the site, npm will automatically recomplile the site.


When you are happy with the changes you have made and you want to deploy them to the live site, all you have to do is to commit those changes to the private github repo.

Open Sourcetree and double click on the gallarotti-net local repo.
Once the new window opens up, you will see that you have some uncommitted changes.
Click on the Commit button at the top - this will show you a list of all the uncommitted changes. Use the checkboxes next to each file to select which changes you want to commit, or use the checkbox at the top to include all changes.
Enter a comment at the bottom of the screen, and check the checkbox to push all changes immediately to the origin server. If you don't check the checkbox, the changes will be committed only to your local repository and you will need to push those changes later to the github repo.

Before you click the Commit button at the bottom, open a browser window, go to:
Once logged in the site, select the site and click on the Production deploys section header.
At the top of the following page you will see that:
Auto publishing is on. Deploys from master are published automatically.
This means that every time changes are being detected in the master branch of the github repo a new build will start.
So now, it's time to switch to SourceTree, click the Commit button at the bottom, and then refresh the page in netlify to see the new build. Click on it to see the deploy log. If no errors happen during the build you will eventually see the message:
Site is live
which indicates that all changes have been deployed and should be visible on the live site.

Page Layout

Each page is wrapped in a content section:

<section class="s-content  s-content--narrow">

Usually content is entered inside div.row divs, but sometimes, when we want to have wider images, we get out of the div.row to be able to use the full margins of the section tag.

Both inside and outside the div.row we can use special classes to work within a 12-column grid.
- div.col-full uses the entire width (12 columns)
- div.col-eight uses 1/3rd of the width (4 columns)
- div.col-six uses half of the width (6 columns)
- div.col-four uses 1/3rd of the width (4 columns)

In order to create grids of perfectly cropped square images, like the blue elements in the screenshot above, we can use a component which will create the correct div, load the image, and ensure that it is cropped using the correct ratio:

<croppedimg wrapper="col-six" ratio="1:1" src="/images/.../07.jpg" />
When cropping the position of the center of the orginal image can be adjusted using the position parameter:
<croppedimg wrapper="col-four" ratio="1:1" src="/images/.../12.jpg" position="50% 35%" />

In the screenshot below you can see how the croppedimg component can be used to create grids of rectangular vertical images using ratio="3:2" instead of ratio="1:1"

At the bottom of this screenshot you can see a grid of 3 square images created outside the div.row, to use the entire span of the section.