Commit Graph

8 Commits

Author SHA1 Message Date
Héctor Ramos bdbadd1142 Re-style Blog, Add Newsletter Signup Form
Summary:
The goal of this PR is to place greater emphasis on the blog as a destination.

The dark Hero from the landing page is now present in the blog as well, and the content is front and center.

The sidebar has been removed. It is not necessary to show a list of recent blog posts in the sidebar when the blog landing page shows the same number of posts along with short excerpts.

The prev/next links have swapped positions, and will now display "Older posts" and "Newer posts".

The excerpts have been stripped of formatting and they are now consistent across the blog landing page and the OpenGraph metatags. Fixes #10597.

A signup form for the new React Native newsletter has been added to the footer.

Newsletter signup form in footer:

![screencapture-localhost-8079-react-native-1477944030909](https://cloud.githubusercontent.com/assets/165856/19869614/4bb035aa-9f6a-11e6-9b8e-e0333417f423.png)

Blog landing page:

![screencapture-localhost-8079-r
Closes https://github.com/facebook/react-native/pull/10660

Differential Revision: D4117034

Pulled By: bestander

fbshipit-source-id: 215f966008fdf5c8870ed28d92384034a0d23c39
2016-11-02 05:43:43 -07:00
Héctor Ramos 9cb370dd5b Generate Atom feed for the React Native blog.
Summary:
An Atom feed is now generated as part of the build script. This is done statically and not as a React view because React is not the right tool for generating XML documents.

Some additional metadata is stored in `metadata-blog.js` and duplicated to `metadata-blog.json` in the `server/` directory to aid in the generation of the feed. Let me know if there's a better way to import this data using the existing Haste module that wouldn't require writing an additional JSON file.

The feed will be available at https://facebook.github.io/react-native/blog.xml

A sample output of the Atom feed is included at the bottom. It is a [valid Atom 1.0 feed](https://validator.w3.org/feed/check.cgi), with some additional recommendations that can be ignored for now.

> Congratulations!
>
> [Valid Atom 1.0] This is a valid Atom 1.0 feed.
> Recommendations
>
> This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.
> line 2, col
Closes https://github.com/facebook/react-native/pull/10611

Differential Revision: D4097381

Pulled By: mkonicek

fbshipit-source-id: 8d2e18923358d1903b2715b00c48680b0c4dff68
2016-10-28 13:28:37 -07:00
Héctor Ramos e22abd91bf Add support for video embeds in blog posts.
Summary:
Similar to the Hero image functionality. If a video URL is present in the post metadata, it will be displayed instead of a Hero image. This will be useful when highlighting videos in blog posts.

Renamed ReadMoreLink into a more generic ExceptLink which will display "Watch video" when the blog post category is "videos".

Currently there is no way of listing blog posts by categories, but it may be useful to do so later once we have a larger catalog of content.
Closes https://github.com/facebook/react-native/pull/9794

Differential Revision: D3828862

Pulled By: mkonicek

fbshipit-source-id: 1a88aab5edcdf7c84bb679263d6b97d52cf201a2
2016-09-07 13:10:12 -07:00
Héctor Ramos db621b03b6 Improve social share previews, expand author bylines
Summary:
Several blog and sharing improvements are included in this update.

* A larger default preview image is used when a blog post or doc is shared on social media as recommended by [best practices](https://developers.facebook.com/docs/sharing/best-practices#images).
* Follow other Facebook Sharing best practices such as associating the site with a Facebook Page (React) and a Page Admin (121800083 is my fbid, and I am an admin for the React page).
* If the shared blog post contains a hero image, use it as a share preview image.
* Use actual doc content instead of generic site description when sharing docs.
* Update existing hero images to use the larger recommended size.
* Add titles to each author's byline.
* Add author's avatar to their byline.
* Add Twitter Card support.
* Link to individual blog posts from the title and hero image in the blog index.

Old metadata tags (blog post):
```
<meta property="og:title" content="Toward Better Documentation – React Native | A framework for building native
Closes https://github.com/facebook/react-native/pull/9648

Differential Revision: D3790332

Pulled By: hramos

fbshipit-source-id: 4f284c6440482df8a42a2b8467ccf56b1fd725d1
2016-08-29 23:13:43 -07:00
Héctor Ramos a282be9a18 Link to individual blog posts from post title
Summary:
Linkify the blog post title when the excerpt is displayed in the blog index.

Update Facebook OpenGraph meta tags for individual blog posts to fix sharing previews.
Closes https://github.com/facebook/react-native/pull/9590

Differential Revision: D3771630

Pulled By: bestander

fbshipit-source-id: dc428ecc2d7939c143f000b8af9d4df9b512d0fc
2016-08-25 11:13:52 -07:00
Héctor Ramos 777a9c0a0e Update Blog Layout
Summary:
Updated the blog's styling to make it more readable.

* BlogPageLayout (blog index) - Only excerpts from each article are now shown, as opposed to the entire article.
* BlogPost - Broken up into headers, footers. Reorder header so that the blog post title is closer to the content. Adds support for hero images (visible from the blog index). Adds Facebook, Twitter social share buttons. List items are properly spaced now.

Blog index:
![screencapture-localhost-8079-react-native-blog-1471905976431](https://cloud.githubusercontent.com/assets/165856/17874405/4ee4fc22-6880-11e6-8344-2ed823f6000e.png)

Single blog post:
![screencapture-localhost-8079-react-native-blog-2016-08-12-react-native-meetup-san-francisco-html-1471905997923](https://cloud.githubusercontent.com/assets/165856/17874407/52af9e7a-6880-11e6-99f0-91f90331aced.png)
Closes https://github.com/facebook/react-native/pull/9532

Differential Revision: D3758524

Pulled By: bestander

fbshipit-source-id: 6385a3e98a3a44343c3b1d3105a32023b748c2c6
2016-08-23 12:13:47 -07:00
Héctor Ramos 35a6cbac71 San Francisco React Native meetup recap
Summary:
New blog up up for review. I've added a bit of padding between posts in the blog index as well.
Closes https://github.com/facebook/react-native/pull/9362

Differential Revision: D3717908

Pulled By: bestander

fbshipit-source-id: ac3c01c43685548c6fa336541ccb9a9a01dd52a8
2016-08-15 12:28:46 -07:00
Christopher Chedeau b80698df1c Introduce blog
Summary:Ported the infrastructure from jest.

![screen shot 2016-03-24 at 9 47 50 am](https://cloud.githubusercontent.com/assets/197597/14024237/85db1132-f1a5-11e5-84be-f525e302c6ca.png)
Closes https://github.com/facebook/react-native/pull/6629

Differential Revision: D3094423

Pulled By: vjeux

fb-gh-sync-id: a01aec6a55d28484c45bb241d037ca6717bc5e81
shipit-source-id: a01aec6a55d28484c45bb241d037ca6717bc5e81
2016-03-24 14:11:30 -07:00