2 |
12 |
13 |
14 |
19 |
--------------------------------------------------------------------------------
/packages/cli-create-img/README.md:
--------------------------------------------------------------------------------
1 | # Resoc Image Creator CLI
2 |
3 | Create an image based on a Resoc image template through the command line.
4 |
5 | For example:
6 |
7 | npm install -g create-img
8 | create-img path/top/resoc.manifest.json -o myImage.jpg --params title="A picture is worth a thousand words" mainImageUrl="https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg" textColor="#ffffff" backgroundColor="#20552a" resoc_imageWidth=1200 resoc_imageHeight=630
9 |
10 | See https://github.com/Resocio/resoc/tree/main/packages/cli-itdk
11 |
--------------------------------------------------------------------------------
/packages/cli-itdk/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowSyntheticDefaultImports": true,
5 | "skipLibCheck": true,
6 | "esModuleInterop": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "moduleResolution": "node",
10 | "resolveJsonModule": true,
11 | "isolatedModules": true,
12 | "noEmit": true,
13 | "jsx": "react",
14 | "declaration": true,
15 | "typeRoots": ["./node_modules/@types", "./types"]
16 | },
17 | "include": ["src"]
18 | }
19 |
--------------------------------------------------------------------------------
/packages/create-img-core/src/puppeteer.ts:
--------------------------------------------------------------------------------
1 | import type { Browser, ScreenshotOptions } from 'puppeteer'
2 |
3 | export const convertUrlToImage = async (url: string, outputOptions: ScreenshotOptions, browser: Browser): Promise3 | {{ title }} 4 |
5 |
6 | 
10 |
11 | 7 | {{ description }} 8 |
9 |
10 |
7 |
20 | );
21 | };
22 |
23 | export default ImageEngine;
24 |
--------------------------------------------------------------------------------
/packages/cli-create-img/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import json from "@rollup/plugin-json";
3 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
4 | import typescript from "rollup-plugin-typescript2";
5 | import { preserveShebangs } from 'rollup-plugin-preserve-shebangs';
6 |
7 | import packageJson from "./package.json";
8 |
9 | export default {
10 | input: "./src/cli.ts",
11 | output: [
12 | {
13 | file: packageJson.bin,
14 | format: "cjs",
15 | sourcemap: true
16 | }
17 | ],
18 | plugins: [peerDepsExternal(), commonjs(), typescript(), json(), preserveShebangs()]
19 | };
20 |
--------------------------------------------------------------------------------
/packages/img-data/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import json from "@rollup/plugin-json";
3 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
4 | import typescript from "rollup-plugin-typescript2";
5 |
6 | import packageJson from "./package.json";
7 |
8 | export default {
9 | input: "./src/index.ts",
10 | output: [
11 | {
12 | file: packageJson.main,
13 | format: "cjs",
14 | sourcemap: true
15 | },
16 | {
17 | file: packageJson.module,
18 | format: "esm",
19 | sourcemap: true
20 | }
21 | ],
22 | plugins: [peerDepsExternal(), commonjs(), typescript(), json()]
23 | };
24 |
--------------------------------------------------------------------------------
/packages/create-img/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import json from "@rollup/plugin-json";
3 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
4 | import typescript from "rollup-plugin-typescript2";
5 |
6 | import packageJson from "./package.json";
7 |
8 | export default {
9 | input: "./src/index.ts",
10 | output: [
11 | {
12 | file: packageJson.main,
13 | format: "cjs",
14 | sourcemap: true
15 | },
16 | {
17 | file: packageJson.module,
18 | format: "esm",
19 | sourcemap: true
20 | }
21 | ],
22 | plugins: [peerDepsExternal(), commonjs(), typescript(), json()]
23 | };
24 |
--------------------------------------------------------------------------------
/packages/create-img/src/compile.test.ts:
--------------------------------------------------------------------------------
1 | import { isLocalResource } from './compile'
2 |
3 | test('isLocalResource', () => {
4 | expect(isLocalResource('http://example.com/image.png')).toBeFalsy();
5 | expect(isLocalResource('HTTPS://example.com/image.png')).toBeFalsy();
6 | expect(isLocalResource('my/image.png')).toBeTruthy();
7 | expect(isLocalResource('../image.png')).toBeTruthy();
8 | expect(isLocalResource('C:\\docs\\image.png')).toBeTruthy();
9 | expect(isLocalResource('/home/me/image.png')).toBeTruthy();
10 | expect(isLocalResource('/home/me/image.png')).toBeTruthy();
11 | expect(isLocalResource('data:image/jpeg;base64,abcdef')).toBeFalsy();
12 | });
13 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/create/CodeBlock.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import CodeBlock, { CodeBlockProps } from './CodeBlock';
5 |
6 | export default {
7 | title: 'create/CodeBlock',
8 | component: CodeBlock,
9 | } as Meta;
10 |
11 | const Template: Story8 | Turn your image template to images via a simple, self-managed, Netlify-hosted API. 9 |
10 | 11 |12 | 18 |
19 |
6 |
18 |
19 |
20 |
25 |
--------------------------------------------------------------------------------
/packages/create-img-core/assets/templates/t2/content.html.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 7 | {{ title }} 8 |
9 | 17 |
6 |
18 |
19 |
20 |
25 |
--------------------------------------------------------------------------------
/packages/ui/template/resoc.manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "partials": {
3 | "content": "./content.html.mustache",
4 | "styles": "./styles.css.mustache"
5 | },
6 | "parameters": [
7 | {
8 | "name": "title",
9 | "type": "text",
10 | "demoValue": "A picture is worth a thousand words"
11 | },
12 | {
13 | "label": "Main image",
14 | "name": "mainImageUrl",
15 | "type": "imageUrl",
16 | "demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-2347483.jpeg"
17 | },
18 | {
19 | "name": "textColor",
20 | "type": "color",
21 | "demoValue": "#ffffff"
22 | },
23 | {
24 | "name": "backgroundColor",
25 | "type": "color",
26 | "demoValue": "#003bff"
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/ViewerApp.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import ViewerApp, { ViewerAppProps } from './ViewerApp';
5 | import { DefaultManifestName } from '@resoc/core';
6 |
7 | export default {
8 | title: 'ViewerApp',
9 | component: ViewerApp
10 | } as Meta;
11 |
12 | type TemplateStory = {
13 | loaders?: (() => Promise7 | {{ title }} 8 |
9 | 17 |
2 |
23 |
24 |
25 |
30 |
--------------------------------------------------------------------------------
/packages/cli-itdk/starter-templates/basic/resoc.manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "partials": {
3 | "content": "./content.html.mustache",
4 | "styles": "./styles.css.mustache"
5 | },
6 | "parameters": [
7 | {
8 | "name": "title",
9 | "type": "text",
10 | "demoValue": "A picture is worth a thousand words"
11 | },
12 | {
13 | "label": "Main image",
14 | "name": "mainImageUrl",
15 | "type": "imageUrl",
16 | "demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-2347483.jpeg"
17 | },
18 | {
19 | "name": "textColor",
20 | "type": "color",
21 | "demoValue": "#ffffff"
22 | },
23 | {
24 | "name": "backgroundColor",
25 | "type": "color",
26 | "demoValue": "#003bff"
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/create-img/assets/templates/t1/resoc.manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "partials": {
3 | "content": "./content.html.mustache",
4 | "styles": "./styles.css.mustache"
5 | },
6 | "parameters": [
7 | {
8 | "name": "title",
9 | "type": "text",
10 | "demoValue": "A picture is worth a thousand words"
11 | },
12 | {
13 | "label": "Main image",
14 | "name": "mainImageUrl",
15 | "type": "imageUrl",
16 | "demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg"
17 | },
18 | {
19 | "name": "textColor",
20 | "type": "color",
21 | "demoValue": "#ffffff"
22 | },
23 | {
24 | "name": "backgroundColor",
25 | "type": "color",
26 | "demoValue": "#20552a"
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/create-img-core/assets/templates/t1/resoc.manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "partials": {
3 | "content": "./content.html.mustache",
4 | "styles": "./styles.css.mustache"
5 | },
6 | "parameters": [
7 | {
8 | "name": "title",
9 | "type": "text",
10 | "demoValue": "A picture is worth a thousand words"
11 | },
12 | {
13 | "label": "Main image",
14 | "name": "mainImageUrl",
15 | "type": "imageUrl",
16 | "demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg"
17 | },
18 | {
19 | "name": "textColor",
20 | "type": "color",
21 | "demoValue": "#ffffff"
22 | },
23 | {
24 | "name": "backgroundColor",
25 | "type": "color",
26 | "demoValue": "#20552a"
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/packages/create-img-core/src/parse-parameters.ts:
--------------------------------------------------------------------------------
1 | import { ParamType, ParamValues, stringToParamValue, TemplateParam } from "@resoc/core";
2 |
3 | export const parseParameters = (specs: TemplateParam[], args: string[]): ParamValues => {
4 | const values: ParamValues = {};
5 |
6 | args.forEach(arg => {
7 | const equal = arg.indexOf('=');
8 | if (equal <= 0) {
9 | throw(`Invalid parameter name/value: ${arg}. Expected format is
3 |
15 |
4 |
8 | 5 | {{ title }} 6 |
7 |
9 |
10 |
14 |
10 | 11 | Resoc 12 |
13 |
16 |
17 | 
21 |
22 |
2 |
12 |
13 |
14 |
25 |
--------------------------------------------------------------------------------
/packages/ui/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import resolve from "@rollup/plugin-node-resolve";
3 | import json from "@rollup/plugin-json";
4 | import peerDepsExternal from "rollup-plugin-peer-deps-external";
5 | import typescript from "rollup-plugin-typescript2";
6 |
7 | import packageJson from "./package.json";
8 |
9 | export default {
10 | input: "./src/index.ts",
11 | output: [
12 | {
13 | file: packageJson.main,
14 | format: "cjs",
15 | sourcemap: true
16 | },
17 | {
18 | file: packageJson.module,
19 | format: "esm",
20 | sourcemap: true
21 | }
22 | ],
23 | plugins: [
24 | peerDepsExternal(),
25 | resolve({
26 | browser: true
27 | }),
28 | commonjs(),
29 | typescript({ useTsconfigDeclarationDir: true }),
30 | json()
31 | ]
32 | };
33 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/TransparentOverlay.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import TransparentOverlay, { TransparentOverlayProps } from './TransparentOverlay';
5 | import { ParamType } from '@resoc/core';
6 |
7 | export default {
8 | title: 'TransparentOverlay',
9 | component: TransparentOverlay,
10 | } as Meta;
11 |
12 | const Template: Story3 | Hey! It's nice to see you here 4 |
5 |
6 |
10 |
11 | 7 | Join my {{ followerCount }} followers! 8 |
9 |
10 |
13 |
15 | );
16 |
17 | export const Default = Template.bind({});
18 | Default.args = {
19 | children: (
20 |
28 |
34 | )
35 | };
36 |
--------------------------------------------------------------------------------
/packages/cli-itdk/starter-templates/title-description/styles.css.mustache:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2 |
3 | .wrapper {
4 | font-family: Roboto;
5 |
6 | padding: 4vw;
7 |
8 | background: rgb(7,68,144);
9 | background: linear-gradient(50deg, rgba(7,68,144,1) 0%, rgba(0,123,255,1) 100%);
10 |
11 | color: white;
12 |
13 | display: flex;
14 | flex-direction: column;
15 | align-items: stretch;
16 | gap: 10vh;
17 | }
18 |
19 | #title {
20 | flex: 1.62;
21 | font-size: 0.01rem; /* Rely on textFit to find the right size */
22 | height: 100%;
23 | }
24 |
25 | #footer {
26 | display: flex;
27 | align-items: center;
28 | gap: 10vh;
29 |
30 | font-size: 6vh;
31 | }
32 |
33 | #description {
34 | flex: 1 1 auto;
35 |
36 | margin: 0;
37 |
38 | text-overflow: ellipsis;
39 | overflow: hidden;
40 | white-space: nowrap;
41 | }
42 |
43 | #logo {
44 | height: 10vh;
45 | }
46 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/ScaledElement.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentStory, ComponentMeta } from '@storybook/react';
2 | import React from 'react';
3 |
4 | import ScaledElement from './ScaledElement';
5 |
6 | export default {
7 | title: 'ScaledElement',
8 | component: ScaledElement,
9 | } as ComponentMeta31 | This is some big content! 32 |
33 |
13 |
15 | );
16 |
17 | export const Story = Template.bind({});
18 | Story.args = {
19 | children: (
20 |
28 |
34 | )
35 | };
36 |
--------------------------------------------------------------------------------
/packages/cli-itdk/starter-templates/twitter-banner/styles.css.mustache:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2 |
3 | .wrapper {
4 | font-family: Roboto;
5 |
6 | padding: 4vw;
7 |
8 | background: rgb(7,68,144);
9 | background: linear-gradient(50deg, rgba(7,68,144,1) 0%, rgba(0,123,255,1) 100%);
10 |
11 | color: white;
12 |
13 | display: flex;
14 | flex-direction: column;
15 | align-items: stretch;
16 | gap: 10vh;
17 | }
18 |
19 | #title {
20 | flex: 1.62;
21 | font-size: 0.01rem; /* Rely on textFit to find the right size */
22 | height: 100%;
23 | text-align: right;
24 | margin-left: 20vw;
25 | }
26 |
27 | #footer {
28 | display: flex;
29 | align-items: center;
30 | justify-content: flex-end;
31 | gap: 10vh;
32 |
33 | font-size: 6vh;
34 | }
35 |
36 | #followers {
37 | margin: 0;
38 |
39 | text-overflow: ellipsis;
40 | overflow: hidden;
41 | white-space: nowrap;
42 | }
43 |
44 | #logo {
45 | height: 10vh;
46 | }
47 |
--------------------------------------------------------------------------------
/packages/ui/template/content.html.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 31 | This is some big content! 32 |
33 |
6 |
27 |
28 |
29 |
34 |
--------------------------------------------------------------------------------
/packages/create-img-core/src/local.ts:
--------------------------------------------------------------------------------
1 | import { promises as fs } from 'fs'
2 | import path from 'path'
3 | import { ImageTemplate, ParamType, TemplateParam } from "@resoc/core"
4 |
5 | export const resolveRelativePath = (manifestPath: string, relativePath: string) => (
6 | path.resolve(path.dirname(manifestPath), relativePath)
7 | );
8 |
9 | export const loadLocalTemplate = async (manifestPath: string): Promise
7 |
19 |
8 |
12 | 9 | {{ title }} 10 |
11 |
13 |
14 |
18 |
14 | 15 | Resoc 16 |
17 |
20 |
21 |
25 |
26 | {props.commandLine && $ }{props.code}
28 |
35 |
6 |
27 |
28 |
29 |
34 |
--------------------------------------------------------------------------------
/packages/create-img-core/assets/templates/t1/content.html.mustache:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
19 |
8 |
12 | 9 | {{ title }} 10 |
11 |
13 |
14 |
18 |
14 | 15 | Open Corp 16 |
17 |
20 |
21 |
25 |
26 |
6 |
27 |
28 |
29 |
34 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/RatioTester.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import TemplatePreview from './TemplatePreview';
3 | import Form from 'react-bootstrap/Form';
4 | import { ImageTemplate } from '@resoc/core';
5 | import type { ParamValues } from '@resoc/core';
6 |
7 | export type RatioTesterProps = {
8 | width: number;
9 | template: ImageTemplate;
10 | parameters: ParamValues;
11 | }
12 |
13 | const RatioTester = (props: RatioTesterProps) => {
14 | const [ratio, setRatio] = useState
7 |
19 |
8 |
12 | 9 | {{ title }} 10 |
11 |
13 |
14 |
18 |
14 | 15 | Open Corp 16 |
17 |
20 |
21 |
25 |
26 |
18 | {
20 | setRatio(parseFloat(e.target.value));
21 | }}
22 | min={0.5}
23 | max={3.0}
24 | step={0.1}
25 | value={ratio}
26 | />
27 |
34 | )
35 | };
36 |
37 | export default RatioTester;
38 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/TemplateParameters.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Form } from 'react-bootstrap';
3 | import { ParamType, ParamValue, ParamValues, TemplateParam } from '@resoc/core';
4 | import ParamInput from './ParamInput';
5 |
6 | export type TemplateParametersProps = {
7 | parameters: TemplateParam[];
8 | values: ParamValues;
9 | onChange: (newValues: ParamValues) => void;
10 | };
11 |
12 | const TemplateParameters = (props: TemplateParametersProps) => {
13 | return (
14 |
29 | );
30 | }
31 |
32 | export default TemplateParameters;
33 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/RatioTester.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import RatioTester, { RatioTesterProps } from './RatioTester';
5 | import { DefaultManifestName, loadRemoteTemplate } from '@resoc/core';
6 |
7 | export default {
8 | title: 'RatioTester',
9 | component: RatioTester
10 | } as Meta;
11 |
12 | type TemplateStory = {
13 | loaders?: (() => PromiseLoading...
39 | );
40 | }
41 | };
42 |
43 | export default AppLoader;
44 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/TemplatePresentation.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import TemplatePresentation, { TemplatePresentationProps } from './TemplatePresentation';
5 | import { DefaultManifestName, demoParamValues, loadRemoteTemplate } from '@resoc/core';
6 |
7 | export default {
8 | title: 'TemplatePresentation',
9 | component: TemplatePresentation,
10 | argTypes: {
11 | onChange: {
12 | action: 'clicked'
13 | }
14 | }
15 | } as Meta;
16 |
17 | type TemplateStory = {
18 | loaders?: (() => Promise
7 |
37 | );
38 | };
39 |
40 | export default Netlify;
41 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/ParamInput.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 |
4 | import ParamInput, { ParamInputProps } from './ParamInput';
5 | import { ParamType } from '@resoc/core';
6 |
7 | export default {
8 | title: 'ParamInput',
9 | component: ParamInput,
10 | argTypes: {
11 | onChange: {
12 | action: 'clicked'
13 | }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story8 | For a site deployed to Netlify, use 9 | the Social Image Netlify Build Plugin. 10 | Use case: 11 | Automated social images on Netlify - with Next.js and Resoc 12 | . 13 |
14 | 15 |16 | 22 |
23 | 24 |25 | If you deploy a Eleventy static site to Netlify, use the dedicated Social Image plugin for 11ty. 26 |
27 | 28 |29 | 35 |
36 |
16 | 🖊️ Edit the files in {props.templateDir}. This is just some HTML and CSS, with a little bit
17 | of Mustache, a simple templating system.
18 |
21 | 👀 When you make a change in the template, this page reloads it so you immediately see what 22 | you have just done. 23 |
24 | 25 |
26 | ⚙️ Change the parameter values below to see how your template looks like in various situations.
27 | You can define your own parameters by editing {props.manifestPath}.
28 |
31 | 🚀 When your template is ready, use the command line below to create an image — or a thousand! 32 |
33 |
16 | {props.backgroundImageUrl && (
17 |
18 | Model
20 |
21 | setOpacity(parseFloat(e.target.value))}
25 | min={0.0} max={1.0} step={0.02}
26 | />
27 |
28 | Template
30 |
31 |
32 | )}
33 |
41 | )
42 | };
43 |
44 | export default RichPreview;
45 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/create/CommandLine.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { ImageTemplate, ParamValues, FacebookOpenGraph, TwitterCard, TemplateParam, paramValueToString, getImageDemoResolution } from '@resoc/core';
3 | import { Alert, Button, Col, Form } from 'react-bootstrap';
4 | import styled from 'styled-components';
5 | import copy from 'copy-text-to-clipboard';
6 | import { CreateImageProps } from './CreateImage';
7 | import CodeBlock from './CodeBlock';
8 |
9 | export type CommandLineProps = CreateImageProps;
10 |
11 | export const paramValuesToCommandLine = (parameters: TemplateParam[], values: ParamValues): string => (
12 | parameters.map(p => `${p.name}="${paramValueToString(p, values[p.name]).replaceAll('"', '\\"')}"`).join(' ')
13 | );
14 |
15 | const CommandLine = (props: CommandLineProps) => {
16 | const outputFile = 'output-image.jpg';
17 | const dims = getImageDemoResolution(props.imageSpecs);
18 |
19 | const commandLine =
20 | `npx create-img ${props.manifestPath} -o ${outputFile} --params ${paramValuesToCommandLine(props.parameters, props.values)} -w ${dims.width} -h ${dims.height}`;
21 |
22 | return (
23 |
34 |
35 |
36 |
38 |
39 |
40 |
24 |
33 | );
34 | };
35 |
36 | export default CommandLine;
37 |
--------------------------------------------------------------------------------
/packages/ui/src/ScaledElement.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactFragment, useRef, useState } from 'react'
2 | import useResizeObserver from '@react-hook/resize-observer'
3 | import CSS from 'csstype';
4 |
5 | export type ScaledElementProps = {
6 | children: ReactFragment;
7 | className?: string;
8 | };
9 |
10 | const ScaledElement = (props: ScaledElementProps) => {
11 | const [ childrenRect, setChildrenRect ] = useStateOpen a shell and run:
25 |28 | Use case: 29 | Replace ImageMagick with HTML & CSS 30 | 31 |
32 |
42 |
46 | );
47 | }
48 |
49 | export default ScaledElement;
50 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/ScaledElement.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactFragment, useRef, useState } from 'react'
2 | import useResizeObserver from '@react-hook/resize-observer'
3 | //import ResizeObserverEntry from "@react-hook/resize-observer"
4 | import CSS from 'csstype';
5 |
6 | export type ScaledElementProps = {
7 | children: ReactFragment;
8 | };
9 |
10 | const ScaledElement = (props: ScaledElementProps) => {
11 | const [ childrenRect, setChildrenRect ] = useState
43 | {props.children}
44 |
45 |
42 |
46 | );
47 | }
48 |
49 | export default ScaledElement;
50 |
--------------------------------------------------------------------------------
/packages/core/src/remote.ts:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch';
2 | import { ImageTemplate, TemplateParam } from "./template";
3 |
4 | export const isAbsoluteUrl = (url: string): boolean => (
5 | url.toLowerCase().startsWith('http://') ||
6 | url.toLowerCase().startsWith('https://') ||
7 | url.toLowerCase().startsWith('//')
8 | );
9 |
10 | export const relativeUrlToAbsoluteUrl = (relativeUrl: string): string => (
11 | new URL(relativeUrl, document.baseURI).href
12 | );
13 |
14 | export const resolveRelativeUrl = (relativeUrl: string, baseUrl: string) => {
15 | if (!isAbsoluteUrl(baseUrl)) {
16 | baseUrl = relativeUrlToAbsoluteUrl(baseUrl);
17 | }
18 | return (new URL(relativeUrl, baseUrl)).href;
19 | };
20 |
21 | export const downloadManifest = async (manifestUrl: string): Promise
43 | {props.children}
44 |
45 |
39 |
40 |
41 |
42 |
43 |
44 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/packages/cli-itdk/src/viewer/create/JavaScript.tsx:
--------------------------------------------------------------------------------
1 | import { getImageDemoResolution, ImageDestination, ParamType, ParamValue, paramValueToString, TemplateParam } from '@resoc/core';
2 | import React from 'react'
3 | import CodeBlock from './CodeBlock';
4 | import { CreateImageProps } from './CreateImage';
5 |
6 | export type JavaScriptProps = CreateImageProps;
7 |
8 | const paramValueToJS = (param: TemplateParam, value: ParamValue): string => {
9 | const v = paramValueToString(param, value);
10 | return param.type === ParamType.ObjectList ? v : `'${v.replaceAll("'", "\\'")}'`;
11 | }
12 |
13 | const JavaScript = (props: JavaScriptProps) => {
14 | let resolutionPackage = '';
15 | const resolution = getImageDemoResolution(props.imageSpecs);
16 | let resolutionParam = `{ width: ${resolution.width}, height: ${resolution.height} }`;
17 | if (props.imageSpecs.destination === ImageDestination.WebPageSocialImage) {
18 | resolutionPackage = "import { FacebookOpenGraph } from '@resoc/core'\n";
19 | resolutionParam = 'FacebookOpenGraph';
20 | }
21 |
22 | const code =
23 | `${resolutionPackage}import { createImage } from '@resoc/create-img'
24 |
25 | await createImage(
26 | '${props.manifestPath}',
27 | {
28 | ${props.parameters.map(p => ` ${p.name}: ${paramValueToJS(p, props.values[p.name])}`).join(',\n')}
29 | },
30 | ${resolutionParam},
31 | 'output-image.jpg'
32 | );
33 | `;
34 |
35 | return (
36 |
37 |
49 | );
50 | }
51 |
52 | export default JavaScript;
53 |
--------------------------------------------------------------------------------
/packages/create-img/src/compile.ts:
--------------------------------------------------------------------------------
1 | import { puppeteerBrowser } from './puppeteer'
2 | import type { Browser, ScreenshotOptions } from 'puppeteer'
3 | import { ImageResolution, ImageTemplate, ParamValues } from '@resoc/core';
4 | import createImgCore from '@resoc/create-img-core'
5 |
6 | type LocalTemplateOptions = {
7 | cache?: boolean;
8 | browser?: Browser
9 | };
10 |
11 | export const createImage = async (
12 | templateManifestPath: string,
13 | paramValues: ParamValues,
14 | resolution: ImageResolution,
15 | imagePath: string,
16 | options?: LocalTemplateOptions
17 | ): PromiseInstall Resoc and Puppeteer:
38 |Create an image:
41 |44 | Use case: 45 | Static, automated social images with NextJS 46 | 47 |
48 |
20 | {props.content && (
21 |