diff --git a/src/components/Gallery.astro b/src/components/ImageViewer.astro similarity index 70% rename from src/components/Gallery.astro rename to src/components/ImageViewer.astro index 21977b2..fd8fb3a 100644 --- a/src/components/Gallery.astro +++ b/src/components/ImageViewer.astro @@ -1,51 +1,22 @@ --- -interface Image { - src: string - alt: string -} -interface Props { - images: Image[] -} -const { images } = Astro.props -const rowCount = Math.ceil(images.length/3) +// A component that allows you to open images in full screen. +// All you need to do is place it anywhere on the page. --- -
- -
- -
-
+
+ +
diff --git a/src/components/PhotoGrid.astro b/src/components/PhotoGrid.astro new file mode 100644 index 0000000..eda4036 --- /dev/null +++ b/src/components/PhotoGrid.astro @@ -0,0 +1,35 @@ +--- +interface Image { + src: string + alt: string +} +interface Props { + images: Image[] +} +const { images } = Astro.props +const rowCount = Math.ceil(images.length/3) +--- + +
+
+ {images.map(img => ( + {img.alt} + ))} +
+
+ + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4d8093d..75f41f2 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -28,7 +28,9 @@ const { title, description } = Astro.props
- +
+ +
diff --git a/src/pages/cinema.astro b/src/pages/cinema.astro index 541acd5..a956cc8 100644 --- a/src/pages/cinema.astro +++ b/src/pages/cinema.astro @@ -1,6 +1,7 @@ --- import Layout from '../layouts/Layout.astro' -import Gallery from '../components/Gallery.astro' +import PhotoGrid from '../components/PhotoGrid.astro' +import ImageViewer from '../components/ImageViewer.astro' ---

Кинотеатр

Мои любимые кадры из кино, сериалов и игр.

- + diff --git a/src/pages/notes/[...slug].astro b/src/pages/notes/[...slug].astro index 940e4ba..422a73b 100644 --- a/src/pages/notes/[...slug].astro +++ b/src/pages/notes/[...slug].astro @@ -2,6 +2,7 @@ import { getCollection } from 'astro:content' import Layout from '../../layouts/Layout.astro' import Tag from '../../components/Tag.astro' +import ImageViewer from '../../components/ImageViewer.astro' export async function getStaticPaths() { const blogEntries = await getCollection('notes') @@ -32,6 +33,8 @@ const formatDate = (date: Date) => {
+ +