Merge pull request #187 from conceptadev/chore/website-og-images

Updated open graph images

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,14 +3,16 @@
 ## Describe your changes
 
 ## Type of change
+
 - **Bug fix** (non-breaking change which fixes an issue)
 - **New feature** (non-breaking change which adds functionality)
-- **Chore** (updating grunt tasks etc; no production code change)
+- **Chore** (updating CI, tooling; no production code change)
 - **Docs** (changes to the documentation)
 - **Test** (adding missing tests, refactoring tests; no production code change)
 
 ## Checklist before requesting a review
+
 - [ ] I have performed a self-review of my code
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
-- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] I have added tests that prove my fix is effective or that my feature works

website/components/HomeContent.tsx

@@ -16,9 +16,9 @@ const HomeContent = () => {
             Intuitively
           </h1>
           <p className="subtitle">
-            Build your Flutter UI effortlessly
+            An expressive way to effortlessly
             <br className="sm:block hidden" />
-            with a simple declarative styling.
+            build design systems in Flutter.
           </p>
 
           <div className="not-prose mb-16 mt-6 flex gap-3">

website/pages/docs/overview/best-practices.mdx

@@ -1,6 +1,7 @@
 ---
 id: best-practices
-title: "Best Practices"
+title: Best Practices
+og_image: best-practices-og.png
 ---
 
 import { Callout } from "nextra-theme-docs";

website/pages/docs/overview/getting-started.mdx

@@ -1,5 +1,6 @@
 ---
-title: "Getting Started"
+title: Getting Started
+og_image: getting-started-og.png
 ---
 
 import { Steps } from "nextra/components";

website/pages/docs/overview/index.mdx

@@ -1,5 +1,6 @@
 ---
-title: "Introduction"
+title: Introduction
+og_image: introduction-og.png
 ---
 
 # Introduction

website/pages/docs/overview/utility-first.mdx

@@ -27,7 +27,7 @@ final style = Style(
   width(100),
   padding(10),
   alignment.center(),
-  background.color.red(),
+  backgroundColor.red(),
 );
 ```
 

website/theme.config.tsx

@@ -1,7 +1,12 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { useConfig } from "nextra-theme-docs";
 import CustomSearch from "./components/Search";
 
+const packageName = "Mix";
+const siteUrl = "https://fluttermix.com";
+const description = "An expressive way to build design systems in Flutter.";
+
 const themeConfig = {
   useNextSeoProps() {
     const { asPath } = useRouter();
@@ -29,7 +34,7 @@ const themeConfig = {
     key: "1.0-beta-doc-wip-notice",
     dismissible: false,
     text: (
-      <a href="https://fluttermix.com" target="_blank">
+      <a href={`${siteUrl}`} target="_blank">
         Mix 1.0 is in Beta. Documentation is currently a work-in-progress →
       </a>
     ),
@@ -38,58 +43,91 @@ const themeConfig = {
   search: {
     component: <CustomSearch />,
   },
-  head: (
-    <>
-      <meta name="msapplication-TileColor" content="#ffffff" />
-      <meta name="theme-color" content="#ffffff" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta httpEquiv="Content-Language" content="en" />
-      <meta
-        name="description"
-        content="Mix: Build your Flutter UI effortlessly with a simple declarative syntax."
-      />
-      <meta
-        name="og:description"
-        content="Mix: Build your Flutter UI effortlessly with a simple declarative syntax."
-      />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="https://fluttermix.com/og.png" />
-      <meta name="twitter:site:domain" content="fluttermix.com" />
-      <meta name="twitter:url" content="https://fluttermix.com" />
-      <meta
-        name="og:title"
-        content="Mix: Build your Flutter UI effortlessly with a simple declarative syntax."
-      />
-      <meta name="og:image" content="https://fluttermix.com/og.png" />
-      <meta name="apple-mobile-web-app-title" content="Mix" />
+  head: () => {
+    const { asPath, defaultLocale, locale } = useRouter();
+    const origin =
+      typeof window !== "undefined" && window.location.origin
+        ? window.location.origin
+        : "";
+
+    const { frontMatter } = useConfig();
+    const url =
+      origin + (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
+
+    const ogImage = () => {
+      let ogImage = "main.png";
+      if (frontMatter.og_image) {
+        ogImage = frontMatter.og_image;
+      }
+
+      return `${origin}/assets/og/${ogImage}`;
+    };
+
+    const title = () => {
+      if (frontMatter.title) {
+        return frontMatter.title + " – " + packageName;
+      }
+      return packageName;
+    };
+
+    return (
+      <>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title()}</title>
+        <meta
+          name="description"
+          content={frontMatter.description || description}
+        />
+
+        {/* Open Graph */}
+        <meta property="og:site_name" content={packageName} />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content={ogImage()} />
+        <meta property="og:url" content={origin} />
+        <meta property="og:title" content={title()} />
+        <meta
+          property="og:description"
+          content={frontMatter.description || description}
+        />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:image" content={ogImage()} />
+        <meta name="twitter:site:domain" content={`${origin}`} />
+        <meta name="twitter:url" content={`${url}`} />
+
+        {/* Icons */}
+        <meta name="apple-mobile-web-app-title" content={packageName} />
+
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-icon-180x180.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="192x192"
+          href="/android-icon-192x192.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="msapplication-TileImage" content="/ms-icon-150x150.png" />
+      </>
+    );
+  },
 
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/apple-icon-180x180.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="192x192"
-        href="/android-icon-192x192.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/favicon-32x32.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/favicon-16x16.png"
-      />
-      <link rel="manifest" href="/site.webmanifest" />
-      <meta name="msapplication-TileImage" content="/ms-icon-150x150.png" />
-    </>
-  ),
   navigation: {
     prev: true,
     next: true,