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