Try prefetching post links to make them load faster, update Upvotes U…

…X, fix updating posts syntax with updated field

packages/core/src/post.ts

@@ -54,17 +54,9 @@ export async function create(
     },
   });
 
-  console.log(`Post - create`, command.input);
-
-  try {
-    await docClient.send(command);
-    console.log(`finished putting a Post...`);
-  } catch (err) {
-    console.log(`caught an error while creating a Post`, err);
-  }
+  await docClient.send(command);
 
   const created = await getById(tableName, id);
-  console.log(`created post`, created);
 
   return created;
 }
@@ -77,16 +69,9 @@ export async function getById(tableName: string, id: string) {
     },
   });
 
-  console.log(`Post - getById - start`, command.input);
+  const response = await docClient.send(command);
 
-  try {
-    const response = await docClient.send(command);
-    console.log(`Post - getById - response`, response);
-    return response['Item'];
-  } catch (err) {
-    console.log(`caught an error while getting a Post`, err);
-    return;
-  }
+  return response['Item'];
 }
 
 export async function getBySlug(tableName: string, slug: string) {
@@ -99,58 +84,22 @@ export async function getBySlug(tableName: string, slug: string) {
     },
   });
 
-  console.log(`Post - getBySlug - start`, slug);
-
-  try {
-    const response = await docClient.send(command);
-    const result = response['Items'] || [];
-    console.log(`Post - getBySlug - response`, response.Count);
+  const response = await docClient.send(command);
+  const result = response['Items'] || [];
 
-    return result[0] as Post | undefined;
-  } catch (err) {
-    console.log(`caught an error while getting a Post`, err);
-    return;
-  }
+  return result[0] as Post | undefined;
 }
 
 export async function getAllBySlugs(tableName: string, slugs: string[]) {
   const promises: Promise<Post | undefined>[] = [];
 
-  console.log(`Post - getAllBySlugs`, slugs);
-
   for (const slug of slugs) {
     promises.push(getBySlug(tableName, slug));
   }
 
   const result = await Promise.all(promises);
 
-  console.log(`Post - getAllBySlugs - result`, result);
-
   return result.filter((result) => !!result) as Post[];
-  // const slugFilter = slugs.map((_slug, index) => {
-  //   return `:slug${index}`;
-  // });
-  // const slugExpression = slugFilter.reduce((acc, curr, index) => {
-  //   return {
-  //     ...acc,
-  //     [curr]: slugs[index],
-  //   };
-  // }, {});
-  // const command = new ScanCommand({
-  //   TableName: tableName,
-  //   IndexName: 'SlugIndex',
-  //   FilterExpression: `slug IN (${slugFilter.join(', ')})`,
-  //   ExpressionAttributeValues: slugExpression,
-  // });
-
-  // try {
-  //   const response = await docClient.send(command);
-  //   console.log(`Post - getAllBySlugs - response`, response);
-  //   return response['Items'] as Post[];
-  // } catch (err) {
-  //   console.log(`caught an error while getting Posts by slugs`, err);
-  //   return;
-  // }
 }
 
 export async function list(tableName: string) {
@@ -173,13 +122,11 @@ export async function queryPublished(tableName: string, tag?: string) {
   });
 
   const result = await docClient.send(command);
