mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 09:28:11 +00:00
121 lines
3.3 KiB
Markdown
121 lines
3.3 KiB
Markdown
storyteller-frontend
|
|
====================
|
|
|
|
This repository is a frontend [monorepo](https://en.wikipedia.org/wiki/Monorepo), containing all of our websites
|
|
and shared library code. Each website can be built and run independently of one another, but they share the same
|
|
API backend.
|
|
|
|
Here are the websites contained:
|
|
|
|
- [FakeYou.com](https://fakeyou.com), our social deepfaking website
|
|
- [Storyteller.io](https://storyteller.io), our investor relations website and eventual home of our production software
|
|
- [Storyteller.stream](https://storyteller.stream), a Twitch TTS platform
|
|
- [Obs.Storyteller.stream](https://obs.storyteller.stream), a subdomain for streamers to integrate with OBS.
|
|
|
|
|
|
Here are some static websites contained:
|
|
|
|
- [FakeYou API Docs](https://docs.fakeyou.com), API documentation for the core TTS feature. This does not document our complete API.
|
|
- [the.storyteller.company](https://the.storyteller.company), DEPRECATED investor website. Used to get into *Founder Friendly Labs*.
|
|
|
|
|
|
In the future, it will be worth updating this structure to match Netlify's recommended monorepo practices:
|
|
https://docs.netlify.com/configure-builds/monorepos/
|
|
|
|
Development
|
|
-----------
|
|
|
|
### Development environment setup
|
|
|
|
```
|
|
# Install Yarn if not present (Linux/Mac)
|
|
sudo npm install --global yarn
|
|
|
|
# We might need a newer node (Linux/Mac)
|
|
sudo install n -g
|
|
sudo n stable
|
|
|
|
# Install project deps (Linux/Mac)
|
|
yarn install
|
|
|
|
# Start one or more of the several frontends (Linux/Mac)
|
|
yarn start-fakeyou
|
|
yarn start-storyteller-home
|
|
```
|
|
|
|
### Develop locally without CORS:
|
|
|
|
Launch Chrome without CORS enforcement, which will allow targeting against FakeYou.com's API directly:
|
|
|
|
```
|
|
chromium-browser --disable-web-security --user-data-dir=~/chrome
|
|
```
|
|
|
|
Or Mac,
|
|
|
|
```
|
|
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/chrome
|
|
```
|
|
|
|
### Monorepo design
|
|
|
|
The React monorepo build pattern we're using is based on
|
|
[this blog post](https://medium.com/geekculture/setting-up-monorepo-with-create-react-app-cb2cfa763b96),
|
|
which while lacking in some respects, still works for our purposes.
|
|
|
|
Library code is exported in the library's index.tsx (not very pretty)
|
|
|
|
|
|
### Good Code Examples
|
|
|
|
* `storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx` - Tree of components that handle a very complicated update API
|
|
|
|
|
|
Site-specific docs
|
|
------------------
|
|
|
|
### API Documentation Site
|
|
|
|
docs.fakeyou.com is generated from `./docs` using [Docsify](https://docsify.js.org/).
|
|
|
|
To run and test locally,
|
|
|
|
```bash
|
|
sudo npm i docsify-cli -g
|
|
docsify serve docs
|
|
```
|
|
|
|
Deployment
|
|
----------
|
|
|
|
Our websites are deployed on Netlify.
|
|
|
|
### Netlify notes
|
|
|
|
The `.node-version` file controls which version of node Netlify uses to build!
|
|
|
|
Design and brand notes
|
|
----------------------
|
|
|
|
### FakeYou design / brand
|
|
|
|
FakeYou (formerly vo.codes) uses the following:
|
|
|
|
* Font: fugaz one, 110, #209CEE
|
|
* Favicon: https://favicon.io/favicon-generator/
|
|
|
|
Social icons are paid from the subscription service [FlatIcon](https://www.flaticon.com),
|
|
and in particular [this pack](https://www.flaticon.com/packs/social-logo-1)
|
|
|
|
|
|
Video thumbnails are generated with [https://ezgif.com/](ezgif) at the following settings:
|
|
|
|
* webp, 500x300px (~100kb each)
|
|
|
|
Reverse clips are generated with ffmpeg:
|
|
|
|
```
|
|
ffmpeg -i input.mp4 -vf reverse reversed.mp4
|
|
```
|
|
|