diff --git a/bun.lock b/bun.lock index b0f87d5..ca28e0a 100644 --- a/bun.lock +++ b/bun.lock @@ -4,6 +4,7 @@ "": { "name": "benjaminpalko.github.io", "dependencies": { + "@strapi/client": "^1.4.0", "dayjs": "^1.11.13", "lucide-svelte": "^0.503.0", "nodemailer": "^6.10.1", @@ -507,6 +508,8 @@ "@strapi/admin": ["@strapi/admin@5.12.7", "", { "dependencies": { "@casl/ability": "6.5.0", "@internationalized/date": "3.5.4", "@radix-ui/react-context": "1.0.1", "@radix-ui/react-toolbar": "1.0.4", "@reduxjs/toolkit": "1.9.7", "@strapi/design-system": "2.0.0-rc.23", "@strapi/icons": "2.0.0-rc.23", "@strapi/permissions": "5.12.7", "@strapi/types": "5.12.7", "@strapi/typescript-utils": "5.12.7", "@strapi/utils": "5.12.7", "@testing-library/dom": "10.1.0", "@testing-library/react": "15.0.7", "@testing-library/user-event": "14.5.2", "axios": "1.8.4", "bcryptjs": "2.4.3", "boxen": "5.1.2", "chalk": "^4.1.2", "codemirror5": "npm:codemirror@^5.65.11", "cross-env": "^7.0.3", "date-fns": "2.30.0", "execa": "5.1.1", "fast-deep-equal": "3.1.3", "formik": "2.4.5", "fractional-indexing": "3.2.0", "fs-extra": "11.2.0", "highlight.js": "^10.4.1", "immer": "9.0.21", "inquirer": "8.2.5", "invariant": "^2.2.4", "is-localhost-ip": "2.0.0", "jsonwebtoken": "9.0.0", "koa": "2.15.4", "koa-compose": "4.1.0", "koa-passport": "6.0.0", "koa-static": "5.0.0", "koa2-ratelimit": "^1.1.3", "lodash": "4.17.21", "node-schedule": "2.1.1", "ora": "5.4.1", "p-map": "4.0.0", "passport-local": "1.0.0", "pluralize": "8.0.0", "punycode": "2.3.1", "qs": "6.11.1", "react-dnd": "16.0.1", "react-dnd-html5-backend": "16.0.1", "react-intl": "6.6.2", "react-is": "^18.2.0", "react-query": "3.39.3", "react-redux": "8.1.3", "react-select": "5.8.0", "react-window": "1.8.10", "rimraf": "5.0.5", "sanitize-html": "2.13.0", "scheduler": "0.23.0", "semver": "7.5.4", "sift": "16.0.1", "typescript": "5.4.4", "use-context-selector": "1.4.1", "yup": "0.32.9", "zod": "^3.22.4" }, "peerDependencies": { "@strapi/data-transfer": "^5.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", "react-router-dom": "^6.0.0", "styled-components": "^6.0.0" } }, "sha512-YpyPw1ukgDY2NypRurrAcgnfte9GtcIMc4fOqBgntMtv/hFV6cIBUeDwIZmBJIruAqYGlxApZY7eeSx6yCi3Zg=="], + "@strapi/client": ["@strapi/client@1.4.0", "", { "dependencies": { "debug": "4.4.0", "qs": "6.14.0" } }, "sha512-A4mS6y52sI5CP9LOgB2iB5NOh1w1nonRlF4tWWtAe4+qquO59fp1tXOf08A1oXnSST1NSSifpQwrUiHi4LmWwQ=="], + "@strapi/cloud-cli": ["@strapi/cloud-cli@5.12.7", "", { "dependencies": { "@strapi/utils": "5.12.7", "axios": "1.8.4", "boxen": "5.1.2", "chalk": "4.1.2", "cli-progress": "3.12.0", "commander": "8.3.0", "eventsource": "2.0.2", "fast-safe-stringify": "2.1.1", "fs-extra": "11.2.0", "inquirer": "8.2.5", "jsonwebtoken": "9.0.0", "jwks-rsa": "3.1.0", "lodash": "4.17.21", "minimatch": "9.0.3", "open": "8.4.0", "ora": "5.4.1", "pkg-up": "3.1.0", "tar": "6.2.1", "xdg-app-paths": "8.3.0", "yup": "0.32.9" }, "bin": { "cloud-cli": "bin/index.js" } }, "sha512-TFCvYF7AIHndx9hUUX39fUeK4+udoAVfj9YhByTds5KBuiGos2LwZJRQGgjKRmI1FdUGMjfWL+IFUIN22XksTw=="], "@strapi/content-manager": ["@strapi/content-manager@5.12.7", "", { "dependencies": { "@radix-ui/react-toolbar": "1.0.4", "@reduxjs/toolkit": "1.9.7", "@sindresorhus/slugify": "1.1.0", "@strapi/design-system": "2.0.0-rc.23", "@strapi/icons": "2.0.0-rc.23", "@strapi/types": "5.12.7", "@strapi/utils": "5.12.7", "codemirror5": "npm:codemirror@^5.65.11", "date-fns": "2.30.0", "fractional-indexing": "3.2.0", "highlight.js": "^10.4.1", "immer": "9.0.21", "koa": "2.15.4", "lodash": "4.17.21", "markdown-it": "^13.0.2", "markdown-it-abbr": "^1.0.4", "markdown-it-container": "^3.0.0", "markdown-it-deflist": "^2.1.0", "markdown-it-emoji": "^2.0.0", "markdown-it-footnote": "^3.0.3", "markdown-it-ins": "^3.0.1", "markdown-it-mark": "^3.0.1", "markdown-it-sub": "^1.0.0", "markdown-it-sup": "1.0.0", "node-schedule": "2.1.1", "prismjs": "1.30.0", "qs": "6.11.1", "react-dnd": "16.0.1", "react-dnd-html5-backend": "16.0.1", "react-helmet": "^6.1.0", "react-intl": "6.6.2", "react-query": "3.39.3", "react-redux": "8.1.3", "react-window": "1.8.10", "sanitize-html": "2.13.0", "slate": "0.94.1", "slate-history": "0.93.0", "slate-react": "0.98.3", "yup": "0.32.9" }, "peerDependencies": { "@strapi/admin": "^5.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0", "react-router-dom": "^6.0.0", "styled-components": "^6.0.0" } }, "sha512-c7jlAUx3aDKFSt77XnzVWmyK/kqTo9uvZwfOg4n3ay6znG83zAd1TiggVSsr/LrQE4z9i153PUIC6lFt0poPrQ=="], diff --git a/package.json b/package.json index c29d82e..5f8270d 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "vitest": "^3.1.2" }, "dependencies": { + "@strapi/client": "^1.4.0", "dayjs": "^1.11.13", "lucide-svelte": "^0.503.0", "nodemailer": "^6.10.1" diff --git a/src/app.d.ts b/src/app.d.ts index da08e6d..224968c 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -3,7 +3,11 @@ declare global { namespace App { // interface Error {} - // interface Locals {} + interface Locals { + Strapi: { + url: string; + }; + } // interface PageData {} // interface PageState {} // interface Platform {} diff --git a/src/hooks.server.ts b/src/hooks.server.ts index 9c75a71..0c762e3 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,4 +1,5 @@ -import type { HandleServerError } from '@sveltejs/kit'; +import { env } from '$env/dynamic/private'; +import type { Handle, HandleServerError } from '@sveltejs/kit'; import { randomUUID } from 'crypto'; export const handleError: HandleServerError = async ({ error, event, message, status }) => { @@ -11,3 +12,10 @@ export const handleError: HandleServerError = async ({ error, event, message, st errorId }; }; + +export const handle: Handle = async ({ event, resolve }) => { + event.locals.Strapi.url = `http://${env.STRAPI_HOST}:${env.STRAPI_PORT}`; + + const response = await resolve(event); + return response; +}; diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte index 2375d5c..c96905d 100644 --- a/src/lib/components/BlogCard.svelte +++ b/src/lib/components/BlogCard.svelte @@ -3,24 +3,24 @@ import { Link } from 'lucide-svelte'; interface Props { - documentId: string; + id: string; img: string; 'img-alt': string | null; title: string; published: string; - topics: { id: number; Topic: string }[]; + topics: { id: number; name: string }[]; } - let { documentId, img, 'img-alt': alt, title, published, topics }: Props = $props(); + let { id, img, 'img-alt': alt, title, published, topics }: Props = $props(); - let blogLink = $derived(`/blog/${documentId}`); + let blogLink = $derived(`/blog/${id}`);
{#each topics as topic (topic.id)} -
{topic.Topic}
+
{topic.name}
{/each}
diff --git a/src/lib/types/Blog.ts b/src/lib/types/Blog.ts new file mode 100644 index 0000000..2dab345 --- /dev/null +++ b/src/lib/types/Blog.ts @@ -0,0 +1,56 @@ +type Dates = { + createdAt: string; + updateAt: string; + publishedAt: string; +}; + +export interface BlogPost extends Dates { + id: number; + documentId: string; + Title: string; + Header: Image; + Body: string; + Topics: Topic[]; +} + +interface Topic { + id: number; + Topic: string; +} + +interface ImageFormat { + ext: string; + url: string; + hash: string; + mime: string; + name: string; + path: unknown; + size: number; + width: number; + height: number; + sizeInBytes: number; +} + +interface Image extends Dates { + id: number; + documentId: string; + name: string; + alternativeText: string | null; + caption: string | null; + width: string; + height: string; + formats: { + large: ImageFormat; + medium: ImageFormat; + small: ImageFormat; + thumbnail: ImageFormat; + }; + hash: string; + ext: string; + mime: string; + size: number; + url: string; + previewUrl: string | null; + provider: string; + provider_metadata: unknown | null; +} diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts index b3cc229..20a8a5f 100644 --- a/src/routes/blog/+page.server.ts +++ b/src/routes/blog/+page.server.ts @@ -1,89 +1,39 @@ import { env } from '$env/dynamic/private'; +import { strapi } from '@strapi/client'; import type { PageServerLoad } from './$types'; -type Dates = { - createdAt: string; - updateAt: string; - publishedAt: string; -}; +export const load: PageServerLoad = async ({ locals }) => { + const { Strapi } = locals; -interface BlogPost extends Dates { - id: number; - documentId: string; - Title: string; - Header: Image; - Body: string; - Topics: Topic[]; -} + const client = strapi({ + baseURL: Strapi.url, + auth: env.STRAPI_TOKEN + }); -interface Topic { - id: number; - Topic: string; -} + const blogs = client.collection('blogs'); -interface ImageFormat { - ext: string; - url: string; - hash: string; - mime: string; - name: string; - path: unknown; - size: number; - width: number; - height: number; - sizeInBytes: number; -} - -interface Image extends Dates { - id: number; - documentId: string; - name: string; - alternativeText: string | null; - caption: string | null; - width: string; - height: string; - formats: { - large: ImageFormat; - medium: ImageFormat; - small: ImageFormat; - thumbnail: ImageFormat; - }; - hash: string; - ext: string; - mime: string; - size: number; - url: string; - previewUrl: string | null; - provider: string; - provider_metadata: unknown | null; -} - -interface Meta { - pagingation: { - page: number; - pageSize: number; - pageCount: number; - total: number; - }; -} - -export const load: PageServerLoad = async () => { - const response = await fetch( - `http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs?populate=Header&populate=Topics`, - { - method: 'GET', - headers: { - Authorization: `bearer ${env.STRAPI_TOKEN}` - } - } - ); - - const { data, meta }: { data: BlogPost[]; meta: Meta } = await response.json(); - - console.log(JSON.stringify(data, null, 2)); + const { data, meta } = await blogs.find({ + populate: ['Header', 'Topics'] + }); return { - posts: data, + strapi: { + url: Strapi.url + }, + posts: data.map((post) => ({ + id: post.documentId, + image: { + url: `${Strapi.url}${post.Header.formats.medium.url}`, + alt: post.Header.alternativeText + }, + title: post.Title, + body: post.Body, + topics: post.Topics.map((topic: { id: string; Topic: string }) => ({ + id: topic.id, + name: topic.Topic + })), + published: post.publishedAt + })), meta }; }; diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index a6deb81..4f4902e 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -1,5 +1,4 @@