npm - @happyvertical/smrt-template-site-static-json - Versions diffs - 0.30.0 - Mend

@happyvertical/smrt-template-site-static-json 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/AGENTS.md +30 -0
package/CLAUDE.md +1 -0
package/LICENSE +7 -0
package/README.md +115 -0
package/index.js +8 -0
package/package.json +43 -0
package/template/.env.example +8 -0
package/template/AGENTS.md +21 -0
package/template/CLAUDE.md +1 -0
package/template/README.md +59 -0
package/template/data/.gitkeep +2 -0
package/template/package.json +21 -0
package/template/scripts/init-data.ts +56 -0
package/template/smrt.config.js +138 -0
package/template/src/app.css +156 -0
package/template/src/app.d.ts +13 -0
package/template/src/app.html +12 -0
package/template/src/lib/components/WeatherHeader.svelte +59 -0
package/template/src/lib/utils/markdown.ts +35 -0
package/template/src/routes/+layout.server.ts +193 -0
package/template/src/routes/+layout.svelte +73 -0
package/template/src/routes/+page.server.ts +60 -0
package/template/src/routes/+page.svelte +118 -0
package/template/src/routes/about/+page.server.ts +8 -0
package/template/src/routes/about/+page.svelte +92 -0
package/template/src/routes/contact/+page.server.ts +8 -0
package/template/src/routes/contact/+page.svelte +95 -0
package/template/src/site.config.ts +35 -0
package/template/svelte.config.js +19 -0
package/template/tsconfig.json +14 -0
package/template/vite.config.ts +6 -0
package/template.config.js +86 -0

package/template/src/app.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+export {};

package/template/src/app.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/template/src/lib/components/WeatherHeader.svelte ADDED Viewed

