shared description

packages/docs/app/root.tsx

@@ -1,3 +1,4 @@
+import packageJson from "reacord/package.json"
 import type { LinksFunction, MetaFunction } from "remix"
 import {
   Links,
@@ -9,12 +10,10 @@ import {
 } from "remix"
 import prismThemeCss from "./prism-theme.css"
 
-export const meta: MetaFunction = () => {
-  return {
-    title: "Reacord",
-    description: "Create interactive Discord messages using React and JSX.",
-  }
-}
+export const meta: MetaFunction = () => ({
+  title: "Reacord",
+  description: packageJson.description,
+})
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: prismThemeCss },

packages/docs/app/routes/index.tsx

@@ -1,3 +1,4 @@
+import packageJson from "reacord/package.json"
 import { Link } from "remix"
 import LandingExample from "~/components/landing-example.mdx"
 
@@ -11,9 +12,7 @@ export default function Landing() {
             <LandingExample />
           </section>
         </div>
-        <p className="px-8 text-2xl font-light">
-          Create interactive Discord messages using React and JSX.
-        </p>
+        <p className="px-8 text-2xl font-light">{packageJson.description}</p>
         <Link
           to="/docs/guides/getting-started"
           className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md "

packages/docs/package.json

@@ -17,8 +17,10 @@
     "@tailwindcss/typography": "^0.5.0",
     "autoprefixer": "^10.4.1",
     "clsx": "^1.1.1",
+    "fast-glob": "^3.2.7",
     "gray-matter": "^4.0.3",
     "postcss": "^8.4.5",
+    "reacord": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rehype-stringify": "^9.0.2",
@@ -37,7 +39,6 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "concurrently": "^6.5.1",
-    "fast-glob": "^3.2.7",
     "prettier": "^2.5.1",
     "rehype-highlight": "^5.0.2",
     "rehype-prism-plus": "^1.1.3",