feat: add strapi addon

frameworks/react-cra/add-ons/strapi/README.md

@@ -0,0 +1,14 @@
+## Setting up Strapi
+
+The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
+
+- Create a local running copy of the strapi admin
+
+```bash
+pnpx create-strapi@latest my-strapi-project
+cd my-strapi-project
+pnpm dev
+```
+
+- Login and publish the example articles to see them on the strapi demo page.
+- Set the `VITE_STRAPI_URL` environment variable in your `.env.local`. (For local it should be http://localhost:1337/api)

frameworks/react-cra/add-ons/strapi/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Strapi configuration
+VITE_STRAPI_URL="http://localhost:1337/api"

frameworks/react-cra/add-ons/strapi/assets/src/lib/strapiClient.ts

@@ -0,0 +1,7 @@
+import { strapi } from "@strapi/client";
+
+export const strapiClient = strapi({
+  baseURL: import.meta.env.VITE_STRAPI_URL,
+});
+
+export const articles = strapiClient.collection("articles");

frameworks/react-cra/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -0,0 +1,66 @@
+import { articles } from '@/lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/demo/strapi')({
+  component: RouteComponent,
+  loader: async () => {
+    const { data: strapiArticles } = await articles.find()
+    return strapiArticles
+  },
+})
+
+function RouteComponent() {
+  const strapiArticles = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8 text-white">
+          <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+            Strapi
+          </span>{' '}
+          <span className="text-gray-300">Articles</span>
+        </h1>
+
+        {strapiArticles && strapiArticles.length > 0 ? (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {strapiArticles.map((article) => (
+              <Link
+                key={article.id}
+                to="/demo/strapi/$articleId"
+                params={{ articleId: article.documentId }}
+                className="block"
+              >
+                <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
+                  <h2 className="text-xl font-semibold text-white mb-3">
+                    {article.title || 'Untitled'}
+                  </h2>
+
+                  {article.description && (
+                    <p className="text-gray-400 mb-4 leading-relaxed">
+                      {article.description}
+                    </p>
+                  )}
+
+                  {article.content && (
+                    <p className="text-gray-400 line-clamp-3 leading-relaxed">
+                      {article.content}
+                    </p>
+                  )}
+
+                  {article.createdAt && (
+                    <p className="text-sm text-cyan-400/70 mt-4">
+                      {new Date(article.createdAt).toLocaleDateString()}
+                    </p>
+                  )}
+                </article>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-400">No articles found.</p>
+        )}
+      </div>
+    </div>
+  )
+}

frameworks/react-cra/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -0,0 +1,78 @@
+import { articles } from '@/lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/demo/strapi_/$articleId')({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const { data: article } = await articles.findOne(params.articleId)
+    return article
+  },
+})
+
+function RouteComponent() {
+  const article = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div className="max-w-4xl mx-auto">
+        <Link
+          to="/demo/strapi"
+          className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5 mr-2"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+          Back to Articles
+        </Link>
+
+        <article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
+          <h1 className="text-4xl font-bold text-white mb-4">
+            {article?.title || 'Untitled'}
+          </h1>
+
+          {article?.createdAt && (
+            <p className="text-sm text-cyan-400/70 mb-6">
+              Published on{' '}
+              {new Date(article?.createdAt).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </p>
+          )}
+
+          {article?.description && (
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-gray-300 mb-3">
+                Description
+              </h2>
+              <p className="text-gray-400 leading-relaxed">
+                {article?.description}
+              </p>
+            </div>
+          )}
+
+          {article?.content && (
+            <div>
+              <h2 className="text-xl font-semibold text-gray-300 mb-3">
+                Content
+              </h2>
+              <div className="text-gray-400 leading-relaxed whitespace-pre-wrap">
+                {article?.content}
+              </div>
+            </div>
+          )}
+        </article>
+      </div>
+    </div>
+  )
+}

frameworks/react-cra/add-ons/strapi/info.json

@@ -0,0 +1,18 @@
+{
+  "name": "Strapi",
+  "description": "Use the Strapi CMS to manage your content.",
+  "link": "https://strapi.io/",
+  "phase": "add-on",
+  "type": "add-on",
+  "modes": [
+    "file-router"
+  ],
+  "routes": [
+    {
+      "url": "/demo/strapi",
+      "name": "Strapi",
+      "path": "src/routes/demo.strapi.tsx",
+      "jsName": "StrapiDemo"
+    }
+  ]
+}

frameworks/react-cra/add-ons/strapi/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@strapi/client": "^1.5.0"
+  }
+}

frameworks/solid/add-ons/start/assets/src/router.tsx.ejs

