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-21 08:16: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

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

@ -5,28 +5,34 @@
* 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 Container = CompLibrary.Container;
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) {
return siteConfig.baseUrl + 'img/' + img;
return siteConfig.baseUrl + "img/" + img;
}
function docUrl(doc, language) {
return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc + ".html";
return (
siteConfig.baseUrl +
"docs/" +
(language ? language + "/" : "") +
doc +
".html"
);
}
function pageUrl(page, language) {
return siteConfig.baseUrl + (language ? language + '/' : '') + page;
return siteConfig.baseUrl + (language ? language + "/" : "") + page;
}
const PopularTopicsSection = ({ language }) => (
<div className="introSection lightBackground">
<Container>
@ -37,59 +43,80 @@ const PopularTopicsSection = ({ language }) => (
justifyContent: "space-evenly"
}}
>
<div style={{ display: "flex", flexDirection: "column", maxWidth: 420 }}>
<div
style={{ display: "flex", flexDirection: "column", maxWidth: 420 }}
>
<h2>Documentation Structure</h2>
<p>
<b><a href={docUrl('architecture_index', language)}>Architecture</a>.</b>
{' '}Explains various layers that make up Home Assistant.
<b>
<a href={docUrl("architecture_index", language)}>Architecture</a>.
</b>{" "}
Explains various layers that make up Home Assistant.
</p>
<p>
<b><a href={docUrl('frontend_index', language)}>Frontend</a>.</b>
{' '}Explains how to develop the user interface of Home Assistant.
<b>
<a href={docUrl("frontend_index", language)}>Frontend</a>.
</b>{" "}
Explains how to develop the user interface of Home Assistant.
</p>
<p>
<b><a href={docUrl('development_index', language)}>Backend</a>.</b>
{' '}Explains how to build new integrations for Home Assistant.
<b>
<a href={docUrl("development_index", language)}>Backend</a>.
</b>{" "}
Explains how to build new integrations for Home Assistant.
</p>
<p>
<b><a href={docUrl('misc', language)}>Misc</a>.</b>
{' '}External APIs, Internationalization, asyncio, Hass.io add-ons, updating documentation.
<b>
<a href={docUrl("misc", language)}>Misc</a>.
</b>{" "}
External APIs, Internationalization, asyncio, Hass.io add-ons,
updating documentation.
</p>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<h2>Popular topics</h2>
<ul style={{ flex: "1" }}>
<li><a href={docUrl("development_index", language)}>
Add a new integration
</a></li>
<li><a href={docUrl("internationalization_index", language)}>
Translate Home Assistant
</a></li>
<li><a href={docUrl("frontend_index", language)}>
Improve the frontend
</a></li>
<li><a href={docUrl("external_api_rest", language)}>
Extract data from the Home Assistant API
</a></li>
<li>
<a href={docUrl("development_index", language)}>
Add a new integration
</a>
</li>
<li>
<a href={docUrl("internationalization_index", language)}>
Translate Home Assistant
</a>
</li>
<li>
<a href={docUrl("frontend_index", language)}>
Improve the frontend
</a>
</li>
<li>
<a href={docUrl("external_api_rest", language)}>
Extract data from the Home Assistant API
</a>
</li>
</ul>
<h2>Source Code</h2>
<ul>
<li><a href="https://github.com/home-assistant/home-assistant">
Home Assistant
</a></li>
<li><a href="https://github.com/home-assistant/home-assistant-polymer">
Home Assistant Frontend
</a></li>
<li>
<a href="https://github.com/home-assistant/home-assistant">
Home Assistant
</a>
</li>
<li>
<a href="https://github.com/home-assistant/home-assistant-polymer">
Home Assistant Frontend
</a>
</li>
</ul>
</div>
</div>
</Container>
</div>
);
class Button extends React.Component {
render() {
return (
@ -103,7 +130,7 @@ class Button extends React.Component {
}
Button.defaultProps = {
target: '_self',
target: "_self"
};
const SplashContainer = props => (
@ -127,7 +154,9 @@ const ProjectTitle = props => (
<small>Developer documentation</small>
</h2>
<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>
);
@ -142,10 +171,10 @@ const PromoSection = props => (
class HomeSplash extends React.Component {
render() {
let language = this.props.language || '';
let language = this.props.language || "";
return (
<SplashContainer>
<Logo img_src={imgUrl('logo-responsive.svg')} />
<Logo img_src={imgUrl("logo-responsive.svg")} />
<div className="inner">
<ProjectTitle />
{/* <PromoSection>
@ -159,11 +188,10 @@ class HomeSplash extends React.Component {
}
}
const IntroSection = ({ language }) => (
<div className="videoSection">
<div className="videoSection lightBackground">
<Container>
<div style={{maxWidth: 600, margin: 'auto'}}>
<div style={{ maxWidth: 600, margin: "auto" }}>
<div className="videoWrapper">
<iframe
width={560}
@ -176,18 +204,65 @@ const IntroSection = ({ language }) => (
</div>
</Container>
</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 {
render() {
let language = this.props.language || '';
let language = this.props.language || "";
return (
<div>
<HomeSplash language={language} />
<div className="mainContainer indexPage">
<PopularTopicsSection language={language} />
<IntroSection language={language} />
<PopularTopicsSection language={language} />
<LatestNews language={language} />
<IntroSection language={language} />
</div>
</div>
);

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

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