Add schedule page : get from google calendar api

.gitignore

@@ -5,3 +5,4 @@ node_modules/
 venv/
 **/.DS_Store
 dist/
+.env

app.py

@@ -268,6 +268,20 @@ def gallery():
     )
 
 
+@app.route("/schedule")
+def schedule():
+    """Schedule page with client-side fetching"""
+    # Pass API URL to template for client-side fetching
+    # Use public URL if available, otherwise fallback to local default
+    api_url = "https://devops-jogja-calendar.vercel.app/events"
+
+    return render_template(
+        "schedule.html",
+        api_url=api_url,
+        current_page="schedule"
+    )
+
+
 
 @app.errorhandler(404)
 def not_found(error):

build.py

@@ -61,6 +61,8 @@ def static_url_for(endpoint, **values):
                 return '/about/'
             elif endpoint == 'organizer':
                 return '/organizer/'
+            elif endpoint == 'schedule':
+                return '/schedule/'
             elif endpoint == 'blog_post':
                 slug = values.get('slug', '')
                 return f'/blog/{slug}/'
@@ -342,7 +344,9 @@ def build_sitemap(self):
             {"url": "/event/", "priority": "0.8"},
             {"url": "/about/", "priority": "0.6"},
             {"url": "/organizer/", "priority": "0.6"},
+            {"url": "/organizer/", "priority": "0.6"},
             {"url": "/gallery/", "priority": "0.6"},
+            {"url": "/schedule/", "priority": "0.8"},
         ]
 
         # Add blog posts
@@ -400,6 +404,24 @@ def build_all(self, custom_domain=None):
         self.build_other_pages()
         self.build_error_pages()
         self.build_gallery_page()
+        self.build_schedule_page()
+
+    def build_schedule_page(self):
+        """Build schedule page with client-side fetching configuration"""
+        with self.app.app_context():
+            with self.app.test_request_context():
+                # For static site, we need the public API URL that the browser can access
+                # Default to localhost for dev, but this should be configured for prod
+                api_url = "https://devops-jogja-calendar.vercel.app/events"
+
+                current_url = f"{self.app.jinja_env.globals['base_url']}/schedule/"
+                html = render_template(
+                    "schedule.html", 
+                    api_url=api_url,
+                    current_url=current_url, 
+                    current_page="schedule"
+                )
+                self.save_page(html, "schedule/index.html")
 
     def build_gallery_page(self):
         """Build gallery page"""

pyproject.toml

@@ -12,4 +12,5 @@ dependencies = [
     "pygments==2.16.1",
     "python-dateutil==2.8.2",
     "pyyaml==6.0.1",
+    "requests>=2.32.5",
 ]

static/css/homepage.css

@@ -3,4 +3,38 @@
  * Refactored for new UI
  */
 
-/* Add any custom styles here that Tailwind can't handle */
+/* Add any custom styles here that Tailwind can't handle */
+
+/* Marquee Animations */
+@keyframes marquee {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes marquee2 {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+.animate-marquee {
+    animation: marquee 30s linear infinite;
+}
+
+.animate-marquee2 {
+    animation: marquee2 30s linear infinite;
+}
+
+.group:hover .animate-marquee,
+.group:hover .animate-marquee2 {
+    animation-play-state: paused;
+}

static/css/input.css

@@ -342,6 +342,22 @@
     }
   }
 
+  .slide-in-from-bottom-8 {
+    animation-name: slideInBottom8;
+  }
+
+  @keyframes slideInBottom8 {
+    from {
+      transform: translateY(2rem);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
   /* Grid Backgrounds */
   .bg-grid-pattern {
     background-size: 40px 40px;

tailwind.config.js

@@ -5,6 +5,25 @@ module.exports = {
         "./templates/**/*.html",
         "./static/js/**/*.js"
     ],
+    safelist: [
+        'translate-x-0',
+        'overflow-hidden',
+        // Schedule Page Dynamic Classes
+        'md:flex-row',
+        'md:w-1/2',
+        'space-y-16',
+        'space-y-8',
+        'relative',
+        'flex',
+        'flex-col',
+        'top-8',
+        'right-1/2',
+        'left-1/2',
+        'group-hover:scale-150',
+        'group-hover:bg-primary/50',
+        'group-hover:-translate-y-1',
+        'group-hover:shadow-xl'
+    ],
     theme: {
         extend: {
             colors: {

templates/index.html

@@ -73,6 +73,57 @@
     </div>
 </section>
 
+<!-- Sponsors Section -->
+{% if sponsors %}
+<section class="py-12 border-b border-border bg-background">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8 text-center">
+        <h2 class="text-xl font-semibold text-muted-foreground uppercase tracking-widest">Supported By</h2>
+    </div>
+
+    <div class="relative flex overflow-x-hidden group">
+        <div class="animate-marquee whitespace-nowrap flex items-center gap-12 px-6">
+            {% for sponsor in sponsors %}
+            <a href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer"
+                class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100 transform hover:scale-110">
+                <img src="{{ url_for('static', filename='images/sponsor/' + (sponsor.logo | get_image('sponsor'))) }}"
+                    alt="{{ sponsor.name }}" class="h-12 w-auto max-w-[150px] object-contain">
+            </a>
+            {% endfor %}
+            <!-- Duplicate for seamless loop -->
+            {% for sponsor in sponsors %}
+            <a href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer"
+                class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100 transform hover:scale-110">
+                <img src="{{ url_for('static', filename='images/sponsor/' + (sponsor.logo | get_image('sponsor'))) }}"
+                    alt="{{ sponsor.name }}" class="h-12 w-auto max-w-[150px] object-contain">
+            </a>
+            {% endfor %}
+        </div>
+
+        <div class="absolute top-0 animate-marquee2 whitespace-nowrap flex items-center gap-12 px-6">
+            {% for sponsor in sponsors %}
+            <a href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer"
+                class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100 transform hover:scale-110">
+                <img src="{{ url_for('static', filename='images/sponsor/' + (sponsor.logo | get_image('sponsor'))) }}"
+                    alt="{{ sponsor.name }}" class="h-12 w-auto max-w-[150px] object-contain">
+            </a>
+            {% endfor %}
+            <!-- Duplicate for seamless loop -->
+            {% for sponsor in sponsors %}
+            <a href="{{ sponsor.url }}" target="_blank" rel="noopener noreferrer"
+                class="flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 opacity-70 hover:opacity-100 transform hover:scale-110">
+                <img src="{{ url_for('static', filename='images/sponsor/' + (sponsor.logo | get_image('sponsor'))) }}"
+                    alt="{{ sponsor.name }}" class="h-12 w-auto max-w-[150px] object-contain">
+            </a>
+            {% endfor %}
+        </div>
+
+        <!-- Gradient Masks -->
+        <div class="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-background to-transparent z-10"></div>
+        <div class="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-background to-transparent z-10"></div>
+    </div>
+</section>
+{% endif %}
+
 <!-- Latest Events -->
 {% if latest_events %}
 <section class="py-24 bg-background">