add keywords, fix dynamic head data, update README

README.md

@@ -56,9 +56,10 @@ We can follow this convention to call our brand new branches: `post/my-new-post`
 
 ```js
 ---
-title: 'My New Post!'
-description: 'a description of your post...'
-author: 'Rick Sanchez Prime'
+title: 'My New Post!' // required
+description: 'a description of your post...' // required
+author: 'Rick Sanchez Prime' // required
+keywords: ["react", "nextjs", "frontend"] // required, array of strings
 pubDate: '04-12-2024 10:00' // MM-DD-YYYY HH:MM
 updatedDate: '04-05-2024 12:00' // MM-DD-YYYY HH:MM (optional)
 heroImage: 'my-new-post/hero.jpg' // (optional)

src/components/BaseHead.astro

@@ -7,12 +7,27 @@ import "../styles/global.css";
 interface Props {
   title: string;
   description: string;
-  image?: string;
+  heroImage?: string;
+  keywords: string[];
+  author: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = "/assets/logo.png" } = Astro.props;
+const {
+  title,
+  description,
+  heroImage = "http://www.coders51.com/img/share2.jpg",
+  keywords,
+  author = "Andrea Junior Berselli"
+} = Astro.props;
+
+const buildKeywordsString =
+  keywords === undefined
+    ? ""
+    : `${keywords?.length > 0 ? "," : ""} ${
+        keywords?.length === 0 ? "" : keywords?.join(", ")
+      }`;
 ---
 
 <!-- Global Metadata -->
@@ -37,7 +52,7 @@ const { title, description, image = "/assets/logo.png" } = Astro.props;
 <meta name="description" content={description} />
 <meta
   name="keywords"
-  content="scalable software platforms, technical partners, Elixir, Erlang, RabbitMQ, React, React Native, CQRS, es, event sourcing, nodejs, javascript, typescript, microservices, ddd, tdd, domain driven design"
+  content={`coders51, scalable software platforms, technical partners${buildKeywordsString}`}
 />
 
 <!-- Schema.org for Google -->
@@ -46,11 +61,10 @@ const { title, description, image = "/assets/logo.png" } = Astro.props;
 
 <!-- Open Graph / Facebook -->
 <meta property="og:type" content="website" />
-<meta property="og:image" content="http://www.coders51.com/img/share2.jpg" />
+<meta property="og:image" content={heroImage} />
 <meta property="og:url" content="http://www.coders51.com/" />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
 <meta property="og:site_name" content="coders51" />
 <meta property="fb:app_id" content="1028463787335394" />
 
@@ -59,10 +73,10 @@ const { title, description, image = "/assets/logo.png" } = Astro.props;
 <meta name="twitter:title" content={title} />
 <meta name="twitter:site" content="@coders51" />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" content="http://www.coders51.com/img/share2.jpg" />
+<meta name="twitter:image" content={heroImage} />
 
 <meta name="copyright" content="coders51" />
-<meta name="author" content="Andrea Junior Berselli" />
+<meta name="author" content={author} />
 <meta name="reply-to" content="[email protected]" />
 
 <ViewTransitions />

src/components/Header.astro

@@ -7,13 +7,18 @@ import DarkModeToggle from "src/components/DarkModeToggle";
   class="fixed h-20 flex w-full items-center justify-center bg-gradientHeader backdrop-blur-xl"
 >
   <div class="flex w-full justify-between items-center xl:w-4/5">
-    <a href="https://www.coders51.com" class="ml-4">
+    <a href="/" class="ml-4 flex items-center space-x-2 group">
       <img
         id="header-logo"
         src="/assets/logo_white_big.png"
         alt="coders51 Logo"
         class="xl:w-40 w-32"
       />
+      <div
+        class="rounded-lg border-darkBg bg-coders51 px-2 py-1 border text-coders51dark group-hover:bg-coders51/80 transition-colors duration-300"
+      >
+        <span class="font-semibold">BLOG</span>
+      </div>
     </a>
     <div class="flex items-center gap-x-8">
       <nav id="nav">

src/content/blog/first-post.md

@@ -1,179 +1,14 @@
 ---
 title: 'Astro JS - the birth of the coders51 blog'
-description: "Our company needed a blog, what better opportunity to experiment with Astro? Let's see how it was made and why we chose Astro"
+description: "Our company needed a blog, what better opportunity to experiment with Astro? Let's see how it was made and why we chose this SSG"
 author: Andrea Junior Berselli
+keywords: ["astro", "blog", "markdown"]
 pubDate: '03-25-2024 10:00'
 updatedDate: '04-05-2024 12:00'
 heroImage: 'first-post/hero.png'
-timeRead: '3'
+timeRead: '10'
 ---
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## What is Astro?
 
-
-
-## Getting Started
-
-
-
-First, setup docker:
-
-
-
-launch
-
-```bash
-
-postgres && sleep  2 && docker  exec  postgres  /bin/bash  -c  "createdb -U postgres ms_athlete_dev" && docker  exec  postgres  /bin/bash  -c  "createdb -U postgres ms_athlete_test"
-
-```
-
-
-
-and
-
-```bash
-
-docker  rm  -f  rabbitmq && docker  run  -d  --hostname  local-rabbitmq  --name  rabbitmq  -p  15672:15672  -p  5672:5672  rabbitmq:3-management
-
-```
-
-
-
-Second, run the backend server:
-
-download the project `ms-athlete` and launch on it
-
-
-
-```bash
-
-npm  run  start
-
-```
-
-
-
-This should run on localhost:3000
-
-
-
-in another terminal, run the seed
-
-
-
-```bash
-
-npm  run  seed
-
-```
-
-
-
----
-
-
-
-Third, run the development server for this project:
-
-
-
-```bash
-
-npm  run  dev
-
-```
-
-
-
-Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.
-
-Set a valid `jwt` cookie on the Application in the browser to let the login works correctly.
-
-
-
-You can start editing the page by modifying `app/[lang]/page.tsx`. The page auto-updates as you edit the file.
-
-
-
-This project uses [`next/font/local`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load SourceSansPro.
-
-## App structure
-
-The project follow the structure of the new `app router` by NextJs --> [NextJs App Router](https://nextjs.org/docs/app/building-your-application/routing#the-app-router)
-
-Under the `app` dir is specified a `[lang]` dir to handle the internationalization between italian and english languages.
-Inside the `locales` folder there are two sub-folders: one for `en` and one for `it` containing the keys to provide text all around the entire app.
-
-How to use inside a React component:
-
-```jsx {3}
-const { t } =  useTranslation('common')
-...
-<div>{t('somethingWentWrong')}</div>
-```
-
-"common.json" is the file where is defined the key: `somethingWentWrong`
-To enable a specific translation file for an url, see the `i18n.js` file configuration. 
-
-Everything is under the `app` folder and contains a `page.tsx` file is a route.
-for example: `app/[lang]/profile/page.tsx` is the component that render on the `/it/profile` url.
-
-Every `page.tsx` file can have a `layout.tsx` file aside. This file is used to give a generic layout to the page, is a sort of wrapper.
-
-Each components or pages have a `xxx.test.tsx` file in order to have some unit test that guarantee the internal functionalities of the component.
-
-The app use `vitest` to run tests, it's defined a `setup-test-env.tsx` where it can be found the standard setup/mocks for all the tests.
-
-to run unit tests:
-```bash
-npm run test
-```
-
-Instead, to run e2e tests with Cypress:
-```bash
-npm run test:e2e
-
-#or
-
-npm run test:e2e:ui
-```
-
-## CSS
-
-`tailwindcss` is the standard
-
-Inside `globals.css` you can find some custom classes.
-Inside the `tailwind.config.ts` it's possible to override or extends some tailwind rules and keywords.
-Useful to set the entire color design system.
-
-## GraphQL
-
-There is a `graphql` folder with `mutation.graphql` and `schema.graphql`
-Inside the mutation file you can find all the mutations used in the app
-Inside the schema file you can find the shape of your available data, see the `codegen.ts` file to know how it's built
-
-Inside some folders is possible to find some `query.graphql` file that it needs to define the relative query to use in that component/page
-
-Follow [this link](https://www.apollographql.com/blog/apollo-client/next-js/how-to-use-apollo-client-with-next-js-13/) to see how it's configured Apollo Server with Next Js
-
-## Context
-
-There is a `context` folder that contains some context component in order to share state between the entire app
-(like the jwt token)
-
-## Learn More
-
-
-
-To learn more about Next.js, take a look at the following resources:
-
-
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+coming soon...

src/content/config.ts

@@ -10,7 +10,8 @@ const blog = defineCollection({
     pubDate: z.coerce.date(),
     updatedDate: z.coerce.date().optional(),
     heroImage: z.string().optional(),
-    timeRead: z.string().optional()
+    timeRead: z.string().optional(),
+    keywords: z.array(z.string())
   })
 });
 

src/layouts/BaseLayout.astro

@@ -6,7 +6,6 @@ const { title, description } = Astro.props;
 
 <Layout title={title} description={description}>
   <div class="px-10 pb-10">
-    <h1 class="main-heading">{title}</h1>
     <slot />
   </div>
 </Layout>

src/layouts/BlogPost.astro

@@ -19,13 +19,21 @@ const {
   updatedDate,
   author,
   heroImage,
+  keywords,
   timeRead
 } = post.data;
 
 const { headings } = await post.render();
 ---
 
-<Layout title={title} description={description} headings={headings}>
+<Layout
+  title={title}
+  description={description}
+  headings={headings}
+  heroImage={heroImage}
+  keywords={keywords}
+  author={author}
+>
   <div class="px-10 pb-10 sm:px-0">
     <a
       href="/"

src/layouts/Layout.astro

@@ -4,15 +4,22 @@ import BaseHead from "../components/BaseHead.astro";
 import Footer from "src/components/Footer.astro";
 import Header from "src/components/Header.astro";
 
-const { title, description, headings } = Astro.props;
+const { title, description, headings, heroImage, keywords, author } =
+  Astro.props;
 ---
 
 <html
   lang="en"
   class="min-h-screen bg-lightBg bg-gradientLight dark:bg-darkBg dark:bg-gradientDark bg-center bg-cover bg-no-repeat bg-fixed"
 >
   <head>
-    <BaseHead title={title} description={description} />
+    <BaseHead
+      title={title}
+      description={description}
+      heroImage={heroImage}
+      keywords={keywords}
+      author={author}
+    />
   </head>
   <body>
     <div class="min-h-screen flex flex-col justify-between">
@@ -22,7 +29,7 @@ const { title, description, headings } = Astro.props;
           <div class="flex items-start justify-center">
             {headings?.length > 0 && <TableOfContents headings={headings} />}
             <div
-              class="prose prose-sky w-full pt-10 xl:prose-xl lg:prose-lg dark:prose-slate dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
+              class="prose prose-sky w-full sm:pt-6 pt-4 xl:prose-xl lg:prose-lg dark:prose-slate dark:prose-invert marker:text-black prose-a:underline-offset-2 prose-blockquote:border-l-coders51 prose-code:text-white dark:marker:text-white prose-blockquote:dark:border-l-white"
             >
               <slot />
             </div>