General design
#General design
├── assets
│ ├── artwork
│ ├── projectThumbnails
│ ├── risk_screenshots
│ ├── svg
├── build
├── css
│ ├── cssLibs
│ └── less
│ ├── artGallery
│ ├── bio
│ ├── blog
│ ├── buttons
│ ├── default
│ ├── fonts
│ ├── mainContent
│ ├── mainMenuLinks
│ ├── modal
│ ├── projectCarousel
│ ├── projects
│ ├── spinnerBox
│ ├── startPageTypography
│ ├── subMenuLinks
│ ├── table
│ └── topBar
│ └── videoGallery
├── docs
│ ├── fonts
│ ├── img
│ ├── scripts
│ │ └── prettify
│ └── styles
├── documents
├── fonts
│ ├── mfizz
│ ├── proximanova-black
│ ├── proximanova-bold
│ ├── proximanova-regular
│ ├── proximanova-regularitalics
│ └── proximanova-semibold
├── includes
│ ├── build
├── js
│ ├── angular
│ │ ├── controllers
│ │ ├── directives
│ │ ├── filters
│ │ └── services
│ ├── configFiles
│ ├── helpers
│ └── libs
│ └── photoswipe
│ └── default-skin
├── jsdocTemplate
│ ├── static
│ │ ├── fonts
│ │ ├── img
│ │ ├── scripts
│ │ │ └── prettify
│ │ └── styles
│ └── tmpl
├── miscFiles
├── model
└── views
└── build
Images and videos used for the art gallery section
Folder for built assets like js-files and revisioned images
Folder for the original imags
All less files are stored here
This is the javascript documentation page, the contents of ./docs is generated using a Grunt plugin
Documents that can be downloaded from the site
Files that have been broken out into separate files are stored in this folder. These are files that will be imported with php. This is done for keeping markup more tidy
Fonts used on the site
All the angular files. Config, controllers and services
Javascript libraries used on the site
The custom template used for the jsdoc
Json-files used for stuff like configuration
Other files that I didn't know where to put. Usually downloadable files
Backend-files
The views used for Angular routing
This site is mainly built in Angular. I am using jQuery scripts here and there and I have also experimented a bith with using requirejs, but Angular is the main framwork used for this site.
I chose to go for a single page application design so I am using Angular routing for this. All the views used for angular routing are found in the views-folder.
I wanted my menu to be easily modified if I wanted to change order, rename or add new menu- or submenuitems. I decided to specify the menu layout in a separate json-file which is then loaded into the menu controller. The menu is then rendered in the template.
I am using jQuery for the slide up/down animations of the submenu bar.
I have experimented a bit back and forth with this and there are still some issues that needs to be fixed with the menu but for now it is working good enough.
Here are all the tasks that are used when running the "grunt" command for building the site.
- clean First of all a clean is performed. Any previously built files are removed.
- copy Files that will need to be modified in the later task steps will first be copied to their correspodning build-folder. This way the original files are not modified.
- uglify This minifies and uglifies specified js-files and puts them in the assets/build folder
- browserify This transpiles the ES2015 code using Babel to make it backwards compatible
- filerev This uses the Grunt task filerev for revisioning files with a hash that is generated. For instance bg.png becomes bg.195af249.png. All images and some of the js-files are modified this way. This is useful for caching files which is explained below
- less This compiles css files from the less files
- filerev_replace This modifies all references for the revisioned files where they are referenced. For instance in this example any reference to bg.png becomes instead a reference to bg.195af249.png
- replace:inline This inlines css files so that in the built head.php file instead of having references to the css-files the contents of these files are inlined inside style-tags. This is done for perfomance reasons.
- jsdoc Generates an updated jsdoc
- notify Notifies the user that the build is done
Here are all the tasks that are used when running the "test" command.
- clean First of all a clean is performed. Any previously built files are removed.
- browserify Transpiles the ES2015 code using Babel. Unfortunately this has to be done because the karma tests doesn't seem to work with the ES2015 code, so I transpile and then test the transpiled code
- jsonlint Performs a format validation on all JSON-files
- eslint Lints all JS-files
- karma Runs unit tests
As explained above a lot of assets like the main js-file (martins-web.min.js) and all image files are revisioned using Grunt-filerev and used. This adds a hash to the filename of the generated file. If the file is modified somehow then the hash will also change whenever the task is run again. The reason for this is that it allows me to cache files on my server for a long time which improves the performance of the site. If the files are then changed then the hash is also changed which is interpreted as a completely new file which means that the hardcaching does not prevent loading of new content.
For a more detailed description about how I am using server caching of static files together with plugins like "filerev" please read this blog post that I wrote