diff --git a/eleventy.config.js b/eleventy.config.js index 9a83481..fac42ec 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -4,6 +4,9 @@ import brokenLinksPlugin from 'eleventy-plugin-broken-links' import { eleventyImageTransformPlugin } from '@11ty/eleventy-img' import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight' import footnote from 'markdown-it-footnote' +import fetch from 'node-fetch' +import fs from 'node:fs' +import exifParser from 'exif-parser' import { EleventyRenderPlugin, IdAttributePlugin } from '@11ty/eleventy' import { setupBlogCollections } from './scripts/eleventy/blog.js' import { setupFeedCollections } from './scripts/eleventy/feed.js' @@ -33,6 +36,16 @@ const setupPlugins = eleventyConfig => { eleventyConfig.addLiquidFilter('dateToRfc822', rssPlugin.dateToRfc822) eleventyConfig.addLiquidFilter('dateToRfc3339', rssPlugin.dateToRfc3339) eleventyConfig.addLiquidFilter('getNewestCollectionItemDate', rssPlugin.getNewestCollectionItemDate) + + eleventyConfig.addLiquidFilter('parseExif', async (src) => { + const content = src.startsWith('https://') + ? await fetch(src).then(r => r.arrayBuffer()) + : fs.readFileSync(src) + + const result = exifParser.create(content).parse() + console.log({ result }) + return result + }) } export default function (eleventyConfig) { diff --git a/package.json b/package.json index 69dc8f8..7490be4 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "canvas": "^3.1.0", "eleventy-plugin-broken-links": "^2.2.1", + "exif-parser": "^0.1.12", "favicons": "^7.2.0", "markdown-it-footnote": "^4.0.0", "node-fetch": "^3.3.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d643303..a691dad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: eleventy-plugin-broken-links: specifier: ^2.2.1 version: 2.2.1 + exif-parser: + specifier: ^0.1.12 + version: 0.1.12 favicons: specifier: ^7.2.0 version: 7.2.0 @@ -643,6 +646,9 @@ packages: eventemitter3@4.0.7: resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} + exif-parser@0.1.12: + resolution: {integrity: sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw==} + expand-template@2.0.3: resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==} engines: {node: '>=6'} @@ -2176,6 +2182,8 @@ snapshots: eventemitter3@4.0.7: {} + exif-parser@0.1.12: {} + expand-template@2.0.3: {} extend-shallow@2.0.1: diff --git a/src/_includes/icons/aperture.liquid b/src/_includes/icons/aperture.liquid new file mode 100644 index 0000000..5de867b --- /dev/null +++ b/src/_includes/icons/aperture.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/arrow-up.liquid b/src/_includes/icons/arrow-up.liquid new file mode 100644 index 0000000..71fd923 --- /dev/null +++ b/src/_includes/icons/arrow-up.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/calendar.liquid b/src/_includes/icons/calendar.liquid new file mode 100644 index 0000000..4c131e3 --- /dev/null +++ b/src/_includes/icons/calendar.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/camera.liquid b/src/_includes/icons/camera.liquid new file mode 100644 index 0000000..6b84fac --- /dev/null +++ b/src/_includes/icons/camera.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/crop.liquid b/src/_includes/icons/crop.liquid new file mode 100644 index 0000000..7628e2d --- /dev/null +++ b/src/_includes/icons/crop.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/locate-fixed.liquid b/src/_includes/icons/locate-fixed.liquid new file mode 100644 index 0000000..10d4384 --- /dev/null +++ b/src/_includes/icons/locate-fixed.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/map-pin.liquid b/src/_includes/icons/map-pin.liquid new file mode 100644 index 0000000..c4d566f --- /dev/null +++ b/src/_includes/icons/map-pin.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/icons/rabbit.liquid b/src/_includes/icons/rabbit.liquid new file mode 100644 index 0000000..93c16bd --- /dev/null +++ b/src/_includes/icons/rabbit.liquid @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/_includes/photo_exif.liquid b/src/_includes/photo_exif.liquid new file mode 100644 index 0000000..80f3a51 --- /dev/null +++ b/src/_includes/photo_exif.liquid @@ -0,0 +1,47 @@ +{% assign exif = src | parseExif %} +
+
+ Image: {{ title }} +
+
+ +
+
diff --git a/src/assets/css/obsidian.css b/src/assets/css/obsidian.css index e235a14..855c6ee 100644 --- a/src/assets/css/obsidian.css +++ b/src/assets/css/obsidian.css @@ -1,12 +1,11 @@ - - - body { --background: #111; --background-2: #252525; --background-3: #444; --color: #fffbe3; --color-2: #d0c895; + --color-3: #999; + --content-width: 800px; background: var(--background); color: var(--color); @@ -20,7 +19,7 @@ body { } .wrapper { - max-width: 800px; + max-width: var(--content-width); width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; @@ -288,6 +287,74 @@ td, th { white-space: nowrap; } +.photo-exif { + display: flex; + flex-direction: row; + gap: 10px; + margin-top: 30px; + margin-bottom: 30px; + width: calc(var(--content-width) + 260px); +} + +.photo-exif .img-wrapper img { + margin: 0; + border-radius: 15px; + max-height: calc(100vh - 20px); + width: auto; +} + +.photo-exif .exif-wrapper { + min-width: 250px; +} + +.photo-exif .exif-wrapper ul { + list-style-type: none; + margin: 0; + color: var(--color-3); + background: var(--background-2); + padding: 10px; + border-radius: 15px; +} + +.photo-exif .exif-wrapper ul li { + display: flex; + flex-direction: row; + margin: 7px 0; +} + +.photo-exif .exif-wrapper ul li svg { + min-width: 24px; + max-width: 24px; + min-height: 24px; + max-height: 24px; + margin-right: 7px; +} + +.photo-exif .exif-wrapper ul .title { + color: var(--color); + font-style: italic; +} + +@media screen and (max-width: 1270px) { + /* 1020px = 800px (max content width) + 470px (.photo-exif title card width * 2) */ + /* Below that, reformat for portrait mode. */ + .photo-exif { + flex-direction: column; + width: unset; + } + + .photo-exif .exif-wrapper ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0 20px; + } + + .photo-exif .exif-wrapper ul .title { + flex-basis: 100%; + } +} + @media screen and (max-width: 500px) { nav ul { flex-direction: column; diff --git a/src/blog/index.liquid b/src/blog/index.liquid index 4fe1a8d..2f02506 100644 --- a/src/blog/index.liquid +++ b/src/blog/index.liquid @@ -7,7 +7,8 @@