Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cleanup headings on landings #111

Merged
merged 1 commit into from
Jul 3, 2018
Merged

Cleanup headings on landings #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions components/Landing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,31 @@ export const Book = Column.withComponent("li");
export const Heading = styled.h2`
margin: 0 0 ${theme.space.m};
`;

export const SubHeading = styled.h3`
margin: 0 0 ${theme.space.m};
`;

export const PageTitle = styled.h1`
margin: 0;
line-height: 1.2;
`;

export const PageTitleLogo = styled.div`
margin-bottom: calc(0.2rem + 0.5vh + 1vw);
text-transform: uppercase;
font-family: ${theme.font.heading};
font-size: calc(0.8rem + 0.1vh + 0.5vw);
font-weight: ${theme.fontWeight.fat};
color: ${theme.color.inverted};

& strong {
color: ${theme.color.actionDark};
}
`;

export const PageTitleSub = styled.div`
color: ${theme.color.actionDark};
font-size: calc(1.2rem + 0.5vh + 1vw);
font-weight: ${theme.fontWeight.normal};
`;
6 changes: 4 additions & 2 deletions components/LatestPost.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from "react";
import { Link } from "@survivejs/components";
import Tip from "./Tip";

const Aside = Tip.withComponent("aside");

const LatestPost = ({ section }) => {
const post = section.pages("blog")[0];

Expand All @@ -10,12 +12,12 @@ const LatestPost = ({ section }) => {
}

return (
<Tip>
<Aside>
Latest in the blog:{" "}
<Link className="latestpost-link" to={post.url}>
{post.file.attributes.title}
</Link>
</Tip>
</Aside>
);
};

Expand Down
12 changes: 12 additions & 0 deletions components/VisuallyHidden.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled from "react-emotion";

const VisuallyHidden = styled.div`
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
`;

export default VisuallyHidden;
2 changes: 1 addition & 1 deletion content/descriptions/maintenance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The purpose of this book is to gather development practices that are particularl

I, Juho Vepsäläinen, and my co-author Artem Sapegin, have spent years developing npm packages and JavaScript projects. As a result we have gained insight on how to do it and how **not** to do it. The book combines our experience into a concise format that allows you to improve your development experience.

## What Will You Learn
### What Will You Learn

Unless you work on fresh greenfield projects all the time, maintenance concerns are something that will come up fast. The book has been structured into small parts where you learn:

Expand Down
2 changes: 1 addition & 1 deletion content/descriptions/webpack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ During this process I have become a core developer of webpack while learning a l

Webpack, a module bundler, is a powerful tool that helps you to develop complex web applications. It enables techniques, such as **code splitting**. You could say it solves the fundamental problem of web development and it has allowed developers to reach new levels of productivity.

## What Will You Learn
### What Will You Learn

The book would not have been possible without constant feedback by the community around the book. It has been developed to contain solutions to most bundling related problems you might encounter. You can see the book as a complement to the [official documentation](https://webpack.js.org/) which I helped to create. By reading the book, you will develop [an extensive configuration](https://github.com/survivejs-demos/webpack-demo) you understand.

Expand Down
13 changes: 7 additions & 6 deletions layouts/IndexPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React from "react";
import { PageTitle, PageTitleLogo, PageTitleSub } from "../components/Landing";

const IndexPage = ({ type, content }) => {
const page = () => (
<div className="frontpage">
<div className="front__heading">
<div className="front-header-wrapper">
<div className="front-name">
<span className="first">Survive</span>
<span className="second">JS</span>
<span className="first"> — {type}</span>
</div>
<h1 className="front-header">From apprentice to master</h1>
<PageTitle>
<PageTitleLogo>
Survive<strong>JS</strong> — {type}
</PageTitleLogo>
<PageTitleSub>From apprentice to master</PageTitleSub>
</PageTitle>
</div>
</div>

Expand Down
30 changes: 18 additions & 12 deletions layouts/MaintenanceIndex.jsx → layouts/MaintenanceIndex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React from "react";
import LatestPost from "../components/LatestPost";
import VisuallyHidden from "../components/VisuallyHidden";
import {
Landing,
Container,
Column,
WideColumn,
Heading,
SubHeading,
PageTitle,
PageTitleLogo,
PageTitleSub,
} from "../components/Landing";

const MaintenanceIndex = ({ section }) => (
<div className="frontpage">
<div className="front__heading">
<div className="front-header-wrapper">
<div className="front-name">
<span className="first">Survive</span>
<span className="second">JS</span>
<span className="first"> — Maintenance</span>
</div>

<h1 className="front-header">Streamline JavaScript Workflow</h1>
<PageTitle>
<PageTitleLogo>
Survive<strong>JS</strong> — Maintenance
</PageTitleLogo>
<PageTitleSub>Streamline JavaScript Workflow</PageTitleSub>
</PageTitle>

<div className="front-button-wrapper">
<span className="read-free">
Expand All @@ -41,21 +45,23 @@ const MaintenanceIndex = ({ section }) => (
<LatestPost section={section} />
<Container>
<WideColumn>
<Heading>SurviveJS — Maintenance</Heading>
<VisuallyHidden>
<Heading>About the book</Heading>
</VisuallyHidden>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/maintenance.md").body,
}}
/>
<h3>Getting the Book</h3>
<SubHeading>Getting the Book</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/gets/maintenance.md").body,
}}
/>
</WideColumn>
<Column>
<Heading>About the Authors</Heading>
<SubHeading>About the Authors</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/authors/juho.md").body,
Expand All @@ -67,13 +73,13 @@ const MaintenanceIndex = ({ section }) => (
__html: require("../content/authors/artem.md").body,
}}
/>
<Heading>Getting the Books</Heading>
<SubHeading>Getting the Books</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/gettingbooks.md").body,
}}
/>
<Heading>Training</Heading>
<SubHeading>Training</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/training.md").body,
Expand Down
32 changes: 19 additions & 13 deletions layouts/ReactIndex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React from "react";
import LatestPost from "../components/LatestPost";
import VisuallyHidden from "../components/VisuallyHidden";
import {
Landing,
Container,
Column,
WideColumn,
Heading,
SubHeading,
PageTitle,
PageTitleLogo,
PageTitleSub,
} from "../components/Landing";

