From ab9bf2a914b8c4145d600ced58110424ad9db23a Mon Sep 17 00:00:00 2001 From: Aravind Balla Date: Tue, 5 Mar 2024 12:00:58 +0530 Subject: [PATCH] feat: handwritten note --- components/ImagekitImage.tsx | 18 +++- content/notes/on-authenticity.md | 22 +++++ contentlayer.config.ts | 51 +++++++++- pages/memos/index.tsx | 89 ------------------ pages/notes/[slug].tsx | 154 +++++++++++++++++++++++++++++++ 5 files changed, 242 insertions(+), 92 deletions(-) create mode 100644 content/notes/on-authenticity.md delete mode 100644 pages/memos/index.tsx create mode 100644 pages/notes/[slug].tsx diff --git a/components/ImagekitImage.tsx b/components/ImagekitImage.tsx index 8e26823..f2e28b7 100644 --- a/components/ImagekitImage.tsx +++ b/components/ImagekitImage.tsx @@ -9,14 +9,28 @@ export const imageKitLoader = ({ src, width, quality }) => { params.push(`q-${quality}`); } const paramsString = params.join(','); + + if (src.startsWith('https://')) return `${src}?tr=${paramsString}`; + var urlEndpoint = IMAGEKIT_ENDPOINT; if (urlEndpoint[urlEndpoint.length - 1] === '/') urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1); return `${urlEndpoint}/${src}?tr=${paramsString}`; }; -function ImagekitImage(props: ImageProps) { - return ; +function ImagekitImage({ src, ...props }: ImageProps) { + let sourceUrl = src; + // src can have ?h=100&w=100 + if (typeof src === 'string' && src.includes('?') && src.includes('h=') && src.includes('w=')) { + sourceUrl = src.split('?')[0]; + const urlParams = new URLSearchParams(src.split('?')[1]); + const width = Number(urlParams.get('w')); + const height = Number(urlParams.get('h')); + return ( + + ); + } + return ; } export default ImagekitImage; diff --git a/content/notes/on-authenticity.md b/content/notes/on-authenticity.md new file mode 100644 index 0000000..027c70b --- /dev/null +++ b/content/notes/on-authenticity.md @@ -0,0 +1,22 @@ +--- +title: On being authentic in the era of AI +date: '2024-03-03' +type: 'Note' +description: 'Exploring the significance of authenticity and personal contribution in the AI era. Reflecting on how to find true happiness by adding individual flair to our creations and enhancing the human experience.' +images: + [ + 'https://ik.imagekit.io/aravindballa/5wpDYmWMV9yFAQdgQrtoa1lcApczKuISsyRQfF1CICM.jpg?w=1973&h=3035', + 'https://ik.imagekit.io/aravindballa/ToL7zRlJihTqFMQeAkgLnCglHINvHKXqx5v-iWzYBog.jpg?w=1716&h=1876', + ] +--- + +How can we be authentic in this era of AI? Everything - from photos to videos, voice, writing etc - is being created by AI. + +It is capable of doing all that. But it doesn't have a voice of its own. You can read and tell if that's by AI or not. It lacks a personality (that's the right word I should have used). +I keep wondering what's the need to be authentic / real / new at all? Can I not just mimic others and go about in life. + +Then some introspection led me to this - yes sure we don't need to be. But what's the point of it all is we are not new but just copies of someone else. We don't add anything unique to this world then. No contribution to our community. In the book the courage to be disliked, the author says that the feeling of contribution, or the feeling that you have contributed to the people around you is one of the main driving factors for happiness. + +So maybe, to be truly happy, we just need to be real. Creating something for this humanity makes us worthy, I guess - fulfilled. + +Now coming to the point of what's authenticity. Is it just a mix of all the unique experiences you have? I got acknowledge the fact that Everything is a remix(1) and Great artist steal(2). I am not pledging to not do that. But how can you add your flare to the things that exist in the world and make them better - that's the whole point. diff --git a/contentlayer.config.ts b/contentlayer.config.ts index dffdce8..0eb26d0 100644 --- a/contentlayer.config.ts +++ b/contentlayer.config.ts @@ -116,6 +116,55 @@ const Memo = defineDocumentType(() => ({ }, })); +/** Handwritten Note */ +const Note = defineDocumentType(() => ({ + name: 'Note', + filePathPattern: `**/*.(mdx|md)`, + contentType: 'mdx', + fields: { + title: { + type: 'string', + description: 'The title of the post', + }, + date: { + type: 'date', + description: 'The date of the post', + required: true, + }, + published: { + type: 'boolean', + description: 'Whether the post is published', + }, + description: { + type: 'string', + description: 'The description of the post', + required: true, + }, + tags: { + type: 'string', + description: 'The tags of the post', + }, + images: { + type: 'list', + of: { + type: 'string', + }, + required: true, + description: 'Handwritten note images', + }, + }, + computedFields: { + readingTime: { + type: 'json', + resolve: (doc) => readingTime(doc.body.raw), + }, + slug: { + type: 'string', + resolve: (doc) => `/notes/${slugifyMemo(doc._raw.sourceFileName)}`, + }, + }, +})); + const Talk = defineDocumentType(() => ({ name: 'Talk', filePathPattern: `**/*.(mdx|md)`, @@ -194,7 +243,7 @@ const BookNote = defineDocumentType(() => ({ export default makeSource({ contentDirPath: 'content', contentDirExclude: ['.obsidian/**'], - documentTypes: [Post, Letter, BookNote, Talk, Memo], + documentTypes: [Post, Letter, BookNote, Talk, Memo, Note], mdx: { rehypePlugins: [rehypeSlug], remarkPlugins: [ diff --git a/pages/memos/index.tsx b/pages/memos/index.tsx deleted file mode 100644 index dbecfcd..0000000 --- a/pages/memos/index.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import Link from 'next/link'; -import { NextSeo } from 'next-seo'; -import { allMemos, Memo } from 'contentlayer/generated'; -import { isToday, formatDistanceStrict, subDays } from 'date-fns'; -import { useMDXComponent } from 'next-contentlayer/hooks'; - -import Layout from '../../components/Layout'; -import ImagekitImage from '../../components/ImagekitImage'; -import { getOGImageWithDimensions } from '../../lib/getOGImageUrl'; -import { baseUrl } from '../../seo.config'; -import Chip from 'components/Chip'; -import components from 'components/mdxComponents'; - -const MemoCard = ({ post }: { post: Memo }) => { - const MDXContent = useMDXComponent(post.body.code); - return ( -
- - {!!post.banner && ( -
- -
- )} - - -
- {isToday(new Date(post.date)) - ? 'Today' - : formatDistanceStrict(new Date(post.date), subDays(new Date(), 1), { - addSuffix: true, - unit: 'day', - })} -
-

- - {post.title} - -

- -
- -
-
- ); -}; - -export default function MemosPage({ allMemos }: { allMemos: Memo[] }) { - return ( - - -
-
-

Memos 🗒️

-
- -

These memos are a collection of short almost-daily rambles

- -
- {allMemos.map((post) => { - return ; - })} -
-
- - ); -} - -export const getStaticProps = async () => { - return { - props: { - allMemos: allMemos - .filter((post) => ('published' in post ? post.published : true)) - .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()), - }, - }; -}; diff --git a/pages/notes/[slug].tsx b/pages/notes/[slug].tsx new file mode 100644 index 0000000..06c55d2 --- /dev/null +++ b/pages/notes/[slug].tsx @@ -0,0 +1,154 @@ +import { NextSeo, ArticleJsonLd } from 'next-seo'; +import { allNotes, Note } from 'contentlayer/generated'; +import { useMDXComponent } from 'next-contentlayer/hooks'; +import { format } from 'date-fns'; + +import { baseUrl } from '../../seo.config'; +import Layout from '../../components/Layout'; +import Bio from '../../components/Bio'; +import Subscribe from '../../components/Subscribe'; +import components from '../../components/mdxComponents'; +import ImagekitImage, { imageKitLoader } from '../../components/ImagekitImage'; +import { normalizeUrl } from 'lib/utils'; +import Chip from 'components/Chip'; +import Link from 'next/link'; +import { getBacklinks } from 'lib/backlinks'; + +function MemoPage({ note, backlinks }: { note: Note; backlinks: ReturnType }) { + const MDXContent = useMDXComponent(note.body.code); + + return ( + + t.trim()) : [], + }, + }} + /> + + +
+ 🗒️ All Notes +
+
+

{note.title}

+
+ {format(new Date(note.date), 'do MMMM, yyyy')} + · + Note + · + {note.readingTime.text} +
+ {note.images.map((imageUrl) => ( +
+ +
+ ))} +
+ +
+ {backlinks.length > 0 && ( +
+
Referred in
+
+ {backlinks.map((link) => ( + +
+ + {link.title} + +
+
+ + ... +
+ + ))} +
+
+ )} +
+ +
+ +
+ + ); +} + +export const getStaticProps = async ({ params }) => { + const note = allNotes.find((post) => post.slug === `/notes/${params.slug}`); + + if (!note) { + return { + notFound: true, + }; + } + + const backlinks = getBacklinks( + note.title || note.slug, + note._raw.sourceFileName.replace(/\.(md|mdx)$/, '') + ); + + return { + props: { + note, + backlinks, + }, + }; +}; + +export const getStaticPaths = async () => { + const paths = allNotes.map((post) => post.slug); + + return { + paths, + fallback: false, + }; +}; + +export default MemoPage;