-  console.log(`queryPublished`, result.Count);
 
   let posts = (result.Items || []) as PublishedPost[];
 
   if (tag) {
     posts = posts.filter((post) => post.tags.includes(tag));
-    console.log(`filtered posts by tag ${tag}...`);
   }
 
   posts.sort(
@@ -193,17 +140,16 @@ export async function queryPublished(tableName: string, tag?: string) {
 export async function update(tableName: string, values: Partial<Post>) {
   const { id, ...props } = values;
   delete props.updated;
-  console.log(`Post - Update`);
 
   const setStatement = Object.keys(props)
     .map((key) => {
-      console.log(key);
       if (key === 'views') {
         return `#views = :views`;
       }
       return `${key} = :${key}`;
     })
     .join(', ');
+
   const UpdateExpression = `set ${setStatement}, updated = :updated`;
   console.log(`UpdateExpression`, UpdateExpression);
 
@@ -215,8 +161,7 @@ export async function update(tableName: string, values: Partial<Post>) {
       [`:${curr}`]: values[curr as keyof Post],
     };
   }, {});
-  ExpressionAttributeValues.updated = new Date().toISOString();
-  console.log(`ExpressionAttributeValues`, ExpressionAttributeValues);
+  ExpressionAttributeValues[':updated'] = new Date().toISOString();
 
   const command = new UpdateCommand({
     TableName: tableName,
@@ -231,14 +176,10 @@ export async function update(tableName: string, values: Partial<Post>) {
     ReturnValues: 'ALL_NEW',
   });
 
-  try {
-    const response = await docClient.send(command);
-    console.log(`Post - update - response`, response);
-    return response;
-  } catch (err) {
-    console.log(`caught an error while updating a Post`, err);
-    return;
-  }
+  console.log(`UpdateCommand`, command.input);
+
+  const response = await docClient.send(command);
+  return response;
 }
 
 export async function increment(
@@ -260,8 +201,6 @@ export async function increment(
   });
   const response = await docClient.send(command);
 
-  console.log(`increment`, response);
-
   return response?.Attributes?.[attribute] as number;
 }
 
