https://github.com/blinkk/oak-starter

https://github.com/blinkk/oak-starter

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/blinkk/oak-starter
• Owner: blinkk
• Created: 2021-03-10T22:01:21.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-10-14T21:11:01.000Z (about 3 years ago)
• Last Synced: 2023-03-05T14:14:23.584Z (almost 2 years ago)
• Language: TypeScript
• Size: 130 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 

 is a project powered by [Oak](https://github.com/blinkk/oak), a

CMS with website development tools and production serving.

### Setup

At a minimum, you will need:

- [Google Cloud SDK](https://cloud.google.com/sdk/docs/quickstart)

- [Node](https://github.com/nvm-sh/nvm#installing-and-updating) v14 or greater

After installing the `gcloud` command, make sure you're logged into the correct

account by running:

```bash

gcloud auth list

```

Request access to Oak's private NPM repo from [[email protected]](mailto:[email protected])

and then run the following to set up local access to the repo:

```bash

make install

```

The above command will create a `.npmrc` file which tells NPM where to find the

`@oak/oak` project and how to access it.

### Development

Start an Oak server.

```bash

make run

```

Sync global strings sheet.

```bash

make strings

```

### Style Guide

#### Use BEM for CSS names

Block elements should use lowerCamelCase instead of dash-names. Modifiers should

use --doubleDash.

```html



  






  




```


#### Use consistent naming across CSS names and Nunjucks files

For example:

* CSS name: heroSimple

* Partial file: /views/partials/heroSimple.njk

* SASS file: /src/sass/partials/_heroSimple.sass

#### Use clear names for partials

Avoid generic terms for partials where its purpose is unclear.

```html

...


...

```


Avoid reusing the same partial for layouts that are not at all similar. Opt to

create a new partial for it instead, even if the DOM structure is more or less

the same.

```html

...

...


...

...

```


#### Optimize image sizes

For PNGs and JPGs, store images on GCS and use the `|cloudImage` filter when

possible. Use in conjunction with the `picture()` macro for automatic image

resizing for each responsive breakpoint.

```yaml

myimage:

  url: gs://bucket/path/to/image.png

```

```html

{% from "/views/macros/picture.njk" import picture %}



  


    {{picture(myimage|cloudImage)}}

  



```