From 07f717061fdd25a3a5b120dc00bd575ec55dbcd2 Mon Sep 17 00:00:00 2001 From: Alex Moldovan Date: Thu, 5 Jan 2017 23:03:36 +0200 Subject: [PATCH] Added layout component example (#560) * added layout component example * coding style fixes * trailing spaces removed * updated README file * added layout example in docs * moved .babelrc so that it handles all projects from the examples folder --- README.md | 5 +++- examples/.babelrc | 2 ++ examples/layout-component/README.md | 28 +++++++++++++++++++ .../layout-component/components/layout.js | 25 +++++++++++++++++ examples/layout-component/package.json | 14 ++++++++++ examples/layout-component/pages/about.js | 7 +++++ examples/layout-component/pages/contact.js | 7 +++++ examples/layout-component/pages/index.js | 7 +++++ 8 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 examples/.babelrc create mode 100644 examples/layout-component/README.md create mode 100644 examples/layout-component/components/layout.js create mode 100644 examples/layout-component/package.json create mode 100644 examples/layout-component/pages/about.js create mode 100644 examples/layout-component/pages/contact.js create mode 100644 examples/layout-component/pages/index.js diff --git a/README.md b/README.md index 5f9bae77..818d82c1 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,10 @@ export default () => (

Examples - +

We expose a built-in component for appending elements to the `` of the page. diff --git a/examples/.babelrc b/examples/.babelrc new file mode 100644 index 00000000..7a73a41b --- /dev/null +++ b/examples/.babelrc @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md new file mode 100644 index 00000000..b81ac340 --- /dev/null +++ b/examples/layout-component/README.md @@ -0,0 +1,28 @@ + +# Layout component example + +## How to use + +Download the example (or clone the repo)[https://github.com/zeit/next.js.git]: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world +cd hello-world +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same `` settings, the `