From 34ee1e40cd71f439ca13f33c5d72457c8a7074f9 Mon Sep 17 00:00:00 2001 From: Ahmet ALMAZ Date: Wed, 23 Nov 2022 14:57:28 +0300 Subject: [PATCH 1/8] feat: add dominant colors to music and shows feat: add dominant colors to now watching/playing widgets feat: add more background patterns feat: pick border-effect border color feat: add classes to section-container chore: rename utils using kebab-case --- components/Category.tsx | 2 +- components/Tag.tsx | 2 +- components/UI/BorderEffect.tsx | 31 +- components/UI/Nav.tsx | 2 +- components/UI/SectionContainer.tsx | 16 +- components/blog/FeaturedArt.tsx | 2 +- components/home/HeroCard.tsx | 4 +- components/metrics/Raindrop/BookmarkCard.tsx | 2 +- components/metrics/Spotify/NowPlaying.tsx | 40 +- components/metrics/Spotify/Track.tsx | 56 +- components/metrics/Trakt/NowWatching.tsx | 35 +- components/metrics/Trakt/Release.tsx | 47 +- data/count_total.json | 24 +- hooks/useHasMounted.tsx | 9 + hooks/usePalette.ts | 75 + layouts/ArchiveLayout.tsx | 2 +- layouts/AuthorLayout.tsx | 2 +- layouts/ListLayout.tsx | 2 +- layouts/PostLayout.tsx | 4 +- layouts/PostSimple.tsx | 2 +- layouts/SearchLayout.tsx | 2 +- lib/categories.ts | 2 +- lib/supabase.ts | 2 +- lib/tags.ts | 2 +- lib/types.ts | 16 + package-lock.json | 10548 ++-------------- package.json | 1 + pages/account.tsx | 2 +- pages/api/sitemap/index.ts | 2 +- pages/blog/categories.tsx | 2 +- pages/blog/category/[category].tsx | 2 +- pages/blog/tag/[tag].tsx | 2 +- pages/blog/tags.tsx | 2 +- pages/dashboard/music.tsx | 2 +- pages/dashboard/shows.tsx | 2 +- .../arrow-up.svg} | 0 public/images/patterns/death-star.svg | 9 + public/images/patterns/skulls.svg | 18 + tailwind.config.js | 4 +- utils/came-case.ts | 7 + utils/{formatDate.ts => format-date.ts} | 0 utils/{getGravatar.ts => get-gravatar.ts} | 0 ...{getReadingTime.ts => get-reading-time.ts} | 0 utils/hex-to-rgb.ts | 17 + utils/{kebabCase.ts => kebab-case.ts} | 0 utils/{playSparkline.ts => play-sparkline.ts} | 0 46 files changed, 1544 insertions(+), 9459 deletions(-) create mode 100644 hooks/useHasMounted.tsx create mode 100644 hooks/usePalette.ts rename public/images/{others/arrow-up-pattern.svg => patterns/arrow-up.svg} (100%) create mode 100644 public/images/patterns/death-star.svg create mode 100644 public/images/patterns/skulls.svg create mode 100644 utils/came-case.ts rename utils/{formatDate.ts => format-date.ts} (100%) rename utils/{getGravatar.ts => get-gravatar.ts} (100%) rename utils/{getReadingTime.ts => get-reading-time.ts} (100%) create mode 100644 utils/hex-to-rgb.ts rename utils/{kebabCase.ts => kebab-case.ts} (100%) rename utils/{playSparkline.ts => play-sparkline.ts} (100%) diff --git a/components/Category.tsx b/components/Category.tsx index 8c2953c..5a1ec9a 100644 --- a/components/Category.tsx +++ b/components/Category.tsx @@ -1,7 +1,7 @@ import { Taxonomy } from 'lib/interfaces' import { default as Link } from '@/components/Link' -import kebabCase from '@/utils/kebabCase' +import kebabCase from '@/utils/kebab-case' const Category = ({ text }: Taxonomy): JSX.Element => { return ( diff --git a/components/Tag.tsx b/components/Tag.tsx index e93d546..84f1630 100644 --- a/components/Tag.tsx +++ b/components/Tag.tsx @@ -1,7 +1,7 @@ import { Taxonomy } from 'lib/interfaces' import { default as Link } from '@/components/Link' -import kebabCase from '@/utils/kebabCase' +import kebabCase from '@/utils/kebab-case' const TagsColorDictionary = { netlify: 'text-netlify', diff --git a/components/UI/BorderEffect.tsx b/components/UI/BorderEffect.tsx index 02607a4..51b9490 100644 --- a/components/UI/BorderEffect.tsx +++ b/components/UI/BorderEffect.tsx @@ -1,5 +1,32 @@ -export default function BorderEffect(): JSX.Element { - return ( +export default function BorderEffect({ bgColor }: { bgColor?: string }): JSX.Element { + return bgColor ? ( + <> +
+
+
+
+ + ) : ( <>
diff --git a/components/UI/Nav.tsx b/components/UI/Nav.tsx index 1785ff8..2400817 100644 --- a/components/UI/Nav.tsx +++ b/components/UI/Nav.tsx @@ -22,7 +22,7 @@ import AudioToggle from '@/components/toggles/AudioToggle' import siteMetadata from '@/data/siteMetadata' import { useClickOutside } from '@/hooks/useClickOutside' import { useSFX } from '@/hooks/useSFX' -import { getGravatar } from '@/utils/getGravatar' +import { getGravatar } from '@/utils/get-gravatar' const Nav = ({ pickerOpen, setPickerOpen }) => { const [firstName, setFirstName] = useState(null) diff --git a/components/UI/SectionContainer.tsx b/components/UI/SectionContainer.tsx index 7953d99..7b54571 100644 --- a/components/UI/SectionContainer.tsx +++ b/components/UI/SectionContainer.tsx @@ -1,5 +1,17 @@ -const SectionContainer = ({ children }) => { - return ( +const SectionContainer = ({ + className, + children, +}: { + className?: string + children: React.ReactNode +}) => { + return className ? ( +
+ {children} +
+ ) : (
{children}
diff --git a/components/blog/FeaturedArt.tsx b/components/blog/FeaturedArt.tsx index 2a4e083..24a4234 100644 --- a/components/blog/FeaturedArt.tsx +++ b/components/blog/FeaturedArt.tsx @@ -1,4 +1,4 @@ -import playSparkline from '@/utils/playSparkline' +import playSparkline from '@/utils/play-sparkline' interface IProps { text: string diff --git a/components/home/HeroCard.tsx b/components/home/HeroCard.tsx index f6772df..dc26a7f 100644 --- a/components/home/HeroCard.tsx +++ b/components/home/HeroCard.tsx @@ -2,7 +2,8 @@ import { default as Link } from '@/components/Link' import { BorderEffect } from '@/components/UI' import { Divider } from '@/components/UI/' import siteMetadata from '@/data/siteMetadata' -function HeroCard() { + +export default function HeroCard() { if (typeof window === 'object') { const photo = document.querySelector('.u-photo') if (photo) { @@ -51,4 +52,3 @@ function HeroCard() { ) } -export default HeroCard diff --git a/components/metrics/Raindrop/BookmarkCard.tsx b/components/metrics/Raindrop/BookmarkCard.tsx index d6d4a69..bdf8bef 100644 --- a/components/metrics/Raindrop/BookmarkCard.tsx +++ b/components/metrics/Raindrop/BookmarkCard.tsx @@ -1,7 +1,7 @@ import { RaindropCard } from 'lib/types' import { default as Link } from '@/components/Link' -import formatDate from '@/utils/formatDate' +import formatDate from '@/utils/format-date' export default function BookmarkCard(bookmark: RaindropCard): JSX.Element { const title = bookmark.title diff --git a/components/metrics/Spotify/NowPlaying.tsx b/components/metrics/Spotify/NowPlaying.tsx index 0b673db..1cff9ec 100644 --- a/components/metrics/Spotify/NowPlaying.tsx +++ b/components/metrics/Spotify/NowPlaying.tsx @@ -4,31 +4,55 @@ import useSWR from 'swr' import { SpotifyIcon } from '@/components/icons' import { default as Image } from '@/components/Image' import { default as Link } from '@/components/Link' +import { useSafePalette } from '@/hooks/usePalette' import fetcher from '@/lib/fetcher' +import hexToRGB from '@/utils/hex-to-rgb' export default function NowPlaying(): JSX.Element { const { data } = useSWR('/api/now-playing', fetcher) + const { data: palette } = useSafePalette(data?.albumImageUrl || '/images/brand/logo.png') + + const light = palette?.lightVibrant + const dark = palette?.darkVibrant + const vibrant = palette?.vibrant + const darkWithOpacity = hexToRGB(palette?.darkVibrant, 0.47) return data?.isPlaying ? ( -
+
Spotify
{data?.songUrl ? ( - - {data.title} + +

{data.title}

) : (

Not Playing

)} -

{data?.artist ?? 'Spotify'}

+

+ {data?.artist ?? 'Spotify'} +

+
+
+
-
) : null } diff --git a/components/metrics/Spotify/Track.tsx b/components/metrics/Spotify/Track.tsx index 67c33db..896d188 100644 --- a/components/metrics/Spotify/Track.tsx +++ b/components/metrics/Spotify/Track.tsx @@ -1,14 +1,44 @@ import { Song } from 'lib/types' +import { useState } from 'react' import { PauseIcon, PlayIcon } from '@/components/icons' import { default as Image } from '@/components/Image' import { BorderEffect } from '@/components/UI' +import { useSafePalette } from '@/hooks/usePalette' +import hexToRGB from '@/utils/hex-to-rgb' export default function Track(track: Song): JSX.Element { + const [isHover, setIsHover] = useState(false) + + const handleMouseEnter = () => { + setIsHover(true) + } + + const handleMouseLeave = () => { + setIsHover(false) + } + + const { data: palette } = useSafePalette(track?.albumImage) + + const light = palette?.lightVibrant + const dark = palette?.darkVibrant + const vibrant = palette?.vibrant + const darkWithOpacity = hexToRGB(palette?.darkVibrant, 0.47) + return ( -
- -
+
+ +
-
{track.title}
-
{track.artist}
+
+ {track.title} +
+
+ {track.artist} +
{track.audioUrl ? (
- + diff --git a/components/blog/ScrollTop.tsx b/components/blog/ScrollTop.tsx index 8e7c30a..0dfb4d4 100644 --- a/components/blog/ScrollTop.tsx +++ b/components/blog/ScrollTop.tsx @@ -25,7 +25,7 @@ const ScrollTop = () => { diff --git a/components/hCard.tsx b/components/hCard.tsx index 6d72e3e..2d1d7e7 100644 --- a/components/hCard.tsx +++ b/components/hCard.tsx @@ -1,4 +1,5 @@ import { Turkiye } from '@/components/icons' +import { default as Image } from '@/components/Image' import { default as Link } from '@/components/Link' import siteMetadata from '@/data/siteMetadata' @@ -15,27 +16,24 @@ export default function HCard(): JSX.Element { } return ( -
-
-
- +
+ {siteMetadata.author} +
+ {siteMetadata.author} -

{siteMetadata.nickname}

-

- - {siteMetadata.position} - -

-

{siteMetadata.location}

+

{siteMetadata.nickname}

+

{siteMetadata.location}

+
+
+
-
) } diff --git a/components/metrics/Spotify/NowPlaying.tsx b/components/metrics/Spotify/NowPlaying.tsx index 1cff9ec..72d6fa7 100644 --- a/components/metrics/Spotify/NowPlaying.tsx +++ b/components/metrics/Spotify/NowPlaying.tsx @@ -20,37 +20,33 @@ export default function NowPlaying(): JSX.Element { return data?.isPlaying ? (
Spotify -
+
{data?.songUrl ? ( - +

{data.title}

) : ( -

Not Playing

+

Not Playing

)}

{data?.artist ?? 'Spotify'}

-
+
diff --git a/components/metrics/Trakt/NowWatching.tsx b/components/metrics/Trakt/NowWatching.tsx index 09ea81b..1b4ef5e 100644 --- a/components/metrics/Trakt/NowWatching.tsx +++ b/components/metrics/Trakt/NowWatching.tsx @@ -22,31 +22,31 @@ export default function NowWatching(): JSX.Element { return data?.isWatching ? (
Trakt -
+
{data?.episodeTitle ? ( -

{data.episodeTitle}

+

{data.episodeTitle}

) : ( -

Not Watching

+

Not Watching

)}

{data?.title ?? 'Trakt'}

-
+
diff --git a/data/count_total.json b/data/count_total.json index 0c57534..659275c 100644 --- a/data/count_total.json +++ b/data/count_total.json @@ -1,16 +1,16 @@ {"header" : { "cloc_url" : "github.com/AlDanial/cloc", "cloc_version" : "1.94", - "elapsed_seconds" : 0.667289018630981, + "elapsed_seconds" : 1.39933204650879, "n_files" : 282, - "n_lines" : 12551, - "files_per_second" : 422.605485968516, - "lines_per_second" : 18808.9413276271}, + "n_lines" : 12544, + "files_per_second" : 201.524720814881, + "lines_per_second" : 8964.27694291443}, "TypeScript" :{ "nFiles": 263, - "blank": 1244, - "comment": 172, - "code": 10047}, + "blank": 1243, + "comment": 174, + "code": 10039}, "JavaScript" :{ "nFiles": 8, "blank": 17, @@ -52,7 +52,7 @@ "comment": 2, "code": 1}, "SUM": { - "blank": 1291, - "comment": 201, - "code": 11059, + "blank": 1290, + "comment": 203, + "code": 11051, "nFiles": 282} } diff --git a/layouts/AuthorLayout.tsx b/layouts/AuthorLayout.tsx index 56c58f7..bb825ca 100644 --- a/layouts/AuthorLayout.tsx +++ b/layouts/AuthorLayout.tsx @@ -26,7 +26,7 @@ export default function AuthorLayout({ author, posts }: Authors): JSX.Element { {twitter && ( - + )} diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx index 7187a42..470901a 100644 --- a/layouts/PostLayout.tsx +++ b/layouts/PostLayout.tsx @@ -80,15 +80,15 @@ export default function PostLayout({ frontMatter, next, prev, content }: IPostLa />
Name
-
Twitter
{author.twitter && ( - + )} diff --git a/layouts/ResumeLayout.tsx b/layouts/ResumeLayout.tsx index 28c8da0..4e19c93 100644 --- a/layouts/ResumeLayout.tsx +++ b/layouts/ResumeLayout.tsx @@ -42,7 +42,7 @@ export default function ResumeLayout({
-
+
{basics.email} diff --git a/utils/format-date.ts b/utils/format-date.ts index 87a292f..f925722 100644 --- a/utils/format-date.ts +++ b/utils/format-date.ts @@ -1,14 +1,15 @@ import siteMetadata from '@/data/siteMetadata' const formatDate = (date: string) => { - const options: Intl.DateTimeFormatOptions = { - dateStyle: 'medium', - timeStyle: 'short', - hour12: false, - } - const now = new Date(date).toLocaleString(siteMetadata.locale, options) - - return now + // convert date and time to be valid ISO-8601 + const isoDate = new Date(date).toISOString() + // format date to be locale specific + const formattedDate = new Date(isoDate).toLocaleDateString(siteMetadata.locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + }) + return formattedDate } export default formatDate From 0ff89f7ad3a39085ca20c00b7a12a94a19b85efe Mon Sep 17 00:00:00 2001 From: Ahmet ALMAZ Date: Thu, 24 Nov 2022 21:20:41 +0300 Subject: [PATCH 5/8] chore: removed unused code feat: ISO8601 machine-readable date and time for h-entry microformat fix: safe-place being requested even when no widget is displayed --- .eslintrc.js | 1 + components/UI/Nav.tsx | 2 +- components/hCard.tsx | 21 ++++------------ components/metrics/Spotify/NowPlaying.tsx | 2 +- components/metrics/Trakt/NowWatching.tsx | 2 +- data/count_total.json | 20 ++++++++-------- data/siteMetadata.ts | 5 +++- layouts/ArchiveLayout.tsx | 6 ++--- layouts/ListLayout.tsx | 6 ++--- layouts/PostLayout.tsx | 10 ++++---- layouts/PostSimple.tsx | 6 ++--- pages/links.tsx | 2 +- utils/format-date.ts | 29 ++++++++++++++--------- 13 files changed, 56 insertions(+), 56 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 15748eb..8550152 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -60,6 +60,7 @@ module.exports = { 'dt-edited', 'p-summary', 'u-url', + 'u-uid', 'p-name', 'p-author', 'h-card', diff --git a/components/UI/Nav.tsx b/components/UI/Nav.tsx index 8aabe43..1f14584 100644 --- a/components/UI/Nav.tsx +++ b/components/UI/Nav.tsx @@ -105,7 +105,7 @@ const Nav = ({ pickerOpen, setPickerOpen }) => {
- + diff --git a/components/hCard.tsx b/components/hCard.tsx index 2d1d7e7..749665f 100644 --- a/components/hCard.tsx +++ b/components/hCard.tsx @@ -4,22 +4,11 @@ import { default as Link } from '@/components/Link' import siteMetadata from '@/data/siteMetadata' export default function HCard(): JSX.Element { - if (typeof window === 'object') { - const photo = document.querySelector('.u-photo') - if (photo) { - window.addEventListener('deviceorientation', (e) => { - const tiltLR = e.gamma - //@ts-ignore - photo.style.transform = `rotate(${tiltLR * -1}deg)` - }) - } - } - return (
{siteMetadata.author}

{siteMetadata.nickname}

-

{siteMetadata.location}

-
-
- +

{siteMetadata.position}

+

+ {siteMetadata.location.country} +

) diff --git a/components/metrics/Spotify/NowPlaying.tsx b/components/metrics/Spotify/NowPlaying.tsx index 72d6fa7..30fec42 100644 --- a/components/metrics/Spotify/NowPlaying.tsx +++ b/components/metrics/Spotify/NowPlaying.tsx @@ -10,7 +10,7 @@ import hexToRGB from '@/utils/hex-to-rgb' export default function NowPlaying(): JSX.Element { const { data } = useSWR('/api/now-playing', fetcher) - const { data: palette } = useSafePalette(data?.albumImageUrl || '/images/brand/logo.png') + const { data: palette } = useSafePalette(data?.albumImageUrl || null) const light = palette?.lightVibrant const dark = palette?.darkVibrant diff --git a/components/metrics/Trakt/NowWatching.tsx b/components/metrics/Trakt/NowWatching.tsx index 1b4ef5e..c1dc209 100644 --- a/components/metrics/Trakt/NowWatching.tsx +++ b/components/metrics/Trakt/NowWatching.tsx @@ -11,7 +11,7 @@ export default function NowWatching(): JSX.Element { const { data } = useSWR('/api/now-watching', fetcher) const { data: palette } = useSafePalette( - `https://image.tmdb.org/t/p/original/${data?.poster}` || '/images/brand/logo.png' + data?.isWatching ? `https://image.tmdb.org/t/p/original/${data?.poster}` : null ) const light = palette?.lightVibrant diff --git a/data/count_total.json b/data/count_total.json index 659275c..a243835 100644 --- a/data/count_total.json +++ b/data/count_total.json @@ -1,21 +1,21 @@ {"header" : { "cloc_url" : "github.com/AlDanial/cloc", "cloc_version" : "1.94", - "elapsed_seconds" : 1.39933204650879, + "elapsed_seconds" : 0.575484991073608, "n_files" : 282, "n_lines" : 12544, - "files_per_second" : 201.524720814881, - "lines_per_second" : 8964.27694291443}, + "files_per_second" : 490.021467760452, + "lines_per_second" : 21797.2669914436}, "TypeScript" :{ "nFiles": 263, - "blank": 1243, - "comment": 174, - "code": 10039}, + "blank": 1245, + "comment": 173, + "code": 10037}, "JavaScript" :{ "nFiles": 8, "blank": 17, "comment": 23, - "code": 831}, + "code": 832}, "Markdown" :{ "nFiles": 2, "blank": 22, @@ -52,7 +52,7 @@ "comment": 2, "code": 1}, "SUM": { - "blank": 1290, - "comment": 203, - "code": 11051, + "blank": 1292, + "comment": 202, + "code": 11050, "nFiles": 282} } diff --git a/data/siteMetadata.ts b/data/siteMetadata.ts index e7691de..4547677 100644 --- a/data/siteMetadata.ts +++ b/data/siteMetadata.ts @@ -4,7 +4,10 @@ const siteMetadata = { author: 'Ahmet ALMAZ', nickname: 'Music47ell', position: 'Founder and Editor-in-Chief', - location: 'Türkiye', + location: { + country: 'Türkiye', + emojiFlag: '🇹🇷', + }, headerTitle: 'News47ell', description: 'Tech news, reviews and interesting links', language: 'en-us', diff --git a/layouts/ArchiveLayout.tsx b/layouts/ArchiveLayout.tsx index f5f5387..000f2b4 100644 --- a/layouts/ArchiveLayout.tsx +++ b/layouts/ArchiveLayout.tsx @@ -3,7 +3,7 @@ import { Layout } from 'lib/interfaces' import { default as Link } from '@/components/Link' import { SectionContainer } from '@/components/UI' import { useSFX } from '@/hooks/useSFX' -import formatDate from '@/utils/format-date' +import { displayDate, hEntryDate } from '@/utils/format-date' export default function ArchiveLayout({ posts }: Layout): JSX.Element { const { playMouseClick } = useSFX() @@ -21,10 +21,10 @@ export default function ArchiveLayout({ posts }: Layout): JSX.Element {
Published on
diff --git a/layouts/ListLayout.tsx b/layouts/ListLayout.tsx index fc4a4ba..0a31bf8 100644 --- a/layouts/ListLayout.tsx +++ b/layouts/ListLayout.tsx @@ -4,7 +4,7 @@ import Pagination from '@/components/blog/Pagination' import { default as Link } from '@/components/Link' import { BorderEffect } from '@/components/UI' import { useSFX } from '@/hooks/useSFX' -import formatDate from '@/utils/format-date' +import { displayDate, hEntryDate } from '@/utils/format-date' export default function ListLayout({ title, @@ -39,10 +39,10 @@ export default function ListLayout({
{post.category} diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx index 470901a..24593ef 100644 --- a/layouts/PostLayout.tsx +++ b/layouts/PostLayout.tsx @@ -12,7 +12,7 @@ import Tag from '@/components/Tag' import { PageTitle } from '@/components/UI' import siteMetadata from '@/data/siteMetadata' import { useViewsBySlug } from '@/hooks/useViews' -import formatDate from '@/utils/format-date' +import { displayDate, hEntryDate } from '@/utils/format-date' import { getGravatar } from '@/utils/get-gravatar' export default function PostLayout({ frontMatter, next, prev, content }: IPostLayout): JSX.Element { @@ -40,11 +40,11 @@ export default function PostLayout({ frontMatter, next, prev, content }: IPostLa
@@ -75,8 +75,8 @@ export default function PostLayout({ frontMatter, next, prev, content }: IPostLa src={getGravatar(author.email, 38)} width={38} height={38} - alt="u-photo" - className="h-10 w-10 rounded-full" + alt={author.first_name + ' ' + author.last_name} + className="u-photo h-10 w-10 rounded-full" />
Name
diff --git a/layouts/PostSimple.tsx b/layouts/PostSimple.tsx index ca7cc4f..dd1a3b7 100644 --- a/layouts/PostSimple.tsx +++ b/layouts/PostSimple.tsx @@ -7,7 +7,7 @@ import Markdown from '@/components/markdown' import { BlogSEO } from '@/components/SEO' import { PageTitle } from '@/components/UI' import siteMetadata from '@/data/siteMetadata' -import formatDate from '@/utils/format-date' +import { displayDate, hEntryDate } from '@/utils/format-date' export default function PostSimple({ frontMatter, next, prev, content }: IPostSimple): JSX.Element { const { author, published_at, updated_at, title, slug, linked } = frontMatter @@ -29,10 +29,10 @@ export default function PostSimple({ frontMatter, next, prev, content }: IPostSi
Published on
diff --git a/pages/links.tsx b/pages/links.tsx index 3255859..52a8ed2 100644 --- a/pages/links.tsx +++ b/pages/links.tsx @@ -27,7 +27,7 @@ export default function Links() {

Links

-
+
{siteMetadata.socialLinks.author.map((l, idx) => { const Icon = authorIcons[idx] diff --git a/utils/format-date.ts b/utils/format-date.ts index f925722..2c2f77a 100644 --- a/utils/format-date.ts +++ b/utils/format-date.ts @@ -1,15 +1,22 @@ import siteMetadata from '@/data/siteMetadata' -const formatDate = (date: string) => { - // convert date and time to be valid ISO-8601 - const isoDate = new Date(date).toISOString() - // format date to be locale specific - const formattedDate = new Date(isoDate).toLocaleDateString(siteMetadata.locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - }) - return formattedDate +const displayDate = (date: string) => { + // human-readable date and time for display purposes (e.g. blog posts) + const options: Intl.DateTimeFormatOptions = { + dateStyle: 'medium', + timeStyle: 'short', + hour12: true, + } + const now = new Date(date).toLocaleString(siteMetadata.locale, options) + + return now +} + +const hEntryDate = (date: string) => { + // ISO8601 machine-readable datetime for h-entry microformat (https://indieweb.org/h-entry) + const now = new Date(date).toISOString() + + return now } -export default formatDate +export { displayDate, hEntryDate } From 271d92b4f8b45a9d664ad026f0621da23e21fee0 Mon Sep 17 00:00:00 2001 From: Ahmet ALMAZ Date: Thu, 24 Nov 2022 21:36:49 +0300 Subject: [PATCH 6/8] fix: format date --- components/metrics/Raindrop/BookmarkCard.tsx | 4 ++-- data/count_total.json | 6 +++--- layouts/SearchLayout.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/metrics/Raindrop/BookmarkCard.tsx b/components/metrics/Raindrop/BookmarkCard.tsx index bdf8bef..496d4f9 100644 --- a/components/metrics/Raindrop/BookmarkCard.tsx +++ b/components/metrics/Raindrop/BookmarkCard.tsx @@ -1,7 +1,7 @@ import { RaindropCard } from 'lib/types' import { default as Link } from '@/components/Link' -import formatDate from '@/utils/format-date' +import { displayDate } from '@/utils/format-date' export default function BookmarkCard(bookmark: RaindropCard): JSX.Element { const title = bookmark.title @@ -16,7 +16,7 @@ export default function BookmarkCard(bookmark: RaindropCard): JSX.Element {
  • {title}

    • {bookmark.tags.join(', ')} diff --git a/data/count_total.json b/data/count_total.json index a243835..d3e35d4 100644 --- a/data/count_total.json +++ b/data/count_total.json @@ -1,11 +1,11 @@ {"header" : { "cloc_url" : "github.com/AlDanial/cloc", "cloc_version" : "1.94", - "elapsed_seconds" : 0.575484991073608, + "elapsed_seconds" : 0.57326602935791, "n_files" : 282, "n_lines" : 12544, - "files_per_second" : 490.021467760452, - "lines_per_second" : 21797.2669914436}, + "files_per_second" : 491.918211717264, + "lines_per_second" : 21881.6384673098}, "TypeScript" :{ "nFiles": 263, "blank": 1245, diff --git a/layouts/SearchLayout.tsx b/layouts/SearchLayout.tsx index 58b0dc7..ce05373 100644 --- a/layouts/SearchLayout.tsx +++ b/layouts/SearchLayout.tsx @@ -5,7 +5,7 @@ import { default as Link } from '@/components/Link' import useDebounce from '@/hooks/useDebounce' import { usePostsSearch } from '@/hooks/useSearch' import { PostsSearchResult } from '@/lib/types' -import formatDate from '@/utils/format-date' +import { displayDate } from '@/utils/format-date' const SearchLayout: FC = () => { const [query, setQuery] = useState('') @@ -79,7 +79,7 @@ const SearchLayout: FC = () => {

    {result.title}
    -
    {formatDate(result.published_at)}
    +
    {displayDate(result.published_at)}
    From 7e926e59dfa7f9913f168bad4ec2fcf136b476e3 Mon Sep 17 00:00:00 2001 From: Ahmet ALMAZ Date: Thu, 24 Nov 2022 23:22:56 +0300 Subject: [PATCH 7/8] chore: change u-photo priority chore: change nav link to site-url --- components/UI/Nav.tsx | 6 +++++- components/hCard.tsx | 1 + data/count_total.json | 12 ++++++------ layouts/PostLayout.tsx | 1 + 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/components/UI/Nav.tsx b/components/UI/Nav.tsx index 1f14584..2c02b95 100644 --- a/components/UI/Nav.tsx +++ b/components/UI/Nav.tsx @@ -105,7 +105,11 @@ const Nav = ({ pickerOpen, setPickerOpen }) => {
    - + diff --git a/components/hCard.tsx b/components/hCard.tsx index 749665f..6205eb3 100644 --- a/components/hCard.tsx +++ b/components/hCard.tsx @@ -12,6 +12,7 @@ export default function HCard(): JSX.Element { height={64} width={64} src="/images/others/me.png" + priority={true} />
    diff --git a/data/count_total.json b/data/count_total.json index d3e35d4..c00573c 100644 --- a/data/count_total.json +++ b/data/count_total.json @@ -1,16 +1,16 @@ {"header" : { "cloc_url" : "github.com/AlDanial/cloc", "cloc_version" : "1.94", - "elapsed_seconds" : 0.57326602935791, + "elapsed_seconds" : 0.506438970565796, "n_files" : 282, - "n_lines" : 12544, - "files_per_second" : 491.918211717264, - "lines_per_second" : 21881.6384673098}, + "n_lines" : 12550, + "files_per_second" : 556.829186515699, + "lines_per_second" : 24780.873371532}, "TypeScript" :{ "nFiles": 263, "blank": 1245, "comment": 173, - "code": 10037}, + "code": 10043}, "JavaScript" :{ "nFiles": 8, "blank": 17, @@ -54,5 +54,5 @@ "SUM": { "blank": 1292, "comment": 202, - "code": 11050, + "code": 11056, "nFiles": 282} } diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx index 24593ef..2576cca 100644 --- a/layouts/PostLayout.tsx +++ b/layouts/PostLayout.tsx @@ -77,6 +77,7 @@ export default function PostLayout({ frontMatter, next, prev, content }: IPostLa height={38} alt={author.first_name + ' ' + author.last_name} className="u-photo h-10 w-10 rounded-full" + priority={true} />
    Name
    From 8eb3483cb4fbb8e34a35acce275919a5f39c15e5 Mon Sep 17 00:00:00 2001 From: Ahmet ALMAZ Date: Thu, 24 Nov 2022 23:43:57 +0300 Subject: [PATCH 8/8] chore: rename u-photo to hero-photo in hero-card chore: remove eslint rule in image component chore: remove u-photo from post-layout --- assets/css/tailwind.css | 20 ++++++++++---------- components/Image.tsx | 1 - components/hCard.tsx | 4 ++-- components/home/HeroCard.tsx | 4 ++-- data/count_total.json | 16 ++++++++-------- layouts/PostLayout.tsx | 3 +-- 6 files changed, 23 insertions(+), 25 deletions(-) diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 325fea5..6da6411 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -61,34 +61,34 @@ kbd { } @layer base { - [data-theme='light'] #u-photo { + [data-theme='light'] #hero-photo { background-image: url('/images/others/me-alt.png'); } - [data-theme='hackernews'] #u-photo { + [data-theme='hackernews'] #hero-photo { background-image: url('/images/others/me-alt.png'); } - [data-theme='latte'] #u-photo { + [data-theme='latte'] #hero-photo { background-image: url('/images/others/me-alt.png'); } - [data-theme='rosépinedawn'] #u-photo { + [data-theme='rosépinedawn'] #hero-photo { background-image: url('/images/others/me-alt.png'); } - [data-theme='dark'] #u-photo { + [data-theme='dark'] #hero-photo { background-image: url('/images/others/me.png'); } - [data-theme='dracula'] #u-photo { + [data-theme='dracula'] #hero-photo { background-image: url('/images/others/me.png'); } - [data-theme='mocha'] #u-photo { + [data-theme='mocha'] #hero-photo { background-image: url('/images/others/me.png'); } - [data-theme='rosépine'] #u-photo { + [data-theme='rosépine'] #hero-photo { background-image: url('/images/others/me.png'); } - [data-theme='wildberries'] #u-photo { + [data-theme='wildberries'] #hero-photo { background-image: url('/images/others/me.png'); } - [data-theme='nord'] #u-photo { + [data-theme='nord'] #hero-photo { background-image: url('/images/others/me.png'); } diff --git a/components/Image.tsx b/components/Image.tsx index 147f6f2..199b2a4 100644 --- a/components/Image.tsx +++ b/components/Image.tsx @@ -1,6 +1,5 @@ import NextImage, { ImageProps } from 'next/image' -// eslint-disable-next-line jsx-a11y/alt-text const CustomImage = ({ ...rest }: ImageProps): JSX.Element => export default CustomImage diff --git a/components/hCard.tsx b/components/hCard.tsx index 6205eb3..0e3bf21 100644 --- a/components/hCard.tsx +++ b/components/hCard.tsx @@ -7,11 +7,11 @@ export default function HCard(): JSX.Element { return (
    {siteMetadata.author}
    diff --git a/components/home/HeroCard.tsx b/components/home/HeroCard.tsx index dc26a7f..411c3f6 100644 --- a/components/home/HeroCard.tsx +++ b/components/home/HeroCard.tsx @@ -5,7 +5,7 @@ import siteMetadata from '@/data/siteMetadata' export default function HeroCard() { if (typeof window === 'object') { - const photo = document.querySelector('.u-photo') + const photo = document.querySelector('.hero-photo') if (photo) { window.addEventListener('deviceorientation', (e) => { const tiltLR = e.gamma @@ -31,7 +31,7 @@ export default function HeroCard() {
    -
    +
    / diff --git a/data/count_total.json b/data/count_total.json index c00573c..5efe5d1 100644 --- a/data/count_total.json +++ b/data/count_total.json @@ -1,16 +1,16 @@ {"header" : { "cloc_url" : "github.com/AlDanial/cloc", "cloc_version" : "1.94", - "elapsed_seconds" : 0.506438970565796, + "elapsed_seconds" : 0.510976076126099, "n_files" : 282, - "n_lines" : 12550, - "files_per_second" : 556.829186515699, - "lines_per_second" : 24780.873371532}, + "n_lines" : 12548, + "files_per_second" : 551.884937819296, + "lines_per_second" : 24556.9226941721}, "TypeScript" :{ "nFiles": 263, "blank": 1245, - "comment": 173, - "code": 10043}, + "comment": 172, + "code": 10042}, "JavaScript" :{ "nFiles": 8, "blank": 17, @@ -53,6 +53,6 @@ "code": 1}, "SUM": { "blank": 1292, - "comment": 202, - "code": 11056, + "comment": 201, + "code": 11055, "nFiles": 282} } diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx index 2576cca..dc1bfb5 100644 --- a/layouts/PostLayout.tsx +++ b/layouts/PostLayout.tsx @@ -76,8 +76,7 @@ export default function PostLayout({ frontMatter, next, prev, content }: IPostLa width={38} height={38} alt={author.first_name + ' ' + author.last_name} - className="u-photo h-10 w-10 rounded-full" - priority={true} + className="h-10 w-10 rounded-full" />
    Name