├── README.md
├── cms
    ├── .editorconfig
    ├── .env.example
    ├── .eslintignore
    ├── .eslintrc
    ├── .gitignore
    ├── api
    │   ├── .gitkeep
    │   ├── auth
    │   │   ├── config
    │   │   │   └── routes.json
    │   │   └── controllers
    │   │   │   └── auth.js
    │   └── post
    │   │   ├── config
    │   │       └── routes.json
    │   │   ├── controllers
    │   │       └── post.js
    │   │   ├── models
    │   │       ├── post.js
    │   │       └── post.settings.json
    │   │   └── services
    │   │       └── post.js
    ├── config
    │   ├── database.js
    │   ├── functions
    │   │   ├── bootstrap.js
    │   │   ├── cron.js
    │   │   └── responses
    │   │   │   └── 404.js
    │   └── server.js
    ├── extensions
    │   ├── .gitkeep
    │   └── users-permissions
    │   │   ├── config
    │   │       └── jwt.js
    │   │   └── models
    │   │       └── User.settings.json
    ├── favicon.ico
    ├── package.json
    └── public
    │   ├── robots.txt
    │   └── uploads
    │       └── .gitkeep
└── frontend
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── .npmrc
    ├── .prettierignore
    ├── .prettierrc
    ├── package.json
    ├── postcss.config.cjs
    ├── src
        ├── app.html
        ├── app.postcss
        ├── global.d.ts
        ├── hooks.ts
        ├── lib
        │   ├── Navbar.svelte
        │   ├── types.ts
        │   └── user.ts
        └── routes
        │   ├── __error.svelte
        │   ├── __layout.svelte
        │   ├── blog
        │       └── [slug].svelte
        │   ├── index.svelte
        │   ├── login.svelte
        │   ├── new.svelte
        │   └── posts.ts
    ├── static
        ├── favicon.png
        ├── robots.txt
        ├── svelte-welcome.png
        └── svelte-welcome.webp
    ├── svelte.config.js
    ├── tailwind.config.cjs
    └── tsconfig.json


/README.md:
--------------------------------------------------------------------------------
1 | This code is a result of the tutorial How to Create a Blog with SvelteKit and Strapi
2 | 
3 | 


--------------------------------------------------------------------------------
/cms/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [{package.json,*.yml}]
12 | indent_style = space
13 | indent_size = 2
14 | 
15 | [*.md]
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/cms/.env.example:
--------------------------------------------------------------------------------
1 | HOST=0.0.0.0
2 | PORT=1337
3 | 


