From 4e7b6e7145983216f5c955629a79dde3188d173f Mon Sep 17 00:00:00 2001 From: madcampos Date: Sat, 28 Sep 2024 18:53:01 -0400 Subject: [PATCH] chore: reformat project --- .github/workflows/astro.yml | 2 +- README.md | 12 +- astro.config.ts | 24 +-- src/components/AuthorCard/index.astro | 4 +- src/components/AuthorCard/styles.css | 37 ++--- src/components/Avatar/index.astro | 6 +- src/components/Avatar/styles.css | 18 +- src/components/HtmlHead/index.astro | 102 ------------ src/components/HtmlHead/print.css | 28 +--- src/components/PageHeader/styles.css | 31 ++-- src/components/Pagination/index.astro | 120 +++++++------- src/components/Pagination/styles.css | 23 +-- src/components/PostCard/index.astro | 94 ++++++----- src/components/PostCard/styles.css | 70 ++++---- src/components/PostHeader/index.astro | 126 +++++++------- src/components/PostHeader/styles.css | 71 ++++---- src/components/RefreshBanner/styles.css | 37 ++--- src/components/SiteFooter/index.astro | 96 +++++------ src/components/SiteFooter/styles.css | 14 +- src/components/SiteNav/index.astro | 20 ++- src/components/SiteNav/styles.css | 38 ++--- src/components/SkipToContent/index.astro | 4 +- src/components/SkipToContent/styles.css | 20 +-- src/components/TagList/index.astro | 10 +- src/components/TagList/styles.css | 8 +- src/content/authors/marco.md | 1 + src/content/blog/2023/06/tldr-1.md | 1 + src/content/blog/2023/07/tldr-2.md | 1 + src/content/blog/2023/07/tldr-3.md | 1 + src/content/blog/2023/08/tldr-4.md | 1 + src/content/blog/2023/08/tldr-5.md | 31 ++-- src/content/blog/2023/09/tldr-6.md | 3 +- src/content/blog/2023/09/tldr-7.md | 1 + src/content/blog/2023/10/tldr-8.md | 3 +- src/content/blog/2023/10/tldr-9.md | 2 +- src/content/blog/2023/11/tldr-10.md | 5 +- src/content/blog/2023/11/tldr-11.md | 5 +- src/content/blog/2023/11/tldr-12.md | 3 +- src/content/blog/2023/12/tldr-13.md | 1 + src/content/blog/2024/09/new-blog.md | 3 + src/content/changelog/v1.0.0.md | 1 + src/content/docs/adding-authors.md | 2 + src/content/docs/commands.md | 11 +- src/content/docs/project-structure.md | 2 + src/content/docs/setup.md | 1 - src/content/docs/tools.md | 3 + src/content/docs/writing-posts.md | 1 + src/content/templates/New Version.md | 1 + src/layouts/Base/base.css | 49 +++--- src/layouts/Base/index.astro | 46 ++--- src/layouts/Base/variables.css | 6 - src/layouts/BlogPost/index.astro | 203 ++++++++++++----------- src/layouts/BlogPost/styles.css | 19 +-- src/layouts/BlogPosts.astro | 87 +++++----- src/layouts/InternalPage/index.astro | 54 +++--- src/layouts/InternalPage/styles.css | 6 +- src/manifest.json | 4 +- src/pages/404.astro | 1 - src/pages/[...page].astro | 27 +-- src/pages/[year]/[...page].astro | 37 +++-- src/pages/[year]/[month]/[...page].astro | 40 +++-- src/pages/[year]/[month]/[slug].astro | 47 +++--- src/pages/about.astro | 24 ++- src/pages/accessibility.astro | 15 +- src/pages/authors/[author].astro | 64 +++---- src/pages/authors/index.astro | 16 +- src/pages/changelog.xml.ts | 1 - src/pages/codeofc.astro | 10 +- src/pages/license.astro | 56 +++---- src/pages/offline.astro | 1 - src/pages/report.astro | 37 +++-- src/pages/tags/[tag]/[...page].astro | 32 ++-- src/pages/tags/index.astro | 17 +- src/schemas/authors.ts | 21 ++- src/schemas/blog.ts | 39 +++-- src/schemas/changelog.ts | 9 +- src/styles/404.css | 4 +- src/styles/about.css | 8 +- src/styles/authors.css | 16 +- src/styles/report.css | 50 +++--- src/utils/post.ts | 34 ++-- tsconfig.json | 6 +- 82 files changed, 1042 insertions(+), 1143 deletions(-) diff --git a/.github/workflows/astro.yml b/.github/workflows/astro.yml index 4dbb0fc..977f4f1 100644 --- a/.github/workflows/astro.yml +++ b/.github/workflows/astro.yml @@ -26,7 +26,7 @@ concurrency: env: BUILD_PATH: "." # default value when not using subfolders - # BUILD_PATH: subfolder +# BUILD_PATH: subfolder jobs: build: diff --git a/README.md b/README.md index a8ccf4d..1a22150 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,12 @@ Check detailed documentation on the project setup and how to get it running in [ All commands are run from the root of the project, from a terminal: -| Command | Action | -| :--- | :--- | -| `npm install` | Installs all dependencies | -| `npm start` | Starts local dev server at [`https://localhost:3000/`](https://localhost:3000/) | -| `npm run build` | Build your production site to `./dist/` | -| `npm run lint` | Checks the project for errors and fix most of them | +| Command | Action | +| :-------------- | :------------------------------------------------------------------------------ | +| `npm install` | Installs all dependencies | +| `npm start` | Starts local dev server at [`https://localhost:3000/`](https://localhost:3000/) | +| `npm run build` | Build your production site to `./dist/` | +| `npm run lint` | Checks the project for errors and fix most of them | Check detailed documentation on the commands available in [`src/content/docs/commands.md`](./src/content/docs/commands.md). diff --git a/astro.config.ts b/astro.config.ts index 1e8a93a..03c7db3 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -6,7 +6,7 @@ import { readFileSync } from 'node:fs'; import { assetsCache, externalResourcesCache, pagesCache, scriptsCache } from './src/sw-caching.ts'; const manifest: PwaOptions['manifest'] = JSON.parse(readFileSync('./src/manifest.json', { - encoding: 'utf8' + encoding: 'utf8' })); const mode = process.env['NODE_ENV'] === 'production' ? 'production' : 'development'; @@ -29,23 +29,23 @@ export default defineConfig({ }, ...(mode !== 'production' && { vite: { - server: { - https: { - cert: './certs/server.crt', - key: './certs/server.key' + server: { + https: { + cert: './certs/server.crt', + key: './certs/server.key' + } } } - } }), markdown: { syntaxHighlight: 'shiki', shikiConfig: { - theme: 'css-variables', - themes: { - light: 'light-plus', - dark: 'dark-plus' - }, - wrap: true + theme: 'css-variables', + themes: { + light: 'light-plus', + dark: 'dark-plus' + }, + wrap: true } }, integrations: [ diff --git a/src/components/AuthorCard/index.astro b/src/components/AuthorCard/index.astro index 5cb06ed..94b2eab 100644 --- a/src/components/AuthorCard/index.astro +++ b/src/components/AuthorCard/index.astro @@ -5,7 +5,7 @@ import Avatar from '../Avatar/index.astro'; import './styles.css'; interface Props { - author: string + author: string; } const { author } = Astro.props; @@ -24,7 +24,7 @@ const { Content } = await render(); - {pronouns && ({pronouns})} + {pronouns && {pronouns}}
diff --git a/src/components/AuthorCard/styles.css b/src/components/AuthorCard/styles.css index 22758d1..9d0d667 100644 --- a/src/components/AuthorCard/styles.css +++ b/src/components/AuthorCard/styles.css @@ -1,51 +1,48 @@ .author-card { display: grid; - padding-inline: var(--size-3); - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; gap: var(--size-3); - place-items: center; grid-template-areas: - "avatar name" - "avatar bio"; + 'avatar name' + 'avatar bio'; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; margin: var(--size-3) 0; + padding-inline: var(--size-3); + place-items: center; } .author-card .author-name { - margin: 0; color: var(--title-color); - text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--gray-12); - text-decoration-color: var(--tjs-red-7); - text-underline-offset: var(--size-1); - grid-area: name; justify-self: start; + margin: 0; + text-decoration-color: var(--tjs-red-7); + text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--gray-12); + text-underline-offset: var(--size-1); } .author-card .author-picture { - grid-area: avatar; align-self: start; + grid-area: avatar; } .author-card .author-bio { grid-area: bio; - width: 100%; place-self: start start; + width: 100%; } @media (max-width: 768px) { .author-card { + grid-template-areas: + 'avatar' + 'name' + 'bio'; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; - grid-template-areas: - "avatar" - "name" - "bio"; } - .author-card .author-picture { - place-self: center center; - } + .author-card .author-picture { place-self: center center; } .author-card .author-name { justify-self: center; diff --git a/src/components/Avatar/index.astro b/src/components/Avatar/index.astro index f752357..8af8a60 100644 --- a/src/components/Avatar/index.astro +++ b/src/components/Avatar/index.astro @@ -4,9 +4,9 @@ import { Image } from 'astro:assets'; import './styles.css'; interface Props { - image: ImageMetadata, - imageAlt: string, - loading?: 'eager' | 'lazy' + image: ImageMetadata; + imageAlt: string; + loading?: 'eager' | 'lazy'; } const { image: avatar, imageAlt: avatarAlt, loading } = Astro.props; diff --git a/src/components/Avatar/styles.css b/src/components/Avatar/styles.css index 073dc59..927d5c5 100644 --- a/src/components/Avatar/styles.css +++ b/src/components/Avatar/styles.css @@ -1,24 +1,20 @@ .user-avatar { --image-size: var(--size-13); - - display: block; - - width: var(--image-size); - height: var(--image-size); aspect-ratio: var(--ratio-square); - border-radius: var(--radius-round); - overflow: hidden; border: solid var(--title-color) var(--size-2); + border-radius: var(--radius-round); box-shadow: var(--size-1) var(--size-1) var(--size-1) var(--gray-12); + display: block; + height: var(--image-size); + overflow: hidden; + width: var(--image-size); } .user-avatar img { - width: 100%; height: 100%; object-fit: cover; object-position: center; + width: 100%; } -@media (max-width: 768px) { - .user-avatar { --image-size: var(--size-12); } -} +@media (max-width: 768px) { .user-avatar { --image-size: var(--size-12); } } diff --git a/src/components/HtmlHead/index.astro b/src/components/HtmlHead/index.astro index 3b6290e..853d812 100644 --- a/src/components/HtmlHead/index.astro +++ b/src/components/HtmlHead/index.astro @@ -1,105 +1,3 @@ --- -import { pwaInfo } from 'virtual:pwa-info'; -import defaultSocialImage from '../../assets/icons/logo.svg'; -import printStylesheet from './print.css?url'; - -interface Props { - htmlTitle?: string[], - title: string, - url: string, - description: string, - tags?: string[], - authors?: string[], - image?: string, - imageAlt?: string, - createdAt?: Date, - updatedAt?: Date, - hasFeed?: boolean -} - -const { - htmlTitle, title, url, - description, tags, - authors, - - image, imageAlt, - - createdAt: publishedDate, - updatedAt: updatedDate, - - hasFeed = false -} = Astro.props; - -const BLOG_URL = Astro.site?.href; -const fullUrl = new URL(url, Astro.site).toString(); - -const socialImageAlt = imageAlt ?? 'Logo for TorontoJS, consisting of a red square with the letters "JS" in black on the left, and a sillouette of the CN Tower seen from the ground up on the right.'; -const socialImage = `${BLOG_URL}${(image ?? defaultSocialImage.src).replace(/^\//iu, '')}`; --- - - - - - {htmlTitle?.join(' | ') ?? title} - - - - - { hasFeed && } - - - - - - - {/* eslint-disable-next-line astro/no-set-html-directive */} - {pwaInfo && ()} - - - - - - - - - - - - - - - - - {authors?.map((author) => ( - <> - - - - - ))} - - - - - - - - - {tags && ()} - {publishedDate && ()} - {updatedDate && ()} - - - - - - - - - - - - - - diff --git a/src/components/HtmlHead/print.css b/src/components/HtmlHead/print.css index cc2e52c..ae9c28d 100644 --- a/src/components/HtmlHead/print.css +++ b/src/components/HtmlHead/print.css @@ -1,7 +1,6 @@ @media print { :root { --body-text: 12pt; - color-scheme: light; } @@ -10,17 +9,11 @@ margin-inline: 1.5rem; } - h1, h2, h3, h4, h5, h6 { - page-break-after: avoid; - } + h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } - p, li, blockquote, figure, img, pre .line { - page-break-inside: avoid; - } + p, li, blockquote, figure, img, pre .line { page-break-inside: avoid; } - a { - text-decoration: underline; - } + a { text-decoration: underline; } a:not(:has(> :is(img, picture)))[href]::after { content: ' (' attr(href) ')'; @@ -28,24 +21,17 @@ } a[rel~='external']::after { + background: none; display: inline; font-size: smaller; - background: none; vertical-align: baseline; } iframe { display: none; } - #post-share { - /* stylelint-disable-next-line declaration-no-important */ - display: none !important; - } + #post-share { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } - #related-posts ul { - flex-wrap: wrap; - } + #related-posts ul { flex-wrap: wrap; } - #post-contents p > img:only-child { - --image-size: 10rem; - } + #post-contents p > img:only-child { --image-size: 10rem; } } diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css index 24bc24f..a097a2f 100644 --- a/src/components/PageHeader/styles.css +++ b/src/components/PageHeader/styles.css @@ -1,16 +1,15 @@ #page-header { - width: auto; - margin: 1.25rem auto; - padding: 0 1rem; - text-align: center; - gap: var(--size-3); display: grid; - grid-template-columns: auto auto; - grid-template-rows: auto auto; + gap: var(--size-3); grid-template-areas: 'picture title' - 'picture aside' - ; + 'picture aside'; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + margin: 1.25rem auto; + padding: 0 1rem; + text-align: center; + width: auto; } #page-header > *:not(h1):not(aside) { grid-area: picture; } @@ -18,22 +17,20 @@ #page-header > aside { grid-area: aside; } #page-header:has(> h1:first-child) { - grid-template-columns: auto; - grid-template-rows: auto auto; grid-template-areas: 'title' - 'aside' - ; + 'aside'; + grid-template-columns: auto; + grid-template-rows: auto auto; } @media (max-width: 550px) { #page-header { - grid-template-columns: auto; - grid-template-rows: repeat(3, auto); grid-template-areas: 'picture' 'title' - 'aside' - ; + 'aside'; + grid-template-columns: auto; + grid-template-rows: repeat(3, auto); } } diff --git a/src/components/Pagination/index.astro b/src/components/Pagination/index.astro index 6d1cf1d..59e4fd8 100644 --- a/src/components/Pagination/index.astro +++ b/src/components/Pagination/index.astro @@ -1,48 +1,59 @@ --- import { Icon } from 'astro-icon/components'; - import './styles.css'; interface Props { - baseUrl: string, - currentPage: number, - lastPage: number, - prevUrl?: string, - nextUrl?: string, - start: number, - end: number, - total: number, - size: number + baseUrl: string; + currentPage: number; + lastPage: number; + prevUrl?: string; + nextUrl?: string; + start: number; + end: number; + total: number; + size: number; } const { - currentPage, lastPage, + currentPage, + lastPage, baseUrl, - prevUrl, nextUrl, - start, end, total, size + prevUrl, + nextUrl, + start, + end, + total, + size } = Astro.props; const TRIM_PAGE_NUMBER = 2; const firstPageInNav = Math.max(1, currentPage - TRIM_PAGE_NUMBER); const lastPageInNav = Math.min(lastPage, currentPage + TRIM_PAGE_NUMBER); + +const navLinks = Array(lastPageInNav - firstPageInNav + 1).fill(null).map((_, i) => { + const currentPageNumber = firstPageInNav + i; + const href = currentPageNumber === 1 ? '' : currentPageNumber; + + return { + label: currentPageNumber.toString(), + url: `${baseUrl}/${href}`, + isCurrentPage: currentPageNumber === currentPage + }; +}); --- diff --git a/src/components/SiteFooter/styles.css b/src/components/SiteFooter/styles.css index 23a969e..62816db 100644 --- a/src/components/SiteFooter/styles.css +++ b/src/components/SiteFooter/styles.css @@ -1,20 +1,20 @@ #bottom-nav ul { - display: flex; - gap: 0.5rem; - justify-content: center; align-items: center; - padding: var(--size-2); background-color: var(--tjs-dark-bg); + display: flex; font-weight: bold; + gap: 0.5rem; + justify-content: center; margin-block-start: var(--size-4); + padding: var(--size-2); } -#bottom-nav .footer-items{ - display: inline-flex; +#bottom-nav .footer-items { align-items: center; + display: inline-flex; + flex-wrap: wrap; gap: 1rem; margin-left: 0.75rem; - flex-wrap: wrap; overflow-wrap: break-word; } diff --git a/src/components/SiteNav/index.astro b/src/components/SiteNav/index.astro index 6ab67b3..4bae092 100644 --- a/src/components/SiteNav/index.astro +++ b/src/components/SiteNav/index.astro @@ -36,17 +36,29 @@ const BLOG_URL = Astro.site?.href; TorontoJS Logo!