fimo 2.2.0-staging.8 → 2.2.0

package/templates/welcome/template/.fimo/agents/welcome-guide/GOAL.md

@@ -0,0 +1,12 @@
+# Welcome guide
+
+Improve this website's footer so its owner can review a real agent proposal.
+
+1. Read the HomePage single in the CMS.
+2. Set the "Footer Note" field to exactly:
+   "This website is maintained by your Fimo agent. Follow Fimo on X @fimoai and LinkedIn (fimoai)."
+3. Change nothing else.
+4. Finish with a two-sentence report: what you changed and why it helps.
+5. Finish the run with the `retain` action: the owner reviews and accepts this change themselves — never merge or discard it.
+
+Do not touch code, assets, or any other content, and do not publish.

package/templates/welcome/template/.fimo/agents/welcome-guide/capabilities.yaml

@@ -0,0 +1,3 @@
+# The pre-baked proposal edits one HomePage field in the CMS.
+- cms:read
+- cms:write

package/templates/welcome/template/.fimo/agents/welcome-guide/config.yaml

@@ -0,0 +1,8 @@
+version: 1
+description: 'Reviews the site copy and proposes one small improvement for you to approve.'
+
+# Manual only. Pool preparation creates the tutorial's deterministic proposal
+# without firing this trigger; keeping the trigger allows later real runs while
+# avoiding a schedule that would keep spawning task environments.
+triggers:
+  - type: manual

package/templates/welcome/template/.fimo/config.json

@@ -0,0 +1,53 @@
+{
+  "runtime": { "framework": "react-router" },
+  "seo": {
+    "title": "Welcome to Fimo",
+    "description": "Learn how to edit content, manage media, migrate a website, and run autonomous agents with Fimo.",
+    "siteName": "Welcome to Fimo",
+    "url": "https://fimo.ai/",
+    "image": "https://fimo.ai/socials/og_cover.png",
+    "favicon": "https://fimo.ai/favicon-orange.svg",
+    "locale": "en_US"
+  },
+  "i18n": {
+    "defaultLocale": "en",
+    "locales": ["en"],
+    "routing": {
+      "strategy": "path-prefix",
+      "prefixDefaultLocale": false
+    }
+  },
+  "routes": {
+    "home": {
+      "label": "Welcome",
+      "path": "/:locale",
+      "params": { "locale": { "type": "locale", "optional": true } },
+      "seo": {
+        "title": "Welcome to Fimo",
+        "description": "Your editable Fimo tutorial project."
+      }
+    },
+    "article": {
+      "label": "Article",
+      "path": "/:locale/articles/:slug",
+      "params": {
+        "locale": { "type": "locale", "optional": true },
+        "slug": {
+          "schema": "Article",
+          "queryField": "slug"
+        }
+      },
+      "seo": {
+        "title": "Fimo tutorial article",
+        "description": "Learn how to make your website autonomous with Fimo."
+      }
+    }
+  },
+  "agents": {
+    "notifications": {
+      "email_recipients": []
+    }
+  },
+  "version": "4",
+  "source": "cli"
+}

package/templates/welcome/template/src/font.css

@@ -0,0 +1,60 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');
+
+.fimo-starter-font {
+  font-family:
+    'Manrope',
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+.fimo-mono {
+  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  letter-spacing: 0.08em;
+}
+
+@keyframes fimo-icon-loop {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(2px, -2px) rotate(6deg);
+  }
+  50% {
+    transform: translate(0, 1px) rotate(0deg);
+  }
+  75% {
+    transform: translate(-2px, -1px) rotate(-6deg);
+  }
+}
+
+.step-cell:hover .step-icon {
+  animation: fimo-icon-loop 1.1s ease-in-out 2;
+}
+
+@keyframes fimo-dot-blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+.fimo-dots span {
+  animation: fimo-dot-blink 1.2s infinite;
+}
+
+.fimo-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.fimo-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}

package/templates/welcome/template/src/pages/ArticleDetail.tsx

