Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/computational-mama/yugen-lego-gallery

This is a website for Yugen's lego creations

https://github.com/computational-mama/yugen-lego-gallery

Science Score: 13.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ○
    .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (12.2%) to scientific vocabulary

Keywords

11ty gallery lego

Keywords from Contributors

archival projection profiles interactive sequences generic observability autograding hacking shellcodes
Last synced: 6 months ago · JSON representation

Repository

This is a website for Yugen's lego creations

Basic Info
Statistics
  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Topics
11ty gallery lego
Created over 1 year ago · Last pushed over 1 year ago
Metadata Files
Readme Contributing Funding License

README.md

FORKED FROM HERE: Eleventy Photo Gallery

THIS IS THE REPO

A starter site for creating your own photo or art gallery using the Eleventy static site generator.

Getting Started

Quickly generate a highly performant photo gallery from this template by clicking the green Use Template button. Creating a template repository provides the same directory structure and files as the original project.

Features

  • Build-time image transformations and responsive image markup in templates using @11ty/eleventy-img
  • High performance scalable site with 100s across the board on each page using Lighthouse
  • Home page with CSS grid displaying the gallery of images
  • Featured image pages
  • Gallery page
  • About me page
  • CSS preprocessor SCSS

Local Setup

  1. Clone this repo: git clone https://github.com/tannerdolby/eleventy-photo-gallery.git
  2. Navigate to your local copy of the project: cd eleventy-photo-gallery
  3. Install dependencies: npm install
  4. Build: npm run build
  5. Serve locally: npm run start or npm run dev

Usage

Add images to a folder such as images in your project and then supply an array of image metadata objects in a global data file _data/gallery.json:

json { "title": "Highway covered in water", "date": "October 20, 2020", "credit": "Photo by Josh Hild", "linkToAuthor": "https://www.pexels.com/photo/highway-covered-in-water-2524368/", "src": "highway-water.jpg", "alt": "Skybridge over highway covered in water", "imgDir": "/images/" }

Once the image data is supplied within the global data file _data/gallery.json then the home page gallery images and featured image pages will display responsive images with <picture> using @11ty/eleventy-img.

If you don't want to use a global data file simply define the image metadata elsewhere such as in your templates front matter or directly inside the img shortcode.

Creating responsive images in templates

  1. Get a large image from somewhere (your file system, a stock photo website, etc)
  2. Add the original image to the src/images/ folder (or a folder of your choice)
  3. Use the img shortcode to generate responsive image markup using <picture>
  4. This performs image transformations at build-time, creating varying image dimensions in the specified formats (.jpg, .webp, etc) from the original image, which outputs to the specified outputDir in the img shortcode within .eleventy.js

js {% img src="car.jpg", alt="A photo of a car", sizes="(max-width: 450px) 33.3vw, 100vw", className="my-img", %}

Compiling SCSS to CSS

All of the projects CSS is compiled from Sass at build-time. The main SCSS file is src/_includes/sass/style.scss and thats where partials, mixins, and variables are loaded in with @use rules.

If you want to change up the styles, you can write directly in style.scss for the changes to be compiled and used.

Otherwise, if you want to continue using a "modular" approach with separate SCSS files. You follow these steps: 1. Create a new partial file in a specific directory ('sass/partials', 'sass/mixins', 'sass/vars') like `_some-file.scss` where the underscore prefixed at the beginning signals that the file is a [partial](https://sass-lang.com/documentation/at-rules/use#partials). These files are meant to be loaded as modules and not directly compiled. 2. Write Sass code and style away! 3. Load the stylesheets with a `@forward` rule in the [index files](https://sass-lang.com/documentation/at-rules/use#index-files) like `@forward "./some-file";` within `_index.scss` within the directory so they can be loaded with `@use` in the scss file that is compiled to CSS. 4. Load the stylesheets using `@use` rules from the directory in which you need a specific file. Therefore, if I created a new file within `sass/mixins` called `_url-short.scss` and wanted to load that file in `style.scss`, I would use `@use "mixins" as *` to load the stylesheets within the `mixins` directory as one module while also ensuring the module isn't loaded with a namespace. _Read more about loading members and namespaces here in [Sass docs](https://sass-lang.com/documentation/at-rules/use#loading-members)_

Contributing

Feel free to report any issues and contribute to this project by suggesting a new feature or modification. I built this template for others to use so don't hesitate to let me know what you'd like to see added or modified.

  • Open an issue for any features/modifications you'd like to see!
  • Have a look at the contributing guidelines before submitting a PR! # yugen-lego-gallery

Owner

  • Name: computational-mama
  • Login: computational-mama
  • Kind: organization

GitHub Events

Total
Last Year

Committers

Last synced: 7 months ago

All Time
  • Total Commits: 545
  • Total Committers: 5
  • Avg Commits per committer: 109.0
  • Development Distribution Score (DDS): 0.073
Past Year
  • Commits: 1
  • Committers: 1
  • Avg Commits per committer: 1.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
Tanner d****r@g****m 505
dependabot[bot] 4****] 22
computational mama a****i@g****m 9
Nicolas Hoizey n****s@h****m 8
Kelson Vibber k****n@p****m 1
Committer Domains (Top 20 + Academic)
pobox.com: 1 hoizey.com: 1

Issues and Pull Requests

Last synced: 7 months ago

All Time
  • Total issues: 0
  • Total pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Total issue authors: 0
  • Total pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Issue authors: 0
  • Pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
Pull Request Authors
Top Labels
Issue Labels
Pull Request Labels

Dependencies

package-lock.json npm
  • 334 dependencies
package.json npm
  • @11ty/eleventy ^2.0.1
  • @11ty/eleventy-img ^4.0.2
  • @11ty/eleventy-navigation ^0.3.3
  • clean-css ^4.2.3
  • eleventy-plugin-metagen ^1.8.3
  • npm-run-all ^4.1.5
  • sass ^1.39.0
  • terser ^5.7.2