Skip to content

Commit 92f2a4e

Browse files
brenelzbrenelz
authored
feat: add strapi addon (#189)
* feat: add strapi addon * feat: improve styling with dark theme * fix: solid fouc on load
1 parent 3db4d6a commit 92f2a4e

File tree

21 files changed

+408
-6
lines changed

21 files changed

+408
-6
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## Setting up Strapi
2+
3+
The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
4+
5+
- Create a local running copy of the strapi admin
6+
7+
```bash
8+
pnpx create-strapi@latest my-strapi-project
9+
cd my-strapi-project
10+
pnpm dev
11+
```
12+
13+
- Login and publish the example articles to see them on the strapi demo page.
14+
- 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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Strapi configuration
2+
VITE_STRAPI_URL="http://localhost:1337/api"

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { strapi } from "@strapi/client";
2+
3+
export const strapiClient = strapi({
4+
baseURL: import.meta.env.VITE_STRAPI_URL,
5+
});
6+
7+
export const articles = strapiClient.collection("articles");

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { articles } from '@/lib/strapiClient'
2+
import { createFileRoute, Link } from '@tanstack/react-router'
3+
4+
export const Route = createFileRoute('/demo/strapi')({
5+
component: RouteComponent,
6+
loader: async () => {
7+
const { data: strapiArticles } = await articles.find()
8+
return strapiArticles
9+
},
10+
})
11+
12+
function RouteComponent() {
13+
const strapiArticles = Route.useLoaderData()
14+
15+
return (
16+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
17+
<div className="max-w-7xl mx-auto">
18+
<h1 className="text-4xl font-bold mb-8 text-white">
19+
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
20+
Strapi
21+
</span>{' '}
22+
<span className="text-gray-300">Articles</span>
23+
</h1>
24+
25+
{strapiArticles && strapiArticles.length > 0 ? (
26+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
27+
{strapiArticles.map((article) => (
28+
<Link
29+
key={article.id}
30+
to="/demo/strapi/$articleId"
31+
params={{ articleId: article.documentId }}
32+
className="block"
33+
>
34+
<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">
35+
<h2 className="text-xl font-semibold text-white mb-3">
36+
{article.title || 'Untitled'}
37+
</h2>
38+
39+
{article.description && (
40+
<p className="text-gray-400 mb-4 leading-relaxed">
41+
{article.description}
42+
</p>
43+
)}
44+
45+
{article.content && (
46+
<p className="text-gray-400 line-clamp-3 leading-relaxed">
47+
{article.content}
48+
</p>
49+
)}
50+
51+
{article.createdAt && (
52+
<p className="text-sm text-cyan-400/70 mt-4">
53+
{new Date(article.createdAt).toLocaleDateString()}
54+
</p>
55+
)}
56+
</article>
57+
</Link>
58+
))}
59+
</div>
60+
) : (
61+
<p className="text-gray-400">No articles found.</p>
62+
)}
63+
</div>
64+
</div>
65+
)
66+
}

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { articles } from '@/lib/strapiClient'
2+
import { createFileRoute, Link } from '@tanstack/react-router'
3+
4+
export const Route = createFileRoute('/demo/strapi_/$articleId')({
5+
component: RouteComponent,
6+
loader: async ({ params }) => {
7+
const { data: article } = await articles.findOne(params.articleId)
8+
return article
9+
},
10+
})
11+
12+
function RouteComponent() {
13+
const article = Route.useLoaderData()
14+
15+
return (
16+
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
17+
<div className="max-w-4xl mx-auto">
18+
<Link
19+
to="/demo/strapi"
20+
className="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
21+
>
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
className="h-5 w-5 mr-2"
25+
viewBox="0 0 20 20"
26+
fill="currentColor"
27+
>
28+
<path
29+
fillRule="evenodd"
30+
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"
31+
clipRule="evenodd"
32+
/>
33+
</svg>
34+
Back to Articles
35+
</Link>
36+
37+
<article className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
38+
<h1 className="text-4xl font-bold text-white mb-4">
39+
{article?.title || 'Untitled'}
40+
</h1>
41+
42+
{article?.createdAt && (
43+
<p className="text-sm text-cyan-400/70 mb-6">
44+
Published on{' '}
45+
{new Date(article?.createdAt).toLocaleDateString('en-US', {
46+
year: 'numeric',
47+
month: 'long',
48+
day: 'numeric',
49+
})}
50+
</p>
51+
)}
52+
53+
{article?.description && (
54+
<div className="mb-6">
55+
<h2 className="text-xl font-semibold text-gray-300 mb-3">
56+
Description
57+
</h2>
58+
<p className="text-gray-400 leading-relaxed">
59+
{article?.description}
60+
</p>
61+
</div>
62+
)}
63+
64+
{article?.content && (
65+
<div>
66+
<h2 className="text-xl font-semibold text-gray-300 mb-3">
67+
Content
68+
</h2>
69+
<div className="text-gray-400 leading-relaxed whitespace-pre-wrap">
70+
{article?.content}
71+
</div>
72+
</div>
73+
)}
74+
</article>
75+
</div>
76+
</div>
77+
)
78+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "Strapi",
3+
"description": "Use the Strapi CMS to manage your content.",
4+
"link": "https://strapi.io/",
5+
"phase": "add-on",
6+
"type": "add-on",
7+
"modes": [
8+
"file-router"
9+
],
10+
"routes": [
11+
{
12+
"url": "/demo/strapi",
13+
"name": "Strapi",
14+
"path": "src/routes/demo.strapi.tsx",
15+
"jsName": "StrapiDemo"
16+
}
17+
]
18+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"@strapi/client": "^1.5.0"
4+
}
5+
}

‎frameworks/react-cra/add-ons/strapi/small-logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { createRouter } from '@tanstack/solid-router'
33
// Import the generated route tree
44
import { routeTree } from './routeTree.gen'
55

6-
import './styles.css'
7-
86
// Create a new router instance
97
export const getRouter = () => {
108
const router = createRouter({

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## Setting up Strapi
2+
3+
The current setup shows an example of how to use Strapi with an articles collection which is part of the example structure & data.
4+
5+
- Create a local running copy of the strapi admin
6+
7+
```bash
8+
pnpx create-strapi@latest my-strapi-project
9+
cd my-strapi-project
10+
pnpm dev
11+
```
12+
13+
- Login and publish the example articles to see them on the strapi demo page.
14+
- Set the `VITE_STRAPI_URL` environment variable in your `.env.local`. (For local it should be http://localhost:1337/api)

0 commit comments

Comments
 (0)