Minor site config changes (#503)

docusaurus.config.js

@@ -1,80 +1,134 @@
 module.exports = {
-  title: 'Home Assistant Developer Docs',
+  title: "Home Assistant Developer Documentation",
-  tagline: 'All you need to start developing for Home Assistant',
+  tagline: "All you need to start developing for Home Assistant",
-  url: 'https://developers.home-assistant.io',
+  url: "https://developers.home-assistant.io",
-  baseUrl: '/',
+  baseUrl: "/",
-  favicon: 'img/favicon.png',
+  favicon: "img/favicon.png",
-  organizationName: 'facebook', // Usually your GitHub org/user name.
+  organizationName: "home-assistant",
-  projectName: 'docusaurus', // Usually your repo name.
+  projectName: "developers.home-assistant",
   themeConfig: {
     googleAnalytics: {
-      trackingID: 'UA-57927901-3',
+      trackingID: "UA-57927901-3",
     },
     navbar: {
-      title: 'Developer Docs',
+      title: "Developers",
       logo: {
-        alt: 'Home Assistant',
+        alt: "Home Assistant",
-        src: 'img/logo-pretty.svg',
+        src: "img/logo-pretty.svg",
       },
       links: [
-        {to: 'docs/architecture_index', label: 'Architecture', position: 'left'},
+        {
-        {to: 'docs/frontend_index', label: 'Frontend', position: 'left'},
+          to: "docs/architecture_index",
-        {to: 'docs/development_index', label: 'Backend', position: 'left'},
+          label: "Architecture",
-        {to: 'docs/misc', label: 'Misc', position: 'left'},
+          position: "left",
-        {to: 'blog', label: 'Blog', position: 'left'},
+        },
+        { to: "docs/frontend_index", label: "Frontend", position: "left" },
+        { to: "docs/development_index", label: "Backend", position: "left" },
+        { to: "docs/misc", label: "Misc", position: "left" },
+        { to: "blog", label: "Blog", position: "left" },
       ],
     },
     footer: {
       logo: {
-        alt: 'Home Assistant',
+        alt: "Home Assistant",
-        src: 'img/logo-white.svg',
+        src: "img/logo-white.svg",
-        href: 'https://www.home-assistant.io',
+        href: "https://www.home-assistant.io",
       },
-      style: 'dark',
+      style: "dark",
       links: [
         {
-          title: 'Social',
+          title: "More Home Assistant",
           items: [
             {
-              label: 'Blog',
+              label: "Homepage",
-              to: 'blog',
+              href: "https://www.home-assistant.io",
             },
             {
-              label: 'GitHub',
+              label: "Data Science Portal",
-              href: 'https://github.com/home-assistant/developers.home-assistant',
+              href: "https://data.home-assistant.io",
             },
             {
-              label: 'Twitter',
+              label: "Alerts",
-              href: 'https://twitter.com/hass_devs',
+              href: "https://alerts.home-assistant.io",
+            },
+            {
+              label: "System Status",
+              href: "https://status.home-assistant.io/",
+            },
+          ],
+        },
+        {
+          title: "Social",
+          items: [
+            {
+              label: "Blog",
+              to: "blog",
+            },
+            {
+              label: "GitHub",
+              href: "https://github.com/home-assistant",
+            },
+            {
+              label: "Twitter",
+              href: "https://twitter.com/hass_devs",
+            },
+            {
+              label: "Discord chat",
+              href: "https://www.home-assistant.io/join-chat",
+            },
+          ],
+        },
+        {
+          title: "Other",
+          items: [
+            {
+              label: "Privacy",
+              href: "https://www.home-assistant.io/privacy/",
+            },
+            {
+              label: "Security",
+              href: "https://www.home-assistant.io/security/",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              html: `
+              <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
+                <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
+              </a>
+              `,
             },
           ],
         },
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Home Assistant, Inc. Built with Docusaurus.`,
     },
-    image: 'img/default-social.png',
+    image: "img/default-social.png",
     algolia: {
-      apiKey: 'd0245452c36b10cec4b8b5bad04e06fc',
+      apiKey: "d0245452c36b10cec4b8b5bad04e06fc",
-        indexName: 'home-assistant-dev',
+      indexName: "home-assistant-dev",
-      algoliaOptions: {}
+      algoliaOptions: {},
     },
   },
   presets: [
     [
-      '@docusaurus/preset-classic',
+      "@docusaurus/preset-classic",
       {
         docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: require.resolve("./sidebars.js"),
           editUrl:
-            'https://github.com/home-assistant/developers.home-assistant/edit/master/',
+            "https://github.com/home-assistant/developers.home-assistant/edit/master/",
+          showLastUpdateTime: true,
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve("./src/css/custom.css"),
         },
         blog: {
           postsPerPage: 10,
           feedOptions: {
-            type: 'all',
+            type: "all",
           },
         },
       },

src/pages/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import classnames from 'classnames';
+import classnames from "classnames";
-import Layout from '@theme/Layout';
+import Layout from "@theme/Layout";
-import Link from '@docusaurus/Link';
+import Link from "@docusaurus/Link";
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl from "@docusaurus/useBaseUrl";
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 const features = [
   {
     title: <>Document Structure</>,
-    imageUrl: '',
+    imageUrl: "",
     description: (
       <>
         <p>
@@ -42,14 +42,12 @@ const features = [
   },
   {
     title: <>Popular Topics</>,
-    imageUrl: '',
+    imageUrl: "",
     description: (
       <>
         <ul style={{ flex: "1" }}>
           <li>
-            <a href="docs/development_index">
+            <a href="docs/development_index">Add a new integration</a>
-              Add a new integration
-            </a>
           </li>
           <li>
             <a href="docs/internationalization_index">
@@ -57,9 +55,7 @@ const features = [
             </a>
           </li>
           <li>
-            <a href="docs/frontend_index">
+            <a href="docs/frontend_index">Improve the frontend</a>
-              Improve the frontend
-            </a>
           </li>
           <li>
             <a href="docs/external_api_rest">
@@ -85,7 +81,7 @@ const features = [
   },
   {
     title: <>Upcoming Events</>,
-    imageUrl: '',
+    imageUrl: "",
     description: (
       <>
         <iframe
@@ -101,11 +97,10 @@ const features = [
   },
 ];
 
-
+function Feature({ imageUrl, title, description }) {
-function Feature({imageUrl, title, description}) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
-    <div className={classnames('col col--4', styles.feature)}>
+    <div className={classnames("col col--4", styles.feature)}>
       {imgUrl && (
         <div className="text--center">
           <img className={styles.featureImage} src={imgUrl} alt={title} />
@@ -119,16 +114,17 @@ function Feature({imageUrl, title, description}) {
 
 function Home() {
   const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
+  const { siteConfig = {} } = context;
 
   return (
     <Layout
       title={`Home Assistant Developer Docs`}
-      description="Get started developing for Home Assistant">
+      description="Get started developing for Home Assistant"
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+    >
+      <header className={classnames("hero hero--primary", styles.heroBanner)}>
         <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
+          <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <p className={styles.heroTagline}>{siteConfig.tagline}</p>
           <p>
             <a className="hero__text" href="https://www.home-assistant.io">
               Not a developer? Go to the normal website

src/pages/styles.module.css

@@ -10,10 +10,27 @@
   overflow: hidden;
 }
 
+.heroTitle {
+  font-size: 3rem;
+}
+
+.heroTagline {
+  font-size: 1.4rem;
+}
+
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .heroTitle {
+    font-size: 2.4rem;
+  }
+
+  .heroTagline {
+    font-size: 1rem;
+    font-weight: bold;
+  }
 }
 
 .buttons {