Skip to content

Commit 7985b8c

Browse files
toshifytoshify
committed
feat: Provide online content editor
Because the barrier to creating and editing content should be low to enable quick and abundant availability of relevant training material to end-users, this commit will: - add a content editor module **Certification** - [X] I certify that <!-- Check the box to certify: [X] --> - I have read the [contributing guidelines]( https://github.com/nodepa/seedlingo/blob/main/.github/CONTRIBUTING.md) - I license these contributions to the public under Seedlingo's [LICENSE](https://github.com/nodepa/seedlingo/blob/main/LICENSE.md) and have the rights to do so. Signed-off-by: toshify <4579559+toshify@users.noreply.github.com>
1 parent e528f5b commit 7985b8c

37 files changed

+44086
-9
lines changed

‎amplify.yml‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
version: 1
22
applications:
3-
- frontend:
3+
- appRoot: app
4+
frontend:
45
phases:
56
preBuild:
67
commands:
@@ -16,12 +17,6 @@ applications:
1617
paths:
1718
- node_modules/**/*
1819
test:
19-
artifacts:
20-
baseDirectory: tests/e2e
21-
configFilePath: '**/mochawesome.json'
22-
files:
23-
- '**/*.png'
24-
- '**/*.mp4'
2520
phases:
2621
preTest:
2722
commands:
@@ -34,8 +29,41 @@ applications:
3429
postTest:
3530
commands:
3631
- npx mochawesome-merge tests/e2e/report/mochawesome-report/mochawesome*.json -o tests/e2e/report/mochawesome.json
32+
artifacts:
33+
baseDirectory: tests/e2e
34+
configFilePath: '**/mochawesome.json'
35+
files:
36+
- '**/*.png'
37+
- '**/*.mp4'
38+
cache:
39+
paths:
40+
- node_modules/**/*
41+
- appRoot: editor
42+
backend:
43+
phases:
44+
preBuild:
45+
commands:
46+
- nvm use 20 && node --version
47+
build:
48+
commands:
49+
- npm ci --cache .npm --prefer-offline
50+
- npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
51+
cache:
52+
paths:
53+
- .npm/**/*
54+
- node_modules/**/*
55+
frontend:
56+
phases:
57+
preBuild:
58+
commands:
59+
- nvm use 20 && node --version
60+
build:
61+
commands:
62+
- npm run build
63+
artifacts:
64+
baseDirectory: .amplify-hosting
65+
files:
66+
- '**/*'
3767
cache:
3868
paths:
3969
- node_modules/**/*
40-
appRoot: app
41-

‎editor/.gitignore‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example
25+
26+
# amplify
27+
.amplify
28+
amplify_outputs*
29+
amplifyconfiguration*

‎editor/README.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<h1 align="center">Seedlingo Apiary</h1>
2+
<h3 align="center">Content editor for Seedlingo</h3>
3+
<p align="center">
4+
<img src="../docs/.vuepress/public/images/seedlingo-logo-blue.svg"
5+
alt="seedlingo-logo" height="160px" width="160px"/>
6+
<br/>
7+
<b>Modern mobile multi-language literacy</b>
8+
<br/>
9+
<i>A first-language digital learning tool for adults</i>
10+
</p>
11+
<hr>
12+
13+
# Seedlingo Apiary
14+
15+
Seedlingo Apiary is a content editor for the language learning tool [Seedlingo](../README.md).
16+
17+
18+
## Setup
19+
20+
Make sure to install the dependencies:
21+
22+
```sh
23+
npm install
24+
```
25+
26+
## Development server
27+
28+
Start the development server on `http://localhost:3000`:
29+
30+
```sh
31+
npm run dev
32+
```
33+
34+
## Production
35+
36+
Build the application for production:
37+
38+
```sh
39+
npm run build
40+
```
41+
42+
Locally preview production build:
43+
44+
```sh
45+
npm run preview
46+
```
47+
48+
## AWS Amplify setup
49+
50+
1. Sign up for a user at
51+
[AWS](https://signin.aws.amazon.com/signup?request_type=register).
52+
2. Navigate to [Amplify](https://console.aws.amazon.com/amplify).
53+
3. Press `Create new app`-button.
54+
4. At `Choose source code provider`, select `Github` and press `Next`.
55+
5. In the popup, log in to Github with credentials that has access to the
56+
Seedlingo repo.
57+
6. In the first dropdown, select `nodepa/seedlingo`. In the second dropdown,
58+
select `main`. Also check the box for `My app is a monorepo`, then press
59+
`Next`.
60+
7. Enter the name of the app, i.e. `Seedlingo Apiary`. Leave the rest at
61+
defaults and press `Next`. (The `Frontend build command` and `Build output
62+
directory` will be overridden by the content of the `amplify.yml` file
63+
anyway, see `Edit YML file` for details/content).
64+
8. Press `Save and deploy`.
65+
9. If deploy fails, hunt for clues under `Deployments`. A log of all the build
66+
steps can be found by expanding the `Build` line.
67+
10. If the deploy succeeds, any new git push to the same branch, i.e. `main`,
68+
will be picked up and deployed immediately.
69+
11. Test the deploy in the browser by pressing the `Domain` link under
70+
`Deployments` or pressing the `Visit deployed URL` button under `Overview`.
71+
72+
## Amplify sandbox for local dev
73+
74+
This guide is based on the [account setup guide](
75+
https://docs.amplify.aws/vue/start/account-setup/
76+
) in the Amplify docs.
77+
78+
1. Install [AWS CLI](
79+
https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
80+
).
81+
It is available as a Snap package for Ubuntu and similar.
82+
83+
``` sh
84+
snap install aws-cli --classic
85+
86+
# verify installation with:
87+
aws --version
88+
```
89+
90+
2. Configure SSO (if you don't have an AWS SSO user, see
91+
[IAM Identity Center SSO setup](#iam-identity-center-sso-setup))
92+
93+
```sh
94+
aws configure sso
95+
96+
# SSO session name: [assigned sso user, i.e. amplify-admin-1]
97+
# SSO start URL: https://d-966742a7b4.awsapps.com/start/
98+
# SSO region: ap-southeast-1
99+
# SSO registration scopes: [leave blank]
100+
101+
# When the browser opens, log in with your aws-sso user
102+
```
103+
104+
3. Verify
105+
106+
```sh
107+
aws amplify list-apps
108+
```
109+
110+
4. Create sandbox for local dev
111+
112+
```sh
113+
# from within `seedlingo/editor`
114+
npm run sandbox
115+
```
116+
117+
### IAM Identity Center SSO setup
118+
119+
To set up a SSO user with the correct permissions,
120+
follow the [account setup guide](
121+
https://docs.amplify.aws/vue/start/account-setup/
122+
) in the Amplify docs.
123+
Then make use of the SSO user as described in
124+
[Amplify sandbox for local dev](#amplify-sandbox-for-local-dev).
125+
126+
In short, create a SSO user with the permission
127+
`AmplifyBackendDeployFullAccess`.
128+
129+
# Dependency upgrade process
130+
131+
```sh
132+
npx nuxi@latest upgrade
133+
npm outdated
134+
npm update -S
135+
```

‎editor/amplify/auth/resource.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineAuth } from '@aws-amplify/backend';
2+
3+
export const auth = defineAuth({
4+
loginWith: {
5+
email: true,
6+
},
7+
});

‎editor/amplify/backend.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineBackend } from '@aws-amplify/backend';
2+
import { auth } from './auth/resource';
3+
import { data } from './data/resource';
4+
5+
defineBackend({
6+
auth,
7+
data,
8+
});

‎editor/amplify/data/resource.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
2+
3+
const schema = a
4+
.schema({
5+
InstructionCollection: a.model({
6+
contentSpecId: a.id(),
7+
contentSpec: a.belongsTo('ContentSpec', 'contentSpecId'),
8+
welcome: a.string(),
9+
homeButton: a.string(),
10+
continueButton: a.string(),
11+
toggleInstructionsButton: a.string(),
12+
matchingExercise: a.string(),
13+
multipleChoiceExercise: a.string(),
14+
singleClozeExercise: a.string(),
15+
multiClozeExercise: a.string(),
16+
}),
17+
Unit: a.model({
18+
name: a.string(),
19+
description: a.string(),
20+
icon: a.string(),
21+
introductionAudio: a.string(),
22+
contentSpecId: a.id(),
23+
contentSpec: a.belongsTo('ContentSpec', 'contentSpecId'),
24+
unitSpecFile: a.string(), // ref UnitSpec model
25+
}),
26+
27+
Word: a.model({
28+
word: a.string().required(),
29+
description: a.string(),
30+
audio: a.string(),
31+
picture: a.string(),
32+
symbol: a.string().array(),
33+
isPunctuation: a.boolean(),
34+
wordListId: a.id(),
35+
wordList: a.belongsTo('WordList', 'wordListId'),
36+
}),
37+
WordList: a.model({
38+
contentSpecId: a.id(),
39+
contentSpec: a.belongsTo('ContentSpec', 'contentSpecId'),
40+
wordCount: a.integer().required(),
41+
words: a.hasMany('Word', 'wordListId'),
42+
}),
43+
ContentSpec: a.model({
44+
name: a.string().required(),
45+
description: a.string(),
46+
icon: a.string(),
47+
instructionCollection: a.hasOne('InstructionCollection', 'contentSpecId'),
48+
units: a.hasMany('Unit', 'contentSpecId'),
49+
wordList: a.hasOne('WordList', 'contentSpecId'),
50+
}),
51+
})
52+
.authorization((allow) => [allow.authenticated()]);
53+
54+
export type Schema = ClientSchema<typeof schema>;
55+
56+
export const data = defineData({
57+
schema,
58+
authorizationModes: {
59+
defaultAuthorizationMode: 'iam',
60+
},
61+
});

‎editor/amplify/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"type": "module"
3+
}

‎editor/amplify/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2022",
4+
"module": "es2022",
5+
"moduleResolution": "bundler",
6+
"resolveJsonModule": true,
7+
"esModuleInterop": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"strict": true,
10+
"skipLibCheck": true,
11+
"paths": {
12+
"$amplify/*": [
13+
"../.amplify/generated/*"
14+
]
15+
}
16+
}
17+
}

‎editor/app.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default defineAppConfig({
2+
title: 'Seedlingo Apiary',
3+
ui: {
4+
colors: {
5+
primary: 'lochmara',
6+
gray: 'slate',
7+
},
8+
},
9+
});

0 commit comments

Comments
 (0)