Skip to content

Commit

Permalink
update getting started docs to match updated behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 committed Feb 19, 2022
1 parent 3864676 commit 9cfbff5
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 18 deletions.
6 changes: 3 additions & 3 deletions www/pages/getting-started/branding.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class FooterComponent extends HTMLElement {
customElements.define('app-footer', FooterComponent);
```

Now we can use it in a template by:
Now we can use it in our app template by:
1. Referencing our component file via a `<script>` tag with the `type="module"` attribute
1. Using our custom element's tag name of `<app-footer>` in our `<body>`

Expand All @@ -65,15 +65,15 @@ Now we can use it in a template by:
</head>

<body>
<content-outlet></content-outlet>
<page-outlet></page-outlet>

<app-footer></app-footer>
</body>

</html>
```

Now you can do the same for an `<app-header>`. See the [companion repo](https://github.com/ProjectEvergreen/greenwood-getting-started/) for a complete working example.
Now you can do the same for an `<app-header>`. See the [companion repo](https://github.com/ProjectEvergreen/greenwood-getting-started/) for a complete working example. Voila! All our pages now have a header and footer! 🎉

> _You can find more information about component models and Greenwood [here](/docs/component-model/)._
Expand Down
22 changes: 21 additions & 1 deletion www/pages/getting-started/creating-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ To go along with this guide, check out our [companion repo](https://github.com/P
├── styles
│   └── theme.css
└── templates
├── app.html
├── blog.html
└── page.html
```
Expand All @@ -58,6 +59,8 @@ For this template, create a _page.html_ in a _src/templates/_ (make the _templat
</html>
```

> _This will now be used as the default layout used for all your pages. We'll discuss overriding this later on in the guide._
### Blog Posts Template
We just made a template for our home page, but for our individual blog posts, we're going to want a different layout for those pages. So what do we do? Just create a new template!

Expand All @@ -74,6 +77,23 @@ Create a _blog.html_ in _src/templates/_ and include this code in it.

> _Right now both of these templates are the same, but we'll be customizing these both shortly._ 👇
### App Template
Now that we've created a couple page templates, it probably makes sense to wrap our site with a common layout. By creating an _app.html_ in the _templates/_ directory, we can create a common layout for all templates and pages.

This is a great way to manage global styles, loading the header and footer, or for shared site meta data.

```html
<html>
<head>
<title>My Personal Website</title>
</head>
<body>
<page-outlet></page-outlet>
</body>
</html>
```


### Creating Pages
To make our home page which will use the default _page.html_ layout we just created, create an _index.md_ file in the _src/pages/_ directory.

Expand Down Expand Up @@ -119,7 +139,7 @@ Sed ut perspiciatis
We are using something called ["front matter"](/docs/front-matter) to specify that these pages should use the _blog_ template we just created.

### Development Server
At this point we have two page templates and three pages of content, so let's fire up the Greenwood development server and see what things look like!
At this point we have our templates and three pages of content, so let's fire up the Greenwood development server and see what things look like!

```bash
# using the npm script we made during project setup
Expand Down
15 changes: 1 addition & 14 deletions www/pages/getting-started/next-steps.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,7 @@ index: 7
## Next Steps

### Learn More
Thank you so much for taking the time to go through our Getting Started guide and we hope it has given you a good overview of how to work with Greenwood and what some of the possibilities are. To learn more about the project we encourage you to review our [API docs](/docs/) to learn more about how you can use Greenwood or check out our repo to see what we're [working on next](https://github.com/ProjectEvergreen/greenwood/projects), or if you need to reach out, feel free to [open an issue](https://github.com/ProjectEvergreen/greenwood/issues)!

### Configuration
Although configuration is a topic all on its own, we do want to walk through setting up a configuration file for your project. As you may have noticed, the `<title>` of the site being made during the Getting Started section said _My Personal Blog_. This is what Greenwood's configuration can be used for.

To change the title of the project (like in the companion repo), create a (NodeJS) module called _greenwood.config.js_ at the root of your project and configure the `export` object with a title property.

```javascript
export default {
title: 'My Personal Site'
};
```

That's it! You can learn more about configuring Greenwood [here](/docs/configuration).
Thank you so much for taking the time to go through our Getting Started guide and we hope it has given you a good overview of how to work with Greenwood and what some of the possibilities are. To learn more about the project we encourage you to review our [documentation](/docs/) to learn more about how you can use Greenwood or check out our repo to see what we're [working on next](https://github.com/ProjectEvergreen/greenwood/projects). If you would like to connect, please feel free to reach out and [open an issue](https://github.com/ProjectEvergreen/greenwood/issues) or [a discussion](https://github.com/ProjectEvergreen/greenwood/discussions)!

### Resources
Since Greenwood aims to be a web "first" tool, all the great web development resources for the web already apply to Greenwood! Below are some resources that we think might be useful as part of a broader understanding of the topic of web development and that we have found invaluable for our own development and learning.
Expand Down

0 comments on commit 9cfbff5

Please sign in to comment.