fimo 2.2.0-staging.10 → 2.2.0-staging.12

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,68 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { ArrowLeft } from 'lucide-react';
+import { Link, useParams } from 'react-router';
+
+import ArticleContent from '@/schemas/Article';
+
+import '../font.css';
+
+const ArticleDetail = () => {
+  const { slug = '' } = useParams();
+  const { data: article, isLoading } = ArticleContent.useGetBySlug(slug);
+
+  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">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" />
+          <Image
+            value={article.cover}
+            className="mt-10 aspect-[48/25] w-full rounded-[8px] border border-zinc-950 object-cover"
+            loading="eager"
+            fetchPriority="high"
+          />
+          <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>
+      </article>
+    </main>
+  );
+};
+
+export default ArticleDetail;

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

@@ -0,0 +1,32 @@
+import ArticleContent from '@/schemas/Article';
+import HomePageContent from '@/schemas/HomePage';
+
+import '../font.css';
+import { FALLBACK_ARTICLES, FALLBACK_PAGE } from './fallback-content';
+import { ContentFallback, TutorialPage } from './SiteContent';
+
+const Index = () => {
+  const { data: page, isLoading, isError } = HomePageContent.useGet();
+  const { data: articles = [], isLoading: articlesLoading, isError: articlesError } = ArticleContent.useGet();
+
+  // 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;

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

@@ -0,0 +1,413 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { Bot, Check, Copy, Database, GitBranch, MousePointerClick } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+
+import type { Article } from '@/schemas/Article';
+import type { HomePage } from '@/schemas/HomePage';
+
+interface TutorialPageProps {
+  page: HomePage;
+  articles: Article[];
+}
+
+const COMPLETED_ACTIONS_KEY = 'fimo-welcome-completed-actions-v2';
+const ARTICLE_COVER_CLASS = 'aspect-[48/25] w-full border-b border-zinc-200 bg-white';
+const OUTLINE_BUTTON_CLASS =
+  'mt-4 w-full cursor-pointer rounded-md border border-orange-600/40 py-2 text-[13px] font-semibold text-orange-700 transition-colors hover:border-orange-600 hover:bg-orange-50';
+
+export function TutorialPage({ page, articles }: TutorialPageProps) {
+  return (
+    <main className="min-h-screen bg-white px-4 py-10 text-zinc-950 sm:px-6">
+      <article className="relative mx-auto max-w-6xl border-x border-t border-zinc-200">
+        <Hero page={page} />
+        <Tutorial page={page} />
+        <div className="relative h-14 border-b border-zinc-200" />
+        <Articles articles={articles} />
+        <div className="relative h-14 border-b border-zinc-200">
+          <GridDot edgeX="left" edgeY="top" />
+          <GridDot x="33.333%" edgeY="top" />
+          <GridDot x="66.666%" edgeY="top" />
+          <GridDot edgeX="right" edgeY="top" />
+          <GridDot edgeX="left" edgeY="bottom" />
+          <GridDot x="50%" edgeY="bottom" />
+          <GridDot edgeX="right" edgeY="bottom" />
+        </div>
+        <WhatComesNext page={page} />
+        <div className="relative">
+          <GridDot edgeX="left" edgeY="top" />
+          <GridDot x="50%" edgeY="top" />
+          <GridDot edgeX="right" edgeY="top" />
+        </div>
+      </article>
+    </main>
+  );
+}
+
+// Fimo grid intersection marker, light theme. The edge clip mirrors the
+// website's GridDot: it stops the halo from spilling outside the column.
+function GridDot({ x, edgeX, edgeY }: { x?: string; edgeX?: 'left' | 'right'; edgeY: 'top' | 'bottom' }) {
+  const style: React.CSSProperties = {};
+  if (x) {
+    style.left = x;
+    style.marginLeft = -2;
+  }
+  if (edgeX === 'left') {
+    style.left = 0;
+    style.marginLeft = -2;
+    style.clipPath = 'inset(-6px -6px -6px 0)';
+  }
+  if (edgeX === 'right') {
+    style.right = 0;
+    style.marginRight = -1;
+    style.clipPath = 'inset(-6px 0 -6px -6px)';
+  }
+  if (edgeY === 'top') {
+    style.top = -2;
+  } else {
+    style.bottom = -2;
+  }
+
+  return (
+    <span
+      aria-hidden
+      className="absolute z-10 size-[3px] rounded-full bg-zinc-200 shadow-[0_0_0_5px_#ffffff]"
+      style={style}
+    />
+  );
+}
+
+function Hero({ page }: { page: HomePage }) {
+  return (
+    <section className="relative border-b border-zinc-200 px-6 py-10 text-center">
+      <GridDot edgeX="left" edgeY="top" />
+      <GridDot edgeX="right" edgeY="top" />
+      <Text value={page.title} as="h1" className="text-[32px] font-extrabold tracking-[-0.04em] sm:text-4xl" />
+      <RichText value={page.intro} className="mx-auto mt-2 max-w-xl text-[15px] leading-6 text-zinc-600" />
+      <GridDot edgeX="left" edgeY="bottom" />
+      <GridDot x="25%" edgeY="bottom" />
+      <GridDot x="50%" edgeY="bottom" />
+      <GridDot x="75%" edgeY="bottom" />
+      <GridDot edgeX="right" edgeY="bottom" />
+    </section>
+  );
+}
+
+function Tutorial({ page }: { page: HomePage }) {
+  const [completedActions, setCompletedActions] = useState<string[]>(readCompletedActions);
+  const currentStepIndex = page.steps.findIndex((step) => !completedActions.includes(String(step.action)));
+
+  const completeAction = useCallback((action: string) => {
+    setCompletedActions((current) => {
+      if (current.includes(action)) {
+        return current;
+      }
+
+      const next = [...current, action];
+      window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const [editActive, setEditActive] = useState(false);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'mode/change') {
+        return;
+      }
+      const isEdit = event.data?.payload?.mode === 'edit';
+      setEditActive(isEdit);
+      if (isEdit) {
+        completeAction('toggleEditMode');
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [completeAction]);
+
+  return (
+    <section
+      id="tour"
+      className="grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 sm:max-lg:grid-cols-2 lg:grid-cols-4 lg:divide-x lg:divide-zinc-200"
+    >
+      {page.steps.map((step, index) => {
+        const action = String(step.action);
+        const completed = completedActions.includes(action);
+        const current = !completed && index === currentStepIndex;
+
+        return (
+          <div key={step._key} className="step-cell flex flex-col p-6">
+            <div className="flex items-center justify-between">
+              <span className="flex items-center gap-2.5">
+                <span
+                  aria-label={completed ? `Step ${index + 1} completed` : `Step ${index + 1}`}
+                  className={`flex size-9 items-center justify-center rounded-full text-[16px] font-extrabold transition-colors duration-300 ${
+                    completed
+                      ? 'bg-emerald-500 text-white'
+                      : current
+                        ? 'bg-orange-600 text-white'
+                        : 'border-2 border-zinc-200 text-zinc-400'
+                  }`}
+                >
+                  {completed ? <Check className="size-5" aria-hidden /> : <Text value={step.number} />}
+                </span>
+                {current && index === 0 ? (
+                  <span className="fimo-mono text-[10px] font-medium text-orange-600">START HERE</span>
+                ) : null}
+              </span>
+              <StepIcon action={action} />
+            </div>
+            <Text value={step.title} as="h2" className="mt-4 text-[15px] font-bold" />
+            <Text value={step.body} as="div" className="mt-1 flex-1 text-[13px] leading-5 text-zinc-600">
+              {(value) => <InstructionText value={value} />}
+            </Text>
+            <TutorialAction
+              action={action}
+              label={step.actionLabel}
+              editActive={editActive}
+              primary={current}
+              onClick={() => {
+                completeAction(action);
+                postShortcut(action);
+              }}
+            />
+          </div>
+        );
+      })}
+    </section>
+  );
+}
+
+function StepIcon({ action }: { action: string }) {
+  const ActionIcon =
+    action === 'toggleEditMode'
+      ? MousePointerClick
+      : action === 'openHomePage'
+        ? Database
+        : action === 'openBranches'
+          ? GitBranch
+          : Bot;
+
+  return <ActionIcon className="step-icon size-[17px] text-zinc-950" strokeWidth={1.8} aria-hidden />;
+}
+
+function InstructionText({ value }: { value: string }) {
+  const lines = value
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const instructions = lines.filter((line) => /^-\s/.test(line));
+  const explanation = lines.filter((line) => !/^-\s/.test(line)).join(' ');
+
+  return (
+    <>
+      {explanation ? <p>{formatInstruction(explanation)}</p> : null}
+      {instructions.length > 0 ? (
+        <div className={explanation ? 'mt-2.5' : ''}>
+          <span className="fimo-mono text-[10px] font-medium text-orange-600">ACTION</span>
+          <ul className="mt-1 space-y-1.5">
+            {instructions.map((instruction) => (
+              <li key={instruction} className="font-medium text-zinc-800">
+                {formatInstruction(instruction.replace(/^-\s*/, ''))}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function formatInstruction(value: string) {
+  return value.split(/(“[^”]+”)/g).map((part, index) => {
+    if (part.startsWith('“') && part.endsWith('”')) {
+      return (
+        <mark
+          key={`${part}-${index}`}
+          className="rounded border border-zinc-200 bg-zinc-100 px-1 py-px font-semibold text-zinc-900"
+        >
+          {part.slice(1, -1)}
+        </mark>
+      );
+    }
+
+    return part;
+  });
+}
+
+// The Studio paints the static snapshot build first and swaps in the dev
+// server a few seconds later; Edit mode only works after that swap. The
+// snapshot is the one context that is a production build inside an iframe,
+// which is how the page knows to explain the wait on hover.
+const isStaticStudioSnapshot = () => !import.meta.env.DEV && typeof window !== 'undefined' && window.parent !== window;
+
+function TutorialAction({
+  action,
+  label,
+  editActive,
+  primary,
+  onClick,
+}: {
+  action: string;
+  label: HomePage['steps'][number]['actionLabel'];
+  editActive: boolean;
+  primary: boolean;
+  onClick: () => void;
+}) {
+  // While Edit mode is active, preview.js captures page clicks for element
+  // selection, so an in-page button cannot receive them. The Studio shows
+  // the exit guidance anchored on its own Edit mode toggle instead.
+  if (action === 'toggleEditMode' && editActive) {
+    return null;
+  }
+  if (action === 'toggleEditMode' && isStaticStudioSnapshot()) {
+    // The snapshot is replaced by the dev document the moment the dev
+    // server can serve Edit mode, so this loading state flips to the real
+    // button exactly when the feature becomes available.
+    return (
+      <span className="group relative mt-4 inline-flex w-full">
+        <span
+          role="tooltip"
+          className="pointer-events-none absolute bottom-full left-0 mb-2 w-max max-w-64 rounded-md bg-zinc-950 px-3 py-2 text-xs font-medium text-white opacity-0 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
+        >
+          Edit mode is not available yet. It activates in a few seconds.
+        </span>
+        <span
+          aria-busy="true"
+          className="flex w-full cursor-default items-center justify-center rounded-md bg-orange-600/70 py-2 text-[13px] font-semibold text-white"
+        >
+          Loading edit mode, wait
+          <span className="fimo-dots ml-0.5" aria-hidden>
+            <span>.</span>
+            <span>.</span>
+            <span>.</span>
+          </span>
+        </span>
+      </span>
+    );
+  }
+
+  return <ActionButton label={label} primary={primary} onClick={onClick} />;
+}
+
+function ActionButton({
+  label,
+  primary,
+  onClick,
+  className = '',
+}: {
+  label: HomePage['steps'][number]['actionLabel'];
+  primary: boolean;
+  onClick: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${
+        primary
+          ? 'mt-4 w-full cursor-pointer rounded-md bg-orange-600 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-orange-700'
+          : OUTLINE_BUTTON_CLASS
+      } ${className}`}
+    >
+      <Text value={label} />
+    </button>
+  );
+}
+
+function Articles({ articles }: { articles: Article[] }) {
+  return (
+    <section className="grid border-b border-zinc-200 max-md:divide-y max-md:divide-zinc-200 md:grid-cols-3 md:divide-x md:divide-zinc-200">
+      {articles.map((article, index) => (
+        <Link
+          key={article.id}
+          to={`/articles/${String(article.slug)}`}
+          className="group cursor-pointer transition-colors hover:bg-zinc-50 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-orange-600"
+        >
+          {article.cover ? (
+            <Image value={article.cover} className={`${ARTICLE_COVER_CLASS} !object-cover`} loading="lazy" />
+          ) : (
+            <div className={ARTICLE_COVER_CLASS} aria-hidden />
+          )}
+          <div className="p-6 pt-5">
+            <p className="fimo-mono text-[11px] text-zinc-400">ARTICLES / 0{index + 1}</p>
+            <Text value={article.title} as="h3" className="mt-2 line-clamp-2 text-[15px] font-bold" />
+            <Text value={article.summary} as="p" className="mt-1.5 line-clamp-2 text-[13px] leading-5 text-zinc-600" />
+            <span className="mt-4 inline-block text-[13px] font-bold text-orange-600 group-hover:text-orange-700">
+              Read in the CMS →
+            </span>
+          </div>
+        </Link>
+      ))}
+    </section>
+  );
+}
+
+function WhatComesNext({ page }: { page: HomePage }) {
+  return (
+    <section className="grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 lg:grid-cols-2 lg:divide-x lg:divide-zinc-200">
+      <div className="p-6 sm:p-8">
+        <p className="fimo-mono text-[11px] font-medium text-orange-600">WHAT COMES NEXT</p>
+        <Text value={page.migrationTitle} as="h3" className="mt-2 text-xl font-bold tracking-[-0.02em]" />
+        <RichText value={page.migrationBody} className="mt-1.5 max-w-md text-[13px] leading-5 text-zinc-600" />
+        <CopyPrompt value={page.migrationPrompt} />
+      </div>
+      <div className="p-6 sm:p-8">
+        <p className="fimo-mono text-[11px] font-medium text-zinc-400">OR START FRESH</p>
+        <Text value={page.buildTitle} as="h3" className="mt-2 text-xl font-bold tracking-[-0.02em]" />
+        <RichText value={page.buildBody} className="mt-1.5 max-w-md text-[13px] leading-5 text-zinc-600" />
+      </div>
+    </section>
+  );
+}
+
+function CopyPrompt({ value }: { value: HomePage['migrationPrompt'] }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(String(value));
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="mt-4 inline-flex cursor-pointer items-center gap-2 rounded-md bg-orange-600 px-4 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-orange-700"
+    >
+      {copied ? <Check className="size-4" aria-hidden /> : <Copy className="size-4" aria-hidden />}
+      {copied ? 'Copied' : 'Copy migration prompt'}
+    </button>
+  );
+}
+
+function readCompletedActions(): string[] {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  try {
+    const value = JSON.parse(window.sessionStorage.getItem(COMPLETED_ACTIONS_KEY) ?? '[]');
+    return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function postShortcut(event: string) {
+  window.parent.postMessage({ type: 'shortcut', payload: { event } }, '*');
+}
+
+export function ContentFallback() {
+  return (
+    <div className="bg-white px-3 py-3 sm:px-6 sm:py-8">
+      <div className="mx-auto min-h-screen max-w-2xl px-6 py-16 sm:px-12">
+        <p className="text-center text-zinc-600">Tutorial content is not available yet.</p>
+      </div>
+    </div>
+  );
+}