feat: docker

GalvinPython · GalvinPython · commit 6404b8bdb941 · 2025-09-22T23:22:18.000+01:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,32 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.DS_Store
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose.y*ml
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/secrets.dev.yaml
+**/values.dev.yaml
+/bin
+/target
+LICENSE
+README.md
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "server"
-version = "1.2.0"
+version = "1.3.0"
 edition = "2021"
 
 [dependencies]
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,36 @@
+FROM rust:1.90.0-alpine3.22 AS builder
+
+# Install build dependencies for Rust + musl as we're using alpine
+RUN apk add --no-cache \
+    musl-dev \
+    gcc \
+    g++ \
+    libc-dev \
+    make \
+    pkgconfig \
+    openssl-dev \
+    openssl-libs-static
+
+WORKDIR /usr/src/app
+
+# Copy manifest files first for dependency caching
+COPY Cargo.toml Cargo.lock ./
+
+# Build the app to cache dependencies
+COPY . .
+RUN cargo build --release --locked
+RUN rm -rf src
+
+FROM alpine:3.22
+
+# Install runtime dependencies
+RUN apk add --no-cache ca-certificates
+
+# Copy the compiled binary from builder stage
+COPY --from=builder /usr/src/app/target/release/server /usr/local/bin/app
+
+# Expose default port
+EXPOSE 8080
+
+# Start the app
+CMD ["app"]
diff --git a/README.md b/README.md
@@ -4,6 +4,12 @@ Get the latest five uploads for any YouTube channel!
 
 # How to use
 
+## Using a browser
+
+You can go to [the site](https://latestvid.stats100.xyz)
+
+## In a program using a Fetch API
+
 It's very simple, just make a request to `https://latestvid.stats100.xyz/get/<CHANNEL_ID_HERE>`  
 For example, to get the latest uploads for [MrBeast](https://youtube.com/@mrbeast), just have to make a simple request to `https://latestvid.stats100.xyz/get/UCX6OQ3DkcsbYNE6H8uQQuVA` and get an example response like this:
 
@@ -118,3 +124,9 @@ As a reminder, queries can be stacked: `?type=shorts&maxresults=2`
   }
 ]
 ```
+
+# Docker
+
+Docker is not required. I just use it because Nix is very unhappy on my server.
+
+If you do use to use Docker, the application runs on port 8080 by default
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Latest YouTube Videos API</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</head>
+
+<body
+    class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex items-center justify-center min-h-screen">
+    <div class="w-full max-w-3xl px-4">
+        <h1 class="text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 text-center">
+            Latest YouTube Videos API
+        </h1>
+        <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 text-center">
+            Fetch and display the latest videos from your favourite channels.
+        </p>
+        <form id="fetch-videos-form" class="space-y-4">
+            <div>
+                <label for="channel-id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    YouTube Channel ID
+                </label>
+                <input type="text" id="channel-id" name="channel-id" placeholder="Enter Channel ID"
+                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-100">
+            </div>
+            <div>
+                <label for="show-options" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Show Optional Fields
+                </label>
+                <input type="checkbox" id="show-options" name="show-options"
+                    class="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700">
+            </div>
+            <div id="optional-fields" class="space-y-4 hidden">
+                <div>
+                    <label for="video-count" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Video Count (1-50)
+                    </label>
+                    <input type="number" id="video-count" name="video-count" min="1" max="50"
+                        placeholder="Enter video count"
+                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-100">
+                </div>
+                <div>
+                    <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Type</label>
+                    <select id="type" name="type"
+                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100">
+                        <option value="all">All</option>
+                        <option value="video">Video</option>
+                        <option value="shorts">Shorts</option>
+                        <option value="streams">Streams</option>
+                    </select>
+                </div>
+            </div>
+            <button type="submit"
+                class="w-full px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600">
+                Fetch Videos
+            </button>
+        </form>
+
+        <div id="video-list" class="mt-6 grid gap-4 sm:grid-cols-1 md:grid-cols-2"></div>
+    </div>
+
+    <script>
+        const showOptionsCheckbox = document.getElementById('show-options');
+        const optionalFields = document.getElementById('optional-fields');
+        const videoList = document.getElementById('video-list');
+
+        showOptionsCheckbox.addEventListener('change', () => {
+            optionalFields.classList.toggle('hidden', !showOptionsCheckbox.checked);
+        });
+
+        const form = document.getElementById('fetch-videos-form');
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+
+            const channelId = document.getElementById('channel-id').value;
+            const videoCount = document.getElementById('video-count').value || 5;
+            const type = document.getElementById('type').value || 'all';
+
+            if (!channelId) {
+                alert('Please enter a YouTube Channel ID.');
+                return;
+            }
+
+            try {
+                const response = await fetch(`/get/${channelId}?type=${type}&maxresults=${videoCount}`);
+                if (!response.ok) throw new Error('Failed to fetch videos');
+
+                const data = await response.json();
+                renderVideos(data);
+            } catch (error) {
+                console.error('Error fetching videos:', error);
+                alert('An error occurred while fetching videos.');
+            }
+        });
+
+        function renderVideos(videos) {
+            videoList.innerHTML = '';
+            videos.forEach(video => {
+                const videoCard = document.createElement('a');
+                videoCard.href = `https://www.youtube.com/watch?v=${video.videoId}`;
+                videoCard.target = '_blank';
+                videoCard.className =
+                    "block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow overflow-hidden";
+
+                videoCard.innerHTML = `
+                    <img src="https://i.ytimg.com/vi/${video.videoId}/hqdefault.jpg" alt="${video.title}" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h2 class="text-lg font-semibold text-blue-600 dark:text-blue-400 hover:underline line-clamp-2">${video.title}</h2>
+                        <p class="text-xs text-gray-500 mt-1">${new Date(video.publishedAt).toLocaleString()}</p>
+                    </div>
+                `;
+                videoList.appendChild(videoCard);
+            });
+        }
+    </script>
+</body>
+
+</html>
diff --git a/src/main.rs b/src/main.rs
@@ -33,12 +33,11 @@ async fn get_videos(
         .map(|v| v.clamp(1, 50))
         .unwrap_or(5);
 
-    
     let url = format!(
         "https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={}&key={}&maxResults={}",
         id, *API_KEY.lock().unwrap(), max_results
     );
-    
+
     println!(
         "Fetching videos for playlist {} | Max results: {} | URL: {}",
         id, max_results, url
@@ -100,6 +99,12 @@ async fn get_videos(
     response
 }
 
+async fn serve_index() -> impl Responder {
+    HttpResponse::Ok()
+        .content_type("text/html")
+        .body(include_str!("index.html"))
+}
+
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {
     dotenv::dotenv().ok();
@@ -121,6 +126,18 @@ async fn main() -> std::io::Result<()> {
                     .allow_any_method()
                     .allow_any_header(),
             )
+            .route("/", web::get().to(serve_index))
+            .route("/index.html", web::get().to(serve_index))
+            .route("/docs", web::get().to(|| async {
+                HttpResponse::Found()
+                    .insert_header(("Location", "https://github.com/GalvinPython/latest-uploads-api#latest-youtube-uploads"))
+                    .finish()
+            }))
+            .route("/docs/", web::get().to(|| async {
+                HttpResponse::Found()
+                    .insert_header(("Location", "https://github.com/GalvinPython/latest-uploads-api#latest-youtube-uploads"))
+                    .finish()
+            }))
             .route("/get/{id}", web::get().to(get_videos))
             .route("/get/{id}/", web::get().to(get_videos))
     })
