Skip to content

Commit 984b864

Browse files
julianiffjulianiff
authored
feat: Add Social Sharing App for Asset Viewer (#16)
* chore: add boilerplate * chore: add assetViewr * chore: add manifest * feat: add asset viewer social sharing app * chore: adjust refresh logic * chore: add router * chore: adjust code structure * chore: some cleanup * chore: cleanup * chore: cleanup structure * chore: handle error on login * chore: cleanup statememnts * chore: adjust errors * chore: move wrapper up * chore: formatting * chore formatting * chore: add appId * chore: add pndg and svg to images * chore: update versions * chore: update readme * chore: fix prettier * chore. add appp ID placeholder
1 parent b54890c commit 984b864

30 files changed

+1160
-42
lines changed

‎examples/app-settings/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"typecheck": "tsc --noEmit"
1212
},
1313
"dependencies": {
14-
"@frontify/app-bridge-app": "^0.0.16",
14+
"@frontify/app-bridge-app": "^0.1.3",
1515
"@frontify/fondue": "^12.2.11",
1616
"@frontify/platform-app": "^0.1.11",
1717
"react": "^18.3.1",

‎examples/app-with-state/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"typecheck": "tsc --noEmit"
1212
},
1313
"dependencies": {
14-
"@frontify/app-bridge-app": "^0.0.16",
14+
"@frontify/app-bridge-app": "^0.1.3",
1515
"@frontify/fondue": "^12.2.11",
1616
"@frontify/platform-app": "^0.1.11",
1717
"react": "^18.3.1",

‎examples/asset-viewer-social-media/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.localdist
14+
.idea
15+
.vscode
16+
17+
# Editor directories and files
18+
.DS_Store
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?
24+
.secret.json

‎examples/asset-viewer-social-media/.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 120,
3+
"tabWidth": 4,
4+
"singleQuote": true
5+
}

‎examples/asset-viewer-social-media/.secret-example.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"THIRD_PARTY_API_KEY": 1,
3+
"__DONT_COMMIT_THIS_FILE_WITH_TOKENS__": true
4+
}

‎examples/asset-viewer-social-media/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Asset Viewer Social Sharing Example
2+
This is a simple example that shows how to use the Brand-sdk with other integrations to create an App that shares images in the Guidelines.
3+
4+
5+
### Requirements:
6+
7+
- Node 20
8+
- Access to a Frontify Instance.
9+
- Bluesky Account with App Password
10+
11+
### Setup
12+
1. Install the dependencies
13+
```
14+
npm install
15+
```
16+
Or
17+
```
18+
pnpm install
19+
```
20+
2. Serve the app
21+
```
22+
npm run serve
23+
```
24+
Or
25+
```
26+
pnpm serve
27+
```
28+
3. Go to your Frontify Instance and access an image in the Guideline
29+
4. Use Bluesky login to access
30+
31+
## Manifest Configuration
32+
For detailed information on configuring the `manifest.json` file, please refer to our [documentation](https://developer.frontify.com/).

‎examples/asset-viewer-social-media/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
6+
7+
export default tseslint.config(
8+
{ ignores: ["dist"] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ["**/*.{ts,tsx}"],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
"react-hooks": reactHooks,
18+
"react-refresh": reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
"react-refresh/only-export-components": [
23+
"warn",
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
}
28+
);

‎examples/asset-viewer-social-media/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6+
<title>Frontify Sample App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type='module'>
11+
import module from '/src/index.ts';
12+
import {renderReactApp} from '@frontify/app-bridge-app';
13+
14+
renderReactApp(module);
15+
</script>
16+
</body>
17+
</html>

‎examples/asset-viewer-social-media/manifest.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"appId": "<Your app ID>",
3+
"appType": "platform-app",
4+
"name": "template-platform-app-tailwind",
5+
"metadata": {
6+
"version": 1
7+
},
8+
"permissions": {
9+
"scopes": ["basic:read", "basic:write"]
10+
},
11+
"surfaces": {
12+
"guideline": {
13+
"assetViewer": {
14+
"title": "Social Media Hub",
15+
"type": ["image"],
16+
"filenameExtension": ["jpeg", "jpg", "png", "svg"]
17+
}
18+
}
19+
}
20+
}

‎examples/asset-viewer-social-media/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "asset-viewer-social-media",
3+
"type": "module",
4+
"version": "1.0.0",
5+
"scripts": {
6+
"serve": "frontify-cli serve",
7+
"login": "frontify-cli login",
8+
"deploy": "frontify-cli deploy",
9+
"lint": "eslint .",
10+
"lint:fix": "eslint . --fix",
11+
"typecheck": "tsc --noEmit"
12+
},
13+
"peerDependencies": {
14+
"zustand": "4.5.5"
15+
},
16+
"dependencies": {
17+
"@atproto/api": "^0.13.18",
18+
"@frontify/app-bridge-app": "^0.1.3",
19+
"@frontify/fondue": "^12.2.11",
20+
"@frontify/platform-app": "^0.1.11",
21+
"react": "^18.3.1",
22+
"react-dom": "^18.3.1"
23+
},
24+
"devDependencies": {
25+
"@eslint/js": "^9.9.0",
26+
"@frontify/frontify-cli": "^5.8.3",
27+
"@types/react": "^18.3.3",
28+
"@types/react-dom": "^18.3.0",
29+
"autoprefixer": "^10.4.19",
30+
"eslint": "^9.9.0",
31+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
32+
"eslint-plugin-react-refresh": "^0.4.11",
33+
"globals": "^15.9.0",
34+
"postcss": "^8.4.38",
35+
"prettier": "^3.2.5",
36+
"tailwindcss": "^3.4.3",
37+
"typescript": "^5.6.0",
38+
"typescript-eslint": "^8.5.0"
39+
}
40+
}

0 commit comments

Comments
 (0)