https://emersondelponte.netlify.app/js/app.js

1var app = new Framework7({
2  el: '#app',
3  name: 'EM Del Ponte',
4  theme: 'auto',
5  panel: {
6    swipe: true,
7  },
8  routes: [
9    { path: '/', pageName: 'home' },
10    { path: '/about/', pageName: 'about' },
11    { path: '/lab/', pageName: 'lab' },
12    { path: '/resources/', pageName: 'resources' },
13    { path: '/posts/', pageName: 'posts' },
14  ],
15});
16
17var homeView = app.views.create('#view-home', { url: '/' });
18var aboutView = app.views.create('#view-about', { url: '/about/' });
19var labView = app.views.create('#view-lab', { url: '/lab/' });
20var resourcesView = app.views.create('#view-resources', { url: '/resources/' });
21var postsView = app.views.create('#view-posts', { url: '/posts/' });
22
23// Function to render posts list
24function loadPosts() {
25  const listEl = document.querySelector('#posts-list ul');
26  if (!listEl || typeof postsData === 'undefined') return;
27
28  listEl.innerHTML = postsData.map((post, index) => {
29    const thumb = post.image ? `posts/${post.folder}/${post.image}` : 'figs/splash.png';
30    return `
31    <li>
32      <a href="#" class="item-link item-content" onclick="openPost(${index})">
33        <div class="item-media"><img src="${thumb}" width="80" height="60" style="object-fit: cover; border-radius: 8px"/></div>
34        <div class="item-inner">
35          <div class="item-title-row">
36            <div class="item-title">${post.title}</div>
37          </div>
38          <div class="item-subtitle" style="font-size: 0.85em;">${post.date}</div>
39        </div>
40      </a>
41    </li>
42  `}).join('');
43}
44
45// Function to open post in popup
46function openPost(index) {
47  const post = postsData[index];
48  const popup = app.popup.get('#post-popup');
49
50  document.getElementById('post-display-title').innerText = post.t

50itle;
51  document.getElementById('post-display-date').innerText = post.date;
52  document.getElementById('post-display-body').innerHTML = marked.parse(post.content);
53
54  app.popup.open('#post-popup');
55}
56
57// Add event listener for images in splash screen
58function setRandomSplash() {
59  const splashPage = document.querySelector('.splash-page');
60  if (!splashPage) return;
61
62  const images = [
63    'figs/splash.png',          // Wheat
64    'figs/splash_soybean.png',  // Soybean (canopy dark)
65    'figs/splash_corn.png',     // Corn (dawn dramatic)
66    'figs/splash_orange.png',   // Orange Orchard
67    'figs/splash_banana.png'    // Banana Plantation (dawn dramatic)
68  ];
69
70  const randomImage = images[Math.floor(Math.random() * images.length)];
71  splashPage.style.backgroundImage = `url('${randomImage}')`;
72}
73
74// Initialize on app load
75app.on('init', () => {
76  loadPosts();
77  setRandomSplash();
78});
79
80// For initial load if init already fired
81document.addEventListener('DOMContentLoaded', () => {
82  loadPosts();
83  setRandomSplash();
84});