diff --git a/.gitignore b/.gitignore index 8c35ce1..aa12a66 100644 --- a/.gitignore +++ b/.gitignore @@ -488,6 +488,7 @@ render.experimental.xml *.code-workspace .vscode/* !.vscode/settings.json +!.vscode/tailwind.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 92d0b74..e4720bb 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,4 +1,6 @@ { - "recommendations": ["denoland.vscode-deno"] - // "disabled": ["ms-vscode.vscode-typescript-next", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] -} + "recommendations": [ + "denoland.vscode-deno", + "bradlc.vscode-tailwindcss" + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index db28c57..b361324 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,20 +1,41 @@ { "deno.enable": true, "deno.lint": true, - "[typescript]": { - "editor.defaultFormatter": "denoland.vscode-deno" - }, "[typescriptreact]": { "editor.defaultFormatter": "denoland.vscode-deno" }, - "[javascript]": { + "[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" }, "[javascriptreact]": { "editor.defaultFormatter": "denoland.vscode-deno" }, - "editor.suggest.showStatusBar": true, + "[javascript]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "css.customData": [ + ".vscode/tailwind.json" + ], "editor.quickSuggestions": { "strings": true }, + "tailwindCSS.includeLanguages": { + "javascript": "javascript", + "html": "HTML" + }, + "tailwindSorter.categoryOrder": { + "sortOrder": [ + "color", + "box", + "flex", + "grid", + "bg-visual", + "margins", + "borders", + "sizing", + "typography", + "transformations", + "other" + ] + } } \ No newline at end of file diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..96a1f57 --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/components/BlogPostPreview.tsx b/components/BlogPostPreview.tsx index 36c0499..6b9c35c 100644 --- a/components/BlogPostPreview.tsx +++ b/components/BlogPostPreview.tsx @@ -5,13 +5,13 @@ function BlogPostPreview(props: { post: Post }) { return (
-

{post.title}

+

{post.title}

{post.description}

 diff --git a/components/ContentCard.tsx b/components/ContentCard.tsx index 8e69910..850c8ea 100644 --- a/components/ContentCard.tsx +++ b/components/ContentCard.tsx @@ -8,11 +8,11 @@ interface ContentCardProps { export default function ContentCard({ children, title, description }: ContentCardProps) { return ( -
+
{children} -
-

{title}

-

+

+

{title}

+

{description}

diff --git a/components/DesktopNav.tsx b/components/DesktopNav.tsx new file mode 100644 index 0000000..98974e3 --- /dev/null +++ b/components/DesktopNav.tsx @@ -0,0 +1,55 @@ +import { Route, Routes } from '@/routes.ts'; +import { classNames } from '@/utils/classNames.ts'; + +interface DesktopNavProps { + routes: Route[]; + active: Routes; +} + +function DesktopNav(props: DesktopNavProps) { + return ( +
    + {props.routes.map((item: Route) => { + // if the route has a displayName, render it + if (item.displayName) { + return ( +
  • + + + + {item.displayName} + + +
    • + ); + } + })} +
+ ); +} + +export { DesktopNav }; diff --git a/components/Footer.tsx b/components/Footer.tsx index 97d38f4..4c5a283 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,6 +1,6 @@ import { asset } from '$fresh/runtime.ts'; -import { Link } from './Link.tsx'; +import { Link } from '@/components/Link.tsx'; import IconBrandCodepen from '@tabler/icons/brand-codepen.tsx'; import IconBrandGit from '@tabler/icons/brand-git.tsx'; import IconBrandGithub from '@tabler/icons/brand-github.tsx'; @@ -14,199 +14,125 @@ import IconLetterW from '@tabler/icons/letter-w.tsx'; import IconRSS from '@tabler/icons/rss.tsx'; import IconSquareRoundedLetterP from '@tabler/icons/square-rounded-letter-p.tsx'; +import { JSX } from 'preact/jsx-runtime'; + +interface FooterItem { + displayName: string; + link: string; + icon: JSX.Element; +} + +const footerItems: Record = { + social: [ + { + displayName: 'LinkedIn', + link: 'https://linkedin.com/in/gutenfries', + icon: , + }, + { + displayName: 'Peerlist', + link: 'https://peerlist.io/gutenfries', + icon: , + }, + { + displayName: 'Instagram', + link: 'https://instagram.com/gutenfries', + icon: , + }, + { + displayName: 'Facebook', + link: 'https://facebook.com/maybe.gutenfries', + icon: , + }, + ], + code: [ + { + displayName: 'GitHub', + link: 'https://github.com', + icon: , + }, + { + displayName: 'Wakatime', + link: 'https://wakatime.com/@gutenfries', + icon: , + }, + { + displayName: 'Codepen', + link: 'https://codepen.io/gutenfries', + icon: , + }, + { + displayName: 'Leetcode', + link: 'https://leetcode.com/gutenfries', + icon: , + }, + ], + other: [ + { + displayName: 'Feed', + link: '/blog/feed.rss', + icon: , + }, + { + displayName: 'Source Code', + link: 'https://github.com/gutenfries/gutenfries.deno.dev', + icon: , + }, + { + displayName: 'License', + link: '/license', + icon: , + }, + { + displayName: 'Privacy Policy', + link: '/privacy-policy', + icon: , + }, + ], +}; + function Footer() { return (