ryan/pictshare-browse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement image gallery with dynamic loading and copy URL functionality; add styles for improved layout and user interaction
All checks were successful
CI / build (push) Successful in 30s
Details

Browse Source
This commit is contained in:
Ryan Hamilton
2025-07-23 20:12:47 +00:00
parent 2fc8bde6eb
commit 0a566797de
7 changed files with 128 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.js
View File

@@ -1,9 +1,13 @@
const express = require("express");
const path = require("path");
const galleryRoutes = require("./galleryRoutes");
const app = express();
const PORT = process.env.PORT || 3000;
// Serve static files from public directory
app.use(express.static(path.join(__dirname, "../public")));
app.use(galleryRoutes);
module.exports = app;

10
src/galleryRoutes.js
View File

@@ -1,13 +1,14 @@
const express = require("express");
const getImages = require("./getImages");
const renderGallery = require("./renderGallery");
const router = express.Router();
// Route: Serve Image Gallery at `/`
// Serve static index.html for the root route
const path = require("path");
router.get("/", (req, res) => {
const images = getImages();
res.send(renderGallery(images));
res.sendFile(path.join(__dirname, "../public/index.html"));
});
// API Route: Return JSON List of Images
@@ -15,4 +16,5 @@ router.get("/images", (req, res) => {
res.json(getImages());
});
module.exports = router;

30
src/renderGallery.js
View File

@@ -1,30 +0,0 @@
module.exports = function renderGallery(images) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PictShare Gallery</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.image-container { max-width: 150px; max-height: 150px; cursor: pointer; }
.image-container img { width: 100%; border-radius: 5px; }
</style>
</head>
<body>
<h1>PictShare Gallery</h1>
<div id="gallery">
${images
.map(img => `<a href="${img.url}" target="_blank">
<img src="${img.url}" alt="${img.name}" class="image-container">
</a>`)
.join("")}
</div>
</body>
</html>
`;
};