diff --git a/.vscode/settings.json b/.vscode/settings.json index f0e6104..8c88839 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,5 +12,7 @@ "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, - "[typescriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } + "[typescriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint" + } } diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro new file mode 100644 index 0000000..b42cac5 --- /dev/null +++ b/src/components/atoms/book-tile.astro @@ -0,0 +1,34 @@ +--- +import { Image } from '@astrojs/image/components'; + +import Typography from '@/atoms/typography.astro'; +import type { Book } from '@/types/favorites-section'; + +export interface Props extends astroHTML.JSX.HTMLAttributes { + value: Book; +} + +const { value, ...props } = Astro.props; +const BookTile = 'a'; +--- + + + {value.title} +
+ + {value.title} + + + {value.author} + +
+ diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro new file mode 100644 index 0000000..fdfcd55 --- /dev/null +++ b/src/components/atoms/media-tile.astro @@ -0,0 +1,34 @@ +--- +import { Image } from '@astrojs/image/components'; + +import Typography from '@/atoms/typography.astro'; +import type { Media } from '@/types/favorites-section'; + +export interface Props extends astroHTML.JSX.HTMLAttributes { + value: Media; +} + +const { value, ...props } = Astro.props; +const MediaTile = 'a'; +--- + + + {value.title} +
+ + {value.title} + + + {value.type} + +
+ diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro new file mode 100644 index 0000000..928adfa --- /dev/null +++ b/src/components/atoms/person-tile.astro @@ -0,0 +1,34 @@ +--- +import { Image } from '@astrojs/image/components'; + +import Typography from '@/atoms/typography.astro'; +import type { Person } from '@/types/favorites-section'; + +export interface Props extends astroHTML.JSX.HTMLAttributes { + value: Person; +} + +const { value, ...props } = Astro.props; +const PersonTile = 'a'; +--- + + + {value.name} +
+ + {value.name} + + + {value.name} + +
+ diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro new file mode 100644 index 0000000..07d5a1d --- /dev/null +++ b/src/components/atoms/video-tile.astro @@ -0,0 +1,36 @@ +--- +import { Image } from '@astrojs/image/components'; + +import Typography from '@/atoms/typography.astro'; +import type { Video } from '@/types/favorites-section'; + +export interface Props extends astroHTML.JSX.HTMLAttributes { + value: Video; +} + +const { value, ...props } = Astro.props; +const VideoTile = 'a'; + +const getVideoThumbnail = (url: string) => { + return `https://img.youtube.com/vi/${url.split('/').pop()}/0.jpg`; +}; +--- + + + {value.title} +
+ + {value.title} + +
+ diff --git a/src/pages/playground/favorites.astro b/src/pages/playground/favorites.astro new file mode 100644 index 0000000..faa065d --- /dev/null +++ b/src/pages/playground/favorites.astro @@ -0,0 +1,51 @@ +--- +import BookTile from '@/atoms/book-tile.astro'; +import MediaTile from '@/atoms/media-tile.astro'; +import PersonTile from '@/atoms/person-tile.astro'; +import Typography from '@/atoms/typography.astro'; +import VideoTile from '@/atoms/video-tile.astro'; +import type { Book, Media, Person, Video } from '@/types/favorites-section'; + +const book: Book = { + cover: import('@/assets/favorites/books/book-1.jpeg'), + title: 'The Pragmatic Programmer: From Journeyman to Master', + author: 'Andy Hunt, Dave Thomas', + url: 'https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer', +}; + +const person: Person = { + image: import('@/assets/favorites/people/person-1.jpg'), + name: 'Kent C. Dodds', + url: 'https://kentcdodds.com/', +}; + +const video: Video = { + thumbnail: import('@/assets/favorites/videos/video-1.jpeg'), + title: 'Building Resilient Frontend Architecture - Monica Lent - GOTO 2019', + url: 'https://youtu.be/TqfbAXCCVwE', +}; + +const media: Media = { + image: import('@/assets/favorites/media/media-1.jpeg'), + title: 'Fireship.io', + type: 'YouTube channel', + url: 'https://www.youtube.com/c/Fireship', +}; +--- + +Favourite Book +
+ +
+Favourite Person +
+ +
+Favourite Video +
+ +
+Favourite Media +
+ +
diff --git a/src/types/favorites-section.ts b/src/types/favorites-section.ts index 6e567ca..e65c0bb 100644 --- a/src/types/favorites-section.ts +++ b/src/types/favorites-section.ts @@ -1,25 +1,25 @@ import type { LocalImage, SectionConfig } from './common'; -interface Book { +export interface Book { title: string; cover: LocalImage; author: string; url?: string; } -interface Person { +export interface Person { name: string; image: LocalImage; url?: string; } -interface Video { +export interface Video { title: string; thumbnail: LocalImage; url: string; } -interface Media { +export interface Media { title: string; type: string; image: LocalImage;