Welcome to my custom homepage!
22 |This is where you can introduce yourself and your work.
23 |
30 |
31 | {% include "_giscus_script.html" %}
32 | {% endif %}
33 |
10 | {% block left_content %}
11 | {% endblock left_content %}
12 |
13 |
14 |
15 | {% include "partials/nav.html" %}
16 |
17 | {# Post page is the default #}
18 | {% block main_content %}
19 | Nothing here?!
20 | {% endblock main_content %}
21 |
22 | {% if page.extra.comment is defined %}
23 | {% set show_comment = page.extra.comment %}
24 | {% else %}
25 | {% set show_comment = false %}
26 | {% endif %}
27 |
28 | {% if show_comment %}
29 |
34 |
35 |
36 | {% block right_content %}
37 | {% endblock right_content %}
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/templates/homepage.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 |
3 | {% macro home_page(section) %}
4 |  }})
6 | {% elif icon_svg %}
7 | {{ icon_svg | safe }}
8 | {% endif %}
9 | {{ text }}
10 |
11 | {% else %}
12 |
16 | {% if icon %}
17 |
18 | {% elif icon_svg %}
19 | {{ icon_svg | safe }}
20 | {% endif %}
21 | {{ text }}
22 |
23 | {% endif %}
24 | {% endmacro icon_button %}
25 |
--------------------------------------------------------------------------------
/templates/macros/macros.html:
--------------------------------------------------------------------------------
1 | {% macro list_post(page) %}
2 |
5 |
6 |
7 |
33 |
8 |
32 | 9 | {{ page.title }} 10 | 11 | {% if page.draft %} 12 | DRAFT 13 | {% endif %} 14 |
15 | 16 | 31 |-
39 | {%- for page in pages %}
40 | {{ post_macros::list_post(page=page) }}
41 | {% endfor -%}
42 |
48 | {{ title }}
49 |
50 | {% endif %}
51 | {% endmacro page_header %}
52 |
53 | {% macro site_title() %}
54 | {{ config.title | default(value="Home") }}
55 | {% endmacro %}
56 |
--------------------------------------------------------------------------------
/templates/page.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 |
3 | {% macro content(page) %}
4 |
5 |
6 |
7 |
83 | {{ page.content | safe }}
84 |
85 |
86 |
87 |
88 | {% endmacro content %}
89 |
90 |
91 | {% block main_content %}
92 | {{ self::content(page=page) }}
93 | {% endblock main_content %}
94 |
95 | {% block right_content %}
96 | {# Optional table of contents #}
97 | {% if config.extra.toc | default(value=false) and page.toc %}
98 | {% include "partials/toc.html" %}
99 | {% endif %}
100 | {% endblock right_content %}
101 |
--------------------------------------------------------------------------------
/templates/partials/nav.html:
--------------------------------------------------------------------------------
1 |
98 |
--------------------------------------------------------------------------------
/templates/partials/toc.html:
--------------------------------------------------------------------------------
1 |
8 | {#
74 |
75 | {% if page.extra.tldr %}
76 | {{ page.title }}
#} 9 | {{ post_macros::page_header(title=page.title) }} 10 | 11 | 73 |
77 | tl;dr:
78 | {{ page.extra.tldr }}
79 |
80 | {% endif %}
81 |
82 |
2 |
35 |
--------------------------------------------------------------------------------
/templates/section.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 |
3 | {% block main_content %}
4 | {% if section.extra.section_path -%}
5 | {% set section = get_section(path=section.extra.section_path) %}
6 | {% endif -%}
7 |
8 | {% block title %}
9 | {{ post_macros::page_header(title=section.title) }}
10 | {% endblock title %}
11 |
12 | {% if section.content %}
13 |
3 | Table of Contents
4 |
5 | -
6 | {% for h1 in page.toc %}
7 |
-
8 | {% set h1_index = loop.index %}
9 | {{ h1.title }}
10 |
11 | {% if h1.children %}
12 |
-
13 | {% for h2 in h1.children %}
14 | {% set h2_index = loop.index %}
15 |
- 16 | {{ h2.title }} 17 | 18 | 19 | {% if h2.children %} 20 |
- 23 | {{ h3.title }} 24 | 25 | {% endfor %} 26 |
-
21 | {% for h3 in h2.children %}
22 |
32 | {% endfor %}
33 |
14 | {{ section.content | safe }}
15 |
16 | {% endif %}
17 |
18 | {% block post_list %}
19 | -
32 | {% if paginator.previous %}
33 |
34 |
35 |
36 | {% endif %}
37 |
38 | {% if paginator.next %}
39 |
40 |
41 |
42 | {% endif %}
43 |
8 |
29 |
--------------------------------------------------------------------------------
/templates/shortcodes/image.html:
--------------------------------------------------------------------------------
1 | {% set image_meta = get_image_metadata(path=path) %}
2 |
3 | {% set width = width | default(value=image_meta.width) %}
4 | {% set height = width | default(value=image_meta.height) %}
5 | {% set op = op | default(value='fit_width') %}
6 | {% set format = format | default(value='avif') %}
7 | {% set quality = quality | default(value=80) %}
8 | {% set img = resize_image(path=path, width=width, height=height, op=op, format=format, quality=quality) %}
9 |
10 | {% set loading = loading | default(value='lazy') %}
11 | {% set decoding = decoding | default(value='async') %}
12 | {% set style = style | default(value='') %}
13 |
9 | {% if character_image and character_image != "" %}
10 |  }})
14 | {% elif character_name == "hooded" %}
15 |  }})
19 | {% else %}
20 | {{ character_name }}
21 | {% endif %}
22 |
23 |
19 | {% else %}
20 | {{ character_name }}
21 | {% endif %}
22 |
24 |
28 |
25 | {{ character_text | markdown | safe }}
26 |
27 |
4 | {{ body | safe }}
5 |
6 |
--------------------------------------------------------------------------------
/templates/shortcodes/note.html:
--------------------------------------------------------------------------------
1 |
2 | {% if clickable | default(value=false) %}
3 |
14 |
15 | {% if hidden | default(value=false) %}
16 |
39 |
--------------------------------------------------------------------------------
/templates/taxonomy_list.html:
--------------------------------------------------------------------------------
1 | {% extends "base.html" %}
2 |
3 | {% block main_content %}
4 |
15 | {{ post_macros::list_posts(pages=pages) }}
16 |
17 | {% endmacro %}
18 |
19 | {% block main_content %}
20 | {{ self::list_tag_posts(pages=term.pages, tag_name=term.name) }}
21 | {% endblock main_content %}
22 |
--------------------------------------------------------------------------------
/tests/content/blog-posts.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Blog Posts', () => {
4 | test('posts page displays list and individual posts open', async ({ page }) => {
5 | await page.goto('/posts');
6 | await page.waitForLoadState('domcontentloaded');
7 |
8 | // Check for posts listing - posts use list-item class
9 | const posts = page.locator('.list-item, .card');
10 | const postCount = await posts.count();
11 | expect(postCount).toBeGreaterThan(0);
12 |
13 | // Verify post has title and link - title is in h1.title
14 | const titleLink = posts.first().locator('h1.title a, h1.card-title a').first();
15 | await expect(titleLink).toBeVisible();
16 |
17 | // Open first post
18 | await titleLink.click();
19 | await expect(page).toHaveURL(/\/posts\//);
20 |
21 | // Verify post content exists
22 | const content = page.locator('article, main, .content').first();
23 | await expect(content).toBeVisible();
24 |
25 | // Check for content elements
26 | const contentElements = content.locator('p, h1, h2, h3, h4, h5, h6, ul, ol, pre');
27 | expect(await contentElements.count()).toBeGreaterThan(0);
28 | });
29 |
30 | test('post metadata and tags work', async ({ page }) => {
31 | await page.goto('/posts');
32 | await page.waitForLoadState('domcontentloaded');
33 |
34 | const firstPostLink = page.locator('.list-item h1.title a, .card h1.card-title a').first();
35 | await firstPostLink.click();
36 |
37 | // Check for metadata - using .meta class
38 | const metadata = page.locator('.meta, time, .post-date').first();
39 | if (await metadata.isVisible()) {
40 | const text = await metadata.textContent();
41 | if (text) {
42 | expect(text).toMatch(/\d{4}/); // Should contain a year
43 | }
44 | }
45 |
46 | // Test tags if present
47 | const tags = page.locator('.tags a, .tag');
48 | const tagCount = await tags.count();
49 |
50 | if (tagCount > 0) {
51 | const firstTag = tags.first();
52 | await firstTag.click();
53 | await expect(page).toHaveURL(/\/tags\//);
54 | }
55 | });
56 |
57 | test('pagination works correctly', async ({ page }) => {
58 | await page.goto('/posts');
59 | await page.waitForLoadState('domcontentloaded');
60 |
61 | // Look for next link
62 | const nextLink = page.locator('.pagination a, .page-link').filter({ hasText: /next|→/i }).first();
63 |
64 | if (await nextLink.isVisible()) {
65 | await nextLink.click();
66 |
67 | // Should still be on posts page with posts displayed
68 | await expect(page).toHaveURL(/\/posts/);
69 | const posts = page.locator('.list-item, .card');
70 | expect(await posts.count()).toBeGreaterThan(0);
71 | }
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/tests/content/configuration.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Configuration Features', () => {
4 | test.beforeEach(async ({ page }) => {
5 | await page.goto('/');
6 | await page.waitForLoadState('domcontentloaded');
7 | });
8 |
9 | test('search functionality works when enabled', async ({ page }) => {
10 | const searchButton = page.locator('[data-search], .search-button, button:has-text("Search")').first();
11 |
12 | if (await searchButton.isVisible()) {
13 | await searchButton.click();
14 |
15 | const searchModal = page.locator('.search-modal, #search-modal, [role="dialog"]').first();
16 | await expect(searchModal).toBeVisible();
17 |
18 | // Test search input
19 | const modalSearchInput = searchModal.locator('input').first();
20 | await modalSearchInput.fill('test');
21 | }
22 | });
23 |
24 | test('theme switching functionality works', async ({ page }) => {
25 | const themeToggle = page.locator('.theme-toggle, .theme-switcher, button[aria-label*="theme"]').first();
26 |
27 | if (await themeToggle.isVisible()) {
28 | const initialClass = await page.evaluate(() => document.documentElement.className);
29 |
30 | await themeToggle.click();
31 |
32 | const newClass = await page.evaluate(() => document.documentElement.className);
33 | expect(newClass).not.toBe(initialClass);
34 | }
35 | });
36 |
37 | test('table of contents is generated when enabled', async ({ page }) => {
38 | await page.goto('/posts');
39 | await page.waitForLoadState('domcontentloaded');
40 |
41 | const postLinks = page.locator('a[href*="/posts/"]').first();
42 | if (await postLinks.isVisible()) {
43 | await postLinks.click();
44 |
45 | const toc = page.locator('.toc, .table-of-contents, #toc, #table-of-contents').first();
46 |
47 | if (await toc.isVisible()) {
48 | const tocLinks = toc.locator('a');
49 | const linkCount = await tocLinks.count();
50 | expect(linkCount).toBeGreaterThan(0);
51 |
52 | // Test clicking a TOC link
53 | await tocLinks.first().click();
54 | }
55 | }
56 | });
57 |
58 | test('social media links are configured', async ({ page }) => {
59 | const socialLinks = page.locator('a[href*="github"], a[href*="twitter"], a[href*="linkedin"], .social-links a, .socials a');
60 |
61 | if (await socialLinks.count() > 0) {
62 | const firstLink = socialLinks.first();
63 | const href = await firstLink.getAttribute('href');
64 |
65 | expect(href).toBeTruthy();
66 | expect(href).toMatch(/^https?:\/\//);
67 | }
68 | });
69 |
70 | test('RSS feed links are available', async ({ page }) => {
71 | const feedLinks = await page.evaluate(() => {
72 | const links = document.querySelectorAll('link[type*="rss"], link[type*="atom"]');
73 | return Array.from(links).map(link => ({
74 | type: link.getAttribute('type'),
75 | href: link.getAttribute('href'),
76 | }));
77 | });
78 |
79 | if (feedLinks.length > 0) {
80 | const response = await page.request.get(feedLinks[0].href);
81 | expect(response.status()).toBe(200);
82 | }
83 | });
84 | });
85 |
--------------------------------------------------------------------------------
/tests/content/fonts.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Font Loading and Display', () => {
4 | test.beforeEach(async ({ page }) => {
5 | await page.goto('/');
6 | await page.waitForLoadState('domcontentloaded');
7 | });
8 |
9 | test('font files are accessible', async ({ page, request }) => {
10 | const baseUrl = page.url().replace(/\/$/, '');
11 |
12 | // Test critical font files
13 | const fontTests = [
14 | '/fonts/zed-fonts/ZedTextL-Regular.woff2',
15 | '/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf',
16 | ];
17 |
18 | for (const fontPath of fontTests) {
19 | const response = await request.get(`${baseUrl}${fontPath}`);
20 | expect(response.status()).toBe(200);
21 | expect(response.headers()['content-type']).toContain('font');
22 | }
23 | });
24 |
25 | test('code elements use monospace fonts', async ({ page }) => {
26 | // Navigate to a page with code
27 | await page.goto('/posts');
28 | await page.waitForLoadState('domcontentloaded');
29 |
30 | const firstPostLink = page.locator('article a, .post a, .post-title a').first();
31 | if (await firstPostLink.isVisible()) {
32 | await firstPostLink.click();
33 |
34 | const codeElements = page.locator('code, pre').first();
35 | if (await codeElements.count() > 0) {
36 | const codeFontFamily = await codeElements.evaluate(el =>
37 | getComputedStyle(el).fontFamily
38 | );
39 |
40 | // Code should use JetBrains Mono or monospace fallback
41 | expect(codeFontFamily).toMatch(/Jetbrains Mono|monospace/i);
42 | }
43 | }
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/tests/content/pages-and-features.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Pages and Features', () => {
4 | test('homepage loads correctly', async ({ page }) => {
5 | await page.goto('/');
6 | await page.waitForLoadState('domcontentloaded');
7 |
8 | // Homepage should have main content
9 | const main = page.locator('main');
10 | await expect(main).toBeVisible();
11 |
12 | // Should have some content
13 | const content = page.locator('article, .body, main');
14 | await expect(content.first()).toBeVisible();
15 | });
16 |
17 | test('projects page loads and displays projects', async ({ page }) => {
18 | await page.goto('/projects');
19 | await page.waitForLoadState('domcontentloaded');
20 |
21 | // Page should have a heading or main content
22 | const main = page.locator('main');
23 | await expect(main).toBeVisible();
24 |
25 | // Look for project items (cards or list items)
26 | const projects = page.locator('.card, .list-item');
27 | const projectCount = await projects.count();
28 |
29 | if (projectCount > 0) {
30 | // Each project should have a title
31 | const title = projects.first().locator('h1, h2, h3').first();
32 | await expect(title).toBeVisible();
33 | }
34 | });
35 |
36 | test('tags page loads and displays tags', async ({ page }) => {
37 | await page.goto('/tags');
38 | await page.waitForLoadState('domcontentloaded');
39 |
40 | // Page should have main content
41 | const main = page.locator('main');
42 | await expect(main).toBeVisible();
43 |
44 | // Look for tags
45 | const tags = page.locator('a[href*="/tags/"]');
46 | const tagCount = await tags.count();
47 |
48 | if (tagCount > 0) {
49 | expect(tagCount).toBeGreaterThan(0);
50 |
51 | // Tags should be clickable
52 | const firstTag = tags.first();
53 | const href = await firstTag.getAttribute('href');
54 | expect(href).toBeTruthy();
55 | }
56 | });
57 |
58 | test('tag filtering works correctly', async ({ page }) => {
59 | await page.goto('/tags');
60 | await page.waitForLoadState('domcontentloaded');
61 |
62 | const tags = page.locator('a[href*="/tags/"]');
63 | const tagCount = await tags.count();
64 |
65 | if (tagCount > 0) {
66 | const firstTag = tags.first();
67 | await firstTag.click();
68 |
69 | // Should be on a tag-specific page
70 | await expect(page).toHaveURL(/\/tags\//);
71 |
72 | // Should show posts with that tag
73 | const posts = page.locator('.list-item, .card');
74 | const postCount = await posts.count();
75 | expect(postCount).toBeGreaterThan(0);
76 | }
77 | });
78 |
79 | test('search functionality works', async ({ page }) => {
80 | await page.goto('/');
81 | await page.waitForLoadState('domcontentloaded');
82 |
83 | // Click search button to open modal
84 | const searchButton = page.locator('#search-button');
85 | if (await searchButton.isVisible()) {
86 | await searchButton.click();
87 |
88 | // Wait for search modal to appear
89 | const searchModal = page.locator('#searchModal');
90 | await expect(searchModal).toBeVisible();
91 |
92 | // Look for search input in the modal
93 | const searchInput = page.locator('#searchInput');
94 | if (await searchInput.isVisible()) {
95 | await searchInput.fill('test');
96 |
97 | // Should show search results container
98 | const resultsContainer = page.locator('#results-container');
99 | await expect(resultsContainer).toBeVisible();
100 | }
101 | }
102 | });
103 |
104 | test('404 page exists and is functional', async ({ page }) => {
105 | // Try to navigate to a non-existent page
106 | const response = await page.goto('/this-page-does-not-exist');
107 |
108 | if (response) {
109 | // Should return 404 status
110 | expect(response.status()).toBe(404);
111 | }
112 |
113 | await page.waitForLoadState('domcontentloaded');
114 |
115 | // Should show 404 page content
116 | const content = page.locator('main, article, .content').first();
117 | await expect(content).toBeVisible();
118 |
119 | // Should have some indication this is an error page
120 | const text = await page.textContent('body');
121 | expect(text?.toLowerCase()).toMatch(/404|not found|error/);
122 | });
123 |
124 | test('RSS/feed link exists', async ({ page }) => {
125 | await page.goto('/');
126 | await page.waitForLoadState('domcontentloaded');
127 |
128 | // Look for RSS feed link in head
129 | const headFeedLink = await page.locator('link[type="application/rss+xml"], link[type="application/atom+xml"]').count();
130 | const visibleFeedLink = await page.locator('a[href*="rss"], a[href*="feed"], a[href*="atom.xml"]').count();
131 |
132 | expect(headFeedLink + visibleFeedLink).toBeGreaterThan(0);
133 | });
134 | });
135 |
--------------------------------------------------------------------------------
/tests/helpers.ts:
--------------------------------------------------------------------------------
1 | import { Page, expect } from '@playwright/test';
2 |
3 | /**
4 | * Helper functions for common test operations
5 | */
6 |
7 | export class TestHelpers {
8 | constructor(private page: Page) {}
9 |
10 | /**
11 | * Wait for page to be fully loaded and ready
12 | * Optimized version - use domcontentloaded instead of networkidle
13 | */
14 | async waitForPageReady() {
15 | await this.page.waitForLoadState('domcontentloaded');
16 | }
17 |
18 | /**
19 | * Get the current theme from the document
20 | */
21 | async getCurrentTheme(): Promise {
22 | return await this.page.evaluate(() => {
23 | // Apollo uses localStorage to store theme
24 | const theme = localStorage.getItem('theme-storage');
25 | if (theme) return theme;
26 |
27 | // Fallback to class detection
28 | const html = document.documentElement;
29 | if (html.classList.contains('dark')) return 'dark';
30 | if (html.classList.contains('light')) return 'light';
31 | return 'auto';
32 | });
33 | }
34 |
35 | /**
36 | * Click the theme toggle button
37 | */
38 | async toggleTheme() {
39 | const prevTheme = await this.getCurrentTheme();
40 | await this.page.click('#dark-mode-toggle');
41 |
42 | // Wait for the theme to change (class on changes)
43 | await this.page.waitForFunction(
44 | (prev) => {
45 | const html = document.documentElement;
46 | const current = html.classList.contains('dark') ? 'dark' :
47 | html.classList.contains('light') ? 'light' : 'auto';
48 | return current !== prev;
49 | },
50 | prevTheme
51 | );
52 | }
53 |
54 | /**
55 | * Verify navigation menu exists and has expected links
56 | */
57 | async verifyNavigationMenu() {
58 | const nav = this.page.locator('nav');
59 | await expect(nav).toBeVisible();
60 |
61 | // Check for main navigation links
62 | await expect(this.page.locator('nav a[href="/posts"]')).toBeVisible();
63 | await expect(this.page.locator('nav a[href="/projects"]')).toBeVisible();
64 | await expect(this.page.locator('nav a[href="/tags"]')).toBeVisible();
65 | }
66 |
67 | /**
68 | * Verify social media links are present
69 | */
70 | async verifySocialLinks() {
71 | const socialLinks = this.page.locator('.socials .social');
72 | const count = await socialLinks.count();
73 | expect(count).toBeGreaterThan(0);
74 |
75 | // Verify each link has an icon
76 | for (let i = 0; i < count; i++) {
77 | const link = socialLinks.nth(i);
78 | await expect(link.locator('svg, img')).toBeVisible();
79 | }
80 | }
81 |
82 | /**
83 | * Check if table of contents exists on the page
84 | */
85 | async hasTableOfContents(): Promise {
86 | const toc = this.page.locator('.toc, #toc');
87 | return await toc.isVisible();
88 | }
89 |
90 | /**
91 | * Verify table of contents navigation
92 | */
93 | async verifyTableOfContents() {
94 | const hasToc = await this.hasTableOfContents();
95 | if (!hasToc) return;
96 |
97 | const tocLinks = this.page.locator('.toc a, #toc a');
98 | const count = await tocLinks.count();
99 | expect(count).toBeGreaterThan(0);
100 |
101 | // Test first TOC link
102 | if (count > 0) {
103 | const firstLink = tocLinks.first();
104 | const href = await firstLink.getAttribute('href');
105 | expect(href).toMatch(/^#.+/); // Should be an anchor link
106 | }
107 | }
108 |
109 | /**
110 | * Take a screenshot with consistent naming
111 | */
112 | async takeScreenshot(name: string, options: { fullPage?: boolean } = {}) {
113 | const theme = await this.getCurrentTheme();
114 | const screenshotName = `${name}-${theme}.png`;
115 | await this.page.screenshot({
116 | path: `tests/screenshots/${screenshotName}`,
117 | fullPage: options.fullPage || false
118 | });
119 | }
120 |
121 | /**
122 | * Click a TOC link and verify active state
123 | * Optimized version with faster waits
124 | */
125 | async clickTocLinkAndVerifyActive(tocLink: any) {
126 | await tocLink.click();
127 |
128 | // Wait for the link to have the active/current class
129 | await this.page.waitForFunction(
130 | (el) => el && /active|current/i.test(el.className),
131 | await tocLink.elementHandle()
132 | );
133 |
134 | // Verify the link has active styling
135 | const linkClass = await tocLink.getAttribute('class');
136 | if (linkClass) {
137 | expect(linkClass).toMatch(/active|current/i);
138 | }
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/tests/navigation/menu-navigation.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Navigation Menu', () => {
4 | test.beforeEach(async ({ page }) => {
5 | await page.goto('/');
6 | await page.waitForLoadState('domcontentloaded');
7 | });
8 |
9 | test('navigation menu and core links work', async ({ page }) => {
10 | // Verify menu exists
11 | const nav = page.locator('nav');
12 | await expect(nav).toBeVisible();
13 |
14 | // Verify and test main links - be flexible with href matching
15 | const postsLink = page.locator('nav a').filter({ hasText: /posts/i }).first();
16 | await expect(postsLink).toBeVisible();
17 | await postsLink.click();
18 | await expect(page).toHaveURL(/\/posts/);
19 |
20 | // Navigate to projects
21 | await page.locator('nav a').filter({ hasText: /projects/i }).first().click();
22 | await expect(page).toHaveURL(/\/projects/);
23 |
24 | // Navigate to tags
25 | await page.locator('nav a').filter({ hasText: /tags/i }).first().click();
26 | await expect(page).toHaveURL(/\/tags/);
27 | });
28 |
29 | test('social media links are present', async ({ page }) => {
30 | const socialLinks = page.locator('.socials .social');
31 | const count = await socialLinks.count();
32 |
33 | if (count > 0) {
34 | expect(count).toBeGreaterThan(0);
35 |
36 | // Verify first social link has valid href
37 | const firstLink = socialLinks.first();
38 | const href = await firstLink.getAttribute('href');
39 | expect(href).toMatch(/^https?:\/\/.+/);
40 | }
41 | });
42 |
43 | test('responsive navigation on mobile', async ({ page }) => {
44 | await page.setViewportSize({ width: 375, height: 667 });
45 |
46 | // Navigation should still be accessible
47 | const nav = page.locator('nav');
48 | await expect(nav).toBeVisible();
49 |
50 | // Links should still work
51 | const postsLink = page.locator('nav a').filter({ hasText: /posts/i }).first();
52 | if (await postsLink.isVisible()) {
53 | await expect(postsLink).toBeVisible();
54 | }
55 | });
56 | });
57 |
--------------------------------------------------------------------------------
/tests/visual/character-shortcodes-visual.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Visual Regression - Character Shortcodes Post', () => {
4 | test.skip(({ browserName }) => browserName === 'webkit', 'Skip visual tests on Safari mobile due to rendering variability');
5 |
6 | test('character shortcodes post visual comparison - light theme', async ({ page }) => {
7 | test.setTimeout(45000); // Timeout for screenshot
8 |
9 | await page.goto('/posts/character-shortcodes');
10 | await page.waitForLoadState('domcontentloaded');
11 |
12 | // Set to light theme
13 | await page.evaluate(() => {
14 | document.documentElement.className = 'light';
15 | });
16 |
17 | // Wait for theme class to be applied
18 | await page.waitForFunction(() => {
19 | return document.documentElement.className === 'light';
20 | });
21 |
22 | // Wait a moment for CSS to apply
23 | await page.waitForTimeout(500);
24 |
25 | await expect(page).toHaveScreenshot('character-shortcodes-light.png');
26 | });
27 |
28 | test('character shortcodes post visual comparison - dark theme', async ({ page }) => {
29 | test.setTimeout(45000); // Timeout for screenshot
30 |
31 | await page.goto('/posts/character-shortcodes');
32 | await page.waitForLoadState('domcontentloaded');
33 |
34 | // Set to dark theme
35 | await page.evaluate(() => {
36 | document.documentElement.className = 'dark';
37 | });
38 |
39 | // Wait for theme class to be applied
40 | await page.waitForFunction(() => {
41 | return document.documentElement.className === 'dark';
42 | });
43 |
44 | // Wait a moment for CSS to apply
45 | await page.waitForTimeout(500);
46 |
47 | await expect(page).toHaveScreenshot('character-shortcodes-dark.png');
48 | });
49 | });
50 |
--------------------------------------------------------------------------------
/tests/visual/character-shortcodes-visual.spec.ts-snapshots/character-shortcodes-dark-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:032661551cf0a92bc86a9c17dd1464876d8b1b82fcc1148621936eecbc4bd47c
3 | size 39108
4 |
--------------------------------------------------------------------------------
/tests/visual/character-shortcodes-visual.spec.ts-snapshots/character-shortcodes-dark-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7cafb299ab62b42b4fc62ae22bbf895a38fc8d5513bff99def2f1f8ed8cdeed5
3 | size 51907
4 |
--------------------------------------------------------------------------------
/tests/visual/character-shortcodes-visual.spec.ts-snapshots/character-shortcodes-light-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:ca6a3743f47daafd0f3111923907c5a5e0693680a479aa5981a427440164e15b
3 | size 40731
4 |
--------------------------------------------------------------------------------
/tests/visual/character-shortcodes-visual.spec.ts-snapshots/character-shortcodes-light-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:11f127d25f38239b38637a423d025f4115a17421bc431a1fdb674420d6f2fa83
3 | size 52710
4 |
--------------------------------------------------------------------------------
/tests/visual/projects-visual.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Visual Regression - Projects Page', () => {
4 | test.skip(({ browserName }) => browserName === 'webkit', 'Skip visual tests on Safari mobile due to rendering variability');
5 |
6 | test('projects page visual comparison', async ({ page }) => {
7 | test.setTimeout(45000); // Timeout for screenshot
8 |
9 | await page.goto('/projects');
10 | await page.waitForLoadState('domcontentloaded');
11 |
12 | // Set to light theme
13 | await page.evaluate(() => {
14 | document.documentElement.className = 'light';
15 | });
16 |
17 | // Wait for theme class to be applied
18 | await page.waitForFunction(() => {
19 | return document.documentElement.className === 'light';
20 | });
21 |
22 | // Wait a moment for CSS to apply
23 | await page.waitForTimeout(500);
24 |
25 | await expect(page).toHaveScreenshot('projects-page.png');
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/tests/visual/projects-visual.spec.ts-snapshots/projects-page-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c4bf6ed7374fd0ea84f21af75b2d4a9b9d3fb5d38fe85398c1537b6572b34c1a
3 | size 173399
4 |
--------------------------------------------------------------------------------
/tests/visual/projects-visual.spec.ts-snapshots/projects-page-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:35bac0def2240bd3d1074e60353e1bf0a1b1ae17d9031ea3b712b9d15347bfb3
3 | size 153763
4 |
--------------------------------------------------------------------------------
/tests/visual/projects-visual.spec.ts-snapshots/projects-page-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:8bb7ee3321425caa8d463d580d92365e4512fed29e91a40de38eb1899dd582b4
3 | size 455828
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Visual Regression - Responsive Design', () => {
4 | test('homepage responsive - desktop', async ({ page }) => {
5 | test.setTimeout(30000); // Increase timeout for screenshot
6 |
7 | await page.setViewportSize({ width: 1920, height: 1080 });
8 | await page.goto('/');
9 | await page.waitForLoadState('domcontentloaded');
10 |
11 | // Wait for layout to stabilize after viewport change
12 | await page.waitForFunction(() => document.readyState === 'complete');
13 | await page.waitForLoadState('networkidle');
14 |
15 | await expect(page).toHaveScreenshot('homepage-desktop.png');
16 | });
17 |
18 | test('homepage responsive - tablet', async ({ page }) => {
19 | test.setTimeout(30000); // Increase timeout for screenshot
20 |
21 | await page.setViewportSize({ width: 768, height: 1024 });
22 | await page.goto('/');
23 | await page.waitForLoadState('domcontentloaded');
24 |
25 | // Wait for layout to stabilize after viewport change
26 | await page.waitForFunction(() => document.readyState === 'complete');
27 | await page.waitForLoadState('networkidle');
28 |
29 | await expect(page).toHaveScreenshot('homepage-tablet.png');
30 | });
31 |
32 | test('homepage responsive - mobile', async ({ page }) => {
33 | test.setTimeout(30000); // Increase timeout for screenshot
34 |
35 | await page.setViewportSize({ width: 375, height: 667 });
36 | await page.goto('/');
37 | await page.waitForLoadState('domcontentloaded');
38 |
39 | // Wait for layout to stabilize after viewport change
40 | await page.waitForFunction(() => document.readyState === 'complete');
41 | await page.waitForLoadState('networkidle');
42 |
43 | await expect(page).toHaveScreenshot('homepage-mobile.png');
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-desktop-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:10a5bda4ef84dc3f1cf05853bbc7175780567bfc289366de0493bef56479ef0e
3 | size 75949
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-desktop-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:81b60f1adc914daa55fba78b55eec2225cf56a9ef1bee3e40cfa7e297816efeb
3 | size 116065
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-desktop-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:24d5a6b56d307b6f4f505d42c6d46730a72d38f759c65494fd8195aac2e7ce25
3 | size 72195
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-mobile-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:142ff36a54db9afa075378f1c5f2e7a764eb80b512dc7bff4c77fa4a1bebbcc6
3 | size 26468
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-mobile-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:9161b770e56166fe1da4e5b94e55794459c215643b1ed15a6b7d72ca05efc3ec
3 | size 48702
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-mobile-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:3a368275fe9b8cf23d8e95e69625bfdd3514cf3aae6c0599bc299eef7590f4b5
3 | size 26018
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-tablet-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:209cf2a14bcb554de500c967dcc4d9aa8857fbb20266160182e77e0ceb1a3def
3 | size 52010
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-tablet-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6e710d474ed42b0da0735b19b8c8e95b8e1dd433771e5ec60697eaeed5b114b5
3 | size 82691
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/homepage-tablet-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:266fff02fc701e4e5470188e80dc175a5fd46fd7ef52772d5bbfbcb9eb6b1a98
3 | size 50439
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/navigation-mobile-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:bfae41190f3c834bf01fa13de0fbb15e45a8c1c04f77abba77bc62b01701ae00
3 | size 4102
4 |
--------------------------------------------------------------------------------
/tests/visual/responsive-visual.spec.ts-snapshots/posts-mobile-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:717f6498cc8a1d28e763cc3c0418aafd91883132db65871d85f178081eac7ce0
3 | size 26370
4 |
--------------------------------------------------------------------------------
/tests/visual/talks-visual.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Visual Regression - Talks Page', () => {
4 | test.skip(({ browserName }) => browserName === 'webkit', 'Skip visual tests on Safari mobile due to rendering variability');
5 |
6 | test('talks page visual comparison', async ({ page }) => {
7 | test.setTimeout(45000); // Timeout for screenshot
8 |
9 | await page.goto('/talks');
10 | await page.waitForLoadState('domcontentloaded');
11 |
12 | // Set to light theme
13 | await page.evaluate(() => {
14 | document.documentElement.className = 'light';
15 | });
16 |
17 | // Wait for theme class to be applied
18 | await page.waitForFunction(() => {
19 | return document.documentElement.className === 'light';
20 | });
21 |
22 | // Wait a moment for CSS to apply
23 | await page.waitForTimeout(500);
24 |
25 | await expect(page).toHaveScreenshot('talks-page.png');
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/tests/visual/talks-visual.spec.ts-snapshots/talks-page-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:cd4d2aff8725e116cf80da6cc6819fabcde932716bc4d2dd0206154e819b5da8
3 | size 186460
4 |
--------------------------------------------------------------------------------
/tests/visual/talks-visual.spec.ts-snapshots/talks-page-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:3abe63ae2ca6ead9cd2ab228f94455c100d4ec22e203425426fb0d3e569ce184
3 | size 243926
4 |
--------------------------------------------------------------------------------
/tests/visual/talks-visual.spec.ts-snapshots/talks-page-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:9c2f707f7be2ffe44017a83a3c220fc042d6e92a6bcdb097866edd85fe7eb6a7
3 | size 338739
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test.describe('Visual Regression - Themes', () => {
4 | test('homepage visual comparison - light theme', async ({ page }) => {
5 | test.setTimeout(30000); // Increase timeout for screenshot
6 |
7 | await page.goto('/');
8 | await page.waitForLoadState('domcontentloaded');
9 |
10 | // Set to light theme
11 | await page.evaluate(() => {
12 | document.documentElement.className = 'light';
13 | });
14 |
15 | // Wait for theme class to be applied
16 | await page.waitForFunction(() => {
17 | return document.documentElement.className === 'light';
18 | });
19 |
20 | // Give a moment for CSS to apply
21 | await page.waitForLoadState('networkidle');
22 |
23 | await expect(page).toHaveScreenshot('homepage-light.png');
24 | });
25 |
26 | test('homepage visual comparison - dark theme', async ({ page }) => {
27 | test.setTimeout(30000); // Increase timeout for screenshot
28 |
29 | await page.goto('/');
30 | await page.waitForLoadState('domcontentloaded');
31 |
32 | // Set to dark theme
33 | await page.evaluate(() => {
34 | document.documentElement.className = 'dark';
35 | });
36 |
37 | // Wait for theme class to be applied
38 | await page.waitForFunction(() => {
39 | return document.documentElement.className === 'dark';
40 | });
41 |
42 | // Give a moment for CSS to apply
43 | await page.waitForLoadState('networkidle');
44 |
45 | await expect(page).toHaveScreenshot('homepage-dark.png');
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-dark-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:d0fb4f28aea18d298e311cda106e6c3c0202439b37ad2898cc981d96b669de35
3 | size 27311
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-dark-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7cbe0e0ff667ed1657b9dc4e834cd2617e3bae99d4187cd9f955e897832c8f51
3 | size 48346
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-dark-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:1e83e6c370fbb5551bebcb4bf0d4a0a77282d3b3e15c658ff70d3ae87b861fa1
3 | size 42737
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-light-Mobile-Chrome-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:f0c6494708a2f86380717e0ea032af2dff3a0afdfe67de0698db504b133d0308
3 | size 29348
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-light-Mobile-Safari-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:e51508301c344451a9d7ac45a35d2a17fc52c65f80a387522236dd416f1d2eba
3 | size 48948
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/homepage-light-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:198269493f912c0ebe4e98c4429e5e3d90006817b9490b9702ec851a8f361b3b
3 | size 43036
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/posts-page-dark-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6e9d5aa074adb4302db3b200a6c5c1280327a522a757405d25cf5692a5a166a0
3 | size 37768
4 |
--------------------------------------------------------------------------------
/tests/visual/theme-visual.spec.ts-snapshots/posts-page-light-chromium-linux.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c75f25e4cce3b0e812283ee95f90ef9dafa7e9d014d3e81dc09a1faf4f904734
3 | size 38341
4 |
--------------------------------------------------------------------------------
/theme.toml:
--------------------------------------------------------------------------------
1 | name = "apollo"
2 | description = "Modern and minimalistic blog theme"
3 | min_version = "0.14.0"
4 | license = "MIT"
5 | homepage = "https://github.com/not-matthias/apollo"
6 | demo = "https://not-matthias.github.io/apollo"
7 |
8 | # Any variable there can be overridden in the end user `config.toml`
9 | # You don't need to prefix variables by the theme name but as this will
10 | # be merged with user data, some kind of prefix or nesting is preferable
11 | # Use snake_casing to be consistent with the rest of Zola
12 | [extra]
13 |
14 | [author]
15 | name = "not-matthias"
16 | homepage = "https://github.com/not-matthias"
17 |
--------------------------------------------------------------------------------
/treefmt.toml:
--------------------------------------------------------------------------------
1 | walk = "git"
2 | excludes = ["static/**", "content/*"]
3 |
4 | [formatter.nix]
5 | command = "alejandra"
6 | includes = ["*.nix"]
7 |
8 | [formatter.djlint]
9 | command = "djlint"
10 | options = [
11 | "--preserve-blank-lines",
12 | "--line-break-after-multiline-tag",
13 | "--max-blank-lines",
14 | "2",
15 | "--format-css",
16 | "--format-js",
17 | "--close-void-tags",
18 | "--reformat",
19 | ]
20 | includes = ["*.html"]
21 |
22 | [formatter.scss]
23 | command = "prettier"
24 | includes = ["*.scss", "*.sass"]
25 |
--------------------------------------------------------------------------------
5 | {% block title %}
6 | {{ post_macros::page_header(title=taxonomy.name | capitalize) }}
7 | {% endblock title %}
8 |
9 |
10 | {% set sort_by = config.extra.taxonomies.sort_by | default(value="name") %}
11 | {% set terms = terms | default(value=[]) | sort(attribute=sort_by) %}
12 |
13 | {% if config.extra.taxonomies.reverse | default(value=false) %}
14 | {% set terms = terms | reverse %}
15 | {% endif %}
16 |
17 |
29 |
30 | {% endblock main_content %}
31 |
--------------------------------------------------------------------------------
/templates/taxonomy_single.html:
--------------------------------------------------------------------------------
1 | {% extends "index.html" %}
2 |
3 | {% macro list_tag_posts(pages, tag_name=false) %}
4 | {% if tag_name %}
5 | -
18 | {%- for term in terms %}
19 |
20 |
26 | {% endfor -%}
27 | 21 | {{ term.name }} 22 |
23 | 24 | {{ term.page_count }} page{{ term.page_count | pluralize }} 25 |
6 | Entries tagged :: {{ tag_name }}
7 |
8 | {% else %}
9 |
10 | All articles
11 |
12 | {% endif %}
13 |
14 |