feat: handwritten note

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 <Image loader={imageKitLoader} {...props} />;
+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 (
+ <Image loader={imageKitLoader} {...props} src={sourceUrl} width={width} height={height} />
+ );
+ }
+ return <Image loader={imageKitLoader} {...props} src={sourceUrl} />;
 }
 
 export default ImagekitImage;

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.

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: [

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<typeof getBacklinks> }) {
+ const MDXContent = useMDXComponent(note.body.code);
+
+ return (
+ <Layout>
+ <NextSeo
+ title={note.title}
+ description={note.description}
+ canonical={normalizeUrl(`${baseUrl}${note.slug}/`)}
+ openGraph={{
+ url: normalizeUrl(`${baseUrl}${note.slug}/`),
+ title: note.title,
+ description: note.description,
+ images: [
+ {
+ url: `${baseUrl}api/og?slug=${encodeURIComponent(note.slug)}`,
+ width: 1200,
+ height: 600,
+ alt: `Card for ${note.title} page`,
+ },
+ ],
+ type: 'article',
+ article: {
+ authors: ['Aravind Balla'],
+ publishedTime: new Date(note.date).toISOString(),
+ tags: !!note.tags ? note.tags.split(',').map((t) => t.trim()) : [],
+ },
+ }}
+ />
+ <ArticleJsonLd
+ url={normalizeUrl(`${baseUrl}${note.slug}/`)}
+ title={note.title || note._raw.sourceFileName}
+ images={[]}
+ // images={
+ // note.images
+ // ? [
+ // imageKitLoader({
+ // src: `${note.slug.replace('/memos/', '')}-${note.banner}`,
+ // width: '1000px',
+ // quality: '100',
+ // }),
+ // ]
+ // : []
+ // }
+ datePublished={new Date(note.date).toISOString()}
+ authorName="Aravind Balla"
+ description={note.description}
+ />
+
+ <div className="mx-auto prose lg:prose-lg dark:prose-light">
+ <Link href="/writings">🗒️ All Notes</Link>
+ </div>
+ <div className="md:mt-12 mx-auto prose lg:prose-lg dark:prose-light">
+ <h1>{note.title}</h1>
+ <div className="flex gap-2 items-center mb-12 text-gray-600 dark:text-gray-400">
+ <span>{format(new Date(note.date), 'do MMMM, yyyy')}</span>
+ <span>&middot;</span>
+ <Chip>Note</Chip>
+ <span>&middot;</span>
+ <span>{note.readingTime.text}</span>
+ </div>
+ {note.images.map((imageUrl) => (
+ <div
+ className="relative w-full h-auto rounded-md overflow-hidden"
+ // style={{ aspectRatio: '9/16' }}
+ >
+ <ImagekitImage
+ src={imageUrl}
+ className="rounded-md object-cover shadow-md"
+ alt={`Banner image for ${note.title}`}
+ priority
+ />
+ </div>
+ ))}
+ <div className="sr-only">
+ <MDXContent components={components(note.slug)} />
+ </div>
+ {backlinks.length > 0 && (
+ <div className="bg-foreground bg-opacity-10 rounded-md p-4">
+ <div className="font-bold text-headings text-2xl">Referred in</div>
+ <div className="">
+ {backlinks.map((link) => (
+ <Link className="mt-4 flex flex-col no-underline" key={link.slug} href={link.slug}>
+ <div className="">
+ <span className="font-bold text-foreground hover:text-headings text-lg">
+ {link.title}
+ </span>
+ </div>
+ <div className="text-base mt-2 text-foreground">
+ <span dangerouslySetInnerHTML={{ __html: link.excerpt || '' }} />
+ ...
+ </div>
+ </Link>
+ ))}
+ </div>
+ </div>
+ )}
+ </div>
+ <Bio />
+ <div className="md:mt-12 mx-auto prose lg:prose-lg dark:prose-light">
+ <Subscribe />
+ </div>
+ </Layout>
+ );
+}
+
+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;