production stuff

apps/blog/src/layouts/base-meta-tags.astro

@@ -0,0 +1,62 @@
+---
+import siteManifest from "../../../website/public/site-manifest.json";
+
+const { street, city, region, postalCode, country } = siteManifest.company;
+const { twitter, linkedin, github, youtube, instagram } = siteManifest.social;
+const socialImage = `https://placehold.co/600x400`;
+
+const schema = {
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  name: siteManifest.name,
+  description: siteManifest.description,
+  logo: socialImage,
+  url: siteManifest.url,
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: street,
+    addressLocality: city,
+    addressRegion: region,
+    postalCode: postalCode,
+    addressCountry: country,
+  },
+  sameAs: [twitter, linkedin, github, youtube, instagram],
+};
+---
+
+<script
+  type="application/ld+json"
+  is:inline
+  set:html={JSON.stringify(schema)}
+/>
+<link rel="manifest" href="/site-manifest.json" />
+<meta content={siteManifest.theme_color} name="theme-color" />
+<meta content={siteManifest.name} name="application-name" />
+<title>Blog | CroCoder</title>
+<meta content={siteManifest.description} name="description" />
+<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+<link
+  href="/favicon-16x16.png"
+  rel="icon"
+  sizes="16x16"
+  type="image/png"
+/><link
+  href="/apple-touch-icon.png"
+  rel="apple-touch-icon"
+  sizes="180x180"
+  type="image/png"
+/>
+<!-- OpenGraph -->
+<meta property="og:url" content={`${siteManifest.url}/blog`} />
+<meta property="og:type" content="website" />
+<meta property="og:title" content={siteManifest.name} />
+<meta property="og:description" content={siteManifest.description} />
+<meta property="og:image" content={socialImage} />
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta property="twitter:domain" content="crocoder.dev" />
+<meta property="twitter:url" content={`${siteManifest.url}/blog`} />
+<meta name="twitter:title" content={siteManifest.name} />
+<meta name="twitter:description" content={siteManifest.description} />
+<meta name="twitter:image" content={socialImage} />

apps/blog/src/layouts/base.astro

@@ -5,6 +5,7 @@ import Header from "./header.astro";
 import "../styles/main.css";
 import { AstroFont } from "astro-font";
 import { ViewTransitions } from "astro:transitions";
+import Meta from "./base-meta-tags.astro";
 
 const pf = theme.fonts.font_family.primary;
 const sf = theme.fonts.font_family.secondary;

apps/blog/src/layouts/head.astro

@@ -1,7 +1,6 @@
 ---
 import type { MarkdownInstance } from "astro";
 import { getCollection } from "astro:content";
-import { marked } from 'marked';
 import { plainify } from "../ify";
 
 const {
@@ -19,34 +18,42 @@ const {
 const formatDate = (timestamp: number): string => {
   const d = new Date(timestamp);
   const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, '0');
-  const day = String(d.getDate()).padStart(2, '0');
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
 
   return `${year}-${month}-${day}`;
-}
+};
 
 let paritals: MarkdownInstance<Record<string, any>>[] = [];
 
-if (slug === '/how-to-write-custom-react-hooks.astro') {
-  paritals = await Astro.glob('../content/partials/how-to-write-custom-react-hooks/*.md')
-} else if (slug === '/the-dom-exercises.astro') {
-  paritals = await Astro.glob('../content/partials/the-dom-exercises/*.md')
-} else if (slug === '/react-input-component-clear-value-after-input.astro') {
-  paritals = await Astro.glob('../content/partials/react-input-component-clear-value-after-input/*.md')
+if (slug === "/how-to-write-custom-react-hooks.astro") {
+  paritals = await Astro.glob(
+    "../content/partials/how-to-write-custom-react-hooks/*.md",
+  );
+} else if (slug === "/the-dom-exercises.astro") {
+  paritals = await Astro.glob("../content/partials/the-dom-exercises/*.md");
+} else if (slug === "/react-input-component-clear-value-after-input.astro") {
+  paritals = await Astro.glob(
+    "../content/partials/react-input-component-clear-value-after-input/*.md",
+  );
 }
 
-const allPartialsPlainText = (await Promise.all(paritals.map(async (page) => {
-  const { rawContent } = page;
-  const plainText = plainify(rawContent());
-  return plainText;
-}))).join("");
+const allPartialsPlainText = (
+  await Promise.all(
+    paritals.map(async (page) => {
+      const { rawContent } = page;
+      const plainText = plainify(rawContent());
+      return plainText;
+    }),
+  )
+).join("");
 
 const sufix = import.meta.env.DEV ? "" : "blog/";
 
 const siteUrl = import.meta.env.SITE_URL + sufix;
 
-const posts = await getCollection('posts');
-const currentPost = posts.find(post => post.slug === slug);
+const posts = await getCollection("posts");
+const currentPost = posts.find((post) => post.slug === slug);
 
 const articleBodyMarkdown = currentPost ? currentPost.body : "";
 const articleBody = plainify(articleBodyMarkdown);
@@ -64,7 +71,7 @@ const schema = {
   abstract: abstract,
   mainEntityOfPage: {
     "@type": "WebPage",
-    "@id": siteUrl + slug
+    "@id": siteUrl + slug,
   },
   author: {
     "@type": "Person",
@@ -79,34 +86,33 @@ const schema = {
     name: "CroCoder, Inc.",
     logo: {
       "@type": "ImageObject",
-      "url": "/croc-nav.svg"
-    }
+      url: "/croc-nav.svg",
+    },
   },
   dateCreated: dateCreated,
   datePublished: dateCreated,
   dateModified: dateModified,
 };
-
 ---
 
 <script
   type="application/ld+json"
   is:inline
   set:html={JSON.stringify(schema)}
 />
-<script></script>
+<title>{title} | CroCoder</title>
 
 <meta property="og:url" content={siteUrl + slug} />
 <meta property="og:type" content="website" />
 <meta property="og:title" content={title} />
 <meta property="og:name" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={siteUrl + 'public' + image} />
+<meta property="og:image" content={siteUrl + "public" + image} />
 
 <meta name="twitter:card" content="summary_large_image" />
 <meta property="twitter:domain" content="crocoder.dev" />
 <meta property="twitter:url" content={siteUrl + slug} />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:text:title" content={title} />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" content={siteUrl + 'public' + image} />
+<meta name="twitter:image" content={siteUrl + "public" + image} />

apps/blog/src/pages/index.astro

@@ -3,6 +3,7 @@ import Base from "../layouts/base.astro";
 import { getCollection } from "astro:content";
 import { Picture } from "astro:assets";
 import formatDate from "../format-date";
+import Meta from "../layouts/base-meta-tags.astro";
 
 const markdownPosts = await getCollection("posts");
 
@@ -47,32 +48,10 @@ const posts = [
 });
 
 posts.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
