]*>[\s\S]*?<\/svelte:component>/gim, '');
+
+ const codeBlocks = [];
+ const inlineCodes = [];
+ let html = cleanedMarkdown.replace(/```([\s\S]*?)```/gims, (match, code) => {
+ const token = `@@CODEBLOCK${codeBlocks.length}@@`;
+ codeBlocks.push(`${code}
`);
+ return `\n\n${token}\n\n`;
+ });
+
+ html = html.replace(/`([^`]*?)`/gim, (match, code) => {
+ const token = `@@INLINECODE${inlineCodes.length}@@`;
+ inlineCodes.push(`${code}`);
+ return token;
+ });
+
// Basic markdown processing (this is a simple implementation)
- let html = markdown
+ html = html
// Headers
.replace(/^### (.*$)/gim, '$1
')
.replace(/^## (.*$)/gim, '$1
')
.replace(/^# (.*$)/gim, '$1
')
+ // Horizontal rules
+ .replace(/(^|\n)(-{3,}|\*{3,}|_{3,})(?=\n|$)/gim, '$1
')
+ // Blockquotes
+ .replace(/(^|\n)>\s?([^\n]+)/gim, '$1$2
')
+ // Unordered lists
+ .replace(/(^|\n)([-*+]\s+[^\n]+(\n[-*+]\s+[^\n]+)*)/gim, (match, start, list) => {
+ const items = list
+ .split('\n')
+ .map((line) => line.replace(/^[-*+]\s+/, '').trim())
+ .filter(Boolean)
+ .map((item) => `${item}`)
+ .join('');
+ return `${start}`;
+ })
+ // Ordered lists
+ .replace(/(^|\n)(\d+\.\s+[^\n]+(\n\d+\.\s+[^\n]+)*)/gim, (match, start, list) => {
+ const items = list
+ .split('\n')
+ .map((line) => line.replace(/^\d+\.\s+/, '').trim())
+ .filter(Boolean)
+ .map((item) => `${item}`)
+ .join('');
+ return `${start}${items}
`;
+ })
// Bold and italic
- .replace(/\*\*(.*)\*\*/gim, '$1')
- .replace(/\*(.*)\*/gim, '$1')
+ .replace(/\*\*([^*\n]+?)\*\*/gim, '$1')
+ .replace(/(^|[^\w])__([^_\n]+?)__([^\w]|$)/gim, '$1$2$3')
+ .replace(/(^|[^*])\*(?!\s|\*)([^*\n]+?)\*(?!\*)/gim, '$1$2')
+ .replace(/(^|[^\w])_(?!_)([^_\n]+?)_(?!_)/gim, '$1$2')
+ // Images
+ .replace(/!\[([^\]]*)\]\(([^)]*)\)/gim, '
')
// Links
.replace(/\[([^\]]*)\]\(([^)]*)\)/gim, '$1')
- // Code blocks (basic)
- .replace(/```([^`]*?)```/gims, '$1
')
- .replace(/`([^`]*?)`/gim, '$1')
// Line breaks
.replace(/\n\n/gim, '')
.replace(/\n/gim, '
');
+ codeBlocks.forEach((block, index) => {
+ html = html.replace(`@@CODEBLOCK${index}@@`, block);
+ });
+
+ inlineCodes.forEach((block, index) => {
+ html = html.replace(`@@INLINECODE${index}@@`, block);
+ });
+
// Wrap in paragraph tags
html = '
' + html + '
';
@@ -80,7 +146,10 @@ export function markdownToHtml(markdown) {
.replace(//gim, '')
.replace(/<\/h([1-6])><\/p>/gim, '')
.replace(//gim, '')
- .replace(/<\/pre><\/p>/gim, '
');
+ .replace(/<\/pre><\/p>/gim, '
')
+ .replace(/<(ul|ol|blockquote)>/gim, '<$1>')
+ .replace(/<\/(ul|ol|blockquote)><\/p>/gim, '')
+ .replace(/
<\/p>/gim, '
');
return html;
}
@@ -95,6 +164,7 @@ export function truncateHtmlForDescription(html, maxLength = 160) {
// Strip HTML tags for description
const plainText = html
.replace(/<[^>]*>/g, ' ')
+ .replace(/\[object Object\]/g, ' ')
.replace(/\s+/g, ' ')
.trim();
@@ -104,3 +174,10 @@ export function truncateHtmlForDescription(html, maxLength = 160) {
return plainText.substring(0, maxLength).replace(/\s+\S*$/, '') + '...';
}
+
+export function convertHtmlToPlainText(html) {
+ return html
+ .replace(/<[^>]*>/g, ' ')
+ .replace(/\s+/g, ' ')
+ .trim();
+}
diff --git a/src/lib/utils/rss.js b/src/lib/utils/rss.js
index 90f2fae..41bd217 100644
--- a/src/lib/utils/rss.js
+++ b/src/lib/utils/rss.js
@@ -6,8 +6,9 @@
* Escape XML special characters to prevent XML syntax errors
*/
export function escapeXml(text) {
- if (typeof text !== 'string') return '';
+ if (text === null || text === undefined) return '';
return text
+ .toString()
.replace(/&/g, '&')
.replace(//g, '>')
diff --git a/src/lib/utils/structured-data.js b/src/lib/utils/structured-data.js
new file mode 100644
index 0000000..fd62615
--- /dev/null
+++ b/src/lib/utils/structured-data.js
@@ -0,0 +1,85 @@
+const hostname = 'https://techquests.dev';
+const authorName = 'Andre Nogueira';
+const authorUrl = hostname;
+const siteName = 'Tech Quests';
+const logoUrl = `${hostname}/favicon.png`;
+
+function normalizeImage(image) {
+ if (!image?.img?.src) return null;
+ const url = `${hostname}${image.img.src}`;
+ const width = image.img.w || undefined;
+ const height = image.img.h || undefined;
+
+ return {
+ '@type': 'ImageObject',
+ url,
+ ...(width ? { width } : {}),
+ ...(height ? { height } : {})
+ };
+}
+
+export function buildBlogPostingJsonLd(metadata, image) {
+ const url = `${hostname}/blog/${metadata.slug}`;
+ const datePublished = metadata.date ? new Date(metadata.date).toISOString() : undefined;
+
+ return {
+ '@context': 'https://schema.org',
+ '@type': 'BlogPosting',
+ headline: metadata.name,
+ description: metadata.description,
+ url,
+ ...(datePublished ? { datePublished } : {}),
+ author: {
+ '@type': 'Person',
+ name: authorName,
+ url: authorUrl
+ },
+ publisher: {
+ '@type': 'Organization',
+ name: siteName,
+ logo: {
+ '@type': 'ImageObject',
+ url: logoUrl
+ }
+ },
+ ...(image ? { image } : {}),
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': url
+ }
+ };
+}
+
+export function buildProjectJsonLd(metadata, images) {
+ const url = `${hostname}/projects/${metadata.slug}`;
+ const datePublished = metadata.date ? new Date(metadata.date).toISOString() : undefined;
+
+ return {
+ '@context': 'https://schema.org',
+ '@type': 'SoftwareApplication',
+ name: metadata.name,
+ description: metadata.description,
+ url,
+ ...(datePublished ? { datePublished } : {}),
+ author: {
+ '@type': 'Person',
+ name: authorName,
+ url: authorUrl
+ },
+ publisher: {
+ '@type': 'Organization',
+ name: siteName,
+ logo: {
+ '@type': 'ImageObject',
+ url: logoUrl
+ }
+ },
+ ...(images && images.length > 0 ? { image: images } : {}),
+ ...(metadata.github ? { codeRepository: metadata.github } : {}),
+ ...(metadata.website ? { downloadUrl: metadata.website } : {})
+ };
+}
+
+export function buildImageObject(image) {
+ return normalizeImage(image);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3133c2f..8cb23de 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,8 +5,7 @@
import { page } from '$app/stores';
import PageHead from '$lib/components/PageHead.svelte';
import Toggle from '$lib/components/Toggle.svelte';
- import LogoLight from '$lib/components/LogoLight.svelte';
- import LogoDark from '$lib/components/LogoDark.svelte';
+ import NavLogo from '$lib/components/NavLogo.svelte';
import Analytics from '$lib/components/Analytics.svelte';
import { fly } from 'svelte/transition';
import { theme } from '$lib/js/theme';
@@ -73,6 +72,7 @@
title={$page.error ? $page.status : $page.data.meta.title}
description={$page.error ? $page.error.message : $page.data.meta.description}
type={$page.data.meta.type}
+ jsonLd={$page.data.meta.jsonLd}
image={$page.data.meta.image ?? {
img: {
src: '/blog.png',
@@ -84,26 +84,26 @@
-
+{/if}
{#key data.pathname}
@@ -119,7 +119,9 @@
...xy(data.pathname, false)
}}
>
-
+
+
+
Links
- Github profile->
-
- Linkedin profile->
-
- Medium profile->
-
- Dev.to profile->
-
- Buy me a coffee->
-
+
RSS Feeds
- All content feed->
- Blog posts only->
- Projects only->
+
This blog
- Github repo->
- Analytics->
+
Stack ->
SvelteKit /
@@ -112,16 +142,36 @@
-
bg
-
bg-2
-
bg-3
-
txt-3
-
txt-2
-
txt
-
txt-0
-
salmon
-
green
-
yellow
+
+ bg (dark #121416 / light #edebe9)
+
+
+ bg-2 (dark #191b1f / light #e6e4e0)
+
+
+ bg-3 (dark #25272d / light #dad8d2)
+
+
+ txt-3 (dark #4f5663 / light #b0a99c)
+
+
+ txt-2 (dark #8e95a4 / light #716a5b)
+
+
+ txt (dark #bdc7db / light #423824)
+
+
+ txt-0 (dark #dae2f1 / light #251d0e)
+
+
+ salmon (dark #e5afae / light #cc6c6b)
+
+
+ green (dark #8cc5cf / light #45818c)
+
+
+ yellow (dark #f2b463 / light #e38b26)
+
@@ -149,6 +199,16 @@
}
}
+ .link-list {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 $spacing-lg 0;
+
+ li {
+ margin: $spacing-sm 0;
+ }
+ }
+
.colors {
display: inline-flex;
margin-top: $spacing-xxs;
@@ -163,6 +223,10 @@
font-size: 0.9em;
}
+ .cli-only {
+ display: none;
+ }
+
h1 {
margin-bottom: $spacing-3xl;
}
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 098f100..dd97ff0 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -10,12 +10,13 @@
{#each data.posts as post (post.slug)}
- {formatDate(post.date)}
- {post.name} >/
+ {post.name} >/
+ {formatDate(post.date)}
{post.description}
{/each}
@@ -39,6 +40,7 @@
}
.date {
+ grid-area: date;
font-size: $font-sm;
font-family: 'Fira Mono', monospace;
color: var(--txt-2);
@@ -47,18 +49,29 @@
a {
display: grid;
- grid-template-columns: auto auto;
+ grid-template-columns: auto 1fr;
+ grid-template-areas:
+ 'date title'
+ '. description';
justify-content: left;
gap: $spacing-md $spacing-3xl;
}
+ h2 {
+ grid-area: title;
+ }
+
.description {
- grid-column: 2;
+ grid-area: description;
}
@media (max-width: $breakpoint-mobile) {
a {
grid-template-columns: auto;
+ grid-template-areas:
+ 'title'
+ 'date'
+ 'description';
gap: $spacing-md;
.description {
diff --git a/src/routes/blog/[slug]/+page.js b/src/routes/blog/[slug]/+page.js
index aab5f58..2c0c559 100644
--- a/src/routes/blog/[slug]/+page.js
+++ b/src/routes/blog/[slug]/+page.js
@@ -1,4 +1,5 @@
import { nameFromPath, importOgImage } from '$lib/js/posts.js';
+import { buildBlogPostingJsonLd, buildImageObject } from '$lib/utils/structured-data.js';
import { error } from '@sveltejs/kit';
import { dev } from '$app/environment';
@@ -23,13 +24,19 @@ export async function load({ params }) {
let imagePath = match.path.split('/').slice(0, -1).join('/') + '/' + post.metadata.ogImage;
let image = await importOgImage(imagePath);
+ const jsonLd = buildBlogPostingJsonLd(
+ { ...post.metadata, slug: params.slug },
+ buildImageObject(image)
+ );
+
return {
post,
meta: {
title: post.metadata.name,
description: post.metadata.description,
type: 'article',
- image
+ image,
+ jsonLd
}
};
}
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 05080e9..8879169 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -8,9 +8,14 @@
- {metadata.name}
+
+ {metadata.name}
- {formatDate(metadata.date)}
+
+ Andre Nogueira
+ ยท
+
+
{metadata.description}
@@ -23,12 +28,6 @@
padding-top: 0;
}
- .date {
- margin: $spacing-sm 0;
- font-size: $font-base;
- font-family: 'Fira Mono', monospace;
- }
-
.description {
font-size: $font-sm;
margin: $spacing-sm 0 $spacing-3xl 0;
@@ -36,8 +35,29 @@
color: var(--txt-2);
}
+ .meta {
+ margin: $spacing-sm 0 0 0;
+ font-size: $font-sm;
+ font-family: 'Fira Mono', monospace;
+ color: var(--txt-2);
+ display: flex;
+ gap: $spacing-sm;
+ align-items: center;
+ }
+
+ .divider {
+ color: var(--txt-3);
+ }
+
h1 {
margin: $spacing-lg 0;
line-height: 1.3;
+ display: flex;
+ align-items: center;
+ gap: 0;
+ }
+
+ h1 :global(iconify-icon) {
+ padding-right: 0.75ch;
}
diff --git a/src/routes/blog/rss.xml/+server.js b/src/routes/blog/rss.xml/+server.js
index fc8b63c..1b81376 100644
--- a/src/routes/blog/rss.xml/+server.js
+++ b/src/routes/blog/rss.xml/+server.js
@@ -1,5 +1,6 @@
import { getPosts } from '$lib/js/posts.js';
import { escapeXml, getMarkdownContent, generateRssXml } from '$lib/utils/rss.js';
+import { convertHtmlToPlainText, truncateHtmlForDescription } from '$lib/utils/markdown.js';
export const prerender = true;
@@ -27,7 +28,7 @@ export async function GET() {
const markdownContent = await getMarkdownContent(pathKey, blogContentModules);
if (markdownContent?.trim()) {
const { markdownToHtml } = await import('$lib/utils/markdown.js');
- let htmlContent = await markdownToHtml(markdownContent);
+ const htmlContent = await markdownToHtml(markdownContent);
content += htmlContent;
}
@@ -44,24 +45,11 @@ export async function GET() {
content += `
${escapeXml(post.description)}
`;
}
- // Add metadata information
- content +=
- '
';
-
- if (post.description) {
- content += `
Summary: ${escapeXml(post.description)}
`;
- }
-
- if (post.date) {
- content += `
Published: ${new Date(post.date).toDateString()}
`;
- }
-
- if (post.icon) {
- content += `
Icon: ${escapeXml(post.icon)}
`;
+ // Add a text fallback when HTML is empty
+ if (!content) {
+ content = post.description || 'No content available';
}
- content += '
';
-
return content || 'No content available';
}
@@ -86,18 +74,21 @@ export async function GET() {
const feedEmail = 'aanogueira@protonmail.com';
// Generate RSS items
- const rssItems = sortedPosts.map(
- (post) => `
-
+ const rssItems = sortedPosts.map((post) => {
+ const body = post.content || post.description || 'No content available';
+ const plainText = convertHtmlToPlainText(body);
+ const summary = truncateHtmlForDescription(plainText, 220);
+ return `
-
${escapeXml(post.name || 'Untitled')}
- ${escapeXml(post.description || 'No description available')}
-
+ ${escapeXml(summary || post.description || 'No description available')}
+
${feedBaseUrl}/blog/${post.slug}
${feedBaseUrl}/blog/${post.slug}
${new Date(post.date || new Date()).toUTCString()}
${feedEmail} (${feedAuthor})
${post.tags ? post.tags.map((tag) => `${escapeXml(tag)}`).join('\n ') : 'Blog'}
-
`
- );
+ `;
+ });
// Generate RSS XML using shared utility
const rss = generateRssXml({
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 39ee89d..f771fc2 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,24 +1,45 @@
@@ -48,15 +69,56 @@
>aanogueira@protonmail.com
->
-
-
-
- Contact form
-
@@ -78,8 +140,33 @@
form {
display: grid;
- grid-template-columns: auto auto;
- gap: $spacing-sm;
+ grid-template-columns: 1fr 1fr;
+ gap: $spacing-sm $spacing-md;
+ }
+
+ .field {
+ display: grid;
+ gap: $spacing-xs;
+ }
+
+ .section-title {
+ margin-top: $spacing-4xl;
+ }
+
+ .cli-only {
+ display: none;
+ }
+
+ .field.full {
+ grid-column: 1 / -1;
+ }
+
+ .field-label {
+ font-size: $font-xs;
+ font-family: $font-family-mono;
+ color: var(--txt-2);
+ display: grid;
+ gap: $spacing-xs;
}
input[type='text'],
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index e864e4a..e3054c0 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -10,14 +10,21 @@
@@ -38,12 +45,30 @@
max-width: 100%;
}
+ a.link {
+ display: grid;
+ grid-template-areas:
+ 'thumb'
+ 'title'
+ 'description';
+ gap: $spacing-sm;
+ }
+
+ .thumb {
+ grid-area: thumb;
+ }
+
h2 {
+ grid-area: title;
margin: $spacing-sm 0 $spacing-smd 0;
color: var(--txt);
font-size: $font-lg;
}
+ .description {
+ grid-area: description;
+ }
+
@media (max-width: $breakpoint-tablet) {
.posts {
grid-template-columns: auto;
diff --git a/src/routes/projects/[slug]/+page.js b/src/routes/projects/[slug]/+page.js
index 836db8f..9f77d37 100644
--- a/src/routes/projects/[slug]/+page.js
+++ b/src/routes/projects/[slug]/+page.js
@@ -1,4 +1,5 @@
import { nameFromPath, importOgImage } from '$lib/js/posts.js';
+import { buildProjectJsonLd, buildImageObject } from '$lib/utils/structured-data.js';
import { error } from '@sveltejs/kit';
import { dev } from '$app/environment';
@@ -20,8 +21,25 @@ export async function load({ params }) {
throw error(404, 'Project Not Found');
}
- let imagePath = match.path.split('/').slice(0, -1).join('/') + '/' + post.metadata.images[0];
- let image = await importOgImage(imagePath);
+ let image = null;
+ if (post.metadata.images?.length) {
+ let imagePath = match.path.split('/').slice(0, -1).join('/') + '/' + post.metadata.images[0];
+ image = await importOgImage(imagePath);
+ }
+
+ const imageObjects = post.metadata.images?.length
+ ? (
+ await Promise.all(
+ post.metadata.images.map(async (item) => {
+ const imagePath = match.path.split('/').slice(0, -1).join('/') + '/' + item;
+ const imageModule = await importOgImage(imagePath);
+ return buildImageObject(imageModule);
+ })
+ )
+ ).filter(Boolean)
+ : [];
+
+ const jsonLd = buildProjectJsonLd({ ...post.metadata, slug: params.slug }, imageObjects);
return {
post,
@@ -29,7 +47,8 @@ export async function load({ params }) {
title: post.metadata.name,
description: post.metadata.description,
type: 'article',
- image
+ image,
+ jsonLd
}
};
}
diff --git a/src/routes/projects/[slug]/+page.svelte b/src/routes/projects/[slug]/+page.svelte
index 0a76cf1..70dbb60 100644
--- a/src/routes/projects/[slug]/+page.svelte
+++ b/src/routes/projects/[slug]/+page.svelte
@@ -58,7 +58,7 @@
${escapeXml(project.description)}
`;
}
- // Add metadata information
- content +=
- '
';
-
- if (project.description) {
- content += `
Summary: ${escapeXml(project.description)}
`;
- }
-
- if (project.date) {
- content += `
Published: ${new Date(project.date).toDateString()}
`;
- }
-
- if (project.tags?.length > 0) {
- content += `
Tags: ${project.tags.map((tag) => escapeXml(tag)).join(', ')}
`;
- }
-
- // Add project-specific metadata
- if (project.icon) {
- content += `
Icon: ${escapeXml(project.icon)}
`;
+ if (!content) {
+ content = project.description || 'No content available';
}
- if (project.website) {
- content += `
Website: ${escapeXml(project.website)}
`;
- }
-
- if (project.github) {
- content += `
GitHub: ${escapeXml(project.github)}
`;
- }
-
- content += '
-
+ const rssItems = projectsWithImages.map((project) => {
+ const body = project.content || project.description || 'No content available';
+ const plainText = convertHtmlToPlainText(body);
+ const summary = truncateHtmlForDescription(plainText, 220);
+ return `
-
${escapeXml(project.name || project.title || 'Untitled')}
- ${escapeXml(project.description || 'No description available')}
-
+ ${escapeXml(summary || project.description || 'No description available')}
+
${feedBaseUrl}/projects/${project.slug}
${feedBaseUrl}/projects/${project.slug}
${new Date(project.date || new Date()).toUTCString()}
@@ -144,8 +121,8 @@ export async function GET() {
${project.website ? `${escapeXml(project.website)}` : ''}
${project.github ? `GitHub Repository` : ''}
${project.imageData ? `` : ''}
-
`
- );
+ `;
+ });
// Generate RSS XML using shared utility
const rss = generateRssXml({
diff --git a/src/routes/rss.xml/+server.js b/src/routes/rss.xml/+server.js
index 0ab1306..7188202 100644
--- a/src/routes/rss.xml/+server.js
+++ b/src/routes/rss.xml/+server.js
@@ -1,5 +1,6 @@
import { getPosts, importOgImage } from '$lib/js/posts.js';
import { escapeXml, getMarkdownContent, generateRssItem, generateRssXml } from '$lib/utils/rss.js';
+import { convertHtmlToPlainText, truncateHtmlForDescription } from '$lib/utils/markdown.js';
export const prerender = true;
@@ -38,54 +39,23 @@ export async function GET() {
const markdownContent = await getMarkdownContent(pathKey, contentModules);
if (markdownContent?.trim()) {
const { markdownToHtml } = await import('$lib/utils/markdown.js');
- let htmlContent = await markdownToHtml(markdownContent);
+ const htmlContent = await markdownToHtml(markdownContent);
- content += htmlContent + '
';
+ content += htmlContent;
}
} catch (error) {
console.warn('Failed to process markdown content for:', item.slug, error);
if (item.description) {
- content += `${escapeXml(item.description)}
`;
+ content += `${escapeXml(item.description)}
`;
}
}
}
// Fallback to description if no content was found
if (!content && item.description) {
- content += `${escapeXml(item.description)}
`;
+ content += `${item.description}
`;
}
- // Add metadata information
- content +=
- '';
-
- if (item.description) {
- content += `
Summary: ${escapeXml(item.description)}
`;
- }
-
- if (item.date) {
- content += `
Published: ${new Date(item.date).toDateString()}
`;
- }
-
- if (item.tags?.length > 0) {
- content += `
Tags: ${item.tags.map((tag) => escapeXml(tag)).join(', ')}
`;
- }
-
- // Add project-specific metadata
- if (item.icon) {
- content += `
Icon: ${escapeXml(item.icon)}
`;
- }
-
- if (item.website) {
- content += `
Website: ${escapeXml(item.website)}
`;
- }
-
- if (item.github) {
- content += `
GitHub: ${escapeXml(item.github)}
`;
- }
-
- content += '
{:else}
-