Skip to content

Commit

Permalink
update getting started guide to reflect compantion repo (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 authored Aug 13, 2019
1 parent f2b258c commit c0f1fbd
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 4 deletions.
5 changes: 4 additions & 1 deletion www/pages/getting-started/branding.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ customElements.define('page-template', PageTemplate);
```


> You now do the same for your footer.
> You now do the same for your `<footer>`. See the [companion repo](https://github.com/thescientist13/greenwood-getting-started/) for a complete working example.
### CSS
OK, so we've made some content and some custom components, but what about the look and feel? Yes, of course, let's add some CSS!
Expand Down Expand Up @@ -136,4 +136,7 @@ class HeaderComponent extends HTMLElement {
customElements.define('app-header', HeaderComponent);
```

Taking this all the way with [the code from companion repo](https://vuejs.org/v2/guide/single-file-components.html), you should be able to get a result that looks like this:
![greenwood-getting-started-styled](https://s3.amazonaws.com/hosted.greenwoodjs.io/getting-started-repo-styled.png)

Phew!! What a journey, but now you have a blog ready to publish! The last step is to build and host your project, so let's move on to the [build and deploy section](/getting-started/build-and-deploy/) and make it happen!
4 changes: 3 additions & 1 deletion www/pages/getting-started/creating-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,5 +140,7 @@ $ npm start

2) Once the development server is ready, it will let you know that you can now open `localhost:1984` in your web browser. Doing so should yield you a page like this!

![greenwood-getting-started-unstyled](https://s3.amazonaws.com/hosted.greenwoodjs.io/getting-started-repo-unstyled-partial.png)

Congrats, you've got your first Greenwood site running! It's coming along but still needs a little work. In the [next section](/getting-started/branding/) we'll create some resuable Web Components for the site's header and footer as well as some CSS for styling.

Congrats, you've got your first Greenwood site running! It's coming along but still needs a little work. In the [next section](/getting-started/branding/) we'll create some resuable Web Components for the site's header and footer as well as some CSS for styling.
4 changes: 3 additions & 1 deletion www/pages/getting-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ label: 'getting-started'
---

## Introduction
First off, thank you for taking the time to check out Greenwood! As a tool, we hope that you find Greenwood to provide a productive and frictionless developer experience for you that results in performant and engaging experiences for your users. Under the hood Greenwood is using NodeJS, webpack, babel and a lot of other amazing JavaScript tools to power a modern development workflow based on first class support for the modern web, like Web Components, FlexBox, CSS Grid, ECMAScript modules, and all your favorite features!
First off, thank you for taking the time to check out Greenwood! As a tool, we hope that you find Greenwood to provide a productive and frictionless developer experience for you that results in performant and engaging experiences for your users. Under the hood Greenwood is using NodeJS, webpack, babel and a lot of other amazing JavaScript tools to power a modern development workflow based on first class support for the modern web like Web Components, FlexBox, CSS Grid, ECMAScript modules, and all your favorite features!

## Your First Project
To get things started, we first want to make sure everyone can get their first project up and running as easily and quickly as possible, and so through this guide, we will help walk you through everything you need to get started with your first project, including:
1. Setting up your workspace and installing Greenwood
1. Reviewing key concepts of Greenwood
1. Creating content and developing locally
1. Authoring Web Components and adding CSS
1. Configuration
1. Building and hosting for production


## Prequisites
Before going into the setup section of the tutorial, we want to make sure that you are familiar with some of the expectations and assumptions this guide (and Greenwood) make.

Expand Down
20 changes: 20 additions & 0 deletions www/pages/getting-started/next-steps.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
## About Greenwood
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 _Greenwood App_. 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.

```render javascript
module.exports = {
title: 'My Personal Site'
};
```

That's it! You can learn more about configuring Greenwood [here](/docs/configuration).

## Companion Repo
You may have noticed that the Getting Started [companion repo](https://github.com/thescientist13/greenwood-getting-started/) itself is a bit more of a full fledged example then captured in this guide, like with the use use of ["Single File Components"](https://vuejs.org/v2/guide/single-file-components.html) (SFCs).

This is was intentional for a couple of reasons:
- _Education_: There is always more than one way to solve a problem, and so we felt that the SFC approach was best for the guide so as to keep the number of steps needed as few and direct as possible.
- _Development_: The other side of the coin is that for us having the CSS in an external file helps with development and maintanence. _This is just a preference_. Please choose what fits your workflow best.
- _Maintenance_: We want to keep a loose coupling between the guide and the repository to avoid additional overhead maintaining the two and keeping them in sync. The goal of this guide is to focus on the overall experience of creating your first Greenwood project, not worrying about theming or project structure, since Greenwood generally supports just about any folder organization you could want and has no opinions on styles.

## 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 invalualable for our own development and learning.
Expand Down
2 changes: 1 addition & 1 deletion www/pages/getting-started/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
If you want to code and go then we welcome you to check out the ["companion" repository](https://github.com/thescientist13/greenwood-getting-started) we made to accompany this guide.


To get he code from this walkthrough, you can simply clone the repo, install dependencies, and off you go!
To get the code from this walkthrough, you can simply clone the repo, install dependencies, and off you go!
```render bash
$ git clone https://github.com/thescientist13/greenwood-getting-started
$ cd greenwood-getting-started
Expand Down

0 comments on commit c0f1fbd

Please sign in to comment.