-
-const schema = {
-  "@context": "http://schema.org",
-  "@type": "Blog",
-  name: "CroCoder Blog",
-  url: "https://crocoder.dev",
-  description:
-    "Tips and ideas to help you learn, build and improve your projects.",
-  sameAs: [
-    "https://twitter.com/crocoderdev",
-    "https://www.linkedin.com/company/crocoderdev",
-    "https://github.com/crocoder-dev",
-    "https://www.youtube.com/channel/UCWU6cnq4hp4LnunPhP-sAqA",
-    "https://www.instagram.com/crocoder.dev/",
-  ],
-  publisher: { "@type": "Organization", name: "CroCoder, Inc." },
-};
 ---
 
 <Base>
-  <script
-      slot="head"
-      type="application/ld+json"
-      is:inline
-      set:html={JSON.stringify(schema)}
-    />
+  <Meta slot={"head"} {...Astro.props} />
   <section class="py-20">
     <div class="container max-w-[1000px] px-4 md:px-8">
       <ol class="grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2">

apps/website/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^5.1.0",
     "@crocoder-dev/tailwind": "*",
-    "astro": "4.16.14"
+    "astro": "4.16.14",
+    "astro-font": "^0.1.81"
   },
   "scripts": {
     "dev": "astro dev --port 4321",

apps/website/public/site-manifest.json

@@ -2,7 +2,7 @@
   "name": "CroCoder | Enterprise-Grade Web Development",
   "short_name": "CroCoder",
   "description": "Building Software That Builds Your Business",
-  "url": "https://crocoder-company-website.vercel.app",
+  "url": "https://crocoder.dev",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",

apps/website/src/layouts/base.astro

@@ -2,6 +2,8 @@
 import theme from "@crocoder-dev/tailwind/theme.json";
 import "../styles/main.css";
 import Meta from "../layouts/meta-tags.astro";
+import { AstroFont } from "astro-font";
+import { ViewTransitions } from "astro:transitions";
 
 const pf = theme.fonts.font_family.primary;
 const sf = theme.fonts.font_family.secondary;
@@ -28,8 +30,33 @@ if (theme.fonts.font_family.secondary) {
       content="width=device-width, initial-scale=1, maximum-scale=5"
     />
     <Meta />
+    <AstroFont
+      config={[
+        {
+          src: [],
+          preload: false,
+          display: "swap",
+          name: fontPrimary!,
+          fallback: "sans-serif",
+          cssVariable: "font-primary",
+          googleFontsURL: `https://fonts.googleapis.com/css2?family=${pf}&display=swap`,
+        },
+        {
+          src: [],
+          preload: false,
+          display: "swap",
+          name: fontSecondary!,
+          fallback: "sans-serif",
+          cssVariable: "font-secondary",
+          googleFontsURL: `https://fonts.googleapis.com/css2?family=${sf}&display=swap`,
+        },
+      ]}
+    />
+    <ViewTransitions />
   </head>
-  <body class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+  <body
+    class="flex flex-col font-primary items-center justify-center min-h-screen bg-gray-100"
+  >
     <slot />
   </body>
 </html>

apps/website/src/layouts/meta-tags.astro

@@ -24,7 +24,11 @@ const schema = {
 };
 ---
 
-<script type="application/ld+json" set:html={JSON.stringify(schema)} />
+<script
+  type="application/ld+json"
+  is:inline
+  set:html={JSON.stringify(schema)}
+/>
 <link rel="manifest" href="/site-manifest.json" />
 <meta content={siteManifest.theme_color} name="theme-color" />
 <meta content={siteManifest.name} name="application-name" />
@@ -51,7 +55,7 @@ const schema = {
 
 <!-- Twitter -->
 <meta name="twitter:card" content="summary_large_image" />
-<meta property="twitter:domain" content="crocoder-company-website.vercel.app" />
+<meta property="twitter:domain" content="crocoder.dev" />
 <meta property="twitter:url" content={siteManifest.url} />
 <meta name="twitter:title" content={siteManifest.name} />
 <meta name="twitter:description" content={siteManifest.description} />

apps/website/src/styles/main.css

@@ -5,7 +5,6 @@
 @tailwind utilities;
 
 * {
-  font-family: "Poppins", sans-serif;
   scroll-behavior: smooth;
 }