const ReactIndex = ({ section }) => (
<div className="frontpage">
<div className="front__heading">
<div className="front-header-wrapper">
<div className="front-name">
<span className="first">Survive</span>
<span className="second">JS</span>
<span className="first"> — React</span>
</div>

<h1 className="front-header">From apprentice to master</h1>
<PageTitle>
<PageTitleLogo>
Survive<strong>JS</strong> — React
</PageTitleLogo>
<PageTitleSub>From apprentice to master</PageTitleSub>
</PageTitle>

<div className="front-button-wrapper">
<span className="read-free">
Expand All @@ -41,39 +45,41 @@ const ReactIndex = ({ section }) => (
<LatestPost section={section} />
<Container>
<WideColumn>
<Heading>SurviveJS - React</Heading>
<VisuallyHidden>
<Heading>About the book</Heading>
</VisuallyHidden>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/react.md").body,
}}
/>
<h3>Getting the Book</h3>
<SubHeading>Getting the Book</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/gets/react.md").body,
}}
/>
</WideColumn>
<Column>
<Heading>About the Author</Heading>
<SubHeading>About the Author</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/authors/juho.md").body,
}}
/>
<Heading>Getting the Books</Heading>
<SubHeading>Getting the Books</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/gettingbooks.md").body,
}}
/>
<Heading>Training</Heading>
<SubHeading>Training</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/training.md").body,
}}
/>
<Heading>Translations</Heading>
<SubHeading>Translations</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/descriptions/translations.md").body,
Expand Down
30 changes: 17 additions & 13 deletions layouts/SiteIndex.jsx → layouts/SiteIndex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,26 @@ import {
Books,
Book,
Heading,
SubHeading,
PageTitle,
PageTitleLogo,
PageTitleSub,
} from "../components/Landing";

const SiteIndex = ({ section }) => (
<div className="frontpage">
<div className="front__heading">
<div className="front-header-wrapper">
<div className="front-name">
<span className="first">Survive</span>
<span className="second">JS</span>
</div>
<h1 className="front-header">
Learn JavaScript
<div className="front-motto">
SurviveJS will take you from apprentice to master
</div>
</h1>
<PageTitle>
<PageTitleLogo>
Survive<strong>JS</strong>
</PageTitleLogo>
<PageTitleSub>Learn JavaScript</PageTitleSub>
</PageTitle>

<p className="front-motto">
SurviveJS will take you from apprentice to master
</p>
</div>
</div>

Expand All @@ -36,7 +40,7 @@ const SiteIndex = ({ section }) => (
__html: require("../content/descriptions/maintenance.md").body,
}}
/>
<h3>Getting the Book</h3>
<SubHeading>Getting the Book</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/gets/maintenance.md").body,
Expand All @@ -50,7 +54,7 @@ const SiteIndex = ({ section }) => (
__html: require("../content/descriptions/react.md").body,
}}
/>
<h3>Getting the Book</h3>
<SubHeading>Getting the Book</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/gets/react.md").body,
Expand All @@ -64,7 +68,7 @@ const SiteIndex = ({ section }) => (
__html: require("../content/descriptions/webpack.md").body,
}}
/>
<h3>Getting the Book</h3>
<SubHeading>Getting the Book</SubHeading>
<div
dangerouslySetInnerHTML={{
__html: require("../content/gets/webpack.md").body,
Expand Down
Loading