@@ -3,8 +3,6 @@ import { createRouter } from '@tanstack/solid-router'
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
 
-import './styles.css'
-
 // Create a new router instance
 export const getRouter = () => {
   const router = createRouter({

frameworks/solid/add-ons/strapi/README.md

@@ -0,0 +1,14 @@
+## Setting up Strapi
+
+The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
+
+- Create a local running copy of the strapi admin
+
+```bash
+pnpx create-strapi@latest my-strapi-project
+cd my-strapi-project
+pnpm dev
+```
+
+- Login and publish the example articles to see them on the strapi demo page.
+- Set the `VITE_STRAPI_URL` environment variable in your `.env.local`. (For local it should be http://localhost:1337/api)

frameworks/solid/add-ons/strapi/assets/_dot_env.local.append

@@ -0,0 +1,2 @@
+# Strapi configuration
+VITE_STRAPI_URL="http://localhost:1337/api"

frameworks/solid/add-ons/strapi/assets/src/lib/strapiClient.ts

@@ -0,0 +1,7 @@
+import { strapi } from "@strapi/client";
+
+export const strapiClient = strapi({
+  baseURL: import.meta.env.VITE_STRAPI_URL,
+});
+
+export const articles = strapiClient.collection("articles");

frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -0,0 +1,69 @@
+import { articles } from '../../lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/solid-router'
+import { Show, For } from 'solid-js'
+
+export const Route = createFileRoute('/demo/strapi')({
+  component: RouteComponent,
+  loader: async () => {
+    const { data: strapiArticles } = await articles.find()
+    return strapiArticles
+  },
+})
+
+function RouteComponent() {
+  const strapiArticles = Route.useLoaderData()
+
+  return (
+    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div class="max-w-7xl mx-auto">
+        <h1 class="text-4xl font-bold mb-8 text-white">
+          <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
+            Strapi
+          </span>{' '}
+          <span class="text-gray-300">Articles</span>
+        </h1>
+
+        <Show
+          when={strapiArticles() && strapiArticles().length > 0}
+          fallback={<p class="text-gray-400">No articles found.</p>}
+        >
+          <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <For each={strapiArticles()}>
+              {(article) => (
+                <Link
+                  to="/demo/strapi/$articleId"
+                  params={{ articleId: article.documentId }}
+                  class="block"
+                >
+                  <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10 cursor-pointer h-full">
+                    <h2 class="text-xl font-semibold text-white mb-3">
+                      {article.title || 'Untitled'}
+                    </h2>
+
+                    {article.description && (
+                      <p class="text-gray-400 mb-4 leading-relaxed">
+                        {article.description}
+                      </p>
+                    )}
+
+                    {article.content && (
+                      <p class="text-gray-400 line-clamp-3 leading-relaxed">
+                        {article.content}
+                      </p>
+                    )}
+
+                    {article.createdAt && (
+                      <p class="text-sm text-cyan-400/70 mt-4">
+                        {new Date(article.createdAt).toLocaleDateString()}
+                      </p>
+                    )}
+                  </article>
+                </Link>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}

frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -0,0 +1,78 @@
+import { articles } from '../../lib/strapiClient'
+import { createFileRoute, Link } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/demo/strapi_/$articleId')({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const { data: article } = await articles.findOne(params.articleId)
+    return article
+  },
+})
+
+function RouteComponent() {
+  const article = Route.useLoaderData()
+
+  return (
+    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
+      <div class="max-w-4xl mx-auto">
+        <Link
+          to="/demo/strapi"
+          class="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 mr-2"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+          Back to Articles
+        </Link>
+
+        <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
+          <h1 class="text-4xl font-bold text-white mb-4">
+            {article()?.title || 'Untitled'}
+          </h1>
+
+          {article()?.createdAt && (
+            <p class="text-sm text-cyan-400/70 mb-6">
+              Published on{' '}
+              {new Date(
+                article()?.createdAt || article()?.attributes?.createdAt,
+              ).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </p>
+          )}
+
+          {article()?.description && (
+            <div class="mb-6">
+              <h2 class="text-xl font-semibold text-gray-300 mb-3">
+                Description
+              </h2>
+              <p class="text-gray-400 leading-relaxed">
+                {article()?.description || article()?.attributes?.description}
+              </p>
+            </div>
+          )}
+
+          {article()?.content && (
+            <div>
+              <h2 class="text-xl font-semibold text-gray-300 mb-3">Content</h2>
+              <div class="text-gray-400 leading-relaxed whitespace-pre-wrap">
+                {article()?.content}
+              </div>
+            </div>
+          )}
+        </article>
+      </div>
+    </div>
+  )
+}