https://github.com/pateketrueke/glitch

Grown & Tarima on Glitch
https://github.com/pateketrueke/glitch

Last synced: 10 days ago
JSON representation

Grown & Tarima on Glitch

• Host: GitHub
• URL: https://github.com/pateketrueke/glitch
• Owner: pateketrueke
• Created: 2017-10-11T00:27:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T16:37:14.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T11:24:27.128Z (about 2 months ago)
• Language: JavaScript
• Size: 310 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Grown & Tarima on Glitch

This source is the same as running on [grown-at.glitch.me](https://grown-at.glitch.me/) — it showcases basic support for dynamic assets and pages.

## How it works?

- Files within `public/` are served as-is, they are just static files, nothing special here

- Files from `src/` are imported and executed on-the-fly, see below

## Content

> Note: content files are intended to be pages only, regardless its extension

Exported modules MUST use ES6 syntax, e.g. `src/content/example.js`

```js

export default state => `


  ${state.content}

`;

```


Template _objects_ are supported too, e.g. `src/content/example.js`

```js

export default {

  title: 'My page',

  render: state => state.body,

};

```

You can use JSX on your `render` functions, e.g. `src/content/example.jsx`

```js

// the second argument `h` is required

export default (state, h) => 


  {state.body}

;

```


Pug is also supported, e.g. `src/content/example.pug`

```pug

h1 It works!

```

Markdown pages, e.g. `src/content/example.md`

```markdown

---

title: My page

layout: custom

---

## It works!

```

Also, you can use templates for your content, e.g. `src/templates/custom.pug`

```pug

doctype html

html

  head

    title= title || 'Untitled'

    link(rel='stylesheet' href='/stylesheets/styles.css')

  body

    != locals.yield

```

## Assets

> Note: asset files are just javascript (bundled or not) and css

Stylesheets works (by default using `LESS`), e.g. `src/assets/stylesheets/styles.css`

```less

@color: red;

* {

  color: @color;

}

```

Javascript sources are always bundled, e.g. `src/assets/javascripts/application.js`

> Note: files and folders starting with `_` are ignored for serving, so they are not accesible publicly

You MUST use the `import` syntax for splitting your code and properly organize your application, scripts, etc.

```js

// here we're using Vue.js for our front-end

import App from './_components/App.vue';

// mount the application on the DOM

const vm = new Vue({

  el: '#app',

  render: h => h(App),

});

```

## Usage

You can refer to generated files as follows:

- `public/robots.txt` → `/robots.txt`

- `src/content/example.md` → `/example`

- `src/content/sub/page.jsx` → `/sub/page`

- `src/assets/stylesheets/styles.css` → `/stylesheets/styles.css`

- `src/assets/javascripts/application.js` → `/javascripts/application.js`

> From this point, you're free to change everything you need to fit your needs.