@@ -278,7 +217,6 @@ export async function deleteById(tableName: string, id: string) {
 
 export async function deleteAll(tableName: string) {
   const posts = await list(tableName);
-  console.log(`Post - deleteAll listed posts`, posts);
 
   for (const post of posts) {
     const deleteCommand = new DeleteCommand({

packages/core/src/tag.ts

@@ -27,14 +27,7 @@ export async function create(tableName: string, name: string) {
     },
   });
 
-  console.log(`Tag - create`, command.input);
-
-  try {
-    await docClient.send(command);
-    console.log(`finished putting a Tag...`);
-  } catch (err) {
-    console.log(`caught an error while creating a Tag`, err);
-  }
+  await docClient.send(command);
 
   const created = await getByName(tableName, name);
 
@@ -49,21 +42,12 @@ export async function getByName(tableName: string, name: string) {
     },
   });
 
-  console.log(`Tag - getByName - start`, command.input);
-
-  try {
-    const response = await docClient.send(command);
-    console.log(`Tag - getByName - response`, response);
-    return response['Item'];
-  } catch (err) {
-    console.log(`caught an error while getting a Tag`, err);
-    return;
-  }
+  const response = await docClient.send(command);
+  return response['Item'];
 }
 
 export async function getAllByNames(tableName: string, names: string[]) {
   const Keys = names.map((name) => ({ name }));
-  console.log(`Tag - getAllByNames`, Keys);
 
   const command = new BatchGetCommand({
     RequestItems: {
@@ -73,16 +57,10 @@ export async function getAllByNames(tableName: string, names: string[]) {
     },
   });
 
-  try {
-    const result = await docClient.send(command);
-    const responses = result['Responses'] || {};
-    console.log(`Tag - getAllByNames - response`, responses);
+  const result = await docClient.send(command);
+  const responses = result['Responses'] || {};
 
-    return responses[tableName];
-  } catch (err) {
-    console.log(`caught an error while batchGetting Tags`, err);
-    return;
-  }
+  return responses[tableName];
 }
 
 export async function list(tableName: string) {
@@ -96,7 +74,6 @@ export async function list(tableName: string) {
 
 export async function deleteAll(tableName: string) {
   const tags = await list(tableName);
-  console.log(`Tag - deleteAll listed Tags`, tags);
 
   for (const tag of tags) {
     const deleteCommand = new DeleteCommand({

packages/functions/content/building-a-super-powered-layout-with-css-grid.mdx

@@ -5,7 +5,7 @@ tags: ['css', 'grid', 'flexbox']
 isPublished: 1
 publishedOn: 2024-03-13
 views: 56
-likes: 151
+likes: 56
 ---
 
 CSS grid is the latest layout mode which makes it a joy to create two-dimensional layouts, and with [great browser support](https://caniuse.com/css-grid) it can be used just about anywhere, even IE 10!

packages/functions/content/chained-ternaries-are-great.mdx

@@ -5,7 +5,7 @@ tags: ['javascript']
 isPublished: 1
 publishedOn: 2024-03-12
 views: 56
-likes: 151
+likes: 56
 ---
 
 At my first software engineering gig I spent a lot of time on Medium.com reading about how other developers thought about code and looking for inspiration about how to contribute to my team's best practices.

packages/functions/content/how-i-built-yet-another-developer-blog.mdx

@@ -6,7 +6,7 @@ tags:
 isPublished: 1
 publishedOn: 2024-03-12
 views: 56
-likes: 151
+likes: 56
 ---
 
 The web development ecosystem has changed a lot since my early days with [Bootstrap](https://getbootstrap.com/) and [jQuery](https://jquery.com/).

packages/functions/content/using-server-actions-to-build-an-interactive-upvote-widget.mdx

@@ -5,7 +5,7 @@ tags: ['react', 'nextjs', 'serveractions']
 isPublished: 1
 publishedOn: 2024-03-13
 views: 56
-likes: 151
+likes: 56
 ---
 
 [Server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) are a brand new, cutting-edge React feature only usable in frameworks that support it like Next.js. Next.js defines them as asynchronous functions that are executed on the server, while the [React documentation](https://react.dev/reference/react/use-server) defines them as server-side functions that can be called from client-side code.

packages/web/app/blog/[postSlug]/page.module.css

@@ -42,7 +42,7 @@
 }
 
 .upvotes {
-  margin-top: 2rem;
+  margin-top: 3rem;
 }
 
 .article > p:not(:first-of-type) {

packages/web/app/blog/[postSlug]/page.tsx

@@ -86,8 +86,6 @@ const PostPage: NextPage<{ params: { postSlug: string } }> = async ({
     likes,
   } = await getPostMetadata(postSlug);
 
-  console.log(`PostPage`, views, likes);
-
   return (
     <>
       <div className={styles.hero}>

packages/web/app/page.tsx

@@ -34,8 +34,8 @@ export default function Home() {
 
           <h2 className={styles.heading}>News</h2>
           <p>
-            The migration to DynamoDB is complete. I hope you enjoy the new and
-            improved experience, I know my wallet will!
+            The migration to DynamoDB is complete! I hope you enjoy the new and
+            improved experience. Expect a new blog post soon.
           </p>
         </div>
         <div className={styles.greetingRight}>

packages/web/components/PostCard/PostCard.tsx

@@ -19,7 +19,7 @@ const PostCard = ({ title, slug, abstract, publishedOn, tags }: Props) => {
   return (
     <article className={styles.wrapper}>
       <div className={styles.content}>
-        <Link href={`/blog/${slug}`} prefetch={false}>
+        <Link href={`/blog/${slug}`}>
           <h2 className={styles.title}>{title}</h2>
         </Link>
 

packages/web/components/Upvotes/Upvotes.module.css

@@ -1,28 +1,34 @@
-@keyframes fadeOut {
-  from {
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+  50% {
     opacity: 1;
   }
-  to {
+  100% {
     opacity: 0;
   }
 }
 
 .wrapper {
+  color: var(--color-text-supporting);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.button {
   color: var(--color-text);
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.wrapper:disabled {
-  color: var(--color-primary);
-  cursor: not-allowed;
-}
-
-.wrapper:hover {
+.button:hover {
   color: var(--color-primary);
 }
 
 .max {
-  animation: fadeOut 3000ms forwards;
+  animation: fadeInOut 5000ms forwards;
 }