This project is still in the experimental stage and may introduce breaking changes without notice.

Live Demo

This repository contains components and utilities for building dynamic, responsive, and visually engaging photo-viewing experiences in Angular.

• Packages
• Installation
• Local development
• Contributing
• License

All packages can be used as standalone.

• Core
• Layout
• Lightbox

Provides core utilities shared by all packages.

Generate and render aesthetically pleasing image layouts by organizing images into rows of equal height, delivering a clean and cohesive look for image galleries.

Key Features:

• Justified Layout

  Automatically arranges images into rows of equal height for a polished and balanced design.

• Flexible Configuration

  Fine-tune row height, tolerance, spacing, and other parameters to suit your needs.

• 60fps Scrolling

  Optimized for 60fps scrolling and efficiently handles large sets of images thanks to deferrable views.

For now, this library uses flickr's justified-layout package under the hood. But I am interested in removing this dependency entirely and replace it a with built-in, tailored solution.

Create lightbox experiences with smooth transitions between preview images and their routed, full-screen views.

Key Features:

• 60fps Single-Document Transitions

  Seamlessly animates photos as they transition between routes with 60fps performance.

• Dynamic Slide Animation

  Smoothly scales images to fit the viewport.

• Responsive Design:

  Maintains aspect ratio while fitting images within the viewport.

• SEO-friendly

  Enhanced search engine optimization through route-based navigation (avoiding hash fragments, which aren't crawled by search engines).

• Precise Element Positioning:

  Utilities to calculate element positions relative to the viewport.

IMPORTANT NOTICE

The Lightbox library uses the experimental View Transitions API and therefore animated transitions will only work in supported browsers until I implement a proper fallback mechanism.

TBD

This repository is a nx workspace and uses pnpm as package manager. If you don't have pnpm installed yet, follow these install instructions

Optionally, you may also install the nx CLI globally. This allows you to replace the pnpm exec nx part of each command with nx. For example pnpm exec nx serve app would become nx serve app.

git clone photolog/photolog

gh repo clone photolog/photolog

pnpm exec nx show projects

The photolog-dev application contains code for the live demo site.

To run it in development mode, use:

pnpm exec nx serve photolog-dev

To run it in SSR (server-side rendering) mode, use:

pnpm exec nx serve-ssr photolog-dev

All workspace packages use Jest as the test runner.

This command compares the current state of this workspace (git HEAD) with the base branch (main) and only runs tests if the state changed.

pnpm exec nx affected -t test

pnpm exec nx run-many -t test

# Test layout feature
pnpm exec nx test layout

# Test lightbox feature
pnpm exec nx test lightbox

pnpm exec nx run-many -t test --projects=tag:type:feature

All packages use ESLint to enforce coding standards across the workspace.

pnpm exec nx affected -t test

pnpm exec nx run-many -t lint

pnpm exec nx lint layout

pnpm exec nx run-many -t lint --projects=tag:type:feature

To format the workspace, use:

pnpm exec nx format

If you'd like to improve this project, please feel free to:

• Open an issue to report bugs or suggest features.
• Fork the repository, make your changes, and submit a pull request.

Submitting a pull request involes using common workspace tasks as discussed in the Local development section.

Note

This repository uses conventional commits, so you must make sure your commit messages adhere to this specification.

Here is a minimal example, assuming your fork lives at https://github.com/username/photolog.git:

git clone https://github.com/username/photolog.git

cd ./photolog

git checkout -b fix-typos-in-interface

If your changes are not purely descriptive (e.g documentation, spelling errors, refactoring), you must add tests for these changes.

Before:

/** Represents th siz of a 2D box */
export interface Dimensions {
  width: number;
  height: number;
}

After:

/** Represents the size of a 2D box */
export interface Dimensions {
  width: number;
  height: number;
}

pnpm exec nx affected -t lint test build

git add .

git commit -m "docs(core): fix typos in Dimensions interface"

git push origin fix-typos-in-interface

Then go back to original repository on GitHub and click on Compare & pull request prompt.

This project is licensed under the Apache License 2.0.

You are free to use, modify, and distribute this software, provided you adhere to the terms of the license.