Skip to content
WIP to replace Flickr and store my old photos
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
pages
pages_templates
static
.gitignore
README.md
gulpfile.js
next.config.js
package.json
yarn.lock

README.md

What?

This: https://mehanigpics.z16.web.core.windows.net/albums.html

How it works:

It's generated list of Next.js pages, which are then server-side rendered and pushed to Azure Blob. There is no server at all. It's just a list of html and js files.

At build time, builder is asking azure blobs for albums schema and generates paths and code, and after it, builds created project. Here is a schema which should be in Azure Blob:

Blobs:

/index.html
/albums
	/index.html
 	/orig
		/name-1
			/img.jpg
			/img2.jpg
			/img3.jpg
			/img4.jpg
		/name-2
			…
		/otherName
			….
	/previews
		/name-1
			/index.html
			/img.jpg
			/img2.jpg
		/name-2
			…
		/otherName
			…

orig folder is used to store original files of photos which can be loaded when clicked on picture. previews folder is used to store compressed preview, usually used in album view.

Pages are generated from JS files with inlined templates at build time using mustache and then put into pages folder using gulp.

How to add albums

Just add folder with same name to orig and previews Azure Blob Storage, after it rerun yarn export and upload new version to Azure. (Will be hanlded by Azure DevOps in the next version)

How to build locally

  • yarn && yarn dev

How to build production version

  • yarn export

How to deploy

Just move all the content of out folder into Azure Blobs Container usually called $web for serving it as static pages

MehanigTemplates

Since there is a lot of code sharing between pages, there is an idea of tempates inside comments used in this project. MehanigTemplates a very simple type of comment which allows to inject any other file inside js at build time, without breaking VSCode autocompletion. Here is an example of template:

      {/* MehanigTemplateStart
        MehanigTemplateInject="pages_templates/album_named.mustache"
        MehanigTemplateEnd */}
You can’t perform that action at this time.