+
+ {config.title}
+ 
+ 
+
+
-
+
diff --git a/src/routes/sentry-example/+page.svelte b/src/routes/sentry-example/+page.svelte
new file mode 100644
index 0000000..3bb1b0f
--- /dev/null
+++ b/src/routes/sentry-example/+page.svelte
@@ -0,0 +1,99 @@
+
+
+
+
+
+ {
+// // const posts: Post[] = [];
+// // const paths = import.meta.glob('$content/*.md', { eager: true });
+
+// // for (const [path, file] of Object.entries(paths)) {
+// // const slug = path.split('/').pop()?.replace('.md', '');
+// // if (slug && file !== null && typeof file === 'object' && 'metadata' in file) {
+// // const metadata = file.metadata as Omit;
+// // const post: Post = { ...metadata, slug };
+// // if (post.published) {
+// // posts.push(post);
+// // }
+// // }
+// // }
+
+// // return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+// // }
+
+// // export async function GET() {
+// // const posts = await getPosts();
+// // return json(posts);
+// // }
+
+// import { json } from '@sveltejs/kit';
+// import type { BlogPost } from '$lib/types/blog';
+
+// async function getPosts() {
+// let posts: BlogPost[] = [];
+
+// const paths = import.meta.glob('/src/content/*.md', { eager: true });
+
+// for (const path in paths) {
+// const file = paths[path];
+// const slug = path.split('/').at(-1)?.replace('.md', '');
+
+// if (file && typeof file === 'object' && 'metadata' in file && slug) {
+// const metadata = file.metadata as Omit;
+// const post = { ...metadata, slug } satisfies BlogPost;
+// post.published && posts.push(post);
+// }
+// }
+
+// posts = posts.sort(
+// (first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
+// );
+
+// return posts;
+// }
+
+// export async function GET() {
+// const posts = await getPosts();
+// return json(posts);
+// }
diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
index 23ac302..8fca76d 100644
--- a/src/routes/blog/+page.server.ts
+++ b/src/routes/blog/+page.server.ts
@@ -1,7 +1,7 @@
-import { listBlogPosts } from '$content/blog';
+import { listPosts } from '$content/blog';
export const load = async () => {
return {
- posts: listBlogPosts(),
+ posts: listPosts()
};
};
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 4c13268..dbb0034 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,59 +1,14 @@
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 6f4799f..a4ffd85 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -14,7 +14,7 @@
>
{#each data.projects as post}
diff --git a/src/routes/projects/[slug]/+page.svelte b/src/routes/projects/[slug]/+page.svelte
index 1df7eb5..a7ae0ba 100644
--- a/src/routes/projects/[slug]/+page.svelte
+++ b/src/routes/projects/[slug]/+page.svelte
@@ -5,6 +5,6 @@
export let data: PageData;
-
{#if tags && tags.length > 0}
+
-
- - - diff --git a/src/lib/components/blog/PostPreview.svelte b/src/lib/components/blog/PostPreview.svelte index 8754aab..9e8080f 100644 --- a/src/lib/components/blog/PostPreview.svelte +++ b/src/lib/components/blog/PostPreview.svelte @@ -1,15 +1,28 @@ -
+
diff --git a/src/lib/config.ts b/src/lib/config.ts
index e073f29..26086be 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -11,7 +11,7 @@ export const github = 'https://github.com/matthieu42morin';
// prettier-ignore
export const socialLinks = [
- { title: 'LinkedIn', href: 'https://www.linkedin.com/in/matthieu-morin-7524731a9/', icon: 'fa-brands fa-linkedin'},
+ { title: 'LinkedIn', href: 'https://linkedin.com/in/mattmor-in', icon: 'fa-brands fa-linkedin'},
{ title: 'Matrix', href: '', icon: './MatrixLogo' },
{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
{ title: 'Mastodon', href: 'https://mastodon.social/@matt_mor', icon: 'fa-brands fa-mastodon'},
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..7d93ace
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,6 @@
+export const cookies = {
+ NECESSARY: 'mattmor-necessary',
+ ANALYTICAL: 'mattmor-analytical',
+ TARGETING: 'mattmor-targeting',
+ VISITED: 'mattmor-marketing-website-visited'
+};
diff --git a/src/lib/images.ts b/src/lib/images.ts
new file mode 100644
index 0000000..fe0161f
--- /dev/null
+++ b/src/lib/images.ts
@@ -0,0 +1,29 @@
+type ImageLinkArgs = {
+ /** Image ID */
+ id: ImageKey;
+ /** Image Height */
+ h: number;
+ /** Image Width */
+ w: number;
+ /** Adds the fit=max query param */
+ max?: boolean;
+};
+
+export function getImageLink({ id, h, w, max }: ImageLinkArgs): string {
+ const path = images[id].raw;
+ return `${path}&w=${w}&h=${h}&auto=format&fit=${max ? 'max' : 'crop'}`;
+}
+
+type ImageKey = keyof typeof images;
+
+export const images = {
+ oboci: {
+ raw: '/images/services/oboci.jpg'
+ },
+ linky: {
+ raw: 'https://images.unsplash.com/photo-1510111652602-195fc654aa83?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY0Nzl8&ixlib=rb-4.0.3&w=48&h=48&auto=format&fit=crop'
+ },
+ 'classic-linky': {
+ raw: 'https://images.unsplash.com/photo-1617296537916-291a105cd2f4?ixid=M3w0Njc5ODF8MHwxfGFsbHx8fHx8fHx8fDE2ODc5NzY1MTl8&ixlib=rb-4.0.3'
+ }
+};
diff --git a/src/lib/types/categories.d.ts b/src/lib/types/categories.d.ts
deleted file mode 100644
index 69bb702..0000000
--- a/src/lib/types/categories.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type categories = 'sveltekit' | 'svelte';
diff --git a/src/lib/types/blog.d.ts b/src/lib/types/post.d.ts
similarity index 58%
rename from src/lib/types/blog.d.ts
rename to src/lib/types/post.d.ts
index 9422890..296f347 100644
--- a/src/lib/types/blog.d.ts
+++ b/src/lib/types/post.d.ts
@@ -1,18 +1,17 @@
import type { MarkdownMetadata } from '$content/types';
-export type BlogTag = 'DevOps' | 'AI' | 'Updates' | '';
+export type Tag = 'DevOps' | 'Philosophy' | 'Updates' | '';
-export interface BlogPost extends MarkdownMetadata {
- author?: string;
+export interface Post extends MarkdownMetadata {
+ type?: 'Blog' | 'projects' | string;
date?: string;
excerpt: string;
image: string;
slug?: string;
href?: string;
- tags?: BlogTag[];
+ tags?: Tag[];
subtitle?: string;
teaserImage: string;
title: string;
isNotAnActualPost?: boolean;
- type?: string;
}
diff --git a/src/lib/types/projects.d.ts b/src/lib/types/projects.d.ts
deleted file mode 100644
index 20b6650..0000000
--- a/src/lib/types/projects.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { MarkdownMetadata } from '$content/types';
-
-export interface Project extends MarkdownMetadata {
- title: string;
- excerpt: string;
- slug: string;
- image: string;
- date: string;
- pageTitle: string;
- pageDescription: string;
- keywords: string;
-}
diff --git a/src/lib/utils/highlight_old.js b/src/lib/utils/highlight_old.js
new file mode 100644
index 0000000..9d8af9d
--- /dev/null
+++ b/src/lib/utils/highlight_old.js
@@ -0,0 +1,45 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-docker.min.js';
+import 'prismjs/components/prism-bash.min.js';
+import 'prismjs/components/prism-yaml.min.js';
+import 'prismjs/components/prism-javascript.min.js';
+import 'prismjs/components/prism-json.min.js';
+import 'prismjs/components/prism-markdown.min.js';
+import 'prismjs/components/prism-sql.min.js';
+import 'prismjs/components/prism-toml.min.js';
+import 'prismjs/components/prism-promql.min.js';
+import 'prismjs/components/prism-go.min.js';
+import 'prismjs/components/prism-typescript.min.js';
+import 'prismjs/components/prism-python.min.js';
+import { escapeSvelte } from 'mdsvex';
+
+const langMap = {
+ sh: 'bash',
+ Dockerfile: 'dockerfile',
+ YAML: 'yaml'
+};
+
+/**
+ *
+ * @param {string} code the code that gets parsed
+ * @param {string} lang the language the code is written in
+ * @param {string} meta meta information for the code fence
+ * @returns {string}
+ */
+export function highlightCode(code, lang, meta) {
+ let title = null;
+ const _lang = langMap[lang] || lang || '';
+
+ if (meta) {
+ title = meta.match(/title="?(.*?)"/)?.[1];
+ }
+
+ const highlighted = _lang
+ ? escapeSvelte(Prism.highlight(code, Prism.languages[_lang], _lang))
+ : code;
+ return `} - highlighted html
+ */
+async function highlighter(code, lang, meta) {
+ const shikiHighlighter = await getHighlighter({
+ theme: 'github-dark'
+ });
+ const html = escapeSvelte(
+ shikiHighlighter.codeToHtml(code, {
+ lang
+ })
+ );
+ return `{@html \`${html}\` }`;
+}
+
+// /**
+// * Returns code with curly braces and backticks replaced by HTML entity equivalents
+// * @param {string} html - highlighted HTML
+// * @returns {string} - escaped HTML
+// */
+// function escapeHtml(code) {
+// return code.replace(
+// /[{}`]/g,
+// (character) => ({ '{': '{', '}': '}', '`': '`' }[character]),
+// );
+// }
+
+export default highlighter;
diff --git a/src/lib/utils/highlighter_old2.js b/src/lib/utils/highlighter_old2.js
new file mode 100644
index 0000000..f146e92
--- /dev/null
+++ b/src/lib/utils/highlighter_old2.js
@@ -0,0 +1,159 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-docker.min.js';
+import 'prismjs/components/prism-bash.min.js';
+import 'prismjs/components/prism-yaml.min.js';
+import 'prismjs/components/prism-javascript.min.js';
+import 'prismjs/components/prism-json.min.js';
+import 'prismjs/components/prism-markdown.min.js';
+import 'prismjs/components/prism-sql.min.js';
+import 'prismjs/components/prism-toml.min.js';
+import 'prismjs/components/prism-promql.min.js';
+import 'prismjs/components/prism-go.min.js';
+import 'prismjs/components/prism-typescript.min.js';
+import 'prismjs/components/prism-python.min.js';
+import { escapeSvelte } from 'mdsvex';
+
+export function highlightCode(code, lang) {
+ if (!Prism.languages[lang]) {
+ // Fallback to plaintext if the language isn't supported
+ return code;
+ }
+ const highlighted = escapeSvelte(Prism.highlight(code, Prism.languages[lang], lang));
+ return `} - A string representation of a CodeBlock component.
+// */
+// const customHighlighter = async (code = '', lang = '') => {
+// let highlightedCode = '';
+// // Enable debugMode or safeMode depending on the environment
+// // if (process.env.NODE_ENV === 'development') {
+// // hljs.debugMode();
+// // } else if (process.env.NODE_ENV === 'production') {
+// // hljs.safeMode();
+// // }
+// try {
+// // Use the highlight function from the hljs API
+// highlightedCode = hljs.highlight(lang || '', code).value;
+// } catch (error) {
+// console.error('Error in highlighting:', error);
+// highlightedCode = code;
+// };
+// // Return the CodeBlock component
+// return `
diff --git a/src/routes/about-me/+page.svelte b/src/routes/about-me/+page.svelte
new file mode 100644
index 0000000..37b04b9
--- /dev/null
+++ b/src/routes/about-me/+page.svelte
@@ -0,0 +1,3 @@
+
tags: {#each tags as tag}
@@ -52,17 +53,11 @@
{title}
-
+
+ +
- - - diff --git a/src/lib/components/blog/PostPreview.svelte b/src/lib/components/blog/PostPreview.svelte index 8754aab..9e8080f 100644 --- a/src/lib/components/blog/PostPreview.svelte +++ b/src/lib/components/blog/PostPreview.svelte @@ -1,15 +1,28 @@ -
${code}
+
{:else}
- 
+
+
- 404
+
+
+ 404
You just hit a route that doesn't exist
++ ? My God, what are you doing here, this page doesn't exist and so on and so on. +
+ {sth}{$page.status}
@@ -19,8 +30,10 @@{$page.error.message}
{/if} -Sorry! Maybe try one of these links?
+Sorry! A grave error has occured. Maybe try one of these links?
{/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 359a098..ab4a9a0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -109,7 +109,7 @@ target="_blank" rel="cv" > - Download my CV + Get my CVThere is nothing to see yet
+In the beginning the universe was created. +This has made a lot of people very angry and has widely been regarded as a bad move \ No newline at end of file diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte deleted file mode 100644 index e02a5ca..0000000 --- a/src/routes/about/+page.svelte +++ /dev/null @@ -1 +0,0 @@ -There is nothing to see yet
diff --git a/src/routes/api/posts/+server.ts b/src/routes/api/posts/+server.ts new file mode 100644 index 0000000..df3f05e --- /dev/null +++ b/src/routes/api/posts/+server.ts @@ -0,0 +1,56 @@ +// // import type { Post } from '$lib/types/post'; +// // import { json } from '@sveltejs/kit'; + +// // async function getPosts(): Promise
-
{/each}
+
+ Sentry Onboarding
+
+
+
+
+
+
+
+
diff --git a/src/routes/sentry-example/+server.js b/src/routes/sentry-example/+server.js
new file mode 100644
index 0000000..beec959
--- /dev/null
+++ b/src/routes/sentry-example/+server.js
@@ -0,0 +1,6 @@
+// This is just a very simple API route that throws an example error.
+// Feel free to delete this file and the entire sentry route.
+
+export const GET = async () => {
+ throw new Error("Sentry Example API Route Error");
+};
diff --git a/src/routes/sitemap.xml/+server.ts b/src/routes/sitemap.xml/+server.ts
index 0fe9195..4f68590 100644
--- a/src/routes/sitemap.xml/+server.ts
+++ b/src/routes/sitemap.xml/+server.ts
@@ -1,5 +1,5 @@
import { removeTrailingSlash } from '$lib/utils/helpers';
-import { listBlogPosts } from '$content/blog';
+import { listPosts } from '$content/blog';
// prettier-ignore
const sitemap = (pages: string[]) => `
@@ -44,8 +44,8 @@ export const GET = async () => {
.replace('/+page', '');
});
- const blogPosts = listBlogPosts().map((post) => `https://www.mattmor.in/blog/${post.slug}`);
- const renderedSitemap = sitemap([...staticPages, ...blogPosts]);
+ const Posts = listPosts().map((post) => `https://www.mattmor.in/blog/${post.slug}`);
+ const renderedSitemap = sitemap([...staticPages, ...Posts]);
return new Response(renderedSitemap, {
headers: {
diff --git a/static/animations/travolta_confused.webp b/static/animations/travolta_confused.webp
new file mode 100644
index 0000000..25813ba
Binary files /dev/null and b/static/animations/travolta_confused.webp differ
diff --git a/static/images/blog/first-posthey/Feature.jpg b/static/images/blog/first-posthey/Feature.jpg
new file mode 100644
index 0000000..4c59b98
Binary files /dev/null and b/static/images/blog/first-posthey/Feature.jpg differ
diff --git a/static/images/blog/first-posthey/Feature.png b/static/images/blog/first-posthey/Feature.png
new file mode 100644
index 0000000..e69de29
diff --git a/static/images/blog/postwa/Feature.jpg b/static/images/blog/postwa/Feature.jpg
new file mode 100644
index 0000000..4c59b98
Binary files /dev/null and b/static/images/blog/postwa/Feature.jpg differ
diff --git a/static/images/profile-pic.png b/static/images/profile-pic.png
index da7a4c9..a34997c 100644
Binary files a/static/images/profile-pic.png and b/static/images/profile-pic.png differ
diff --git a/static/images/projects/erant/Feature.jpg b/static/images/projects/erant/Feature.jpg
new file mode 100644
index 0000000..4c59b98
Binary files /dev/null and b/static/images/projects/erant/Feature.jpg differ
diff --git a/static/images/projects/seedling/Feature.jpg b/static/images/projects/seedling/Feature.jpg
new file mode 100644
index 0000000..4c59b98
Binary files /dev/null and b/static/images/projects/seedling/Feature.jpg differ
diff --git a/svelte.config.js b/svelte.config.js
index ebc9d3a..9c59379 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,11 @@
-import adapter from '@sveltejs/adapter-cloudflare';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
-// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvexGlobalComponents.js/index.js';
+// config extensions
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
-/* Not using
-// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvex-global-components.js';
-
+import cspDirectives from './csp-directives.js';
/** @type {import('@sveltejs/kit').Config} */
const config = {
@@ -16,10 +13,7 @@ const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: [
- preprocess({
- postcss: true
- }),
- vitePreprocess(),
+ preprocess({ postcss: true }),
// No neeed rn unless using mdsvex highlighter with svelte components
//mdsvexGlobalComponents({
@@ -38,8 +32,12 @@ const config = {
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
- adapter: adapter({}),
- // sometimes problems with
+ adapter: adapter({
+ out: 'build',
+ precompress: false
+ }),
+
+ // Aliases need tsconfig explicit inclusion
alias: {
$lib: './src/lib',
$root: './',
@@ -47,15 +45,14 @@ const config = {
$routes: './src/routes',
$content: './src/content'
},
- // TODO: FIX Banning external malware scripts for security and privacy of users, threw errors,
- // csp: {
- // directives: {
- // 'script-src': ['self']
- // },
- // reportOnly: {
- // 'script-src': ['self']
- // }
- // },
+ paths: {
+ assets: 'https://',
+ }
+ // protect against XSS and others, using cloudflare endpoint
+ csp: {
+ mode: 'auto',
+ directives: cspDirectives
+ },
csrf: {
checkOrigin: process.env.NODE_ENV === 'development' ? false : true
},
diff --git a/tests-examples/demo-todo-app.spec.ts b/tests-examples/demo-todo-app.spec.ts
new file mode 100644
index 0000000..2fd6016
--- /dev/null
+++ b/tests-examples/demo-todo-app.spec.ts
@@ -0,0 +1,437 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+ await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+ 'buy some cheese',
+ 'feed the cat',
+ 'book a doctors appointment'
+];
+
+test.describe('New Todo', () => {
+ test('should allow me to add todo items', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create 1st todo.
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ // Make sure the list only has one todo item.
+ await expect(page.getByTestId('todo-title')).toHaveText([
+ TODO_ITEMS[0]
+ ]);
+
+ // Create 2nd todo.
+ await newTodo.fill(TODO_ITEMS[1]);
+ await newTodo.press('Enter');
+
+ // Make sure the list now has two todo items.
+ await expect(page.getByTestId('todo-title')).toHaveText([
+ TODO_ITEMS[0],
+ TODO_ITEMS[1]
+ ]);
+
+ await checkNumberOfTodosInLocalStorage(page, 2);
+ });
+
+ test('should clear text input field when an item is added', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create one todo item.
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ // Check that input is empty.
+ await expect(newTodo).toBeEmpty();
+ await checkNumberOfTodosInLocalStorage(page, 1);
+ });
+
+ test('should append new items to the bottom of the list', async ({ page }) => {
+ // Create 3 items.
+ await createDefaultTodos(page);
+
+ // create a todo count locator
+ const todoCount = page.getByTestId('todo-count')
+
+ // Check test using different methods.
+ await expect(page.getByText('3 items left')).toBeVisible();
+ await expect(todoCount).toHaveText('3 items left');
+ await expect(todoCount).toContainText('3');
+ await expect(todoCount).toHaveText(/3/);
+
+ // Check all items in one call.
+ await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+});
+
+test.describe('Mark all as completed', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test.afterEach(async ({ page }) => {
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should allow me to mark all items as completed', async ({ page }) => {
+ // Complete all todos.
+ await page.getByLabel('Mark all as complete').check();
+
+ // Ensure all todos have 'completed' class.
+ await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+ });
+
+ test('should allow me to clear the complete state of all items', async ({ page }) => {
+ const toggleAll = page.getByLabel('Mark all as complete');
+ // Check and then immediately uncheck.
+ await toggleAll.check();
+ await toggleAll.uncheck();
+
+ // Should be no completed classes.
+ await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
+ });
+
+ test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+ const toggleAll = page.getByLabel('Mark all as complete');
+ await toggleAll.check();
+ await expect(toggleAll).toBeChecked();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+ // Uncheck first todo.
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ await firstTodo.getByRole('checkbox').uncheck();
+
+ // Reuse toggleAll locator and make sure its not checked.
+ await expect(toggleAll).not.toBeChecked();
+
+ await firstTodo.getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+ // Assert the toggle all is checked again.
+ await expect(toggleAll).toBeChecked();
+ });
+});
+
+test.describe('Item', () => {
+
+ test('should allow me to mark items as complete', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create two items.
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ // Check first item.
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ await firstTodo.getByRole('checkbox').check();
+ await expect(firstTodo).toHaveClass('completed');
+
+ // Check second item.
+ const secondTodo = page.getByTestId('todo-item').nth(1);
+ await expect(secondTodo).not.toHaveClass('completed');
+ await secondTodo.getByRole('checkbox').check();
+
+ // Assert completed class.
+ await expect(firstTodo).toHaveClass('completed');
+ await expect(secondTodo).toHaveClass('completed');
+ });
+
+ test('should allow me to un-mark items as complete', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // Create two items.
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ const firstTodo = page.getByTestId('todo-item').nth(0);
+ const secondTodo = page.getByTestId('todo-item').nth(1);
+ const firstTodoCheckbox = firstTodo.getByRole('checkbox');
+
+ await firstTodoCheckbox.check();
+ await expect(firstTodo).toHaveClass('completed');
+ await expect(secondTodo).not.toHaveClass('completed');
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ await firstTodoCheckbox.uncheck();
+ await expect(firstTodo).not.toHaveClass('completed');
+ await expect(secondTodo).not.toHaveClass('completed');
+ await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+ });
+
+ test('should allow me to edit an item', async ({ page }) => {
+ await createDefaultTodos(page);
+
+ const todoItems = page.getByTestId('todo-item');
+ const secondTodo = todoItems.nth(1);
+ await secondTodo.dblclick();
+ await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]);
+ await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ // Explicitly assert the new text value.
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2]
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+});
+
+test.describe('Editing', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should hide other controls when editing', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item').nth(1);
+ await todoItem.dblclick();
+ await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+ await expect(todoItem.locator('label', {
+ hasText: TODO_ITEMS[1],
+ })).not.toBeVisible();
+ await checkNumberOfTodosInLocalStorage(page, 3);
+ });
+
+ test('should save edits on blur', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2],
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+
+ test('should trim entered text', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages ');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ 'buy some sausages',
+ TODO_ITEMS[2],
+ ]);
+ await checkTodosInLocalStorage(page, 'buy some sausages');
+ });
+
+ test('should remove the item if an empty text string was entered', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+ await expect(todoItems).toHaveText([
+ TODO_ITEMS[0],
+ TODO_ITEMS[2],
+ ]);
+ });
+
+ test('should cancel edits on escape', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).dblclick();
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+ await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape');
+ await expect(todoItems).toHaveText(TODO_ITEMS);
+ });
+});
+
+test.describe('Counter', () => {
+ test('should display the current number of todo items', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ // create a todo count locator
+ const todoCount = page.getByTestId('todo-count')
+
+ await newTodo.fill(TODO_ITEMS[0]);
+ await newTodo.press('Enter');
+
+ await expect(todoCount).toContainText('1');
+
+ await newTodo.fill(TODO_ITEMS[1]);
+ await newTodo.press('Enter');
+ await expect(todoCount).toContainText('2');
+
+ await checkNumberOfTodosInLocalStorage(page, 2);
+ });
+});
+
+test.describe('Clear completed button', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ });
+
+ test('should display the correct text', async ({ page }) => {
+ await page.locator('.todo-list li .toggle').first().check();
+ await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
+ });
+
+ test('should remove completed items when clicked', async ({ page }) => {
+ const todoItems = page.getByTestId('todo-item');
+ await todoItems.nth(1).getByRole('checkbox').check();
+ await page.getByRole('button', { name: 'Clear completed' }).click();
+ await expect(todoItems).toHaveCount(2);
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+ });
+
+ test('should be hidden when there are no items that are completed', async ({ page }) => {
+ await page.locator('.todo-list li .toggle').first().check();
+ await page.getByRole('button', { name: 'Clear completed' }).click();
+ await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
+ });
+});
+
+test.describe('Persistence', () => {
+ test('should persist its data', async ({ page }) => {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ for (const item of TODO_ITEMS.slice(0, 2)) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+
+ const todoItems = page.getByTestId('todo-item');
+ const firstTodoCheck = todoItems.nth(0).getByRole('checkbox');
+ await firstTodoCheck.check();
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+ await expect(firstTodoCheck).toBeChecked();
+ await expect(todoItems).toHaveClass(['completed', '']);
+
+ // Ensure there is 1 completed item.
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ // Now reload.
+ await page.reload();
+ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+ await expect(firstTodoCheck).toBeChecked();
+ await expect(todoItems).toHaveClass(['completed', '']);
+ });
+});
+
+test.describe('Routing', () => {
+ test.beforeEach(async ({ page }) => {
+ await createDefaultTodos(page);
+ // make sure the app had a chance to save updated todos in storage
+ // before navigating to a new view, otherwise the items can get lost :(
+ // in some frameworks like Durandal
+ await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+ });
+
+ test('should allow me to display active items', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item');
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Active' }).click();
+ await expect(todoItem).toHaveCount(2);
+ await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+ });
+
+ test('should respect the back button', async ({ page }) => {
+ const todoItem = page.getByTestId('todo-item');
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+ await test.step('Showing all items', async () => {
+ await page.getByRole('link', { name: 'All' }).click();
+ await expect(todoItem).toHaveCount(3);
+ });
+
+ await test.step('Showing active items', async () => {
+ await page.getByRole('link', { name: 'Active' }).click();
+ });
+
+ await test.step('Showing completed items', async () => {
+ await page.getByRole('link', { name: 'Completed' }).click();
+ });
+
+ await expect(todoItem).toHaveCount(1);
+ await page.goBack();
+ await expect(todoItem).toHaveCount(2);
+ await page.goBack();
+ await expect(todoItem).toHaveCount(3);
+ });
+
+ test('should allow me to display completed items', async ({ page }) => {
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Completed' }).click();
+ await expect(page.getByTestId('todo-item')).toHaveCount(1);
+ });
+
+ test('should allow me to display all items', async ({ page }) => {
+ await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+ await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+ await page.getByRole('link', { name: 'Active' }).click();
+ await page.getByRole('link', { name: 'Completed' }).click();
+ await page.getByRole('link', { name: 'All' }).click();
+ await expect(page.getByTestId('todo-item')).toHaveCount(3);
+ });
+
+ test('should highlight the currently applied filter', async ({ page }) => {
+ await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');
+
+ //create locators for active and completed links
+ const activeLink = page.getByRole('link', { name: 'Active' });
+ const completedLink = page.getByRole('link', { name: 'Completed' });
+ await activeLink.click();
+
+ // Page change - active items.
+ await expect(activeLink).toHaveClass('selected');
+ await completedLink.click();
+
+ // Page change - completed items.
+ await expect(completedLink).toHaveClass('selected');
+ });
+});
+
+async function createDefaultTodos(page: Page) {
+ // create a new todo locator
+ const newTodo = page.getByPlaceholder('What needs to be done?');
+
+ for (const item of TODO_ITEMS) {
+ await newTodo.fill(item);
+ await newTodo.press('Enter');
+ }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+ return await page.waitForFunction(e => {
+ return JSON.parse(localStorage['react-todos']).length === e;
+ }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+ return await page.waitForFunction(e => {
+ return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+ }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+ return await page.waitForFunction(t => {
+ return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+ }, title);
+}
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
new file mode 100644
index 0000000..821a748
--- /dev/null
+++ b/tests/example.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+ await page.goto('/');
+
+ // Expect a title "to contain" a substring.
+ await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+ await page.goto('/');
+
+ // Click the Look at my code link.
+ await page.getByRole('link', { name: 'Look at my code' }).click();
+ // Click the get cv link.
+ await page.getByRole('link', { name: 'Get my CV' }).click();
+
+ // Expects page to have a heading with the name of Installation.
+ await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});
+
+// Blog tests
+test('Blog tests', async ({ page }) => {
+ await page.goto('/blog');
+ await page.click('a[href="/about"]');
+ expect(page.url()).toBe('http://localhost:513/about');
+});
+
+beforeAll(async () => {
+ browser = await chromium.launch();
+});
+
+afterAll(async () => {
+ await browser.close();
+});
+
+beforeEach(async () => {
+ page = await browser.newPage();
+ await page.goto('http://localhost:5000/skills'); // replace with the URL of your skills page
+});
+
+afterEach(async () => {
+ await page.close();
+});
+
+it('should display the correct skill levels', async () => {
+ const skills = await page.$$eval('.chip', (elements) => elements.map((el) => el.textContent));
+ for (const skill of skills) {
+ expect(skill).toMatch(/^(Proficient|Experienced|Limited Experience):/);
+ }
+});
diff --git a/tsconfig.json b/tsconfig.json
index fd10935..a5bc2aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,18 @@
"resolveJsonModule": true,
"sourceMap": true
},
- "include": ["./scripts/**/*", "./test/*.js", "./*.js", "mdsvex.config.ts", "svelte.config.ts"],
+ "include": [
+ "./scripts/**/*",
+ "./test/*.js",
+ "./*.js",
+ "./src/**/*.d.ts",
+ "./src/**/*.js",
+ "./src/**/*.svelte",
+ "./src/**/*.ts",
+ ".svelte-kit/ambient.d.ts",
+ ".svelte-kit/types/**/$types.d.ts",
+ "csp-directives.ts"
+ ],
"exclude": ["node_modules/*"]
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
diff --git a/vite.config.ts b/vite.config.ts
index 1303c4b..a5b83ba 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,4 @@
+import { sentrySvelteKit } from '@sentry/sveltekit';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
@@ -11,9 +12,15 @@ export default defineConfig({
},
build: {
// to resolve https://github.com/vitejs/vite/issues/6985
- target: 'esnext',
+ target: 'esnext'
},
plugins: [
+ sentrySvelteKit({
+ sourceMapsUploadOptions: {
+ org: process.env.SENTRY_ORG,
+ project: process.env.SENTRY_PROJECT
+ }
+ }),
sveltekit(),
purgeCss({
safelist: {
+ +
++ Get Started with this simple Example: +
+ +1. Send us a sample error:
+ + ++ 2. Look for the error on the + Issues Page. +
++ For more information, take a look at the + + Sentry SvelteKit Documentation + +
+