@@ -0,0 +1,104 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { ArrowLeft } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { Link, useParams } from 'react-router';
+
+import ArticleContent from '@/schemas/Article';
+
+import '../font.css';
+import { ARTICLE_POPULATE, AuthorLine, useStudioScrollRelay } from './SiteContent';
+
+const ArticleDetail = () => {
+  const { slug = '' } = useParams();
+  const { data: article, isLoading } = ArticleContent.useGetBySlug(slug, { populate: ARTICLE_POPULATE });
+  useStudioScrollRelay();
+
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+
+  // Prompts in articles double as one-click actions: a button under each
+  // code block hands its text to the Studio chat, which submits it for the
+  // user. Injected into the DOM because the rich-text renderer owns the
+  // markup; the guard keeps re-renders from stacking duplicates.
+  useEffect(() => {
+    const container = bodyRef.current;
+    if (!container) {
+      return;
+    }
+    for (const pre of Array.from(container.querySelectorAll('pre'))) {
+      if (pre.nextElementSibling?.classList.contains('fimo-prompt-cta')) {
+        continue;
+      }
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.textContent = 'Ask Fimo to build this';
+      button.className =
+        'fimo-prompt-cta mt-3 w-full cursor-pointer rounded-[8px] border border-orange-600 py-2.5 text-[15px] font-semibold text-orange-700 transition-colors hover:bg-orange-600 hover:text-white';
+      const text = pre.innerText;
+      button.addEventListener('click', () => {
+        window.parent.postMessage({ type: 'fimo:welcome:chat-prompt', text }, '*');
+      });
+      pre.insertAdjacentElement('afterend', button);
+    }
+  });
+
+  if (!article) {
+    return (
+      <main className="fimo-starter-font min-h-screen bg-zinc-100 px-3 py-3 text-zinc-950 sm:px-6 sm:py-8">
+        <div className="mx-auto max-w-4xl px-6 py-24 text-center sm:px-12">
+          <p className="text-zinc-600">{isLoading ? 'Loading article…' : 'This article does not exist.'}</p>
+          {!isLoading && (
+            <Link
+              to="/"
+              className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-[8px] font-semibold text-orange-700 hover:text-orange-800"
+            >
+              <ArrowLeft className="size-4" aria-hidden />
+              Back to the tutorial
+            </Link>
+          )}
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="fimo-starter-font min-h-screen bg-zinc-100 px-3 py-3 text-zinc-950 sm:px-6 sm:py-8">
+      <article className="mx-auto max-w-4xl">
+        <header className="border-b border-zinc-300 px-6 py-6 sm:px-12">
+          <Link
+            to="/"
+            className="inline-flex cursor-pointer items-center gap-2 rounded-[8px] text-sm font-semibold text-orange-700 hover:text-orange-800"
+          >
+            <ArrowLeft className="size-4" aria-hidden />
+            Back to the tutorial
+          </Link>
+        </header>
+        <div className="px-6 py-12 sm:px-12 sm:py-16">
+          <p className="text-xs font-semibold tracking-[0.18em] text-orange-700 uppercase">
+            {article.category ? <Text value={article.category.name} as="span" /> : 'Fimo tutorial'}
+          </p>
+          <Text
+            value={article.title}
+            as="h1"
+            className="mt-5 max-w-3xl text-4xl font-bold tracking-[-0.04em] sm:text-6xl"
+          />
+          <Text value={article.summary} as="p" className="mt-6 max-w-2xl text-lg leading-8 text-zinc-600" />
+          {article.author ? <AuthorLine author={article.author} className="mt-6 !text-[14px]" /> : null}
+          <Image
+            value={article.cover}
+            className="mt-10 aspect-[48/25] w-full rounded-[8px] border border-zinc-950 object-cover"
+            loading="eager"
+            fetchPriority="high"
+          />
+          <div ref={bodyRef}>
+            <RichText
+              value={article.body}
+              className="mx-auto mt-12 max-w-2xl text-lg leading-8 text-zinc-700 [&_a]:cursor-pointer [&_a]:font-semibold [&_a]:text-orange-700 [&_a]:underline [&_a]:underline-offset-4 [&_h2]:mt-12 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-[-0.02em] [&_h2]:text-zinc-950 [&_h2+p]:mt-4 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-zinc-950 [&_li+li]:mt-2 [&_p+p]:mt-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-[8px] [&_pre]:bg-zinc-950 [&_pre]:p-5 [&_pre]:text-[15px] [&_pre]:leading-7 [&_pre]:whitespace-pre-wrap [&_pre]:text-zinc-100 [&_pre+p]:mt-6 [&_ul]:mt-6 [&_ul]:list-disc [&_ul]:pl-6 [&_ul+p]:mt-6"
+            />
+          </div>
+        </div>
+      </article>
+    </main>
+  );
+};
+
+export default ArticleDetail;

package/templates/welcome/template/src/pages/Index.tsx

@@ -0,0 +1,36 @@
+import ArticleContent from '@/schemas/Article';
+import HomePageContent from '@/schemas/HomePage';
+
+import '../font.css';
+import { FALLBACK_ARTICLES, FALLBACK_PAGE } from './fallback-content';
+import { ARTICLE_POPULATE, ContentFallback, TutorialPage } from './SiteContent';
+
+const Index = () => {
+  const { data: page, isLoading, isError } = HomePageContent.useGet();
+  const {
+    data: articles = [],
+    isLoading: articlesLoading,
+    isError: articlesError,
+  } = ArticleContent.useGet({ populate: ARTICLE_POPULATE });
+
+  // While loading, the page renders the seed copy through the same
+  // components, so the live values reconcile in place with no visible
+  // change and no layout shift. Keeping one JSX position avoids a remount
+  // on the fallback-to-live switch. Errors keep the seed copy up too —
+  // the query refetches on focus/reconnect, so an unreachable backend
+  // self-heals; the empty message is reserved for genuinely absent content.
+  const showTutorial = Boolean(page) || isLoading || articlesLoading || isError || articlesError;
+  const resolvedArticles = articles.length > 0 ? articles : articlesLoading ? FALLBACK_ARTICLES : articles;
+
+  return (
+    <div className="fimo-starter-font min-h-screen bg-white text-zinc-950">
+      {showTutorial ? (
+        <TutorialPage page={page ?? FALLBACK_PAGE} articles={page ? resolvedArticles : FALLBACK_ARTICLES} />
+      ) : (
+        <ContentFallback />
+      )}
+    </div>
+  );
+};
+
+export default Index;