create-blocklet 0.3.6 → 0.3.9

package/templates/react-gun-dapp/api/index.js

@@ -25,13 +25,8 @@ app.use(Gun.serve);
 const router = express.Router();
 router.use('/api', require('./routes'));
 
-const isDevelopment = process.env.NODE_ENV === 'development';
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
-if (isDevelopment) {
-  process.env.BLOCKLET_PORT = 3030;
-}
-
 if (isProduction) {
   app.use(cors());
   app.use(compression());
@@ -52,7 +47,7 @@ if (isProduction) {
   app.use(router);
 }
 
-const port = parseInt(process.env.BLOCKLET_PORT, 10) || 3030;
+const port = parseInt(process.env.API_PORT, 10) || 3030;
 
 const server = app.listen(port, (err) => {
   if (err) throw err;

package/templates/react-gun-dapp/craco.config.js

@@ -1,5 +1,7 @@
-const port = process.env.BLOCKLET_PORT || process.env.PORT || 8080;
-const dappPort = process.env.APP_PORT || 3030;
+require('dotenv-flow').config();
+
+const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
+const apiPort = process.env.API_PORT || 3030;
 
 module.exports = {
   devServer: {
@@ -11,11 +13,11 @@ module.exports = {
     proxy: [
       {
         context: ['/api'],
-        target: `http://127.0.0.1:${dappPort}`,
+        target: `http://127.0.0.1:${apiPort}`,
       },
       {
         context: ['/gun'],
-        target: `ws://127.0.0.1:${dappPort}`,
+        target: `ws://127.0.0.1:${apiPort}`,
         ws: true,
       },
     ],

package/templates/react-gun-dapp/package.json

@@ -39,26 +39,26 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.16.0",
+    "@arcblock/did-auth": "^1.16.4",
     "@arcblock/did-auth-storage-nedb": "^1.6.3",
-    "@blocklet/sdk": "^1.7.6",
+    "@blocklet/sdk": "^1.7.9",
     "@craco/craco": "^6.4.3",
-    "@ocap/client": "^1.16.0",
-    "@ocap/mcrypto": "^1.16.0",
-    "@ocap/wallet": "^1.16.0",
-    "axios": "^0.26.1",
+    "@ocap/client": "^1.16.4",
+    "@ocap/mcrypto": "^1.16.4",
+    "@ocap/wallet": "^1.16.4",
+    "axios": "^0.27.2",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv-flow": "^3.2.0",
-    "express": "^4.17.3",
+    "express": "^4.18.0",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
-    "gun": "^0.2020.1236",
+    "gun": "^0.2020.1237",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.2",
-    "react-scripts": "5.0.0"
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@arcblock/eslint-config": "^0.1.8",
@@ -73,9 +73,9 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^34.0.1",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.7",
-    "nodemon": "^2.0.15",
+    "lint-staged": "^12.4.1",
+    "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.0"
+    "prettier": "^2.6.2"
   }
 }

package/templates/react-static/craco.config.js

@@ -1,4 +1,4 @@
-const port = process.env.BLOCKLET_PORT || process.env.PORT || 8080;
+const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 
 module.exports = {
   devServer: {

package/templates/react-static/package.json

@@ -36,10 +36,10 @@
   },
   "dependencies": {
     "@craco/craco": "^6.4.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.2",
-    "react-scripts": "5.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@arcblock/eslint-config": "^0.1.8",
@@ -54,7 +54,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^34.0.1",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.7",
-    "prettier": "^2.6.0"
+    "lint-staged": "^12.4.1",
+    "prettier": "^2.6.2"
   }
 }

package/templates/solidjs-dapp/.env

@@ -0,0 +1 @@
+APP_TITLE=''

package/templates/solidjs-dapp/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
+  plugins: ['solid'],
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:solid/recommended'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

package/templates/solidjs-dapp/README.md

@@ -0,0 +1,147 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+- index.html - main html file, template for vite vue
+- screenshots/ - Screenshots
+- src/ - Client side code (A standard vue app structure)
+- .env - Environment variables
+- .env.local - Local environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.  
+   `npm install -g @blocklet/cli`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.  
+   `blocklet server init --mode=debug`  
+   `blocklet server start`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment.)
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` from blocklet store.
+
+  > Why we need a `accessToken`?  
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to blocklet store by Github CI.  
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.  
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's name?
+
+   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
+
+   You can also change the `title` field and `description` field in the `blocklet.yml` file.
+
+   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
+
+   Replace this command `"bundle": "vite build --base /.blocklet/proxy/<%= did %>",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/solidjs-dapp/api/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('@blocklet/sdk/lib/error-handler');
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const logger = require('../libs/logger');
+const { wallet } = require('../libs/auth');
+const { name } = require('../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  const { state } = await client.getAccountState({ address: wallet.toAddress() }, { ignoreFields: ['context'] });
+  if (!state) {
+    const hash = await client.declare({ moniker: name, wallet });
+    logger.log(`app account declared on chain ${env.chainHost}`, hash);
+  } else {
+    logger.log(`app account already declared on chain ${env.chainHost}`);
+  }
+};
+
+(async () => {
+  try {
+    await ensureAccountDeclared();
+    process.exit(0);
+  } catch (err) {
+    logger.error(`${name} pre-start error`, err.message);
+    process.exit(1);
+  }
+})();

package/templates/solidjs-dapp/api/index.js

@@ -0,0 +1,50 @@
+require('dotenv-flow').config();
+require('express-async-errors');
+const path = require('path');
+const cors = require('cors');
+const express = require('express');
+const compression = require('compression');
+const cookieParser = require('cookie-parser');
+const fallback = require('express-history-api-fallback');
+
+const { name, version } = require('../package.json');
+const logger = require('./libs/logger');
+
+const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+
+const router = express.Router();
+router.use('/api', require('./routes'));
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  app.use(cors());
+  app.use(compression());
+
+  const staticDir = path.resolve(__dirname, '../', 'dist');
+  app.use(express.static(staticDir, { index: 'index.html' }));
+  app.use(router);
+  app.use(fallback('index.html', { root: staticDir }));
+
+  app.use((req, res) => {
+    res.status(404).send('404 NOT FOUND');
+  });
+  app.use((err, req, res) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  });
+} else {
+  app.use(router);
+}
+
+const port = parseInt(process.env.API_PORT, 10) || 3030;
+
+app.listen(port, (err) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/templates/solidjs-dapp/api/libs/auth.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const getWallet = require('@blocklet/sdk/lib/wallet');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
+
+const env = require('./env');
+
+const wallet = getWallet();
+const authenticator = new WalletAuthenticator();
+const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+};

package/templates/solidjs-dapp/api/libs/env.js

@@ -0,0 +1,6 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/solidjs-dapp/api/libs/logger.js

@@ -0,0 +1,3 @@
+const logger = console;
+
+module.exports = logger;

package/templates/solidjs-dapp/api/routes/index.js

@@ -0,0 +1,6 @@
+const middleware = require('@blocklet/sdk/lib/middlewares');
+const router = require('express').Router();
+
+router.use('/user', middleware.user(), (req, res) => res.json(req.user || {}));
+
+module.exports = router;

package/templates/solidjs-dapp/blocklet.md

@@ -0,0 +1,3 @@
+# template-solidjs
+
+A solidjs template for creating a new blocklet project.

package/templates/solidjs-dapp/blocklet.yml

@@ -0,0 +1,49 @@
+name: template-solidjs
+title: Blocklet Template Solidjs
+description: A Blocklet Server blocklet
+keywords:
+  - blocklet
+  - solidjs
+group: static
+did: ''
+main: dist
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.1.1
+version: 0.1.0
+logo: logo.png
+files:
+  - logo.png
+  - README.md
+  - blocklet.md
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.6.29'
+  os: '*'
+  cpu: '*'
+scripts:
+  dev: npm run start
+environments: []
+capabilities: {}
+screenshots: []
+children: []

package/templates/solidjs-dapp/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title><%- title %></title>
+    <script src="__meta__.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.jsx" type="module"></script>
+  </body>
+</html>

package/templates/solidjs-dapp/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "npm-run-all --parallel start:*",
+    "start:client": "npm run dev",
+    "start:api": "NODE_ENV=development nodemon api/index.js -w api",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run bundle:client && npm run bundle:api",
+    "bundle:client": "vite build --base /.blocklet/proxy/<%= did %>/",
+    "bundle:api": "npm run clean && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "lint": "eslint src --ext .mjs,.js,.jsx",
+    "prepare": "husky install"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-solid": "0.4.7",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.4.1",
+    "nodemon": "^2.0.16",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.2",
+    "vite": "^2.9.6",
+    "vite-plugin-solid": "^2.2.6",
+    "vite-plugin-blocklet": "^0.1.2",
+    "vite-plugin-html": "^3.2.0"
+  },
+  "dependencies": {
+    "@arcblock/did-auth": "^1.16.4",
+    "@arcblock/did-auth-storage-nedb": "^1.6.3",
+    "@blocklet/sdk": "^1.7.9",
+    "@ocap/client": "^1.16.4",
+    "@ocap/mcrypto": "^1.16.4",
+    "@ocap/wallet": "^1.16.4",
+    "axios": "^0.27.2",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.18.0",
+    "express-async-errors": "^3.1.1",
+    "express-history-api-fallback": "^2.2.1",
+    "solid-js": "^1.3.17"
+  },
+  "lint-staged": {
+    "*.{mjs,js,vue}": [
+      "prettier --write",
+      "eslint --ext .js,.vue,.mjs"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  }
+}

package/templates/solidjs-dapp/src/App.jsx

@@ -0,0 +1,24 @@
+import logo from './logo.svg';
+import styles from './App.module.css';
+
+function App() {
+  return (
+    <div class={styles.App}>
+      <header class={styles.header}>
+        <img src={logo} class={styles.logo} alt="logo" />
+        <p>
+          Edit <code>src/App.jsx</code> and save to reload.
+        </p>
+        <a
+          class={styles.link}
+          href="https://docs.arcblock.io/abtnode/en/blocklet"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn Blocklet
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

package/templates/solidjs-dapp/src/App.module.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.logo {
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.link {
+  color: #b318f0;
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/templates/solidjs-dapp/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/templates/solidjs-dapp/src/index.jsx

@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+
+import './index.css';
+import App from './App';
+
+render(() => <App />, document.getElementById('root'));

package/templates/solidjs-dapp/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>