--------------------------------------------------------------------------------
/cms/.eslintignore:
--------------------------------------------------------------------------------
1 | .cache
2 | build
3 | **/node_modules/**
4 | 


--------------------------------------------------------------------------------
/cms/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": "eslint:recommended",
 4 |   "env": {
 5 |     "commonjs": true,
 6 |     "es6": true,
 7 |     "node": true,
 8 |     "browser": false
 9 |   },
10 |   "parserOptions": {
11 |     "ecmaFeatures": {
12 |       "experimentalObjectRestSpread": true,
13 |       "jsx": false
14 |     },
15 |     "sourceType": "module"
16 |   },
17 |   "globals": {
18 |     "strapi": true
19 |   },
20 |   "rules": {
21 |     "indent": ["error", 2, { "SwitchCase": 1 }],
22 |     "linebreak-style": ["error", "unix"],
23 |     "no-console": 0,
24 |     "quotes": ["error", "single"],
25 |     "semi": ["error", "always"]
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/cms/.gitignore:
--------------------------------------------------------------------------------
  1 | ############################
  2 | # OS X
  3 | ############################
  4 | 
  5 | .DS_Store
  6 | .AppleDouble
  7 | .LSOverride
  8 | Icon
  9 | .Spotlight-V100
 10 | .Trashes
 11 | ._*
 12 | 
 13 | 
 14 | ############################
 15 | # Linux
 16 | ############################
 17 | 
 18 | *~
 19 | 
 20 | 
 21 | ############################
 22 | # Windows
 23 | ############################
 24 | 
 25 | Thumbs.db
 26 | ehthumbs.db
 27 | Desktop.ini
 28 | $RECYCLE.BIN/
 29 | *.cab
 30 | *.msi
 31 | *.msm
 32 | *.msp
 33 | 
 34 | 
 35 | ############################
 36 | # Packages
 37 | ############################
 38 | 
 39 | *.7z
 40 | *.csv
 41 | *.dat
 42 | *.dmg
 43 | *.gz
 44 | *.iso
 45 | *.jar
 46 | *.rar
 47 | *.tar
 48 | *.zip
 49 | *.com
 50 | *.class
 51 | *.dll
 52 | *.exe
 53 | *.o
 54 | *.seed
 55 | *.so
 56 | *.swo
 57 | *.swp
 58 | *.swn
 59 | *.swm
 60 | *.out
 61 | *.pid
 62 | 
 63 | 
 64 | ############################
 65 | # Logs and databases
 66 | ############################
 67 | 
 68 | .tmp
 69 | *.log
 70 | *.sql
 71 | *.sqlite
 72 | *.sqlite3
 73 | 
 74 | 
 75 | ############################
 76 | # Misc.
 77 | ############################
 78 | 
 79 | *#
 80 | ssl
 81 | .idea
 82 | nbproject
 83 | public/uploads/*
 84 | !public/uploads/.gitkeep
 85 | 
 86 | ############################
 87 | # Node.js
 88 | ############################
 89 | 
 90 | lib-cov
 91 | lcov.info
 92 | pids
 93 | logs
 94 | results
 95 | node_modules
 96 | .node_history
 97 | 
 98 | ############################
 99 | # Tests
100 | ############################
101 | 
102 | testApp
103 | coverage
104 | 
105 | ############################
106 | # Strapi
107 | ############################
108 | 
109 | .env
110 | license.txt
111 | exports
112 | *.cache
113 | build
114 | .strapi-updater.json
115 | 


--------------------------------------------------------------------------------
/cms/api/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/cms/api/.gitkeep


--------------------------------------------------------------------------------
/cms/api/auth/config/routes.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "routes": [
 3 |     {
 4 |       "method": "GET",
 5 |       "path": "/auth/me",
 6 |       "handler": "Auth.me",
 7 |       "config": {
 8 |         "policies": []
 9 |       }
10 |     }
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/cms/api/auth/controllers/auth.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /**
 4 |  * A set of functions called "actions" for `auth`
 5 |  */
 6 | 
 7 | module.exports = {
 8 |   async me(ctx) {
 9 |     if (ctx.state.user) {
10 |       return ctx.state.user;
11 |     }
12 | 
13 |     ctx.unauthorized("You're not logged in");
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/cms/api/post/config/routes.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "routes": [
 3 |     {
 4 |       "method": "GET",
 5 |       "path": "/posts",
 6 |       "handler": "post.find",
 7 |       "config": {
 8 |         "policies": []
 9 |       }
10 |     },
11 |     {
12 |       "method": "GET",
13 |       "path": "/posts/count",
14 |       "handler": "post.count",
15 |       "config": {
16 |         "policies": []
17 |       }
18 |     },
19 |     {
20 |       "method": "GET",
21 |       "path": "/posts/:id",
22 |       "handler": "post.findOne",
23 |       "config": {
24 |         "policies": []
25 |       }
26 |     },
27 |     {
28 |       "method": "POST",
29 |       "path": "/posts",
30 |       "handler": "post.create",
31 |       "config": {
32 |         "policies": []
33 |       }
34 |     },
35 |     {
36 |       "method": "PUT",
37 |       "path": "/posts/:id",
38 |       "handler": "post.update",
39 |       "config": {
40 |         "policies": []
41 |       }
42 |     },
43 |     {
44 |       "method": "DELETE",
45 |       "path": "/posts/:id",
46 |       "handler": "post.delete",
47 |       "config": {
48 |         "policies": []
49 |       }
50 |     }
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/cms/api/post/controllers/post.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | const { parseMultipartData, sanitizeEntity } = require("strapi-utils");
 4 | 
 5 | /**
 6 |  * Read the documentation (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#core-controllers)
 7 |  * to customize this controller
 8 |  */
 9 | 
10 | module.exports = {
11 |   async create(ctx) {
12 |     let entity;
13 | 
14 |     if (ctx.is("multipart")) {
15 |       const { data, files } = parseMultipartData(ctx);
16 |       data.author = ctx.state.user.id;
17 |       entity = await strapi.services.post.create(data, { files });
18 |     } else {
19 |       ctx.request.body.author = ctx.state.user.id;
20 |       entity = await strapi.services.post.create(ctx.request.body);
21 |     }
22 | 
23 |     return sanitizeEntity(entity, { model: strapi.models.post });
24 |   },
25 | 
26 |   async update(ctx) {
27 |     const { id } = ctx.params;
28 | 
29 |     let entity;
30 | 
31 |     const [article] = await strapi.services.post.find({
32 |       id: ctx.params.id,
33 |       "author.id": ctx.state.user.id,
34 |     });
35 | 
36 |     if (!article) {
37 |       return ctx.unauthorized(`You can't update this entry`);
38 |     }
39 | 
40 |     if (ctx.is("multipart")) {
41 |       const { data, files } = parseMultipartData(ctx);
42 |       entity = await strapi.services.post.update({ id }, data, {
43 |         files,
44 |       });
45 |     } else {
46 |       entity = await strapi.services.post.update({ id }, ctx.request.body);
47 |     }
48 | 
49 |     return sanitizeEntity(entity, { model: strapi.models.post });
50 |   },
51 | 
52 |   async delete(ctx) {
53 |     const { id } = ctx.params;
54 | 
55 |     let entity;
56 | 
57 |     const [article] = await strapi.services.post.find({
58 |       id: ctx.params.id,
59 |       "author.id": ctx.state.user.id,
60 |     });
61 | 
62 |     if (!article) {
63 |       return ctx.unauthorized(`You can't delete this entry`);
64 |     }
65 | 
66 |     await strapi.services.post.delete({ id });
67 | 
68 |     return { ok: true };
69 |   },
70 | };
71 | 


--------------------------------------------------------------------------------
/cms/api/post/models/post.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | /**
4 |  * Read the documentation (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#lifecycle-hooks)
5 |  * to customize this model
6 |  */
7 | 
8 | module.exports = {};
9 | 


--------------------------------------------------------------------------------
/cms/api/post/models/post.settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "kind": "collectionType",
 3 |   "collectionName": "posts",
 4 |   "info": {
 5 |     "name": "Post",
 6 |     "description": ""
 7 |   },
 8 |   "options": {
 9 |     "increments": true,
10 |     "timestamps": true,
11 |     "draftAndPublish": false
12 |   },
13 |   "pluginOptions": {},
14 |   "attributes": {
15 |     "title": {
16 |       "type": "string"
17 |     },
18 |     "description": {
19 |       "type": "text"
20 |     },
21 |     "content": {
22 |       "type": "richtext"
23 |     },
24 |     "author": {
25 |       "targetColumnName": "",
26 |       "plugin": "users-permissions",
27 |       "model": "user",
28 |       "via": "posts"
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/cms/api/post/services/post.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | /**
4 |  * Read the documentation (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#core-services)
5 |  * to customize this service
6 |  */
7 | 
8 | module.exports = {};
9 | 


--------------------------------------------------------------------------------
/cms/config/database.js:
--------------------------------------------------------------------------------
 1 | module.exports = ({ env }) => ({
 2 |   defaultConnection: 'default',
 3 |   connections: {
 4 |     default: {
 5 |       connector: 'bookshelf',
 6 |       settings: {
 7 |         client: 'sqlite',
 8 |         filename: env('DATABASE_FILENAME', '.tmp/data.db'),
 9 |       },
10 |       options: {
11 |         useNullAsDefault: true,
12 |       },
13 |     },
14 |   },
15 | });
16 | 


--------------------------------------------------------------------------------
/cms/config/functions/bootstrap.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * An asynchronous bootstrap function that runs before
 5 |  * your application gets started.
 6 |  *
 7 |  * This gives you an opportunity to set up your data model,
 8 |  * run jobs, or perform some special logic.
 9 |  *
10 |  * See more details here: https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/configurations.html#bootstrap
11 |  */
12 | 
13 | module.exports = () => {};
14 | 


--------------------------------------------------------------------------------
/cms/config/functions/cron.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * Cron config that gives you an opportunity
 5 |  * to run scheduled jobs.
 6 |  *
 7 |  * The cron format consists of:
 8 |  * [SECOND (optional)] [MINUTE] [HOUR] [DAY OF MONTH] [MONTH OF YEAR] [DAY OF WEEK]
 9 |  *
10 |  * See more details here: https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/configurations.html#cron-tasks
11 |  */
12 | 
13 | module.exports = {
14 |   /**
15 |    * Simple example.
16 |    * Every monday at 1am.
17 |    */
18 |   // '0 1 * * 1': () => {
19 |   //
20 |   // }
21 | };
22 | 


--------------------------------------------------------------------------------
/cms/config/functions/responses/404.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = async (/* ctx */) => {
4 |   // return ctx.notFound('My custom message 404');
5 | };
6 | 


--------------------------------------------------------------------------------
/cms/config/server.js:
--------------------------------------------------------------------------------
 1 | module.exports = ({ env }) => ({
 2 |   host: env('HOST', '0.0.0.0'),
 3 |   port: env.int('PORT', 1337),
 4 |   admin: {
 5 |     auth: {
 6 |       secret: env('ADMIN_JWT_SECRET', '2688ca5aa2bd0e138f7a8c63532b693e'),
 7 |     },
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/cms/extensions/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/cms/extensions/.gitkeep


--------------------------------------------------------------------------------
/cms/extensions/users-permissions/config/jwt.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   jwtSecret: process.env.JWT_SECRET || '59c3a97a-5bd5-448c-8ec0-58eebd2a08d2'
3 | };


--------------------------------------------------------------------------------
/cms/extensions/users-permissions/models/User.settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "kind": "collectionType",
 3 |   "collectionName": "users-permissions_user",
 4 |   "info": {
 5 |     "name": "user",
 6 |     "description": ""
 7 |   },
 8 |   "options": {
 9 |     "draftAndPublish": false,
10 |     "timestamps": true
11 |   },
12 |   "attributes": {
13 |     "username": {
14 |       "type": "string",
15 |       "minLength": 3,
16 |       "unique": true,
17 |       "configurable": false,
18 |       "required": true
19 |     },
20 |     "email": {
21 |       "type": "email",
22 |       "minLength": 6,
23 |       "configurable": false,
24 |       "required": true
25 |     },
26 |     "provider": {
27 |       "type": "string",
28 |       "configurable": false
29 |     },
30 |     "password": {
31 |       "type": "password",
32 |       "minLength": 6,
33 |       "configurable": false,
34 |       "private": true
35 |     },
36 |     "resetPasswordToken": {
37 |       "type": "string",
38 |       "configurable": false,
39 |       "private": true
40 |     },
41 |     "confirmationToken": {
42 |       "type": "string",
43 |       "configurable": false,
44 |       "private": true
45 |     },
46 |     "confirmed": {
47 |       "type": "boolean",
48 |       "default": false,
49 |       "configurable": false
50 |     },
51 |     "blocked": {
52 |       "type": "boolean",
53 |       "default": false,
54 |       "configurable": false
55 |     },
56 |     "role": {
57 |       "model": "role",
58 |       "via": "users",
59 |       "plugin": "users-permissions",
60 |       "configurable": false
61 |     },
62 |     "posts": {
63 |       "via": "author",
64 |       "collection": "post"
65 |     }
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/cms/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/cms/favicon.ico


--------------------------------------------------------------------------------
/cms/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cms",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "description": "A Strapi application",
 6 |   "scripts": {
 7 |     "develop": "strapi develop",
 8 |     "start": "strapi start",
 9 |     "build": "strapi build",
10 |     "strapi": "strapi"
11 |   },
12 |   "devDependencies": {},
13 |   "dependencies": {
14 |     "strapi": "3.6.3",
15 |     "strapi-admin": "3.6.3",
16 |     "strapi-utils": "3.6.3",
17 |     "strapi-plugin-content-type-builder": "3.6.3",
18 |     "strapi-plugin-content-manager": "3.6.3",
19 |     "strapi-plugin-users-permissions": "3.6.3",
20 |     "strapi-plugin-email": "3.6.3",
21 |     "strapi-plugin-upload": "3.6.3",
22 |     "strapi-plugin-i18n": "3.6.3",
23 |     "strapi-connector-bookshelf": "3.6.3",
24 |     "knex": "0.21.18",
25 |     "sqlite3": "5.0.0"
26 |   },
27 |   "author": {
28 |     "name": "A Strapi developer"
29 |   },
30 |   "strapi": {
31 |     "uuid": "597444d1-5b9c-4096-b1f8-77e4008b68ed"
32 |   },
33 |   "engines": {
34 |     "node": ">=10.16.0 <=14.x.x",
35 |     "npm": "^6.0.0"
36 |   },
37 |   "license": "MIT"
38 | }
39 | 


--------------------------------------------------------------------------------
/cms/public/robots.txt:
--------------------------------------------------------------------------------
1 | # To prevent search engines from seeing the site altogether, uncomment the next two lines:
2 | # User-Agent: *
3 | # Disallow: /
4 | 


--------------------------------------------------------------------------------
/cms/public/uploads/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/cms/public/uploads/.gitkeep


--------------------------------------------------------------------------------
/frontend/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2019
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /.svelte-kit
4 | /package
5 | 


--------------------------------------------------------------------------------
/frontend/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/frontend/.prettierignore:
--------------------------------------------------------------------------------
1 | .svelte-kit/**
2 | static/**
3 | build/**
4 | node_modules/**
5 | 


--------------------------------------------------------------------------------
/frontend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "~TODO~",
 3 | 	"version": "0.0.1",
 4 | 	"scripts": {
 5 | 		"dev": "svelte-kit dev",
 6 | 		"build": "svelte-kit build",
 7 | 		"preview": "svelte-kit preview",
 8 | 		"check": "svelte-check --tsconfig ./tsconfig.json",
 9 | 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
10 | 		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
11 | 		"format": "prettier --write --plugin-search-dir=. ."
12 | 	},
13 | 	"devDependencies": {
14 | 		"@sveltejs/kit": "next",
15 | 		"@types/cookie": "^0.4.0",
16 | 		"@typescript-eslint/eslint-plugin": "^4.19.0",
17 | 		"@typescript-eslint/parser": "^4.19.0",
18 | 		"autoprefixer": "^10.2.5",
19 | 		"cssnano": "^5.0.2",
20 | 		"eslint": "^7.22.0",
21 | 		"eslint-config-prettier": "^8.1.0",
22 | 		"eslint-plugin-svelte3": "^3.2.0",
23 | 		"postcss": "^8.2.13",
24 | 		"postcss-load-config": "^3.0.1",
25 | 		"prettier": "~2.2.1",
26 | 		"prettier-plugin-svelte": "^2.2.0",
27 | 		"svelte": "^3.34.0",
28 | 		"svelte-check": "^2.0.0",
29 | 		"svelte-preprocess": "^4.7.3",
30 | 		"tailwindcss": "^2.1.2",
31 | 		"tslib": "^2.0.0",
32 | 		"typescript": "^4.0.0"
33 | 	},
34 | 	"type": "module",
35 | 	"dependencies": {
36 | 		"@fontsource/fira-mono": "^4.2.2",
37 | 		"@lukeed/uuid": "^2.0.0",
38 | 		"cookie": "^0.4.1",
39 | 		"marked": "^2.1.1"
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/frontend/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | const autoprefixer = require("autoprefixer");
 3 | const cssnano = require("cssnano");
 4 | 
 5 | const mode = process.env.NODE_ENV;
 6 | const dev = mode === "development";
 7 | 
 8 | const config = {
 9 | 	plugins: [
10 |         //Some plugins, like postcss-nested, need to run before Tailwind,
11 |         tailwindcss(),
12 |         //But others, like autoprefixer, need to run after,
13 |         autoprefixer(),
14 |         !dev && cssnano({
15 | 			preset: "default",
16 | 		})
17 |     ],
18 | };
19 | 
20 | module.exports = config;


--------------------------------------------------------------------------------
/frontend/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 
 8 | 		%svelte.head%
 9 | 	</head>
10 | 	<body>
11 | 		<div id="svelte">%svelte.body%</div>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/frontend/src/app.postcss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/frontend/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@sveltejs/kit" />
2 | 


--------------------------------------------------------------------------------
/frontend/src/hooks.ts:
--------------------------------------------------------------------------------
 1 | import cookie from 'cookie';
 2 | import { v4 as uuid } from '@lukeed/uuid';
 3 | import type { Handle } from '@sveltejs/kit';
 4 | 
 5 | export const handle: Handle = async ({ request, resolve }) => {
 6 | 	const cookies = cookie.parse(request.headers.cookie || '');
 7 | 	request.locals.userid = cookies.userid || uuid();
 8 | 
 9 | 	// TODO https://github.com/sveltejs/kit/issues/1046
10 | 	if (request.query.has('_method')) {
11 | 		request.method = request.query.get('_method').toUpperCase();
12 | 	}
13 | 
14 | 	const response = await resolve(request);
15 | 
16 | 	if (!cookies.userid) {
17 | 		// if this is the first time the user has visited this app,
18 | 		// set a cookie so that we recognise them when they return
19 | 		response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
20 | 	}
21 | 
22 | 	return response;
23 | };
24 | 


--------------------------------------------------------------------------------
/frontend/src/lib/Navbar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import user from './user';
 3 | </script>
 4 | 
 5 | <nav class="bg-white border-b border-gray-500 py-2 px-4 w-full">
 6 | 	<div class="flex items-center justify-between container mx-auto">
 7 | 		<a href="/" class="font-bold no-underline">My blog</a>
 8 | 		<section>
 9 | 			{#if !$user}
10 | 				<a href="/login" class="font-mono no-underline">Login</a>
11 | 			{:else}
12 | 				<a href="/new" class="font-mono no-underline mr-3">New</a>
13 | 				<span class="font-mono text-gray-500">{$user.username}</span>
14 | 			{/if}
15 | 		</section>
16 | 	</div>
17 | </nav>
18 | 


--------------------------------------------------------------------------------
/frontend/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | export interface Post {
 2 | 	id: number;
 3 | 	title: string;
 4 | 	description: string;
 5 | 	content: string;
 6 | 	author: Author;
 7 | 	created_at: string;
 8 | 	updated_at: string;
 9 | }
10 | 
11 | export interface User {
12 | 	id: number;
13 | 	username: string;
14 | 	email: string;
15 | 	provider: string;
16 | 	confirmed: boolean;
17 | 	blocked: boolean;
18 | 	role: Role;
19 | 	created_at: string;
20 | 	updated_at: string;
21 | 	posts: Post[];
22 | }
23 | 
24 | export interface Role {
25 | 	id: number;
26 | 	name: string;
27 | 	description: string;
28 | 	type: string;
29 | }
30 | 
31 | export interface Author extends Omit<Omit<User, 'posts'>, 'role'> {
32 | 	role: Role['id'];
33 | }
34 | 


--------------------------------------------------------------------------------
/frontend/src/lib/user.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 | import type { User } from './types';
3 | 
4 | const user = writable<User | null>(null);
5 | 
6 | export default user;
7 | 


--------------------------------------------------------------------------------
/frontend/src/routes/__error.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { ErrorLoad } from '@sveltejs/kit';
 3 | 
 4 | 	export type { ErrorLoad } from '@sveltejs/kit';
 5 | 
 6 | 	export const load: ErrorLoad = ({ error, status }) => {
 7 | 		return { props: { error, status } };
 8 | 	};
 9 | </script>
10 | 
11 | <script lang="ts">
12 | 	export let error: Error;
13 | 	export let status: number;
14 | </script>
15 | 
16 | <div class="fixed w-full h-full grid place-items-center">
17 | 	<section class="p-8 border-gray-500 rounded">
18 | 		<h1 class="text-center text-4xl font-mono-mt-4">{status}</h1>
19 | 		<p class="text-center">{error.message}</p>
20 | 	</section>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/frontend/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import '../app.postcss';
 3 | 	import userStore from '$lib/user';
 4 | 	import type { User } from '$lib/types';
 5 | 	import { onMount } from 'svelte';
 6 | 	import Navbar from '$lib/Navbar.svelte';
 7 | 
 8 | 	let loading = true;
 9 | 
10 | 	onMount(async () => {
11 | 		// Check if 'token' exists in localStorage
12 | 		if (!localStorage.getItem('token')) {
13 | 			loading = false;
14 | 			return { props: { user: null } };
15 | 		}
16 | 
17 | 		// Fetch the user from strapi
18 | 		const res = await fetch('http://localhost:1337/auth/me', {
19 | 			headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
20 | 		});
21 | 		const user: User = await res.json();
22 | 		loading = false;
23 | 		if (res.ok) {
24 | 			$userStore = user;
25 | 		}
26 | 	});
27 | </script>
28 | 
29 | {#if !loading}
30 | 	<Navbar />
31 | 	<slot />
32 | {/if}
33 | 


--------------------------------------------------------------------------------
/frontend/src/routes/blog/[slug].svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { Load } from '@sveltejs/kit';
 3 | 
 4 | 	export const load: Load = async ({ page: { params }, fetch }) => {
 5 | 		// The params object will contain all of the parameters in the route.
 6 | 		const { slug } = params;
 7 | 
 8 | 		// Now, we'll fetch the blog post from Strapi
 9 | 		const res = await fetch('http://localhost:1337/posts/' + slug);
10 | 
11 | 		// A 404 status means "NOT FOUND"
12 | 		if (res.status === 404) {
13 | 			// We can create a custom error and return it.
14 | 			// SvelteKit will automatically show us an error page that we'll learn to customise later on.
15 | 			const error = new Error(`The post with ID ${slug} was not found`);
16 | 			return { status: 404, error };
17 | 		} else {
18 | 			const data = await res.json();
19 | 			return { props: { post: data } };
20 | 		}
21 | 	};
22 | </script>
23 | 
24 | <script lang="ts">
25 | 	import type { Post } from '$lib/types';
26 | 	import { onMount } from 'svelte';
27 | 	import { goto } from '$app/navigation';
28 | 	import user from '$lib/user';
29 | 
30 | 	export let post: Post;
31 | 	let content = post.content;
32 | 
33 | 	onMount(async () => {
34 | 		// Install the marked package first!
35 | 		// Run this command: npm i marked
36 | 
37 | 		// We're using this style of importing because "marked" uses require, which won't work when we import it with SvelteKit.
38 | 		// Check the "How do I use a client-side only library" in the FAQ: https://kit.svelte.dev/faq
39 | 		const marked = (await import('marked')).default;
40 | 		content = marked(post.content);
41 | 	});
42 | 
43 | 	async function deletePost() {
44 | 		if (!localStorage.getItem('token')) {
45 | 			goto('/login');
46 | 			return;
47 | 		}
48 | 
49 | 		const res = await fetch('http://localhost:1337/posts/' + post.id, {
50 | 			method: 'DELETE',
51 | 			headers: { Authorization: 'Bearer ' + localStorage.getItem('token') }
52 | 		});
53 | 		if (res.ok) {
54 | 			goto('/');
55 | 		} else {
56 | 			const data: { message: { messages: { message: string }[] }[] } = await res.json();
57 | 			if (data?.message?.[0]?.messages?.[0]?.message) {
58 | 				alert(data.message[0].messages[0].message);
59 | 			}
60 | 		}
61 | 	}
62 | </script>
63 | 
64 | <h1 class="text-center text-4xl mt-4">{post.title}</h1>
65 | <p class="text-center mt-2">By: {post.author.username}</p>
66 | 
67 | {#if $user && post.author.id === $user.id}
68 | 	<p class="my-2 flex justify-center items-center gap-3">
69 | 		<button
70 | 			class="bg-blue-500 text-white font-bold py-2 px-4 rounded border-transparent"
71 | 			on:click={() => goto('/new?edit=' + post.id)}>Update post</button
72 | 		>
73 | 		<button
74 | 			class="bg-red-500 text-white font-bold py-2 px-4 rounded border-transparent"
75 | 			on:click={deletePost}>Delete post</button
76 | 		>
77 | 	</p>
78 | {/if}
79 | 
80 | <div class="border border-gray-500 my-4 mx-8 p-6 rounded">
81 | 	{@html content}
82 | </div>
83 | 


--------------------------------------------------------------------------------
/frontend/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts" context="module">
 2 | 	import type { Load } from '@sveltejs/kit';
 3 | 
 4 | 	export const load: Load = async ({ fetch }) => {
 5 | 		const res = await fetch('/posts');
 6 | 		const data = await res.json();
 7 | 
 8 | 		return { props: { posts: data } };
 9 | 	};
10 | </script>
11 | 
12 | <script lang="ts">
13 | 	import type { Post } from '$lib/types';
14 | 	import { goto } from '$app/navigation';
15 | 
16 | 	export let posts: Post[];
17 | </script>
18 | 
19 | <div class="my-4">
20 | 	<h1 class="text-center text-3xl font-bold">My wonderful blog</h1>
21 | </div>
22 | 
23 | <div class="container mx-auto mt-4">
24 | 	{#each posts as post}
25 | 		<div
26 | 			class="hover:bg-gray-200 cursor-pointer px-6 py-2 border-b border-gray-500"
27 | 			on:click={() => goto('/blog/' + post.id)}
28 | 		>
29 | 			<h4 class="font-bold">{post.title}</h4>
30 | 			<p class="mt-2 text-gray-800">{post.description}</p>
31 | 			<p class="text-gray-500">By: {post.author.username}</p>
32 | 		</div>
33 | 	{/each}
34 | </div>
35 | 


--------------------------------------------------------------------------------
/frontend/src/routes/login.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { User } from '$lib/types';
 3 | 	import { goto } from '$app/navigation';
 4 | 	import user from '$lib/user';
 5 | 
 6 | 	let email = '';
 7 | 	let password = '';
 8 | 
 9 | 	async function login() {
10 | 		const res = await fetch('http://localhost:1337/auth/local', {
11 | 			method: 'POST',
12 | 			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
13 | 			body: JSON.stringify({ identifier: email, password })
14 | 		});
15 | 		if (res.ok) {
16 | 			const data: { user: User; jwt: string } = await res.json();
17 | 			localStorage.setItem('token', data.jwt);
18 | 			if (data) {
19 | 				$user = data.user;
20 | 				goto('/');
21 | 			}
22 | 		} else {
23 | 			const data: { message: { messages: { message: string }[] }[] } = await res.json();
24 | 			if (data?.message?.[0]?.messages?.[0]?.message) {
25 | 				alert(data.message[0].messages[0].message);
26 | 			}
27 | 		}
28 | 	}
29 | </script>
30 | 
31 | <form on:submit|preventDefault={login} class="container mx-auto my-4">
32 | 	<h1 class="text-center text-2xl font-bold">Login</h1>
33 | 
34 | 	<div class="my-1">
35 | 		<label for="email">Email</label>
36 | 		<input type="email" placeholder="Enter your email" bind:value={email} />
37 | 	</div>
38 | 	<div class="my-1">
39 | 		<label for="password">Password</label>
40 | 		<input type="password" placeholder="Enter your password" bind:value={password} />
41 | 	</div>
42 | 	<div class="my-3">
43 | 		<button class="submit" type="submit">Login</button>
44 | 	</div>
45 | </form>
46 | 
47 | <style lang="postcss">
48 | 	label {
49 | 		@apply font-bold block mb-1;
50 | 	}
51 | 
52 | 	input {
53 | 		@apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4;
54 | 	}
55 | 
56 | 	.submit {
57 | 		@apply bg-blue-500 text-white border-transparent rounded px-4 py-2;
58 | 	}
59 | </style>
60 | 


--------------------------------------------------------------------------------
/frontend/src/routes/new.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts" context="module">
  2 | 	import type { Load } from '@sveltejs/kit';
  3 | 	import type { Post } from '$lib/types';
  4 | 
  5 | 	export const load: Load = async ({ fetch, page: { query } }) => {
  6 | 		// edit will be an optional query string parameter that'll contain the ID of the post that needs to be updated.
  7 | 		// If this is set, the post will be updated instead of being created.
  8 | 		const edit = query.get('edit');
  9 | 
 10 | 		if (edit) {
 11 | 			const res = await fetch('http://localhost:1337/posts/' + edit);
 12 | 
 13 | 			if (res.status === 404) {
 14 | 				const error = new Error(`The post with ID ${edit} was not found`);
 15 | 				return { status: 404, error };
 16 | 			} else {
 17 | 				const data: Post = await res.json();
 18 | 				return {
 19 | 					props: {
 20 | 						editId: edit,
 21 | 						title: data.title,
 22 | 						content: data.content,
 23 | 						description: data.description
 24 | 					}
 25 | 				};
 26 | 			}
 27 | 		}
 28 | 
 29 | 		return { props: {} };
 30 | 	};
 31 | </script>
 32 | 
 33 | <script lang="ts">
 34 | 	import { onMount } from 'svelte';
 35 | 	import user from '$lib/user';
 36 | 	import { goto } from '$app/navigation';
 37 | 
 38 | 	export let editId: string;
 39 | 	export let title = '';
 40 | 	export let description = '';
 41 | 	export let content = '';
 42 | 
 43 | 	onMount(() => {
 44 | 		if (!$user) goto('/login');
 45 | 	});
 46 | 
 47 | 	// To edit the post
 48 | 	async function editPost() {
 49 | 		if (!localStorage.getItem('token')) {
 50 | 			goto('/login');
 51 | 			return;
 52 | 		}
 53 | 
 54 | 		const res = await fetch('http://localhost:1337/posts/' + editId, {
 55 | 			method: 'PUT',
 56 | 			headers: {
 57 | 				'Content-Type': 'application/json',
 58 | 				Accept: 'application/json',
 59 | 				Authorization: 'Bearer ' + localStorage.getItem('token')
 60 | 			},
 61 | 			body: JSON.stringify({ title, description, content })
 62 | 		});
 63 | 		if (!res.ok) {
 64 | 			const data: { message: { messages: { message: string }[] }[] } = await res.json();
 65 | 			if (data?.message?.[0]?.messages?.[0]?.message) {
 66 | 				alert(data.message[0].messages[0].message);
 67 | 			}
 68 | 		} else {
 69 | 			const data: Post = await res.json();
 70 | 			goto('/blog/' + data.id);
 71 | 		}
 72 | 	}
 73 | 
 74 | 	async function createPost() {
 75 | 		if (!localStorage.getItem('token')) {
 76 | 			goto('/login');
 77 | 			return;
 78 | 		}
 79 | 
 80 | 		if (editId) {
 81 | 			// We're supposed to edit, not create
 82 | 			editPost();
 83 | 			return;
 84 | 		}
 85 | 
 86 | 		const res = await fetch('http://localhost:1337/posts', {
 87 | 			method: 'POST',
 88 | 			headers: {
 89 | 				'Content-Type': 'application/json',
 90 | 				Accept: 'application/json',
 91 | 				Authorization: 'Bearer ' + localStorage.getItem('token')
 92 | 			},
 93 | 			body: JSON.stringify({ title, description, content })
 94 | 		});
 95 | 		if (!res.ok) {
 96 | 			const data: { message: { messages: { message: string }[] }[] } = await res.json();
 97 | 			if (data?.message?.[0]?.messages?.[0]?.message) {
 98 | 				alert(data.message[0].messages[0].message);
 99 | 			}
100 | 		} else {
101 | 			const data: Post = await res.json();
102 | 			goto('/blog/' + data.id);
103 | 		}
104 | 	}
105 | </script>
106 | 
107 | <form on:submit|preventDefault={createPost} class="my-4 mx-auto container p-4">
108 | 	<div class="my-1">
109 | 		<label for="title">Title</label>
110 | 		<input type="text" placeholder="Enter title" id="title" bind:value={title} />
111 | 	</div>
112 | 	<div class="my-1">
113 | 		<label for="description">Description</label>
114 | 		<input type="text" placeholder="Enter description" id="description" bind:value={description} />
115 | 	</div>
116 | 	<div class="my-1">
117 | 		<label for="title">Content</label>
118 | 		<textarea rows={5} placeholder="Enter content" id="content" bind:value={content} />
119 | 	</div>
120 | 	<div class="my-2">
121 | 		<button class="submit" type="submit">Submit</button>
122 | 	</div>
123 | </form>
124 | 
125 | <style lang="postcss">
126 | 	label {
127 | 		@apply font-bold block mb-1;
128 | 	}
129 | 
130 | 	input {
131 | 		@apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4;
132 | 	}
133 | 
134 | 	textarea {
135 | 		@apply bg-white w-full border border-gray-500 rounded outline-none py-2 px-4 resize-y;
136 | 	}
137 | 
138 | 	.submit {
139 | 		@apply bg-blue-500 text-white border-transparent rounded px-4 py-2;
140 | 	}
141 | </style>
142 | 


--------------------------------------------------------------------------------
/frontend/src/routes/posts.ts:
--------------------------------------------------------------------------------
1 | import type { EndpointOutput } from '@sveltejs/kit';
2 | 
3 | export async function get(): Promise<EndpointOutput> {
4 | 	const res = await fetch('http://localhost:1337/posts');
5 | 	const data = await res.json();
6 | 
7 | 	return { body: data };
8 | }
9 | 


--------------------------------------------------------------------------------
/frontend/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/frontend/static/favicon.png


--------------------------------------------------------------------------------
/frontend/static/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/frontend/static/svelte-welcome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/frontend/static/svelte-welcome.png


--------------------------------------------------------------------------------
/frontend/static/svelte-welcome.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arnu515/sveltekit-strapi-blog/ed2e966f80aad457c6c2164aa7b482c4434cb398/frontend/static/svelte-welcome.webp


--------------------------------------------------------------------------------
/frontend/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import preprocess from 'svelte-preprocess';
 2 | 
 3 | /** @type {import('@sveltejs/kit').Config} */
 4 | const config = {
 5 | 	// Consult https://github.com/sveltejs/svelte-preprocess
 6 | 	// for more information about preprocessors
 7 | 	preprocess: [preprocess({
 8 |         "postcss": true
 9 |     })],
10 | 
11 | 	kit: {
12 | 		// hydrate the <div id="svelte"> element in src/app.html
13 | 		target: '#svelte'
14 | 	}
15 | };
16 | 
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/frontend/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
 2 | 
 3 | const config = {
 4 | 	mode: "aot",
 5 | 	purge: {
 6 | 		content: [
 7 | 			"./src/**/*.{html,js,svelte,ts}",
 8 | 		],
 9 | 		options: {
10 | 			defaultExtractor: (content) => [
11 | 				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
12 | 				...tailwindExtractor(content),
13 | 				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
14 | 				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
15 | 			],
16 | 		},
17 | 		safelist: [/^svelte-[\d\w]+$/],
18 | 	},
19 | 	theme: {
20 | 		extend: {},
21 | 	},
22 | 	variants: {
23 | 		extend: {},
24 | 	},
25 | 	plugins: [],
26 | };
27 | 
28 | module.exports = config;
29 | 


--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"moduleResolution": "node",
 4 | 		"module": "es2020",
 5 | 		"lib": ["es2020"],
 6 | 		"target": "es2019",
 7 | 		/**
 8 | 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 9 | 			to enforce using \`import type\` instead of \`import\` for Types.
10 | 			*/
11 | 		"importsNotUsedAsValues": "error",
12 | 		"isolatedModules": true,
13 | 		"resolveJsonModule": true,
14 | 		/**
15 | 			To have warnings/errors of the Svelte compiler at the correct position,
16 | 			enable source maps by default.
17 | 			*/
18 | 		"sourceMap": true,
19 | 		"esModuleInterop": true,
20 | 		"skipLibCheck": true,
21 | 		"forceConsistentCasingInFileNames": true,
22 | 		"baseUrl": ".",
23 | 		"allowJs": true,
24 | 		"checkJs": true,
25 | 		"paths": {
26 | 			"$lib/*": ["src/lib/*"]
27 | 		}
28 | 	},
29 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
30 | }
31 | 


--------------------------------------------------------------------------------