@@ -0,0 +1,59 @@
+<script lang="ts">
+  // Local WeatherHeader shim — was previously imported from
+  // `@happyvertical/smrt-svelte` but that package no longer ships the
+  // component (it was removed before the 0.24.x baseline this template
+  // pins). Inlining a minimal renderer here keeps the scaffold buildable
+  // and gives consumers a starting point to customize.
+  //
+  // The shape of `forecast` follows what the caelus workflow writes into
+  // the data layer; if your project pulls a different upstream, update
+  // this component to match.
+  type Forecast = {
+    location?: string;
+    summary?: string;
+    temperatureC?: number;
+    temperatureF?: number;
+    iconUrl?: string;
+  } | null | undefined;
+  let { forecast }: { forecast: Forecast } = $props();
+</script>
+{#if forecast}
+  <div class="weather-header" aria-label="Current weather">
+    {#if forecast.iconUrl}
+      <img src={forecast.iconUrl} alt="" class="icon" />
+    {/if}
+    {#if forecast.location}
+      <span class="location">{forecast.location}</span>
+    {/if}
+    {#if forecast.summary}
+      <span class="summary">{forecast.summary}</span>
+    {/if}
+    {#if typeof forecast.temperatureC === 'number'}
+      <span class="temp">{forecast.temperatureC.toFixed(0)}°C</span>
+    {:else if typeof forecast.temperatureF === 'number'}
+      <span class="temp">{forecast.temperatureF.toFixed(0)}°F</span>
+    {/if}
+  </div>
+{/if}
+<style>
+  .weather-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    font-size: 0.875rem;
+    color: var(--color-neutral-gray700, #4b5563);
+  }
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .location,
+  .summary,
+  .temp {
+    line-height: 1.2;
+  }
+</style>

package/template/src/lib/utils/markdown.ts ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * Simple Markdown Renderer
+ *
+ * Converts basic markdown to HTML for article bodies.
+ * For more complex needs, consider using a library like marked or remark.
+ */
+export function renderMarkdown(md: string): string {
+  if (!md) return '';
+  return md
+    // Escape HTML entities
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    // Headers
+    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+    // Bold and italic
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    // Lists
+    .replace(/^- (.+)$/gm, '<li>$1</li>')
+    .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
+    // Paragraphs
+    .replace(/\n\n/g, '</p><p>')
+    .replace(/\n/g, '<br>')
+    .replace(/^/, '<p>')
+    .replace(/$/, '</p>')
+    // Clean up
+    .replace(/<p><\/p>/g, '')
+    .replace(/<p>(<[hu])/g, '$1')
+    .replace(/(<\/[hu]l>)<\/p>/g, '$1');
+}

package/template/src/routes/+layout.server.ts ADDED Viewed

@@ -0,0 +1,193 @@
+// Enable prerendering for static site generation
+export const prerender = true;
+// Use trailing slashes for clean URLs
+export const trailingSlash = 'always';
+import type { LayoutServerLoad } from './$types';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { initSiteConfig } from '../site.config';
+interface ForecastPeriod {
+  name: string;
+  conditions: string;
+  temperature: number;
+  windSpeed: number;
+  windDirection: number;
+  humidity: number;
+  precipProbability: number;
+  localHour: number;
+}
+interface ForecastDay {
+  day: string;
+  icon: string;
+  high: number;
+  low: number;
+  periods: ForecastPeriod[];
+}
+function getWeatherIcon(conditions: string): string {
+  const conditionsLower = conditions.toLowerCase();
+  if (conditionsLower.includes('sunny') || conditionsLower.includes('clear')) return '☀️';
+  if (conditionsLower.includes('partly cloudy') || conditionsLower.includes('a few clouds')) return '⛅';
+  if (conditionsLower.includes('cloud')) return '☁️';
+  if (conditionsLower.includes('rain') || conditionsLower.includes('shower')) return '🌧️';
+  if (conditionsLower.includes('snow')) return '❄️';
+  if (conditionsLower.includes('thunder') || conditionsLower.includes('storm')) return '⛈️';
+  if (conditionsLower.includes('fog')) return '🌫️';
+  return '🌤️';
+}
+interface WeatherForecastData {
+  id?: string;
+  name: string;
+  issued_at: string;
+  conditions: string;
+  temperature?: string | number;
+  temperature_high?: string | number;
+  temperature_low?: string | number;
+  wind_speed?: string | number;
+  wind_direction?: string | number;
+  humidity?: string | number;
+  precipitation_probability?: string | number;
+}
+export const load: LayoutServerLoad = async () => {
+  // Load site config
+  const siteConfig = await initSiteConfig();
+  // Load weather data
+  let weather: ForecastDay[] | null = null;
+  try {
+    const eventsPath = join(process.cwd(), 'data', 'events.json');
+    const eventsRaw = await readFile(eventsPath, 'utf-8');
+    const allEvents = JSON.parse(eventsRaw);
+    const allForecasts: WeatherForecastData[] = allEvents
+      .filter((e: any) => e._meta_type === 'WeatherForecast')
+      .map((e: any) => {
+        const meta = typeof e._meta_data === 'string' ? JSON.parse(e._meta_data) : e._meta_data;
+        return {
+          id: e.id,
+          name: e.name,
+          issued_at: meta?.issuedAt || e.created_at,
+          conditions: meta?.conditions || '',
+          temperature: meta?.temperature,
+          temperature_high: meta?.temperatureHigh,
+          temperature_low: meta?.temperatureLow,
+          wind_speed: meta?.windSpeed,
+          wind_direction: meta?.windDirection,
+          humidity: meta?.humidity,
+          precipitation_probability: meta?.precipProbability,
+        };
+      });
+    allForecasts.sort((a, b) => new Date(a.issued_at).getTime() - new Date(b.issued_at).getTime());
+    if (allForecasts.length > 0) {
+      const hourlyForecastsRaw = allForecasts.filter((f) => f.name.includes('(') && f.name.includes(')'));
+      const dailyForecasts = new Map<
+        string,
+        {
+          high: number;
+          low: number;
+          conditions: string;
+          date: Date;
+          dayName: string;
+          periods: ForecastPeriod[];
+          temps: number[];
+        }
+      >();
+      const now = new Date();
+      const timezone = siteConfig.location.timezone || 'America/Edmonton';
+      const todayInTimezone = new Date(now.toLocaleString('en-US', { timeZone: timezone }));
+      for (const forecast of hourlyForecastsRaw) {
+        const timeMatch = forecast.name.match(/\((\d+):(\d+)\)/);
+        if (!timeMatch) continue;
+        const hour = parseInt(timeMatch[1]!);
+        const localHour = hour;
+        const fullDayName = forecast.name.split(' ')[0]!;
+        const dayName = fullDayName.substring(0, 3);
+        const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        const forecastDayOfWeek = dayNames.indexOf(fullDayName);
+        if (forecastDayOfWeek === -1) continue;
+        const todayDayOfWeek = todayInTimezone.getDay();
+        let daysFromToday = forecastDayOfWeek - todayDayOfWeek;
+        if (daysFromToday < 0) daysFromToday += 7;
+        const forecastDate = new Date(todayInTimezone);
+        forecastDate.setDate(todayInTimezone.getDate() + daysFromToday);
+        const dateKey = forecastDate.toLocaleDateString('en-CA', { timeZone: timezone });
+        const temp = Math.round(Number(forecast.temperature) || 0);
+        const period: ForecastPeriod = {
+          name: forecast.name,
+          conditions: forecast.conditions,
+          temperature: temp,
+          windSpeed: Math.round(Number(forecast.wind_speed) || 0),
+          windDirection: Math.round(Number(forecast.wind_direction) || 0),
+          humidity: Math.round(Number(forecast.humidity) || 0),
+          precipProbability: Math.round(Number(forecast.precipitation_probability) || 0),
+          localHour,
+        };
+        if (!dailyForecasts.has(dateKey)) {
+          dailyForecasts.set(dateKey, {
+            high: temp,
+            low: temp,
+            conditions: forecast.conditions,
+            date: forecastDate,
+            dayName,
+            periods: [],
+            temps: [],
+          });
+        }
+        const day = dailyForecasts.get(dateKey)!;
+        day.periods.push(period);
+        day.temps.push(temp);
+        day.high = Math.max(day.high, temp);
+        day.low = Math.min(day.low, temp);
+        if (localHour >= 12 && localHour <= 17) {
+          day.conditions = forecast.conditions;
+        }
+      }
+      for (const [_, dayData] of dailyForecasts.entries()) {
+        dayData.periods.sort((a, b) => a.localHour - b.localHour);
+      }
+      weather = Array.from(dailyForecasts.values())
+        .sort((a, b) => a.date.getTime() - b.date.getTime())
+        .slice(0, 10)
+        .map(({ high, low, conditions, dayName, periods }) => ({
+          day: dayName,
+          icon: getWeatherIcon(conditions),
+          high,
+          low,
+          periods,
+        }));
+    }
+  } catch (error) {
+    console.error('Failed to load weather:', error);
+  }
+  return {
+    siteConfig,
+    weather,
+  };
+};

package/template/src/routes/+layout.svelte ADDED Viewed

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { LayoutData } from './$types';
+  import '../app.css';
+  import { Masthead, Footer, Container } from '@happyvertical/smrt-ui';
+  import WeatherHeader from '$lib/components/WeatherHeader.svelte';
+  let { children, data }: { children: any; data: LayoutData } = $props();
+  const { siteConfig, weather } = data;
+</script>
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content={siteConfig.theme?.primaryColor || '#1976d2'} />
+  {#if siteConfig.meta?.gtmId}
+    <!-- Google Tag Manager -->
+    {@html `<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${siteConfig.meta.gtmId}');</script>`}
+  {/if}
+</svelte:head>
+<div class="layout">
+  <div class="weather-header">
+    <Container>
+      <WeatherHeader forecast={weather} />
+    </Container>
+  </div>
+  <Masthead location={siteConfig.location.name}>
+    {#snippet nav()}
+      {#each siteConfig.navigation.primary as link}
+        <a href={link.href}>{link.label}</a>
+      {/each}
+    {/snippet}
+  </Masthead>
+  <main class="main">
+    <Container>
+      {@render children?.()}
+    </Container>
+  </main>
+  <Footer>
+    {#snippet children()}
+      {#each siteConfig.navigation.footer || [] as link, i}
+        {#if i > 0} • {/if}
+        <a href={link.href}>{link.label}</a>
+      {/each}
+    {/snippet}
+  </Footer>
+</div>
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+  .weather-header {
+    background: var(--color-neutral-white);
+    border-bottom: 1px solid var(--color-neutral-gray300);
+  }
+  .main {
+    flex: 1;
+    padding: var(--spacing-xl) 0;
+  }
+</style>

package/template/src/routes/+page.server.ts ADDED Viewed

@@ -0,0 +1,60 @@
+import type { PageServerLoad } from './$types';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { getSite } from '../site.config';
+export const prerender = true;
+const ARTICLES_PER_PAGE = 5;
+function getAllArticles() {
+  try {
+    const contentsPath = join(process.cwd(), 'data', 'contents.json');
+    const contentsJson = readFileSync(contentsPath, 'utf-8');
+    const allContents = JSON.parse(contentsJson);
+    return allContents
+      .filter((content: any) => content._meta_type === 'MeetingRecap')
+      .sort((a: any, b: any) => new Date(b.publish_date).getTime() - new Date(a.publish_date).getTime());
+  } catch {
+    return [];
+  }
+}
+function mapArticle(article: any) {
+  return {
+    id: article.id,
+    slug: article.slug,
+    title: article.title || '',
+    description: article.description || '',
+    body: article.body || '',
+    publish_date: article.publish_date || article.created_at,
+    created_at: article.created_at,
+    meeting_id: article.meeting_id,
+    council_id: article.council_id,
+    category: article.category || null,
+  };
+}
+export const load: PageServerLoad = async ({ parent }) => {
+  const { siteConfig } = await parent();
+  const articles = getAllArticles();
+  const totalArticles = articles.length;
+  const totalPages = Math.ceil(totalArticles / ARTICLES_PER_PAGE);
+  const articlesData = articles.slice(0, ARTICLES_PER_PAGE).map(mapArticle);
+  return {
+    siteConfig,
+    articles: articlesData,
+    events: [],
+    pagination: {
+      currentPage: 1,
+      totalPages,
+      totalArticles,
+      hasNextPage: totalPages > 1,
+      hasPrevPage: false,
+    },
+  };
+};

package/template/src/routes/+page.svelte ADDED Viewed

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { Pagination } from '@happyvertical/smrt-ui';
+  let { data }: { data: PageData } = $props();
+  const { articles, pagination, siteConfig } = data;
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('en-CA', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  }
+</script>
+<svelte:head>
+  <title>{siteConfig.name} - Local News & Weather</title>
+  <meta name="description" content={siteConfig.description} />
+</svelte:head>
+<div class="home">
+  <section class="articles">
+    <h1>Latest News</h1>
+    {#if articles.length === 0}
+      <div class="empty-state">
+        <p>No articles yet. Run <code>pnpm workflow:praeco</code> to generate content from council meetings.</p>
+      </div>
+    {:else}
+      <div class="article-list">
+        {#each articles as article}
+          <article class="article-card">
+            <a href="/{article.category}/{article.slug}/">
+              <h2>{article.title}</h2>
+              <p class="description">{article.description}</p>
+              <time datetime={article.publish_date}>{formatDate(article.publish_date)}</time>
+            </a>
+          </article>
+        {/each}
+      </div>
+      {#if pagination.totalPages > 1}
+        <Pagination
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+          baseUrl="/page"
+        />
+      {/if}
+    {/if}
+  </section>
+</div>
+<style>
+  .home {
+    max-width: 800px;
+  }
+  h1 {
+    font-size: var(--font-size-2xl);
+    margin-bottom: var(--spacing-lg);
+    color: var(--color-neutral-gray900);
+  }
+  .empty-state {
+    padding: var(--spacing-xl);
+    background: var(--color-neutral-gray100);
+    border-radius: var(--radius-md);
+    text-align: center;
+  }
+  .empty-state code {
+    background: var(--color-neutral-gray200);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-family: monospace;
+  }
+  .article-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+  }
+  .article-card {
+    border-bottom: 1px solid var(--color-neutral-gray200);
+    padding-bottom: var(--spacing-lg);
+  }
+  .article-card:last-child {
+    border-bottom: none;
+  }
+  .article-card a {
+    text-decoration: none;
+    color: inherit;
+  }
+  .article-card h2 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--spacing-sm);
+    color: var(--color-primary);
+  }
+  .article-card:hover h2 {
+    text-decoration: underline;
+  }
+  .description {
+    color: var(--color-neutral-gray700);
+    margin-bottom: var(--spacing-sm);
+  }
+  time {
+    font-size: var(--font-size-sm);
+    color: var(--color-neutral-gray500);
+  }
+</style>

package/template/src/routes/about/+page.server.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+export const prerender = true;
+export const load: PageServerLoad = async ({ parent }) => {
+  const { siteConfig } = await parent();
+  return { siteConfig };
+};

package/template/src/routes/about/+page.svelte ADDED Viewed

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  let { data }: { data: PageData } = $props();
+  const { siteConfig } = data;
+</script>
+<svelte:head>
+  <title>About - {siteConfig.name}</title>
+  <meta name="description" content="About {siteConfig.name}" />
+</svelte:head>
+<div class="about">
+  <h1>About {siteConfig.name}</h1>
+  <section>
+    <h2>Our Mission</h2>
+    <p>
+      {siteConfig.name} provides timely, accurate, and comprehensive coverage of local government,
+      community events, and news for {siteConfig.location.name} and surrounding areas.
+    </p>
+  </section>
+  <section>
+    <h2>What We Cover</h2>
+    <ul>
+      <li><strong>Local Government</strong> - Council meetings, decisions, and policy changes</li>
+      <li><strong>County News</strong> - Regional government coverage</li>
+      <li><strong>Weather</strong> - Local forecasts from Environment Canada</li>
+      <li><strong>Community Events</strong> - Local happenings and announcements</li>
+    </ul>
+  </section>
+  <section>
+    <h2>How It Works</h2>
+    <p>
+      Our coverage is powered by AI-assisted journalism that processes official government documents
+      to create clear, accessible summaries of council meetings and decisions. This helps residents
+      stay informed about matters that affect their daily lives.
+    </p>
+  </section>
+  <section>
+    <h2>Contact</h2>
+    <p>
+      Have questions, feedback, or a tip? <a href="/contact">Contact us</a>.
+    </p>
+  </section>
+</div>
+<style>
+  .about {
+    max-width: 700px;
+  }
+  h1 {
+    font-size: var(--font-size-2xl);
+    margin-bottom: var(--spacing-xl);
+    color: var(--color-neutral-gray900);
+  }
+  section {
+    margin-bottom: var(--spacing-xl);
+  }
+  h2 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-md);
+    color: var(--color-neutral-gray800);
+  }
+  p {
+    line-height: 1.7;
+    color: var(--color-neutral-gray700);
+    margin-bottom: var(--spacing-md);
+  }
+  ul {
+    list-style: disc;
+    padding-left: var(--spacing-lg);
+    color: var(--color-neutral-gray700);
+  }
+  li {
+    margin-bottom: var(--spacing-sm);
+    line-height: 1.6;
+  }
+  a {
+    color: var(--color-primary);
+  }
+</style>

package/template/src/routes/contact/+page.server.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+export const prerender = true;
+export const load: PageServerLoad = async ({ parent }) => {
+  const { siteConfig } = await parent();
+  return { siteConfig };
+};