Developed/built/tested/deployed by 🤖
Lazily presented by Matias Carrasco Kind
Matias Carrasco Kind
mcarras2@illinois.edu
# Reveal.js Presentation Generator
## Project Structure
1. Create a folder called `app/`
2. Inside, set up a reveal.js presentation with the following files:
- index.html (main presentation file)
- css/theme.css (custom styling)
- js/config.js (presentation configuration)
## Presentation Content
### Slide 1: Title
- Title: "Gen-AI Dialogs"
- Date: April 17, 2025
- Clean, minimalist design with a subtle tech background
### Slide 2: VS Code & CLI Automation
- Title: "Code Automation Tools"
- Content: 3-4 key points about using VS Code and CLI to automate coding tasks
- Visual elements: Include VS Code and terminal icons/logos
- Use emojis sparingly (1-2 maximum)
- Keep text concise with plenty of whitespace
### Slide 3: Kubernetes & Infrastructure
- Title: "Infrastructure Automation"
- Content: 3-4 key points about using these tools for Kubernetes management
- Visual elements: Kubernetes logo and a simple infrastructure diagram
- Maintain consistent styling with previous slides
### Slide 4: Closing
- Title: "Thank You!"
- Name: Matias Carrasco Kind
- Email: mcarras2@illinois.edu
- Text: "Questions?"
- Consider adding a QR code that links to resources
## Design Guidelines
- Color scheme: Use a modern, high-contrast palette with no more than 3-4 colors
- Typography: Sans-serif fonts, with clear hierarchy between titles and content
- Transitions: Simple fade transitions between slides
- Background: Subtle, non-distracting pattern or gradient
- Overall aesthetic: Professional, clean, and minimalist
# Docker Container for Reveal.js Presentation
## Container Setup
1. Create a Dockerfile in the root directory (same level as the app/ folder)
2. Use a lightweight Nginx Alpine image as the base
3. Configure the container to serve the presentation files from the app/ directory
4. Expose port 80 for web access
## Build and Test Process
1. Build the Docker image with appropriate tags
2. Run the container locally and map port 80 to test access
3. Verify that all JS, CSS, and assets load correctly by:
- Opening the presentation in a browser
- Checking browser console for 404 errors
- Testing slide navigation and transitions
- Ensuring all assets (logos, images) display properly
## Production Deployment
1. If all tests pass, rebuild the image specifically for Linux AMD64 architecture
2. Tag the image as hub.ncsa.illinois.edu/gies-dsrs/genai:latest
3. Authenticate to the NCSA container registry if needed
4. Push the image to the specified registry
5. Verify the push was successful by checking the registry
## Troubleshooting Guidelines
1. If JS/CSS fails to load:
- Check file paths in the Nginx configuration
- Verify file permissions within the container
- Confirm that the correct MIME types are configured
2. For image push issues:
- Ensure proper authentication to the registry
- Verify network connectivity to hub.ncsa.illinois.edu
- Check for disk space constraints
## Documentation
1. Include comments in the Dockerfile explaining key configurations
2. Document any custom Nginx settings for future reference
3. Include basic instructions for running and maintaining the container
# Kubernetes Deployment for Reveal.js Presentation
## Project Structure
1. Create a folder called `deploy/` in the project root
2. Inside this folder, create three YAML files:
- `deployment.yaml` - For the application deployment
- `service.yaml` - For exposing the deployment as a service
- `ingress.yaml` - For configuring external access via Traefik
## Deployment Configuration (deployment.yaml)
1. Use the image: hub.ncsa.illinois.edu/gies-dsrs/genai:latest
2. Include appropriate resource limits (CPU/memory)
3. Configure 1-2 replicas for reliability
4. Add proper labels for service selection
5. Set appropriate container port (80)
6. Include readiness/liveness probes
## Service Configuration (service.yaml)
1. Match selector labels with deployment
2. Expose port 80
3. Use ClusterIP service type
4. Include appropriate annotations if needed
## Ingress Configuration (ingress.yaml)
1. Configure for host: genai.dsrs.illinois.edu
2. Use Traefik ingress controller
3. No custom annotations (TLS handled at ingress controller level)
4. Ensure proper service name and port targeting
## Deployment Process
1. Apply YAML files in the correct order:
- First deployment: `kubectl apply -f deployment.yaml`
- Then service: `kubectl apply -f service.yaml`
- Finally ingress: `kubectl apply -f ingress.yaml`
2. Verify resources:
- Check pods are running: `kubectl get pods`
- Verify service: `kubectl get svc`
- Confirm ingress: `kubectl get ingress`
## Validation Steps
1. Wait for deployment to be fully available
2. Check pod logs for any startup issues
3. Verify DNS resolution for genai.dsrs.illinois.edu
4. Access the website through a browser
5. Test presentation functionality:
- Slide navigation
- CSS/JS loading correctly
- All visual elements appearing as expected
## Troubleshooting Guidelines
1. For pod startup issues:
- Check pod events: `kubectl describe pod [pod-name]`
- View logs: `kubectl logs [pod-name]`
2. For ingress issues:
- Verify Traefik is running: `kubectl get pods -n [traefik-namespace]`
- Check ingress controller logs
- Confirm DNS resolution
## Documentation
1. Include comments in each YAML file explaining key configurations
2. Document any specific Traefik requirements
3. Add a README.md in the deploy/ folder with usage instructions