Minor site config changes (#503)

This commit is contained in:
Franck Nijhof 2020-05-10 19:43:39 +02:00 committed by GitHub
parent ac3c3236c2
commit c112c34f84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 127 additions and 60 deletions

View File

@ -1,80 +1,134 @@
module.exports = { 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: { themeConfig: {
googleAnalytics: { googleAnalytics: {
trackingID: 'UA-57927901-3', trackingID: "UA-57927901-3",
}, },
navbar: { navbar: {
title: 'Developer Docs', title: "Developers",
logo: { logo: {
alt: 'Home Assistant', alt: "Home Assistant",
src: 'img/logo-pretty.svg', src: "img/logo-pretty.svg",
}, },
links: [ 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: { footer: {
logo: { 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: [ links: [
{ {
title: 'Social', title: "More Home Assistant",
items: [ 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.`, copyright: `Copyright © ${new Date().getFullYear()} Home Assistant, Inc. Built with Docusaurus.`,
}, },
image: 'img/default-social.png', image: "img/default-social.png",
algolia: { algolia: {
apiKey: 'd0245452c36b10cec4b8b5bad04e06fc', apiKey: "d0245452c36b10cec4b8b5bad04e06fc",
indexName: 'home-assistant-dev', indexName: "home-assistant-dev",
algoliaOptions: {} algoliaOptions: {},
}, },
}, },
presets: [ presets: [
[ [
'@docusaurus/preset-classic', "@docusaurus/preset-classic",
{ {
docs: { docs: {
sidebarPath: require.resolve('./sidebars.js'), sidebarPath: require.resolve("./sidebars.js"),
editUrl: editUrl:
'https://github.com/home-assistant/developers.home-assistant/edit/master/', "https://github.com/home-assistant/developers.home-assistant/edit/master/",
showLastUpdateTime: true,
}, },
theme: { theme: {
customCss: require.resolve('./src/css/custom.css'), customCss: require.resolve("./src/css/custom.css"),
}, },
blog: { blog: {
postsPerPage: 10, postsPerPage: 10,
feedOptions: { feedOptions: {
type: 'all', type: "all",
}, },
}, },
}, },

View File

@ -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 = [ const features = [
{ {
title: <>Document Structure</>, title: <>Document Structure</>,
imageUrl: '', imageUrl: "",
description: ( description: (
<> <>
<p> <p>
@ -42,14 +42,12 @@ const features = [
}, },
{ {
title: <>Popular Topics</>, title: <>Popular Topics</>,
imageUrl: '', imageUrl: "",
description: ( description: (
<> <>
<ul style={{ flex: "1" }}> <ul style={{ flex: "1" }}>
<li> <li>
<a href="docs/development_index"> <a href="docs/development_index">Add a new integration</a>
Add a new integration
</a>
</li> </li>
<li> <li>
<a href="docs/internationalization_index"> <a href="docs/internationalization_index">
@ -57,9 +55,7 @@ const features = [
</a> </a>
</li> </li>
<li> <li>
<a href="docs/frontend_index"> <a href="docs/frontend_index">Improve the frontend</a>
Improve the frontend
</a>
</li> </li>
<li> <li>
<a href="docs/external_api_rest"> <a href="docs/external_api_rest">
@ -85,7 +81,7 @@ const features = [
}, },
{ {
title: <>Upcoming Events</>, title: <>Upcoming Events</>,
imageUrl: '', imageUrl: "",
description: ( description: (
<> <>
<iframe <iframe
@ -101,11 +97,10 @@ const features = [
}, },
]; ];
function Feature({ imageUrl, title, description }) {
function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl); const imgUrl = useBaseUrl(imageUrl);
return ( return (
<div className={classnames('col col--4', styles.feature)}> <div className={classnames("col col--4", styles.feature)}>
{imgUrl && ( {imgUrl && (
<div className="text--center"> <div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} /> <img className={styles.featureImage} src={imgUrl} alt={title} />
@ -119,16 +114,17 @@ function Feature({imageUrl, title, description}) {
function Home() { function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig = {}} = context; const { siteConfig = {} } = context;
return ( return (
<Layout <Layout
title={`Home Assistant Developer Docs`} 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"> <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> <p>
<a className="hero__text" href="https://www.home-assistant.io"> <a className="hero__text" href="https://www.home-assistant.io">
Not a developer? Go to the normal website Not a developer? Go to the normal website

View File

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