Chore/new theme (#249)

* chore(package.json): remove unnecessary deps, add new preset, prettier and engines fields

* chore: hook up @ionic-docs preset

* chore: package-lock

* chore(website): config formatting

* chore(website): add default code styles

* chore(website): hook up gtm

* styles(website): remove abstracted styles

* chore(website): remove breadcrumbs

* chore(website): bump @ionic-docs/preset-classic dep

website/docusaurus.config.js

@@ -1,78 +1,109 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 
-const lernaConfig = require("../lerna.json");
+const lernaConfig = require('../lerna.json');
 
 module.exports = {
-  title: "Ionic Portals",
-  tagline: "Portals tagline",
-  url: "https://ionic.io",
+  title: 'Ionic Portals',
+  tagline: 'Portals tagline',
+  url: 'https://ionic.io',
   trailingSlash: false,
-  baseUrl: "/docs/portals/",
+  baseUrl: '/docs/portals/',
   baseUrlIssueBanner: false,
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/logo.svg",
-  organizationName: "ionic-team",
-  projectName: "portals-docs",
-  titleDelimiter: "-",
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/logo.svg',
+  organizationName: 'ionic-team',
+  projectName: 'portals-docs',
+  titleDelimiter: '-',
   themeConfig: {
+    logo: {
+      alt: 'Portals Logo',
+      src: 'img/logo-light.png',
+      srcDark: 'img/logo-dark.png',
+      href: '/docs/portals',
+      height: 24,
+      width: 84,
+    },
     navbar: {
-      title: "Portals",
-      logo: {
-        alt: "Portals Logo",
-        src: "img/logo.svg",
+      items: [
+        {
+          type: 'search',
+          position: 'left',
+        },
+      ],
+    },
+    sidebar: {
+      productDropdown: {
+        title: 'Portals Docs',
+        logo: {
+          width: 20,
+          height: 20,
+          alt: 'Portals Logo',
+          src: 'img/components/product-dropdown/logo.png',
+        },
+        textLinks: [
+          {
+            url: {
+              href: 'https://forum.ionicframework.com/c/portals/31',
+              target: '_blank',
+              rel: 'noopener nofollow',
+            },
+            label: 'Forum',
+          },
+        ],
+        iconLinks: [
+          {
+            key: 'github',
+            url: {
+              href: 'https://github.com/ionic-team/ionic-portals',
+              target: '_blank',
+              rel: 'noopener nofollow',
+            },
+          },
+        ],
+      },
+      backButton: {
+        url: {
+          href: '/docs',
+        },
       },
     },
     colorMode: {
       respectPrefersColorScheme: true,
     },
-    tagManager: {
-      trackingID: "GTM-TKMGCBC",
-    },
     prism: {
-      theme: { plain: {}, styles: [] },
-      additionalLanguages: [
-        "shell-session",
-        "kotlin",
-        "groovy",
-        "java",
-        "swift",
-        "ruby",
-      ],
+      theme: require('prism-react-renderer/themes/github'),
+      darkTheme: require('prism-react-renderer/themes/dracula'),
+      additionalLanguages: ['shell-session', 'kotlin', 'groovy', 'java', 'swift', 'ruby'],
     },
     zoom: {
-      selector: ".markdown em > img",
+      selector: '.markdown em > img',
       background: {
-        light: "var(--token-background-color)",
-        dark: "var(--token-background-color)"
+        light: 'var(--token-background-color)',
+        dark: 'var(--token-background-color)',
       },
       config: {
         margin: 75,
-        scrollOffset: 20
+        scrollOffset: 20,
       },
     },
   },
-  plugins: [
-    "@ionic-internal/docusaurus-plugin-tag-manager",
-    "docusaurus-plugin-sass",
-    "docusaurus-plugin-image-zoom",
-  ],
-  themes: ["@ionic-internal/docusaurus-theme"],
+  plugins: ['docusaurus-plugin-image-zoom'],
   presets: [
     [
-      "@docusaurus/preset-classic",
+      '@ionic-docs/preset-classic',
       {
         docs: {
-          routeBasePath: "/",
-          sidebarPath: require.resolve("./sidebars.js"),
+          routeBasePath: '/',
+          sidebarPath: require.resolve('./sidebars.js'),
+          breadcrumbs: false,
         },
-        blog: false,
         pages: false,
         theme: {
-          customCss: [
-            "prismjs/themes/prism-tomorrow.css",
-            require.resolve("./src/styles/custom.css"),
-          ],
+          customCss: [require.resolve('./src/styles/custom.css')],
+        },
+        googleTagManager: {
+          containerId: 'GTM-TKMGCBC',
         },
       },
     ],