jeans/developers.home-assistant
jeans/developers.home-assistant
1
0
Fork 0
mirror of https://github.com/home-assistant/developers.home-assistant.git synced 2025-07-26 10:46:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Embed dev calendar (#265)

Browse Source 
* Embed dev calendar

* Add blog posts
This commit is contained in:
Paulus Schoutsen 2019-05-26 12:32:23 -07:00 committed by GitHub
parent 7c80cab476
commit 9acc58cffc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
website/pages/en/index.js
View File

@ -5,28 +5,34 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
const React = require('react'); const React = require("react");
const CompLibrary = require('../../core/CompLibrary.js'); const CompLibrary = require("../../core/CompLibrary.js");
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const Container = CompLibrary.Container; const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock; const GridBlock = CompLibrary.GridBlock;
const siteConfig = require(process.cwd() + '/siteConfig.js'); const siteConfig = require(process.cwd() + "/siteConfig.js");
const MetadataBlog = require("../../core/MetadataBlog.js");
function imgUrl(img) { function imgUrl(img) {
return siteConfig.baseUrl + 'img/' + img; return siteConfig.baseUrl + "img/" + img;
} }
function docUrl(doc, language) { function docUrl(doc, language) {
return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc + ".html"; return (
siteConfig.baseUrl +
"docs/" +
(language ? language + "/" : "") +
doc +
".html"
);
} }
function pageUrl(page, language) { function pageUrl(page, language) {
return siteConfig.baseUrl + (language ? language + '/' : '') + page; return siteConfig.baseUrl + (language ? language + "/" : "") + page;
} }
const PopularTopicsSection = ({ language }) => ( const PopularTopicsSection = ({ language }) => (
<div className="introSection lightBackground"> <div className="introSection lightBackground">
<Container> <Container>
@ -37,59 +43,80 @@ const PopularTopicsSection = ({ language }) => (
justifyContent: "space-evenly" justifyContent: "space-evenly"
}} }}
> >
<div style={{ display: "flex", flexDirection: "column", maxWidth: 420 }}> <div
style={{ display: "flex", flexDirection: "column", maxWidth: 420 }}
>
<h2>Documentation Structure</h2> <h2>Documentation Structure</h2>
<p> <p>
<b><a href={docUrl('architecture_index', language)}>Architecture</a>.</b> <b>
{' '}Explains various layers that make up Home Assistant. <a href={docUrl("architecture_index", language)}>Architecture</a>.
</b>{" "}
Explains various layers that make up Home Assistant.
</p> </p>
<p> <p>
<b><a href={docUrl('frontend_index', language)}>Frontend</a>.</b> <b>
{' '}Explains how to develop the user interface of Home Assistant. <a href={docUrl("frontend_index", language)}>Frontend</a>.
</b>{" "}
Explains how to develop the user interface of Home Assistant.
</p> </p>
<p> <p>
<b><a href={docUrl('development_index', language)}>Backend</a>.</b> <b>
{' '}Explains how to build new integrations for Home Assistant. <a href={docUrl("development_index", language)}>Backend</a>.
</b>{" "}
Explains how to build new integrations for Home Assistant.
</p> </p>
<p> <p>
<b><a href={docUrl('misc', language)}>Misc</a>.</b> <b>
{' '}External APIs, Internationalization, asyncio, Hass.io add-ons, updating documentation. <a href={docUrl("misc", language)}>Misc</a>.
</b>{" "}
External APIs, Internationalization, asyncio, Hass.io add-ons,
updating documentation.
</p> </p>
</div> </div>
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
<h2>Popular topics</h2> <h2>Popular topics</h2>
<ul style={{ flex: "1" }}> <ul style={{ flex: "1" }}>
<li><a href={docUrl("development_index", language)}> <li>
<a href={docUrl("development_index", language)}>
Add a new integration Add a new integration
</a></li> </a>
<li><a href={docUrl("internationalization_index", language)}> </li>
<li>
<a href={docUrl("internationalization_index", language)}>
Translate Home Assistant Translate Home Assistant
</a></li> </a>
<li><a href={docUrl("frontend_index", language)}> </li>
<li>
<a href={docUrl("frontend_index", language)}>
Improve the frontend Improve the frontend
</a></li> </a>
<li><a href={docUrl("external_api_rest", language)}> </li>
<li>
<a href={docUrl("external_api_rest", language)}>
Extract data from the Home Assistant API Extract data from the Home Assistant API
</a></li> </a>
</li>
</ul> </ul>
<h2>Source Code</h2> <h2>Source Code</h2>
<ul> <ul>
<li><a href="https://github.com/home-assistant/home-assistant"> <li>
<a href="https://github.com/home-assistant/home-assistant">
Home Assistant Home Assistant
</a></li> </a>
<li><a href="https://github.com/home-assistant/home-assistant-polymer"> </li>
<li>
<a href="https://github.com/home-assistant/home-assistant-polymer">
Home Assistant Frontend Home Assistant Frontend
</a></li> </a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</Container> </Container>
</div> </div>
); );
class Button extends React.Component { class Button extends React.Component {
render() { render() {
return ( return (
@ -103,7 +130,7 @@ class Button extends React.Component {
} }
Button.defaultProps = { Button.defaultProps = {
target: '_self', target: "_self"
}; };
const SplashContainer = props => ( const SplashContainer = props => (
@ -127,7 +154,9 @@ const ProjectTitle = props => (
<small>Developer documentation</small> <small>Developer documentation</small>
</h2> </h2>
<div> <div>
<a href="https://www.home-assistant.io">Not a developer? Go to the normal website</a> <a href="https://www.home-assistant.io">
Not a developer? Go to the normal website
</a>
</div> </div>
</div> </div>
); );
@ -142,10 +171,10 @@ const PromoSection = props => (
class HomeSplash extends React.Component { class HomeSplash extends React.Component {
render() { render() {
let language = this.props.language || ''; let language = this.props.language || "";
return ( return (
<SplashContainer> <SplashContainer>
<Logo img_src={imgUrl('logo-responsive.svg')} /> <Logo img_src={imgUrl("logo-responsive.svg")} />
<div className="inner"> <div className="inner">
<ProjectTitle /> <ProjectTitle />
{/* <PromoSection> {/* <PromoSection>
@ -159,11 +188,10 @@ class HomeSplash extends React.Component {
} }
} }
const IntroSection = ({ language }) => ( const IntroSection = ({ language }) => (
<div className="videoSection"> <div className="videoSection lightBackground">
<Container> <Container>
<div style={{maxWidth: 600, margin: 'auto'}}> <div style={{ maxWidth: 600, margin: "auto" }}>
<div className="videoWrapper"> <div className="videoWrapper">
<iframe <iframe
width={560} width={560}
@ -176,17 +204,64 @@ const IntroSection = ({ language }) => (
</div> </div>
</Container> </Container>
</div> </div>
) );
const LatestNews = ({ language }) => (
<div className="introSection">
<Container>
<div
style={{
display: "flex",
flexFlow: "row wrap",
justifyContent: "space-evenly"
}}
>
<div
style={{ display: "flex", flexDirection: "column", maxWidth: 420 }}
>
<h2>Latest Blog Posts</h2>
<ul>
{MetadataBlog.slice(0, 5).map(item => (
<li>
<a href={item.path}>{item.title}</a>{" "}
<small>
{new Date(item.date).toLocaleDateString("en-US", {
weekday: undefined,
year: "numeric",
month: "long",
day: "numeric"
})}
</small>
</li>
))}
</ul>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<h2>Upcoming Events</h2>
<iframe
src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=2&amp;bgcolor=%23ffffff&amp;ctz=America%2FLos_Angeles&amp;src=cDA3bjk4Z28xMW9uYW1kMDhkMGttcTZqaHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23039BE5&amp;title=Release%20Schedule&amp;mode=AGENDA&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;showNav=0&amp;showDate=0&amp;showTitle=0"
style={{ borderWidth: 0, margin: "auto", display: "block" }}
width="300"
height="200"
frameborder="0"
scrolling="no"
/>
</div>
</div>
</Container>
</div>
);
class Index extends React.Component { class Index extends React.Component {
render() { render() {
let language = this.props.language || ''; let language = this.props.language || "";
return ( return (
<div> <div>
<HomeSplash language={language} /> <HomeSplash language={language} />
<div className="mainContainer indexPage"> <div className="mainContainer indexPage">
<PopularTopicsSection language={language} /> <PopularTopicsSection language={language} />
<LatestNews language={language} />
<IntroSection language={language} /> <IntroSection language={language} />
</div> </div>
</div> </div>

5
website/static/css/custom.css
View File

@ -14,7 +14,6 @@
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
height: 0; height: 0;
background: #000; background: #000;
} }
.videoWrapper iframe { .videoWrapper iframe {
@ -25,7 +24,6 @@
height: 100%; height: 100%;
} }
.introSection { .introSection {
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -34,6 +32,9 @@ img.inline {
display: inline-block; display: inline-block;
} }
small {
font-size: smaller;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) { @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
} }