projekt
This commit is contained in:
Troughy
@@ -0,0 +1,62 @@
|
||||
# Strapi + Vue demo site
|
||||
|
||||
A minimal headless CMS demo: **Strapi** serves content and auth; **Vue** is the public website.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js 20+
|
||||
- PostgreSQL running with a `strapi` database (see `my-strapi-project/.env`)
|
||||
|
||||
## Quick start
|
||||
|
||||
### 1. Strapi backend
|
||||
|
||||
```bash
|
||||
cd my-strapi-project
|
||||
npm install
|
||||
npm run develop
|
||||
```
|
||||
|
||||
Admin panel: [http://localhost:1337/admin](http://localhost:1337/admin)
|
||||
|
||||
On first boot, the app automatically:
|
||||
|
||||
- Sets API permissions (public vs authenticated)
|
||||
- Creates demo user: `demo@strapi-demo.local` / `Demo1234!`
|
||||
- Seeds Global, About, Blog posts, and Member Area content
|
||||
|
||||
### 2. Vue frontend
|
||||
|
||||
In a second terminal:
|
||||
|
||||
```bash
|
||||
cd vue-project
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Site: [http://localhost:5173](http://localhost:5173)
|
||||
|
||||
## Pages
|
||||
|
||||
| Route | Content source | Access |
|
||||
|-----------|-----------------------------|---------------|
|
||||
| `/` | Global (hero, site name) | Public |
|
||||
| `/about` | About single type | Public |
|
||||
| `/blog` | Blog Post collection | Public |
|
||||
| `/members`| Member Area single type | Login required|
|
||||
| `/login` | Strapi Users & Permissions | — |
|
||||
|
||||
## Editing content
|
||||
|
||||
Use **Content Manager** in the Strapi admin to change copy, blog posts, or member-only text. Refresh the Vue site to see updates (no frontend rebuild).
|
||||
|
||||
## Production build
|
||||
|
||||
```bash
|
||||
cd vue-project
|
||||
npm run build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Set `VITE_STRAPI_URL` to your deployed Strapi URL when building the frontend.
|
||||
@@ -0,0 +1,8 @@
|
||||
HOST=0.0.0.0
|
||||
PORT=1337
|
||||
APP_KEYS="toBeModified1,toBeModified2"
|
||||
API_TOKEN_SALT=tobemodified
|
||||
ADMIN_JWT_SECRET=tobemodified
|
||||
TRANSFER_TOKEN_SALT=tobemodified
|
||||
JWT_SECRET=tobemodified
|
||||
ENCRYPTION_KEY=tobemodified
|
||||
@@ -0,0 +1,131 @@
|
||||
############################
|
||||
# OS X
|
||||
############################
|
||||
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
Icon
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
._*
|
||||
|
||||
|
||||
############################
|
||||
# Linux
|
||||
############################
|
||||
|
||||
*~
|
||||
|
||||
|
||||
############################
|
||||
# Windows
|
||||
############################
|
||||
|
||||
Thumbs.db
|
||||
ehthumbs.db
|
||||
Desktop.ini
|
||||
$RECYCLE.BIN/
|
||||
*.cab
|
||||
*.msi
|
||||
*.msm
|
||||
*.msp
|
||||
|
||||
|
||||
############################
|
||||
# Packages
|
||||
############################
|
||||
|
||||
*.7z
|
||||
*.csv
|
||||
*.dat
|
||||
*.dmg
|
||||
*.gz
|
||||
*.iso
|
||||
*.jar
|
||||
*.rar
|
||||
*.tar
|
||||
*.zip
|
||||
*.com
|
||||
*.class
|
||||
*.dll
|
||||
*.exe
|
||||
*.o
|
||||
*.seed
|
||||
*.so
|
||||
*.swo
|
||||
*.swp
|
||||
*.swn
|
||||
*.swm
|
||||
*.out
|
||||
*.pid
|
||||
|
||||
|
||||
############################
|
||||
# Logs and databases
|
||||
############################
|
||||
|
||||
.tmp
|
||||
*.log
|
||||
*.sql
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
|
||||
|
||||
############################
|
||||
# Misc.
|
||||
############################
|
||||
|
||||
*#
|
||||
ssl
|
||||
.idea
|
||||
nbproject
|
||||
public/uploads/*
|
||||
!public/uploads/.gitkeep
|
||||
.tsbuildinfo
|
||||
.eslintcache
|
||||
|
||||
############################
|
||||
# Node.js
|
||||
############################
|
||||
|
||||
lib-cov
|
||||
lcov.info
|
||||
pids
|
||||
logs
|
||||
results
|
||||
node_modules
|
||||
.node_history
|
||||
|
||||
############################
|
||||
# Package managers
|
||||
############################
|
||||
|
||||
.yarn/*
|
||||
!.yarn/cache
|
||||
!.yarn/unplugged
|
||||
!.yarn/patches
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
.pnp.*
|
||||
yarn-error.log
|
||||
|
||||
############################
|
||||
# Tests
|
||||
############################
|
||||
|
||||
coverage
|
||||
|
||||
############################
|
||||
# Strapi
|
||||
############################
|
||||
|
||||
.env
|
||||
license.txt
|
||||
exports
|
||||
.strapi
|
||||
dist
|
||||
build
|
||||
.strapi-updater.json
|
||||
.strapi-cloud.json
|
||||
@@ -0,0 +1,61 @@
|
||||
# 🚀 Getting started with Strapi
|
||||
|
||||
Strapi comes with a full featured [Command Line Interface](https://docs.strapi.io/dev-docs/cli) (CLI) which lets you scaffold and manage your project in seconds.
|
||||
|
||||
### `develop`
|
||||
|
||||
Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-develop)
|
||||
|
||||
```
|
||||
npm run develop
|
||||
# or
|
||||
yarn develop
|
||||
```
|
||||
|
||||
### `start`
|
||||
|
||||
Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-start)
|
||||
|
||||
```
|
||||
npm run start
|
||||
# or
|
||||
yarn start
|
||||
```
|
||||
|
||||
### `build`
|
||||
|
||||
Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-build)
|
||||
|
||||
```
|
||||
npm run build
|
||||
# or
|
||||
yarn build
|
||||
```
|
||||
|
||||
## ⚙️ Deployment
|
||||
|
||||
Strapi gives you many possible deployment options for your project including [Strapi Cloud](https://cloud.strapi.io). Browse the [deployment section of the documentation](https://docs.strapi.io/dev-docs/deployment) to find the best solution for your use case.
|
||||
|
||||
```
|
||||
yarn strapi deploy
|
||||
```
|
||||
|
||||
## 📚 Learn more
|
||||
|
||||
- [Resource center](https://strapi.io/resource-center) - Strapi resource center.
|
||||
- [Strapi documentation](https://docs.strapi.io) - Official Strapi documentation.
|
||||
- [Strapi tutorials](https://strapi.io/tutorials) - List of tutorials made by the core team and the community.
|
||||
- [Strapi blog](https://strapi.io/blog) - Official Strapi blog containing articles made by the Strapi team and the community.
|
||||
- [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements.
|
||||
|
||||
Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome!
|
||||
|
||||
## ✨ Community
|
||||
|
||||
- [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team.
|
||||
- [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
|
||||
- [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi.
|
||||
|
||||
---
|
||||
|
||||
<sub>🤫 Psst! [Strapi is hiring](https://strapi.io/careers).</sub>
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Admin => ({
|
||||
auth: {
|
||||
secret: env('ADMIN_JWT_SECRET'),
|
||||
},
|
||||
apiToken: {
|
||||
salt: env('API_TOKEN_SALT'),
|
||||
},
|
||||
transfer: {
|
||||
token: {
|
||||
salt: env('TRANSFER_TOKEN_SALT'),
|
||||
},
|
||||
},
|
||||
secrets: {
|
||||
encryptionKey: env('ENCRYPTION_KEY'),
|
||||
},
|
||||
flags: {
|
||||
nps: env.bool('FLAG_NPS', true),
|
||||
promoteEE: env.bool('FLAG_PROMOTE_EE', true),
|
||||
},
|
||||
});
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config: Core.Config.Api = {
|
||||
rest: {
|
||||
defaultLimit: 25,
|
||||
maxLimit: 100,
|
||||
withCount: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,63 @@
|
||||
import path from 'path';
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Database => {
|
||||
const client = env('DATABASE_CLIENT', 'sqlite');
|
||||
|
||||
const connections = {
|
||||
mysql: {
|
||||
connection: {
|
||||
host: env('DATABASE_HOST', 'localhost'),
|
||||
port: env.int('DATABASE_PORT', 3306),
|
||||
database: env('DATABASE_NAME', 'strapi'),
|
||||
user: env('DATABASE_USERNAME', 'strapi'),
|
||||
password: env('DATABASE_PASSWORD', 'strapi'),
|
||||
ssl: env.bool('DATABASE_SSL', false) && {
|
||||
key: env('DATABASE_SSL_KEY', undefined),
|
||||
cert: env('DATABASE_SSL_CERT', undefined),
|
||||
ca: env('DATABASE_SSL_CA', undefined),
|
||||
capath: env('DATABASE_SSL_CAPATH', undefined),
|
||||
cipher: env('DATABASE_SSL_CIPHER', undefined),
|
||||
rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
|
||||
},
|
||||
},
|
||||
pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
|
||||
},
|
||||
postgres: {
|
||||
connection: {
|
||||
connectionString: env('DATABASE_URL'),
|
||||
host: env('DATABASE_HOST', 'localhost'),
|
||||
port: env.int('DATABASE_PORT', 5432),
|
||||
database: env('DATABASE_NAME', 'strapi'),
|
||||
user: env('DATABASE_USERNAME', 'strapi'),
|
||||
password: env('DATABASE_PASSWORD', 'strapi'),
|
||||
ssl: env.bool('DATABASE_SSL', false) && {
|
||||
key: env('DATABASE_SSL_KEY', undefined),
|
||||
cert: env('DATABASE_SSL_CERT', undefined),
|
||||
ca: env('DATABASE_SSL_CA', undefined),
|
||||
capath: env('DATABASE_SSL_CAPATH', undefined),
|
||||
cipher: env('DATABASE_SSL_CIPHER', undefined),
|
||||
rejectUnauthorized: env.bool('DATABASE_SSL_REJECT_UNAUTHORIZED', true),
|
||||
},
|
||||
schema: env('DATABASE_SCHEMA', 'public'),
|
||||
},
|
||||
pool: { min: env.int('DATABASE_POOL_MIN', 2), max: env.int('DATABASE_POOL_MAX', 10) },
|
||||
},
|
||||
sqlite: {
|
||||
connection: {
|
||||
filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
|
||||
},
|
||||
useNullAsDefault: true,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
connection: {
|
||||
client,
|
||||
...connections[client],
|
||||
acquireConnectionTimeout: env.int('DATABASE_CONNECTION_TIMEOUT', 60000),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config: Core.Config.Middlewares = [
|
||||
'strapi::logger',
|
||||
'strapi::errors',
|
||||
'strapi::security',
|
||||
{
|
||||
name: 'strapi::cors',
|
||||
config: {
|
||||
origin: [
|
||||
'http://localhost:5173',
|
||||
'http://127.0.0.1:5173',
|
||||
'http://localhost:5174',
|
||||
'http://127.0.0.1:5174',
|
||||
],
|
||||
headers: ['Content-Type', 'Authorization', 'Origin', 'Accept'],
|
||||
},
|
||||
},
|
||||
'strapi::poweredBy',
|
||||
'strapi::query',
|
||||
'strapi::body',
|
||||
'strapi::session',
|
||||
'strapi::favicon',
|
||||
'strapi::public',
|
||||
];
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,5 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Plugin => ({});
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Server => ({
|
||||
host: env('HOST', '0.0.0.0'),
|
||||
port: env.int('PORT', 1337),
|
||||
app: {
|
||||
keys: env.array('APP_KEYS'),
|
||||
},
|
||||
});
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,244 @@
|
||||
{
|
||||
"global": {
|
||||
"siteName": "Strapi Demo",
|
||||
"defaultSeo": {
|
||||
"metaTitle": "Strapi Demo",
|
||||
"metaDescription": "A demo site made with Strapi",
|
||||
"shareImage": null
|
||||
},
|
||||
"siteDescription": "A demo site powered by Strapi and Vue",
|
||||
"heroTitle": "Content managed in Strapi",
|
||||
"heroSubtitle": "Edit copy, blog posts, and member-only pages from the Strapi admin.",
|
||||
"heroCtaLabel": "Explore the blog",
|
||||
"favicon": null
|
||||
},
|
||||
"about": {
|
||||
"title": "About the strapi blog",
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Dedit imago conspicuus cum capillis totidem inhibere\n\nLorem markdownum **rerum**, est limine: columbas: ab infelix hostem arbore nudis\ncrudelis. Videtur reliquit ambo ferrum dote sub amne fatis **illuc**, in magis,\nnec."
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
"categories": [
|
||||
{
|
||||
"name": "news",
|
||||
"slug": "news"
|
||||
},
|
||||
{
|
||||
"name": "tech",
|
||||
"slug": "tech"
|
||||
},
|
||||
{
|
||||
"name": "food",
|
||||
"slug": "food"
|
||||
},
|
||||
{
|
||||
"name": "nature",
|
||||
"slug": "nature"
|
||||
},
|
||||
{
|
||||
"name": "story",
|
||||
"slug": "story"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "David Doe",
|
||||
"email": "daviddoe@strapi.io",
|
||||
"avatar": "daviddoe@strapi.io.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Sarah Baker",
|
||||
"email": "sarahbaker@strapi.io",
|
||||
"avatar": "sarahbaker@strapi.io.jpg"
|
||||
}
|
||||
],
|
||||
"articles": [
|
||||
{
|
||||
"title": "The internet's Own boy",
|
||||
"slug": "the-internet-s-own-boy",
|
||||
"category": {
|
||||
"id": 5
|
||||
},
|
||||
"author": {
|
||||
"id": 1
|
||||
},
|
||||
"description": "Follow the story of Aaron Swartz, the boy who could change the world",
|
||||
"cover": null,
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Probant \n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. \n\n## Abit sua\n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. "
|
||||
},
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Spatiantia astra \n\nFoeda, medio silva *errandum*: onus formam munere. Mutata bibulis est auxiliare arces etiamnunc verbis virgineo Priamidas illa Thescelus, nam fit locis lucis auras. Exitus hospes gratulor ut pondere [speslimite](http://www.curas.io/figuram); quid habent, Avernales faciente de. Pervenit Ino sonabile supplex cognoscenti vires, Bacchumque errat miserarum venandi dignabere dedisti. Discrimina iuncosaque virgaque tot sine superest [fissus](http://quos.org/sitet.aspx). Non color esset potest non sumit, sed vix arserat. Nisi immo silva tantum pectusque quos pennis quisquam artus!"
|
||||
},
|
||||
{
|
||||
"__component": "shared.slider",
|
||||
"files": ["coffee-art.jpg", "coffee-beans.jpg"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "This shrimp is awesome",
|
||||
"slug": "this-shrimp-is-awesome",
|
||||
"category": {
|
||||
"id": 4
|
||||
},
|
||||
"author": {
|
||||
"id": 1
|
||||
},
|
||||
"description": "Mantis shrimps, or stomatopods, are marine crustaceans of the order Stomatopoda.",
|
||||
"cover": null,
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Probant \n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. \n\n## Abit sua\n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. "
|
||||
},
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Spatiantia astra \n\nFoeda, medio silva *errandum*: onus formam munere. Mutata bibulis est auxiliare arces etiamnunc verbis virgineo Priamidas illa Thescelus, nam fit locis lucis auras. Exitus hospes gratulor ut pondere [speslimite](http://www.curas.io/figuram); quid habent, Avernales faciente de. Pervenit Ino sonabile supplex cognoscenti vires, Bacchumque errat miserarum venandi dignabere dedisti. Discrimina iuncosaque virgaque tot sine superest [fissus](http://quos.org/sitet.aspx). Non color esset potest non sumit, sed vix arserat. Nisi immo silva tantum pectusque quos pennis quisquam artus!"
|
||||
},
|
||||
{
|
||||
"__component": "shared.slider",
|
||||
"files": ["coffee-art.jpg", "coffee-beans.jpg"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "A bug is becoming a meme on the internet",
|
||||
"slug": "a-bug-is-becoming-a-meme-on-the-internet",
|
||||
"category": {
|
||||
"id": 2
|
||||
},
|
||||
"author": {
|
||||
"id": 2
|
||||
},
|
||||
"description": "How a bug on MySQL is becoming a meme on the internet",
|
||||
"cover": null,
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Probant \n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. \n\n## Abit sua\n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. "
|
||||
},
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Spatiantia astra \n\nFoeda, medio silva *errandum*: onus formam munere. Mutata bibulis est auxiliare arces etiamnunc verbis virgineo Priamidas illa Thescelus, nam fit locis lucis auras. Exitus hospes gratulor ut pondere [speslimite](http://www.curas.io/figuram); quid habent, Avernales faciente de. Pervenit Ino sonabile supplex cognoscenti vires, Bacchumque errat miserarum venandi dignabere dedisti. Discrimina iuncosaque virgaque tot sine superest [fissus](http://quos.org/sitet.aspx). Non color esset potest non sumit, sed vix arserat. Nisi immo silva tantum pectusque quos pennis quisquam artus!"
|
||||
},
|
||||
{
|
||||
"__component": "shared.slider",
|
||||
"files": ["coffee-art.jpg", "coffee-beans.jpg"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Beautiful picture",
|
||||
"slug": "beautiful-picture",
|
||||
"category": {
|
||||
"id": 4
|
||||
},
|
||||
"author": {
|
||||
"id": 2
|
||||
},
|
||||
"description": "Description of a beautiful picture",
|
||||
"cover": null,
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Probant \n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. \n\n## Abit sua\n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. "
|
||||
},
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Spatiantia astra \n\nFoeda, medio silva *errandum*: onus formam munere. Mutata bibulis est auxiliare arces etiamnunc verbis virgineo Priamidas illa Thescelus, nam fit locis lucis auras. Exitus hospes gratulor ut pondere [speslimite](http://www.curas.io/figuram); quid habent, Avernales faciente de. Pervenit Ino sonabile supplex cognoscenti vires, Bacchumque errat miserarum venandi dignabere dedisti. Discrimina iuncosaque virgaque tot sine superest [fissus](http://quos.org/sitet.aspx). Non color esset potest non sumit, sed vix arserat. Nisi immo silva tantum pectusque quos pennis quisquam artus!"
|
||||
},
|
||||
{
|
||||
"__component": "shared.slider",
|
||||
"files": ["coffee-art.jpg", "coffee-beans.jpg"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "What's inside a Black Hole",
|
||||
"slug": "what-s-inside-a-black-hole",
|
||||
"category": {
|
||||
"id": 1
|
||||
},
|
||||
"author": {
|
||||
"id": 2
|
||||
},
|
||||
"description": "Maybe the answer is in this article, or not...",
|
||||
"cover": null,
|
||||
"blocks": [
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Probant \n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. \n\n## Abit sua\n\nse Lorem markdownum negat. Argo *saxa* videnda cornuaque hunc qui tanta spes teneas! Obliquis est dicenti est salutat ille tamen iuvenum nostrae dolore. - Colores nocituraque comitata eripiunt - Addit quodcunque solum cui et dextram illis - Nulli meus nec extemplo ille ferebat pressit Se blandita fulvae vox gravem Pittheus cesserunt sanguine herbis tu comitum tenuit. Sui in ruunt; Doridaque maculosae fuissem! Et loqui. "
|
||||
},
|
||||
{
|
||||
"__component": "shared.quote",
|
||||
"title": "Thelonius Monk",
|
||||
"body": "You've got to dig it to dig it, you dig?"
|
||||
},
|
||||
{
|
||||
"__component": "shared.media",
|
||||
"file": "coffee-art.jpg"
|
||||
},
|
||||
{
|
||||
"__component": "shared.rich-text",
|
||||
"body": "## Spatiantia astra \n\nFoeda, medio silva *errandum*: onus formam munere. Mutata bibulis est auxiliare arces etiamnunc verbis virgineo Priamidas illa Thescelus, nam fit locis lucis auras. Exitus hospes gratulor ut pondere [speslimite](http://www.curas.io/figuram); quid habent, Avernales faciente de. Pervenit Ino sonabile supplex cognoscenti vires, Bacchumque errat miserarum venandi dignabere dedisti. Discrimina iuncosaque virgaque tot sine superest [fissus](http://quos.org/sitet.aspx). Non color esset potest non sumit, sed vix arserat. Nisi immo silva tantum pectusque quos pennis quisquam artus!"
|
||||
},
|
||||
{
|
||||
"__component": "shared.slider",
|
||||
"files": ["coffee-art.jpg", "coffee-beans.jpg"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 497 B |
Generated
+19293
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "my-strapi-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "A Strapi application",
|
||||
"scripts": {
|
||||
"build": "strapi build",
|
||||
"console": "strapi console",
|
||||
"deploy": "strapi deploy",
|
||||
"dev": "strapi develop",
|
||||
"develop": "strapi develop",
|
||||
"seed:example": "node ./scripts/seed.js",
|
||||
"start": "strapi start",
|
||||
"strapi": "strapi",
|
||||
"upgrade": "npx @strapi/upgrade latest",
|
||||
"upgrade:dry": "npx @strapi/upgrade latest --dry"
|
||||
},
|
||||
"dependencies": {
|
||||
"@strapi/plugin-cloud": "5.46.0",
|
||||
"@strapi/plugin-users-permissions": "5.46.0",
|
||||
"@strapi/strapi": "5.46.0",
|
||||
"fs-extra": "^10.0.0",
|
||||
"mime-types": "^2.1.27",
|
||||
"pg": "8.20.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-router-dom": "^6.0.0",
|
||||
"styled-components": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"typescript": "^5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0 <=24.x.x",
|
||||
"npm": ">=6.0.0"
|
||||
},
|
||||
"strapi": {
|
||||
"uuid": "d279b0ff-ace0-454a-87dc-5dcdfa137df2",
|
||||
"installId": "344f768abb86f2f7633f32918a29bb22703312f019f862253c4e3534cc61fde2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# To prevent search engines from seeing the site altogether, uncomment the next two lines:
|
||||
# User-Agent: *
|
||||
# Disallow: /
|
||||
@@ -0,0 +1,274 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
const mime = require('mime-types');
|
||||
const { categories, authors, articles, global, about } = require('../data/data.json');
|
||||
|
||||
async function seedExampleApp() {
|
||||
const shouldImportSeedData = await isFirstRun();
|
||||
|
||||
if (shouldImportSeedData) {
|
||||
try {
|
||||
console.log('Setting up the template...');
|
||||
await importSeedData();
|
||||
console.log('Ready to go');
|
||||
} catch (error) {
|
||||
console.log('Could not import seed data');
|
||||
console.error(error);
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
'Seed data has already been imported. We cannot reimport unless you clear your database first.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function isFirstRun() {
|
||||
const pluginStore = strapi.store({
|
||||
environment: strapi.config.environment,
|
||||
type: 'type',
|
||||
name: 'setup',
|
||||
});
|
||||
const initHasRun = await pluginStore.get({ key: 'initHasRun' });
|
||||
await pluginStore.set({ key: 'initHasRun', value: true });
|
||||
return !initHasRun;
|
||||
}
|
||||
|
||||
async function setPublicPermissions(newPermissions) {
|
||||
// Find the ID of the public role
|
||||
const publicRole = await strapi.query('plugin::users-permissions.role').findOne({
|
||||
where: {
|
||||
type: 'public',
|
||||
},
|
||||
});
|
||||
|
||||
// Create the new permissions and link them to the public role
|
||||
const allPermissionsToCreate = [];
|
||||
Object.keys(newPermissions).map((controller) => {
|
||||
const actions = newPermissions[controller];
|
||||
const permissionsToCreate = actions.map((action) => {
|
||||
return strapi.query('plugin::users-permissions.permission').create({
|
||||
data: {
|
||||
action: `api::${controller}.${controller}.${action}`,
|
||||
role: publicRole.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
allPermissionsToCreate.push(...permissionsToCreate);
|
||||
});
|
||||
await Promise.all(allPermissionsToCreate);
|
||||
}
|
||||
|
||||
function getFileSizeInBytes(filePath) {
|
||||
const stats = fs.statSync(filePath);
|
||||
const fileSizeInBytes = stats['size'];
|
||||
return fileSizeInBytes;
|
||||
}
|
||||
|
||||
function getFileData(fileName) {
|
||||
const filePath = path.join('data', 'uploads', fileName);
|
||||
// Parse the file metadata
|
||||
const size = getFileSizeInBytes(filePath);
|
||||
const ext = fileName.split('.').pop();
|
||||
const mimeType = mime.lookup(ext || '') || '';
|
||||
|
||||
return {
|
||||
filepath: filePath,
|
||||
originalFileName: fileName,
|
||||
size,
|
||||
mimetype: mimeType,
|
||||
};
|
||||
}
|
||||
|
||||
async function uploadFile(file, name) {
|
||||
return strapi
|
||||
.plugin('upload')
|
||||
.service('upload')
|
||||
.upload({
|
||||
files: file,
|
||||
data: {
|
||||
fileInfo: {
|
||||
alternativeText: `An image uploaded to Strapi called ${name}`,
|
||||
caption: name,
|
||||
name,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Create an entry and attach files if there are any
|
||||
async function createEntry({ model, entry }) {
|
||||
try {
|
||||
// Actually create the entry in Strapi
|
||||
await strapi.documents(`api::${model}.${model}`).create({
|
||||
data: entry,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error({ model, entry, error });
|
||||
}
|
||||
}
|
||||
|
||||
async function checkFileExistsBeforeUpload(files) {
|
||||
const existingFiles = [];
|
||||
const uploadedFiles = [];
|
||||
const filesCopy = [...files];
|
||||
|
||||
for (const fileName of filesCopy) {
|
||||
// Check if the file already exists in Strapi
|
||||
const fileWhereName = await strapi.query('plugin::upload.file').findOne({
|
||||
where: {
|
||||
name: fileName.replace(/\..*$/, ''),
|
||||
},
|
||||
});
|
||||
|
||||
if (fileWhereName) {
|
||||
// File exists, don't upload it
|
||||
existingFiles.push(fileWhereName);
|
||||
} else {
|
||||
// File doesn't exist, upload it
|
||||
const fileData = getFileData(fileName);
|
||||
const fileNameNoExtension = fileName.split('.').shift();
|
||||
const [file] = await uploadFile(fileData, fileNameNoExtension);
|
||||
uploadedFiles.push(file);
|
||||
}
|
||||
}
|
||||
const allFiles = [...existingFiles, ...uploadedFiles];
|
||||
// If only one file then return only that file
|
||||
return allFiles.length === 1 ? allFiles[0] : allFiles;
|
||||
}
|
||||
|
||||
async function updateBlocks(blocks) {
|
||||
const updatedBlocks = [];
|
||||
for (const block of blocks) {
|
||||
if (block.__component === 'shared.media') {
|
||||
const uploadedFiles = await checkFileExistsBeforeUpload([block.file]);
|
||||
// Copy the block to not mutate directly
|
||||
const blockCopy = { ...block };
|
||||
// Replace the file name on the block with the actual file
|
||||
blockCopy.file = uploadedFiles;
|
||||
updatedBlocks.push(blockCopy);
|
||||
} else if (block.__component === 'shared.slider') {
|
||||
// Get files already uploaded to Strapi or upload new files
|
||||
const existingAndUploadedFiles = await checkFileExistsBeforeUpload(block.files);
|
||||
// Copy the block to not mutate directly
|
||||
const blockCopy = { ...block };
|
||||
// Replace the file names on the block with the actual files
|
||||
blockCopy.files = existingAndUploadedFiles;
|
||||
// Push the updated block
|
||||
updatedBlocks.push(blockCopy);
|
||||
} else {
|
||||
// Just push the block as is
|
||||
updatedBlocks.push(block);
|
||||
}
|
||||
}
|
||||
|
||||
return updatedBlocks;
|
||||
}
|
||||
|
||||
async function importArticles() {
|
||||
for (const article of articles) {
|
||||
const cover = await checkFileExistsBeforeUpload([`${article.slug}.jpg`]);
|
||||
const updatedBlocks = await updateBlocks(article.blocks);
|
||||
|
||||
await createEntry({
|
||||
model: 'article',
|
||||
entry: {
|
||||
...article,
|
||||
cover,
|
||||
blocks: updatedBlocks,
|
||||
// Make sure it's not a draft
|
||||
publishedAt: Date.now(),
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function importGlobal() {
|
||||
const favicon = await checkFileExistsBeforeUpload(['favicon.png']);
|
||||
const shareImage = await checkFileExistsBeforeUpload(['default-image.png']);
|
||||
return createEntry({
|
||||
model: 'global',
|
||||
entry: {
|
||||
...global,
|
||||
favicon,
|
||||
// Make sure it's not a draft
|
||||
publishedAt: Date.now(),
|
||||
defaultSeo: {
|
||||
...global.defaultSeo,
|
||||
shareImage,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function importAbout() {
|
||||
const updatedBlocks = await updateBlocks(about.blocks);
|
||||
|
||||
await createEntry({
|
||||
model: 'about',
|
||||
entry: {
|
||||
...about,
|
||||
blocks: updatedBlocks,
|
||||
// Make sure it's not a draft
|
||||
publishedAt: Date.now(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function importCategories() {
|
||||
for (const category of categories) {
|
||||
await createEntry({ model: 'category', entry: category });
|
||||
}
|
||||
}
|
||||
|
||||
async function importAuthors() {
|
||||
for (const author of authors) {
|
||||
const avatar = await checkFileExistsBeforeUpload([author.avatar]);
|
||||
|
||||
await createEntry({
|
||||
model: 'author',
|
||||
entry: {
|
||||
...author,
|
||||
avatar,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function importSeedData() {
|
||||
// Allow read of application content types
|
||||
await setPublicPermissions({
|
||||
article: ['find', 'findOne'],
|
||||
category: ['find', 'findOne'],
|
||||
author: ['find', 'findOne'],
|
||||
global: ['find', 'findOne'],
|
||||
about: ['find', 'findOne'],
|
||||
});
|
||||
|
||||
// Create all entries
|
||||
await importCategories();
|
||||
await importAuthors();
|
||||
await importArticles();
|
||||
await importGlobal();
|
||||
await importAbout();
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const { createStrapi, compileStrapi } = require('@strapi/strapi');
|
||||
|
||||
const appContext = await compileStrapi();
|
||||
const app = await createStrapi(appContext).load();
|
||||
|
||||
app.log.level = 'error';
|
||||
|
||||
await seedExampleApp();
|
||||
await app.destroy();
|
||||
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { StrapiApp } from '@strapi/strapi/admin';
|
||||
|
||||
export default {
|
||||
config: {
|
||||
locales: [
|
||||
// 'ar',
|
||||
// 'fr',
|
||||
// 'cs',
|
||||
// 'de',
|
||||
// 'dk',
|
||||
// 'es',
|
||||
// 'he',
|
||||
// 'id',
|
||||
// 'it',
|
||||
// 'ja',
|
||||
// 'ko',
|
||||
// 'ms',
|
||||
// 'nl',
|
||||
// 'no',
|
||||
// 'pl',
|
||||
// 'pt-BR',
|
||||
// 'pt',
|
||||
// 'ru',
|
||||
// 'sk',
|
||||
// 'sv',
|
||||
// 'th',
|
||||
// 'tr',
|
||||
// 'uk',
|
||||
// 'vi',
|
||||
// 'zh-Hans',
|
||||
// 'zh',
|
||||
],
|
||||
},
|
||||
bootstrap(app: StrapiApp) {
|
||||
console.log(app);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["../plugins/**/admin/src/**/*", "./"],
|
||||
"exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { mergeConfig, type UserConfig } from 'vite';
|
||||
|
||||
export default (config: UserConfig) => {
|
||||
// Important: always return the modified config
|
||||
return mergeConfig(config, {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src',
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"kind": "singleType",
|
||||
"collectionName": "abouts",
|
||||
"info": {
|
||||
"singularName": "about",
|
||||
"pluralName": "abouts",
|
||||
"displayName": "About",
|
||||
"description": "Write about yourself and the content you create"
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": false
|
||||
},
|
||||
"pluginOptions": {},
|
||||
"attributes": {
|
||||
"title": {
|
||||
"type": "string"
|
||||
},
|
||||
"blocks": {
|
||||
"type": "dynamiczone",
|
||||
"components": ["shared.media", "shared.quote", "shared.rich-text", "shared.slider"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* about controller
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreController('api::about.about');
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* about router.
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreRouter('api::about.about');
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* about service.
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreService('api::about.about');
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"kind": "collectionType",
|
||||
"collectionName": "blog_posts",
|
||||
"info": {
|
||||
"singularName": "blog-post",
|
||||
"pluralName": "blog-posts",
|
||||
"displayName": "Blog Post",
|
||||
"description": "Blog posts for the demo site"
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": true
|
||||
},
|
||||
"pluginOptions": {},
|
||||
"attributes": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true
|
||||
},
|
||||
"slug": {
|
||||
"type": "uid",
|
||||
"targetField": "title",
|
||||
"required": true
|
||||
},
|
||||
"excerpt": {
|
||||
"type": "text"
|
||||
},
|
||||
"body": {
|
||||
"type": "richtext"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreController('api::blog-post.blog-post');
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreRouter('api::blog-post.blog-post');
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreService('api::blog-post.blog-post');
|
||||
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"kind": "singleType",
|
||||
"collectionName": "globals",
|
||||
"info": {
|
||||
"singularName": "global",
|
||||
"pluralName": "globals",
|
||||
"displayName": "Global",
|
||||
"description": "Define global settings"
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": false
|
||||
},
|
||||
"pluginOptions": {},
|
||||
"attributes": {
|
||||
"siteName": {
|
||||
"type": "string",
|
||||
"required": true
|
||||
},
|
||||
"favicon": {
|
||||
"type": "media",
|
||||
"multiple": false,
|
||||
"required": false,
|
||||
"allowedTypes": ["images", "files", "videos"]
|
||||
},
|
||||
"siteDescription": {
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"heroTitle": {
|
||||
"type": "string"
|
||||
},
|
||||
"heroSubtitle": {
|
||||
"type": "string"
|
||||
},
|
||||
"heroCtaLabel": {
|
||||
"type": "string"
|
||||
},
|
||||
"defaultSeo": {
|
||||
"type": "component",
|
||||
"repeatable": false,
|
||||
"component": "shared.seo"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* global controller
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreController('api::global.global');
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* global router.
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreRouter('api::global.global');
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* global service.
|
||||
*/
|
||||
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreService('api::global.global');
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"kind": "singleType",
|
||||
"collectionName": "member_areas",
|
||||
"info": {
|
||||
"singularName": "member-area",
|
||||
"pluralName": "member-areas",
|
||||
"displayName": "Member Area",
|
||||
"description": "Content visible only to logged-in users"
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": false
|
||||
},
|
||||
"pluginOptions": {},
|
||||
"attributes": {
|
||||
"title": {
|
||||
"type": "string",
|
||||
"required": true
|
||||
},
|
||||
"content": {
|
||||
"type": "richtext"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreController('api::member-area.member-area');
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreRouter('api::member-area.member-area');
|
||||
@@ -0,0 +1,3 @@
|
||||
import { factories } from '@strapi/strapi';
|
||||
|
||||
export default factories.createCoreService('api::member-area.member-area');
|
||||
@@ -0,0 +1,194 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
|
||||
const DEMO_EMAIL = 'demo@strapi-demo.local';
|
||||
const DEMO_PASSWORD = 'Demo1234!';
|
||||
|
||||
type PermissionMap = Record<string, string[]>;
|
||||
|
||||
async function ensurePermissions(
|
||||
strapi: Core.Strapi,
|
||||
roleType: 'public' | 'authenticated',
|
||||
permissions: PermissionMap,
|
||||
) {
|
||||
const role = await strapi.db.query('plugin::users-permissions.role').findOne({
|
||||
where: { type: roleType },
|
||||
});
|
||||
|
||||
if (!role) return;
|
||||
|
||||
for (const [uid, actions] of Object.entries(permissions)) {
|
||||
for (const action of actions) {
|
||||
const permissionAction = `${uid}.${action}`;
|
||||
const existing = await strapi.db.query('plugin::users-permissions.permission').findOne({
|
||||
where: { action: permissionAction, role: role.id },
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
await strapi.db.query('plugin::users-permissions.permission').create({
|
||||
data: { action: permissionAction, role: role.id },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureDemoUser(strapi: Core.Strapi) {
|
||||
const existing = await strapi.db.query('plugin::users-permissions.user').findOne({
|
||||
where: { email: DEMO_EMAIL },
|
||||
});
|
||||
|
||||
if (existing) return;
|
||||
|
||||
const authenticatedRole = await strapi.db.query('plugin::users-permissions.role').findOne({
|
||||
where: { type: 'authenticated' },
|
||||
});
|
||||
|
||||
if (!authenticatedRole) return;
|
||||
|
||||
await strapi.plugin('users-permissions').service('user').add({
|
||||
username: 'demo',
|
||||
email: DEMO_EMAIL,
|
||||
password: DEMO_PASSWORD,
|
||||
role: authenticatedRole.id,
|
||||
confirmed: true,
|
||||
provider: 'local',
|
||||
});
|
||||
|
||||
strapi.log.info(`Demo user created: ${DEMO_EMAIL} / ${DEMO_PASSWORD}`);
|
||||
}
|
||||
|
||||
async function seedGlobal(strapi: Core.Strapi) {
|
||||
const existing = await strapi.documents('api::global.global').findFirst({});
|
||||
|
||||
const data = {
|
||||
siteName: 'Strapi Demo',
|
||||
siteDescription: 'A small demo site powered by Strapi and Vue.',
|
||||
heroTitle: 'Content managed in Strapi',
|
||||
heroSubtitle: 'Edit copy, blog posts, and member-only pages from the Strapi admin — no redeploy needed.',
|
||||
heroCtaLabel: 'Explore the blog',
|
||||
defaultSeo: {
|
||||
metaTitle: 'Strapi Demo',
|
||||
metaDescription: 'See what Strapi can do with a Vue frontend.',
|
||||
},
|
||||
};
|
||||
|
||||
if (!existing) {
|
||||
await strapi.documents('api::global.global').create({ data });
|
||||
} else {
|
||||
await strapi.documents('api::global.global').update({
|
||||
documentId: existing.documentId,
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function seedAbout(strapi: Core.Strapi) {
|
||||
const existing = await strapi.documents('api::about.about').findFirst({});
|
||||
|
||||
if (!existing) {
|
||||
await strapi.documents('api::about.about').create({
|
||||
data: {
|
||||
title: 'About this demo',
|
||||
blocks: [
|
||||
{
|
||||
__component: 'shared.rich-text',
|
||||
body: 'This site is a minimal showcase of Strapi as a headless CMS. Public pages load content from the Strapi REST API. The member area is protected — only logged-in users can fetch that content.',
|
||||
},
|
||||
{
|
||||
__component: 'shared.quote',
|
||||
title: 'Why Strapi?',
|
||||
body: 'Give editors a friendly admin panel while developers keep building with their favorite frontend framework.',
|
||||
},
|
||||
],
|
||||
} as never,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function seedBlogPosts(strapi: Core.Strapi) {
|
||||
const posts = [
|
||||
{
|
||||
title: 'What is a headless CMS?',
|
||||
slug: 'what-is-a-headless-cms',
|
||||
excerpt: 'Separate content from presentation and deliver it anywhere via APIs.',
|
||||
body: '<p>A headless CMS stores structured content and exposes it through APIs. Your Vue app (or mobile app, or another site) decides how to display it.</p>',
|
||||
},
|
||||
{
|
||||
title: 'Why teams pick Strapi',
|
||||
slug: 'why-teams-pick-strapi',
|
||||
excerpt: 'Open source, customizable, and quick to set up for prototypes and production.',
|
||||
body: '<p>Strapi gives you content types, roles, media library, and plugins out of the box — perfect for demos like this one.</p>',
|
||||
},
|
||||
{
|
||||
title: 'Connecting Vue to Strapi',
|
||||
slug: 'connecting-vue-to-strapi',
|
||||
excerpt: 'Use the REST API and JWT auth from your frontend.',
|
||||
body: '<p>This demo uses fetch with a JWT stored in localStorage. Public endpoints need no token; protected content sends Authorization: Bearer …</p>',
|
||||
},
|
||||
];
|
||||
|
||||
for (const post of posts) {
|
||||
const existing = await strapi.documents('api::blog-post.blog-post').findFirst({
|
||||
filters: { slug: post.slug },
|
||||
});
|
||||
|
||||
if (existing) {
|
||||
if (!existing.publishedAt) {
|
||||
await strapi.documents('api::blog-post.blog-post').publish({
|
||||
documentId: existing.documentId,
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
await strapi.documents('api::blog-post.blog-post').create({
|
||||
data: post,
|
||||
status: 'published',
|
||||
});
|
||||
}
|
||||
|
||||
const testPost = await strapi.documents('api::blog-post.blog-post').findFirst({
|
||||
filters: { slug: 'test' },
|
||||
});
|
||||
if (testPost) {
|
||||
await strapi.documents('api::blog-post.blog-post').delete({
|
||||
documentId: testPost.documentId,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function seedMemberArea(strapi: Core.Strapi) {
|
||||
const existing = await strapi.documents('api::member-area.member-area').findFirst({});
|
||||
|
||||
const data = {
|
||||
title: 'Welcome, member!',
|
||||
content:
|
||||
'<p>This page is loaded from Strapi’s <strong>Member Area</strong> single type. The Public role cannot read it — you had to log in so the API returns this content.</p><p>Try changing this text in the Strapi admin under Content Manager → Member Area.</p>',
|
||||
};
|
||||
|
||||
if (!existing) {
|
||||
await strapi.documents('api::member-area.member-area').create({ data });
|
||||
}
|
||||
}
|
||||
|
||||
export async function setupDemo(strapi: Core.Strapi) {
|
||||
await ensurePermissions(strapi, 'public', {
|
||||
'api::global.global': ['find'],
|
||||
'api::about.about': ['find'],
|
||||
'api::blog-post.blog-post': ['find', 'findOne'],
|
||||
});
|
||||
|
||||
await ensurePermissions(strapi, 'authenticated', {
|
||||
'api::member-area.member-area': ['find'],
|
||||
});
|
||||
|
||||
await ensureDemoUser(strapi);
|
||||
await seedGlobal(strapi);
|
||||
await seedAbout(strapi);
|
||||
await seedBlogPosts(strapi);
|
||||
await seedMemberArea(strapi);
|
||||
|
||||
strapi.log.info('Demo content and permissions are ready.');
|
||||
}
|
||||
|
||||
export { DEMO_EMAIL, DEMO_PASSWORD };
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"collectionName": "components_shared_media",
|
||||
"info": {
|
||||
"displayName": "Media",
|
||||
"icon": "file-video"
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"file": {
|
||||
"allowedTypes": ["images", "files", "videos"],
|
||||
"type": "media",
|
||||
"multiple": false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"collectionName": "components_shared_quotes",
|
||||
"info": {
|
||||
"displayName": "Quote",
|
||||
"icon": "indent"
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"title": {
|
||||
"type": "string"
|
||||
},
|
||||
"body": {
|
||||
"type": "text"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"collectionName": "components_shared_rich_texts",
|
||||
"info": {
|
||||
"displayName": "Rich text",
|
||||
"icon": "align-justify",
|
||||
"description": ""
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"body": {
|
||||
"type": "richtext"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"collectionName": "components_shared_seos",
|
||||
"info": {
|
||||
"name": "Seo",
|
||||
"icon": "allergies",
|
||||
"displayName": "Seo",
|
||||
"description": ""
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"metaTitle": {
|
||||
"type": "string",
|
||||
"required": true
|
||||
},
|
||||
"metaDescription": {
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
"shareImage": {
|
||||
"type": "media",
|
||||
"multiple": false,
|
||||
"required": false,
|
||||
"allowedTypes": ["images"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"collectionName": "components_shared_sliders",
|
||||
"info": {
|
||||
"displayName": "Slider",
|
||||
"icon": "address-book",
|
||||
"description": ""
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"files": {
|
||||
"type": "media",
|
||||
"multiple": true,
|
||||
"required": false,
|
||||
"allowedTypes": ["images"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { Core } from '@strapi/strapi';
|
||||
import { setupDemo } from './bootstrap/setup-demo';
|
||||
|
||||
export default {
|
||||
register(/* { strapi }: { strapi: Core.Strapi } */) {},
|
||||
|
||||
async bootstrap({ strapi }: { strapi: Core.Strapi }) {
|
||||
try {
|
||||
await setupDemo(strapi);
|
||||
} catch (error) {
|
||||
strapi.log.error('Demo bootstrap failed:', error);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "Node",
|
||||
"lib": ["ES2020"],
|
||||
"target": "ES2019",
|
||||
"strict": false,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"noEmitOnError": true,
|
||||
"noImplicitThis": true,
|
||||
"outDir": "dist",
|
||||
"rootDir": "."
|
||||
},
|
||||
"include": [
|
||||
// Include root files
|
||||
"./",
|
||||
// Include all ts files
|
||||
"./**/*.ts",
|
||||
// Include all js files
|
||||
"./**/*.js",
|
||||
// Force the JSON files in the src folder to be included
|
||||
"src/**/*.json"
|
||||
],
|
||||
|
||||
"exclude": [
|
||||
"node_modules/",
|
||||
"build/",
|
||||
"dist/",
|
||||
".cache/",
|
||||
".tmp/",
|
||||
".strapi/",
|
||||
|
||||
// Do not include admin files in the server compilation
|
||||
"src/admin/",
|
||||
// Do not include test files
|
||||
"**/*.test.*",
|
||||
// Do not include plugins in the server compilation
|
||||
"src/plugins/**"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { Schema, Struct } from '@strapi/strapi';
|
||||
|
||||
export interface SharedMedia extends Struct.ComponentSchema {
|
||||
collectionName: 'components_shared_media';
|
||||
info: {
|
||||
displayName: 'Media';
|
||||
icon: 'file-video';
|
||||
};
|
||||
attributes: {
|
||||
file: Schema.Attribute.Media<'images' | 'files' | 'videos'>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SharedQuote extends Struct.ComponentSchema {
|
||||
collectionName: 'components_shared_quotes';
|
||||
info: {
|
||||
displayName: 'Quote';
|
||||
icon: 'indent';
|
||||
};
|
||||
attributes: {
|
||||
body: Schema.Attribute.Text;
|
||||
title: Schema.Attribute.String;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SharedRichText extends Struct.ComponentSchema {
|
||||
collectionName: 'components_shared_rich_texts';
|
||||
info: {
|
||||
description: '';
|
||||
displayName: 'Rich text';
|
||||
icon: 'align-justify';
|
||||
};
|
||||
attributes: {
|
||||
body: Schema.Attribute.RichText;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SharedSeo extends Struct.ComponentSchema {
|
||||
collectionName: 'components_shared_seos';
|
||||
info: {
|
||||
description: '';
|
||||
displayName: 'Seo';
|
||||
icon: 'allergies';
|
||||
name: 'Seo';
|
||||
};
|
||||
attributes: {
|
||||
metaDescription: Schema.Attribute.Text & Schema.Attribute.Required;
|
||||
metaTitle: Schema.Attribute.String & Schema.Attribute.Required;
|
||||
shareImage: Schema.Attribute.Media<'images'>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface SharedSlider extends Struct.ComponentSchema {
|
||||
collectionName: 'components_shared_sliders';
|
||||
info: {
|
||||
description: '';
|
||||
displayName: 'Slider';
|
||||
icon: 'address-book';
|
||||
};
|
||||
attributes: {
|
||||
files: Schema.Attribute.Media<'images', true>;
|
||||
};
|
||||
}
|
||||
|
||||
declare module '@strapi/strapi' {
|
||||
export module Public {
|
||||
export interface ComponentSchemas {
|
||||
'shared.media': SharedMedia;
|
||||
'shared.quote': SharedQuote;
|
||||
'shared.rich-text': SharedRichText;
|
||||
'shared.seo': SharedSeo;
|
||||
'shared.slider': SharedSlider;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1096
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
VITE_STRAPI_URL=http://localhost:1337
|
||||
@@ -0,0 +1 @@
|
||||
VITE_STRAPI_URL=http://localhost:1337
|
||||
@@ -0,0 +1,39 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100
|
||||
}
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
# vue-project
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Recommended Browser Setup
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+3083
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "vue-project",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build",
|
||||
"format": "prettier --write --experimental-cli src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^5.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node24": "^24.0.4",
|
||||
"@types/node": "^24.12.2",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.5",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"prettier": "3.8.3",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.0.8",
|
||||
"vite-plugin-vue-devtools": "^8.1.1",
|
||||
"vue-tsc": "^3.2.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import AppNavbar from '@/components/AppNavbar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<AppNavbar />
|
||||
<RouterView />
|
||||
<footer class="site-footer">
|
||||
<p>Demo site · Vue + Strapi · Content from REST API</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: auto;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1,191 @@
|
||||
@import './base.css';
|
||||
|
||||
:root {
|
||||
--bg: #0f1419;
|
||||
--surface: #1a2332;
|
||||
--surface-elevated: #243044;
|
||||
--text: #e8edf4;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #7c9cff;
|
||||
--accent-hover: #9bb1ff;
|
||||
--border: #2d3a4f;
|
||||
--error: #f87171;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family:
|
||||
'Segoe UI',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.5rem 3rem;
|
||||
}
|
||||
|
||||
.page.narrow {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||||
line-height: 1.15;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 42rem;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 2rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.post-card .excerpt {
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.post-card .body {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.6rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #0f1419;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
color: #0f1419;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
|
||||
const { isAuthenticated, user, logout } = useAuth()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="navbar">
|
||||
<RouterLink to="/" class="brand">Strapi Demo</RouterLink>
|
||||
|
||||
<nav class="nav-links">
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
<RouterLink to="/blog">Blog</RouterLink>
|
||||
<RouterLink to="/members">Members</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="nav-auth">
|
||||
<template v-if="isAuthenticated">
|
||||
<span class="user-label">Hi, {{ user?.username ?? 'member' }}</span>
|
||||
<button type="button" class="btn btn-ghost" @click="logout">Log out</button>
|
||||
</template>
|
||||
<RouterLink v-else to="/login" class="btn btn-primary">Log in</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a.router-link-active {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-auth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.user-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import type { ContentBlock } from '@/types/strapi'
|
||||
|
||||
defineProps<{
|
||||
blocks?: ContentBlock[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="blocks?.length" class="blocks">
|
||||
<article v-for="(block, index) in blocks" :key="index" class="block">
|
||||
<blockquote v-if="block.__component === 'shared.quote'" class="quote">
|
||||
<p>{{ block.body }}</p>
|
||||
<footer v-if="block.title">— {{ block.title }}</footer>
|
||||
</blockquote>
|
||||
<div
|
||||
v-else-if="block.__component === 'shared.rich-text'"
|
||||
class="richtext"
|
||||
v-html="block.body"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.blocks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-left: 4px solid var(--accent);
|
||||
background: var(--surface-elevated);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.richtext :deep(p) {
|
||||
margin: 0 0 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.richtext :deep(h2) {
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import type { AuthUser } from '@/types/strapi'
|
||||
import { login as strapiLogin } from '@/services/strapi'
|
||||
|
||||
const TOKEN_KEY = 'strapi_demo_jwt'
|
||||
const USER_KEY = 'strapi_demo_user'
|
||||
|
||||
const jwt = ref<string | null>(localStorage.getItem(TOKEN_KEY))
|
||||
const user = ref<AuthUser | null>(readStoredUser())
|
||||
|
||||
function readStoredUser(): AuthUser | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(USER_KEY)
|
||||
return raw ? (JSON.parse(raw) as AuthUser) : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const isAuthenticated = computed(() => Boolean(jwt.value))
|
||||
|
||||
async function login(identifier: string, password: string) {
|
||||
const response = await strapiLogin(identifier, password)
|
||||
jwt.value = response.jwt
|
||||
user.value = response.user
|
||||
localStorage.setItem(TOKEN_KEY, response.jwt)
|
||||
localStorage.setItem(USER_KEY, JSON.stringify(response.user))
|
||||
}
|
||||
|
||||
function logout() {
|
||||
jwt.value = null
|
||||
user.value = null
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(USER_KEY)
|
||||
}
|
||||
|
||||
function getToken(): string | null {
|
||||
return jwt.value
|
||||
}
|
||||
|
||||
return {
|
||||
jwt,
|
||||
user,
|
||||
isAuthenticated,
|
||||
login,
|
||||
logout,
|
||||
getToken,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,49 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/blog',
|
||||
name: 'blog',
|
||||
component: () => import('../views/BlogView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/members',
|
||||
name: 'members',
|
||||
meta: { requiresAuth: true },
|
||||
component: () => import('../views/MemberAreaView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
if (!to.meta.requiresAuth) return true
|
||||
|
||||
const { isAuthenticated } = useAuth()
|
||||
if (isAuthenticated.value) return true
|
||||
|
||||
return {
|
||||
name: 'login',
|
||||
query: { redirect: to.fullPath },
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,80 @@
|
||||
import type {
|
||||
AboutPage,
|
||||
BlogPost,
|
||||
GlobalSettings,
|
||||
LoginResponse,
|
||||
MemberArea,
|
||||
StrapiResponse,
|
||||
} from '@/types/strapi'
|
||||
|
||||
const baseUrl = import.meta.env.VITE_STRAPI_URL ?? 'http://localhost:1337'
|
||||
|
||||
function getAuthHeaders(token?: string | null): HeadersInit {
|
||||
const headers: Record<string, string> = {
|
||||
Accept: 'application/json',
|
||||
}
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return headers
|
||||
}
|
||||
|
||||
async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const response = await fetch(`${baseUrl}${path}`, options)
|
||||
|
||||
if (!response.ok) {
|
||||
const body = await response.json().catch(() => ({}))
|
||||
const message =
|
||||
(body as { error?: { message?: string } })?.error?.message ??
|
||||
`Request failed (${response.status})`
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return response.json() as Promise<T>
|
||||
}
|
||||
|
||||
/** Strapi 5 returns fields at the top level of `data`, not under `attributes`. */
|
||||
function unwrap<T>(payload: StrapiResponse<T | T[]>): T {
|
||||
const { data } = payload
|
||||
if (Array.isArray(data)) {
|
||||
return data as T
|
||||
}
|
||||
return data as T
|
||||
}
|
||||
|
||||
export function getStrapiUrl(): string {
|
||||
return baseUrl
|
||||
}
|
||||
|
||||
export async function fetchGlobal(): Promise<GlobalSettings> {
|
||||
const payload = await request<StrapiResponse<GlobalSettings>>('/api/global')
|
||||
return unwrap(payload)
|
||||
}
|
||||
|
||||
export async function fetchAbout(): Promise<AboutPage> {
|
||||
const payload = await request<StrapiResponse<AboutPage>>('/api/about?populate=blocks')
|
||||
return unwrap(payload)
|
||||
}
|
||||
|
||||
export async function fetchBlogPosts(): Promise<BlogPost[]> {
|
||||
const payload = await request<StrapiResponse<BlogPost[]>>(
|
||||
'/api/blog-posts?sort=publishedAt:desc',
|
||||
)
|
||||
const data = unwrap(payload)
|
||||
return Array.isArray(data) ? data : []
|
||||
}
|
||||
|
||||
export async function fetchMemberArea(token: string): Promise<MemberArea> {
|
||||
const payload = await request<StrapiResponse<MemberArea>>('/api/member-area', {
|
||||
headers: getAuthHeaders(token),
|
||||
})
|
||||
return unwrap(payload)
|
||||
}
|
||||
|
||||
export async function login(identifier: string, password: string): Promise<LoginResponse> {
|
||||
return request<LoginResponse>('/api/auth/local', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
||||
body: JSON.stringify({ identifier, password }),
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
export interface StrapiResponse<T> {
|
||||
data: T
|
||||
meta?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface StrapiEntity<T> {
|
||||
id: number
|
||||
documentId?: string
|
||||
attributes?: T
|
||||
}
|
||||
|
||||
export interface GlobalSettings {
|
||||
siteName: string
|
||||
siteDescription: string
|
||||
heroTitle?: string
|
||||
heroSubtitle?: string
|
||||
heroCtaLabel?: string
|
||||
}
|
||||
|
||||
export interface AboutPage {
|
||||
title: string
|
||||
blocks?: ContentBlock[]
|
||||
}
|
||||
|
||||
export interface BlogPost {
|
||||
title: string
|
||||
slug: string
|
||||
excerpt?: string
|
||||
body?: string
|
||||
publishedAt?: string
|
||||
}
|
||||
|
||||
export interface MemberArea {
|
||||
title: string
|
||||
content?: string
|
||||
}
|
||||
|
||||
export interface AuthUser {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
jwt: string
|
||||
user: AuthUser
|
||||
}
|
||||
|
||||
export type ContentBlock =
|
||||
| { __component: 'shared.rich-text'; body?: string }
|
||||
| { __component: 'shared.quote'; title?: string; body?: string }
|
||||
| { __component: 'shared.media' }
|
||||
| { __component: 'shared.slider' }
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import ContentBlocks from '@/components/ContentBlocks.vue'
|
||||
import { fetchAbout } from '@/services/strapi'
|
||||
import type { AboutPage } from '@/types/strapi'
|
||||
|
||||
const about = ref<AboutPage | null>(null)
|
||||
const error = ref<string | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
about.value = await fetchAbout()
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Could not load About page from Strapi.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="page narrow">
|
||||
<p class="badge">From Strapi · About single type</p>
|
||||
<p v-if="loading" class="status">Loading…</p>
|
||||
<p v-else-if="error" class="error">{{ error }}</p>
|
||||
<template v-else-if="about">
|
||||
<h1>{{ about.title }}</h1>
|
||||
<ContentBlocks :blocks="about.blocks" />
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { fetchBlogPosts } from '@/services/strapi'
|
||||
import type { BlogPost } from '@/types/strapi'
|
||||
|
||||
const posts = ref<BlogPost[]>([])
|
||||
const error = ref<string | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
posts.value = await fetchBlogPosts()
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Could not load blog posts from Strapi.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="page">
|
||||
<p class="badge">From Strapi · Blog Post collection</p>
|
||||
<h1>Blog</h1>
|
||||
<p class="lead">Posts are stored and edited in the Strapi admin.</p>
|
||||
|
||||
<p v-if="loading" class="status">Loading posts…</p>
|
||||
<p v-else-if="error" class="error">{{ error }}</p>
|
||||
|
||||
<ul v-else class="post-list">
|
||||
<li v-for="post in posts" :key="post.slug" class="post-card">
|
||||
<h2>{{ post.title }}</h2>
|
||||
<p v-if="post.excerpt" class="excerpt">{{ post.excerpt }}</p>
|
||||
<div v-if="post.body" class="body" v-html="post.body" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-if="!loading && !error && posts.length === 0" class="status">No posts yet.</p>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { fetchGlobal, getStrapiUrl } from '@/services/strapi'
|
||||
import type { GlobalSettings } from '@/types/strapi'
|
||||
|
||||
const global = ref<GlobalSettings | null>(null)
|
||||
const error = ref<string | null>(null)
|
||||
const loading = ref(true)
|
||||
const adminUrl = computed(() => `${getStrapiUrl()}/admin`)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
global.value = await fetchGlobal()
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Could not load content from Strapi.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="page">
|
||||
<p v-if="loading" class="status">Loading from Strapi…</p>
|
||||
<p v-else-if="error" class="error">{{ error }}</p>
|
||||
|
||||
<template v-else-if="global">
|
||||
<section class="hero">
|
||||
<p class="eyebrow">{{ global.siteName }}</p>
|
||||
<h1>{{ global.heroTitle ?? 'Welcome' }}</h1>
|
||||
<p class="lead">{{ global.heroSubtitle ?? global.siteDescription }}</p>
|
||||
<RouterLink to="/blog" class="btn btn-primary">
|
||||
{{ global.heroCtaLabel ?? 'Read the blog' }}
|
||||
</RouterLink>
|
||||
</section>
|
||||
|
||||
<section class="card-grid">
|
||||
<article class="card">
|
||||
<h2>Headless CMS</h2>
|
||||
<p>Content lives in Strapi. This Vue app fetches it over the REST API.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Public vs protected</h2>
|
||||
<p>Blog and About are public. The Members page needs a JWT from login.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Edit in admin</h2>
|
||||
<p>
|
||||
Change text at
|
||||
<a :href="adminUrl" target="_blank" rel="noopener">Strapi admin</a>
|
||||
and refresh — no frontend rebuild.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { login, isAuthenticated } = useAuth()
|
||||
|
||||
const identifier = ref('demo@strapi-demo.local')
|
||||
const password = ref('Demo1234!')
|
||||
const error = ref<string | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (isAuthenticated.value) {
|
||||
router.replace((route.query.redirect as string) || '/members')
|
||||
}
|
||||
})
|
||||
|
||||
async function onSubmit() {
|
||||
error.value = null
|
||||
loading.value = true
|
||||
try {
|
||||
await login(identifier.value, password.value)
|
||||
const redirect = (route.query.redirect as string) || '/members'
|
||||
await router.push(redirect)
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Login failed.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="page narrow">
|
||||
<h1>Log in</h1>
|
||||
<p class="lead">
|
||||
Demo account (created by Strapi bootstrap):
|
||||
<code>demo@strapi-demo.local</code> / <code>Demo1234!</code>
|
||||
</p>
|
||||
|
||||
<form class="login-form" @submit.prevent="onSubmit">
|
||||
<label>
|
||||
Email or username
|
||||
<input v-model="identifier" type="text" autocomplete="username" required />
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input v-model="password" type="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
{{ loading ? 'Signing in…' : 'Sign in' }}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.65rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font: inherit;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.85em;
|
||||
background: var(--surface-elevated);
|
||||
padding: 0.1em 0.35em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuth } from '@/composables/useAuth'
|
||||
import { fetchMemberArea } from '@/services/strapi'
|
||||
import type { MemberArea } from '@/types/strapi'
|
||||
|
||||
const router = useRouter()
|
||||
const { isAuthenticated, getToken } = useAuth()
|
||||
|
||||
const content = ref<MemberArea | null>(null)
|
||||
const error = ref<string | null>(null)
|
||||
const loading = ref(true)
|
||||
|
||||
async function loadMemberContent() {
|
||||
const token = getToken()
|
||||
if (!token) return
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
content.value = await fetchMemberArea(token)
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Could not load member content.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isAuthenticated.value) {
|
||||
router.replace({ name: 'login', query: { redirect: '/members' } })
|
||||
return
|
||||
}
|
||||
loadMemberContent()
|
||||
})
|
||||
|
||||
watch(isAuthenticated, (authed) => {
|
||||
if (!authed) {
|
||||
router.replace({ name: 'login', query: { redirect: '/members' } })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="page narrow">
|
||||
<p class="badge badge-protected">Protected · Strapi authenticated API</p>
|
||||
<h1>Members</h1>
|
||||
|
||||
<p v-if="loading" class="status">Loading member content…</p>
|
||||
<p v-else-if="error" class="error">{{ error }}</p>
|
||||
<template v-else-if="content">
|
||||
<h2>{{ content.title }}</h2>
|
||||
<div v-if="content.content" class="richtext" v-html="content.content" />
|
||||
</template>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.badge-protected {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.richtext :deep(p) {
|
||||
line-height: 1.7;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
// Extra safety for array and object lookups, but may have false positives.
|
||||
"noUncheckedIndexedAccess": true,
|
||||
|
||||
// Path mapping for cleaner imports.
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
|
||||
{
|
||||
"extends": "@tsconfig/node24/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"playwright.config.*",
|
||||
"eslint.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
// Most tools use transpilation instead of Node.js's native type-stripping.
|
||||
// Bundler mode provides a smoother developer experience.
|
||||
"module": "preserve",
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
// Include Node.js types and avoid accidentally including other `@types/*` packages.
|
||||
"types": ["node"],
|
||||
|
||||
// Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
|
||||
"noEmit": true,
|
||||
|
||||
// `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
|
||||
// Specified here to keep it out of the root directory.
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user