[CONFIG PROMOTE] Add social preview & System preferenced theme

website/docusaurus.config.js

@@ -253,6 +253,30 @@ const announcementBar = {
     isCloseable: false, // Defaults to `true`.
 };
 
+/** @type {Config["themeConfig"]["colorMode"]} */
+const colorMode = {
+    respectPrefersColorScheme: true,
+};
+
+/**
+ * @type {Config["themeConfig"]["metadatas"]}
+ * @see https://docusaurus.io/docs/api/themes/configuration#meta-image
+ * @see https://docusaurus.io/docs/api/themes/configuration#metadatas
+ */
+const metadatas = [
+    { name: "twitter:site", content: "@feature_sliced" },
+    { name: "twitter:card", content: "summary_large_image" },
+    // NOTE: uncomment if need
+    // { name: "description", content: description },
+    // { name: "og:image", content: `/img/preview.png` }, // ~ inherits from themeConfig.image
+    // { name: "og:title", content: title },
+    // { name: "og:type", content: "website" },
+    // { name: "og:description", content: description },
+    // { name: "twitter:image", content: `/img/preview.png` }, // ~ inherits from themeConfig.image
+    // { name: "twitter:title", content: title },
+    // { name: "twitter:description", content: description },
+];
+
 /** @type {Config} */
 module.exports = {
     title: "feature-sliced",
@@ -267,6 +291,9 @@ module.exports = {
     organizationName: "feature-sliced", // Usually your GitHub org/user name.
     projectName: "documentation", // Usually your repo name.
     themeConfig: {
+        image: "img/preview.png",
+        metadatas,
+        colorMode,
         navbar,
         footer,
         announcementBar,