https://github.com/zoltan-nz/jekyll-editor
CMS for jekyll, electron app, typescript, node backend, react frontend
https://github.com/zoltan-nz/jekyll-editor
Last synced: 7 months ago
JSON representation
CMS for jekyll, electron app, typescript, node backend, react frontend
- Host: GitHub
- URL: https://github.com/zoltan-nz/jekyll-editor
- Owner: zoltan-nz
- Created: 2016-03-31T13:59:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-15T07:21:14.000Z (over 8 years ago)
- Last Synced: 2025-01-22T02:46:27.868Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 78.1 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jekyll Editor
The goal of this project is building an server/client app for managing jekyll. (Optional: wrap it in an Electron app)
-[ ] Setup a server/client environment
-[ ] Create an input field, read a folder path, pass back to server, server read the folder content, response it to client and client list the folder content for the user.
-[ ] Clicking on a file open the content
-[ ] Add text editor (probably monaco) to edit the file
-[ ] Show the markdown preview of the content
-[ ] Show the preview using Jekyll
## Adding Gulp to the project
```shell
$ yarn global add gulp-cli
```
```shell
$ touch Gulpfile.ts
```
**Useful packages:**
* gulp-sourcemaps
* gulp-newer
* merge2
* gulp-run
* gulp-livereload
* gulp-util
```typescript
task('build', () => {
const project = tsc.createProject('tsconfig.json');
const {js, dts} = project.src()
.pipe(newer())
.pipe(sourcemaps.init())
.pipe(project());
})
```
## Build a basic frontend page with React
-[ ] Using Typescript and React
-[ ] Using Gulp for build tool
-[ ] Livereload changes in Electron app
__Notes for React:__
* `render` has to return only one main html element (like `
`)
* `Component` has to interfaces, types, a ``
* Form change callbacks are `Event` types
## Dependencies
Frontend dependencies
- React
- ReactDOM
- Bootstrap style
Frontend dev dependencies
- Typescript
- Gulp
Backend dependencies
- Express
Backend development dependencies
- TypeScrip
- Gulp
## Gulp tasks
### TypeScript (backend, frontend)
* Transpile TypeScript to ES6 JavaScript
### SCSS (frontend)
* Transpile SCSS to CSS
### Clean (backend, frontend)
* Clean up dist folder before a full new build
### Watch (backend, frontend)
* Transpile TypeScript and SCSS
* Trigger Livereload when frontend file changed
* Relaunch node server when backend file changed
### Livereload (frontend)
### Test related tasks
## React
* https://github.com/petehunt/react-howto
* https://github.com/mxstbr/react-boilerplate
* https://github.com/gaearon/babel-plugin-react-transform
* https://github.com/petehunt/webpack-howto
* https://github.com/shelljs/shelljs
* https://medium.com/@fay_jai/getting-started-with-reactjs-typescript-and-webpack-95dcaa0ed33c#.xvf8iry4s
## Webpack
* https://www.typescriptlang.org/docs/handbook/react-&-webpack.html