@silexlabs/silex 3.0.0-alpha.39 → 3.0.0-alpha.41

package/.silex.js

@@ -1,11 +1,41 @@
-module.exports = function (silexConfig, options) {
-  silexConfig.addPlugin([
-    __dirname + '/src/plugins/ExpressPlugin.js',
-    __dirname + '/src/plugins/SslPlugin.js',
-    __dirname + '/src/plugins/StaticPlugin.js',
-    __dirname + '/src/plugins/WebsitePlugin.js',
-    __dirname + '/src/plugins/PublishPlugin.js',
-  ])
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+const SslPlugin = require('./dist/plugins/SslPlugin').default
+const StaticPlugin = require('./dist/plugins/StaticPlugin').default
+const WebsitePlugin = require('./dist/plugins/WebsitePlugin').default
+const PublicationPlugin = require('./dist/plugins/PublicationPlugin').default
+
+module.exports = async function(config, options) {
+  try {
+    if(!SslPlugin) throw new Error('SslPlugin not found')
+    if(!StaticPlugin) throw new Error('StaticPlugin not found')
+    if(!WebsitePlugin) throw new Error('WebsitePlugin not found')
+    if(!PublicationPlugin) throw new Error('PublicationPlugin not found')
+
+    await config.addPlugin([
+      SslPlugin,
+      StaticPlugin,
+      WebsitePlugin,
+      PublicationPlugin,
+    ])
+  } catch(e) {
+    console.error(e)
+  }
 
   // Return an object to be merged with Silex config
   return {}

package/dist/client/client/config.d.ts

@@ -29,23 +29,22 @@ export declare class SilexConfig extends Config {
             autoload: boolean;
             type: string;
             options: {
-                remote: {
-                    urlStore: string;
-                    urlLoad: string;
+                backend: {
+                    id: string;
+                    backendId: string;
                 };
             };
         };
+        cssIcons: string;
         plugins: any[];
         pluginsOpts: {
-            [x: number]: {
+            [x: number]: import("./grapesjs/PublicationManager").PublicationManagerOptions | import("./grapesjs/LoginDialog").LoginDialogOptions | {
                 blocks: string[];
                 category: string;
                 panels?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 onError?: undefined;
@@ -125,26 +124,9 @@ export declare class SilexConfig extends Config {
                 })[];
                 blocks?: undefined;
                 category?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
-                cmdOpenNewPageDialog?: undefined;
-                cmdOpenSettings?: undefined;
-                enableCount?: undefined;
-                enablePerformance?: undefined;
-                onError?: undefined;
-                blockLabel?: undefined;
-                blockCustomCode?: undefined;
-                api_key?: undefined;
-            } | {
-                appendTo: string;
-                rootUrl: string;
-                id: string;
-                blocks?: undefined;
-                category?: undefined;
-                panels?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 onError?: undefined;
@@ -158,8 +140,6 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 onError?: undefined;
@@ -172,11 +152,9 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 onError?: undefined;
                 blockLabel?: undefined;
                 blockCustomCode?: undefined;
@@ -186,11 +164,9 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 blockLabel?: undefined;
@@ -204,11 +180,9 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 onError?: undefined;
@@ -218,8 +192,6 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
                 enableCount?: undefined;
@@ -233,11 +205,9 @@ export declare class SilexConfig extends Config {
                 blocks?: undefined;
                 category?: undefined;
                 panels?: undefined;
-                appendTo?: undefined;
-                rootUrl?: undefined;
-                id?: undefined;
                 cmdOpenNewPageDialog?: undefined;
                 cmdOpenSettings?: undefined;
+                appendTo?: undefined;
                 enableCount?: undefined;
                 enablePerformance?: undefined;
                 onError?: undefined;

package/dist/client/client/grapesjs/LoginDialog.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from 'grapesjs';
+import { LoginStatus } from '../services';
+import { WebsiteId } from '../../types';
+export declare const cmdLogin = "silex:auth:login";
+export declare const eventLoggingIn = "silex:auth:logging-in";
+export declare const eventLoggedIn = "silex:auth:logged-in";
+export declare const eventLoginFailed = "silex:auth:login-failed";
+export declare const eventLoggedOut = "silex:auth:logged-out";
+export interface LoginDialogOptions {
+    id: WebsiteId;
+}
+export declare function getCurrentLoginStatus(editor: Editor): Promise<LoginStatus>;
+export default function loginDialogPlugin(editor: any, opts: any): void;

package/dist/client/client/grapesjs/PublicationManager.d.ts

@@ -0,0 +1,69 @@
+import { BackendData, PublicationJobData, PublicationSettings, WebsiteId, WebsiteSettings } from '../../types';
+import { Editor } from 'grapesjs';
+import { PublicationUi } from './PublicationUi';
+/**
+ * @fileoverview Publication manager for Silex
+ * This plugin adds a publication feature to Silex
+ * It lets the user publish the website to a hosting service
+ * It can optionally display a button and a dialog
+ * Useful commands:
+ * - publish: starts the publication process and optionally open the dialog
+ * - publish-login: open the login dialog
+ * - publish-logout: logout from the hosting service and let the user choose a hosting service again
+ */
+export declare const cmdPublicationStart = "publish";
+export declare const cmdPublicationLogin = "publish-login";
+export declare const cmdPublicationLogout = "publish-logout";
+export type PublishableEditor = Editor & {
+    PublicationManager: PublicationManager;
+};
+export declare enum PublicationStatus {
+    STATUS_NONE = "STATUS_NONE",
+    STATUS_PENDING = "STATUS_PENDING",
+    STATUS_ERROR = "STATUS_ERROR",
+    STATUS_SUCCESS = "STATUS_SUCCESS",
+    STATUS_LOGGED_OUT = "STATUS_AUTH_ERROR"
+}
+export type PublicationManagerOptions = {
+    appendTo?: string;
+    websiteId: WebsiteId;
+};
+export default function publishPlugin(editor: any, opts: any): void;
+export declare class PublicationManager {
+    private editor;
+    /**
+     * Publication dialog
+     * This class is responsible for the  UI
+     */
+    dialog?: PublicationUi;
+    /**
+     * Publication settings
+     * This is the data which is stored in the website settings
+     */
+    settings: PublicationSettings;
+    /**
+     * Plugin options
+     * This is the data which is passed to the plugin by grapesjs
+     */
+    options: PublicationManagerOptions;
+    /**
+     * Publication job during the publication process
+     */
+    job: PublicationJobData | null;
+    /**
+     * Publication state
+     * This is the state of the publication process
+     */
+    status: PublicationStatus;
+    constructor(editor: PublishableEditor, opts: PublicationManagerOptions);
+    goLogin(provider: BackendData): Promise<unknown>;
+    goLogout(): Promise<void>;
+    startPublication(): Promise<void>;
+    getFiles(siteSettings: WebsiteSettings): Promise<{
+        html: string;
+        css: string;
+        cssPath: string;
+        htmlPath: string;
+    }[]>;
+    trackProgress(): Promise<void>;
+}

package/dist/client/client/grapesjs/PublicationUi.d.ts

@@ -0,0 +1,58 @@
+import { TemplateResult } from 'lit-html';
+import { PublicationStatus, PublishableEditor } from './PublicationManager';
+import { PublicationJobData, PublicationSettings } from '../../types';
+/**
+ * @fileoverview define the publication dialog
+ * This is the UI of the publication feature
+ * It is a dialog which allows the user to login to a backend and publish the website
+ * It also displays the publication status and logs during the publication process
+ * This class is used by the PublicationManager
+ * This is optional, you can use the PublicationManager without this UI
+ */
+export declare const cmdPublish = "publish-open-dialog";
+export type PublicationDialogOptions = {
+    appendTo: string;
+};
+/**
+ * Class to manage the publication dialog
+ */
+export declare class PublicationUi {
+    private editor;
+    private options;
+    /**
+     * Dialog state
+     */
+    private isOpen;
+    /**
+     * Dialog content
+     */
+    private errorMessage;
+    /**
+     * Dialog element
+     * This is the DOM element of the dialog
+     */
+    private el;
+    /**
+     * Initialize the dialog and the publish button
+     */
+    constructor(editor: PublishableEditor, options: PublicationDialogOptions);
+    isSuccess(status: PublicationStatus): boolean;
+    isPending(status: PublicationStatus): boolean;
+    isError(status: PublicationStatus): boolean;
+    isLoggedOut(status: PublicationStatus): boolean;
+    getDialogElements(): {
+        el: HTMLElement;
+        primary: HTMLElement;
+        secondary: HTMLElement;
+    };
+    createDialogElements(): HTMLElement;
+    move(rect: any): void;
+    private renderDialog;
+    renderOpenDialog(job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings): Promise<TemplateResult>;
+    renderLoginDialog(status: PublicationStatus, settings: PublicationSettings): Promise<TemplateResult>;
+    displayPending(job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings): void;
+    displayError(message: string, job: PublicationJobData, status: PublicationStatus, settings: PublicationSettings): void;
+    closeDialog(): Promise<void>;
+    toggleDialog(): Promise<void>;
+    openDialog(): Promise<void>;
+}

package/dist/client/client/grapesjs/index.d.ts

@@ -1,4 +1,8 @@
-export declare function getEditorConfig(id: string, rootUrl: string): {
+import { Editor } from 'grapesjs';
+import { LoginDialogOptions } from './LoginDialog';
+import { PublicationManagerOptions } from './PublicationManager';
+import { BackendId, WebsiteId } from '../../types';
+export declare function getEditorConfig(id: WebsiteId, backendId: BackendId, rootUrl: string): {
     container: string;
     height: string;
     showOffsets: boolean;
@@ -16,23 +20,22 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
         autoload: boolean;
         type: string;
         options: {
-            remote: {
-                urlStore: string;
-                urlLoad: string;
+            backend: {
+                id: string;
+                backendId: string;
             };
         };
     };
+    cssIcons: string;
     plugins: any[];
     pluginsOpts: {
-        [x: number]: {
+        [x: number]: PublicationManagerOptions | LoginDialogOptions | {
             blocks: string[];
             category: string;
             panels?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             onError?: undefined;
@@ -112,26 +115,9 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             })[];
             blocks?: undefined;
             category?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
-            cmdOpenNewPageDialog?: undefined;
-            cmdOpenSettings?: undefined;
-            enableCount?: undefined;
-            enablePerformance?: undefined;
-            onError?: undefined;
-            blockLabel?: undefined;
-            blockCustomCode?: undefined;
-            api_key?: undefined;
-        } | {
-            appendTo: string;
-            rootUrl: string;
-            id: string;
-            blocks?: undefined;
-            category?: undefined;
-            panels?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             onError?: undefined;
@@ -145,8 +131,6 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             onError?: undefined;
@@ -159,11 +143,9 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             onError?: undefined;
             blockLabel?: undefined;
             blockCustomCode?: undefined;
@@ -173,11 +155,9 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             blockLabel?: undefined;
@@ -191,11 +171,9 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             onError?: undefined;
@@ -205,8 +183,6 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
             enableCount?: undefined;
@@ -220,11 +196,9 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
             blocks?: undefined;
             category?: undefined;
             panels?: undefined;
-            appendTo?: undefined;
-            rootUrl?: undefined;
-            id?: undefined;
             cmdOpenNewPageDialog?: undefined;
             cmdOpenSettings?: undefined;
+            appendTo?: undefined;
             enableCount?: undefined;
             enablePerformance?: undefined;
             onError?: undefined;
@@ -233,5 +207,5 @@ export declare function getEditorConfig(id: string, rootUrl: string): {
         };
     };
 };
-export declare function initEditor(config: any, grapesJsPlugins: any): void;
-export declare function getEditor(): any;
+export declare function initEditor(config: any, grapesJsPlugins: any): Promise<Editor>;
+export declare function getEditor(): Editor;

package/dist/client/client/grapesjs/storage.d.ts

@@ -0,0 +1 @@
+export declare const storagePlugin: (editor: any) => void;

package/dist/client/client/services.d.ts

@@ -0,0 +1,35 @@
+import { BackendId, JobId, PublicationJobData, WebsiteId, BackendData, BackendType, WebsiteData, ClientSideFile, PublicationData, BackendUser, WebsiteMeta } from '../types';
+export declare enum ApiRoute {
+    PUBLICATION_PUBLISH = "api/publication/",
+    PUBLICATION_STATUS = "/api/publication/status/",
+    BACKEND_LOGOUT = "api/backend/logout/",
+    BACKEND_LIST = "api/backend/",
+    BACKEND_LOGIN_STATUS = "api/backend/login/status/",
+    WEBSITE_READ = "api/website/",
+    WEBSITE_WRITE = "api/website/",
+    WEBSITE_DELETE = "api/website/",
+    WEBSITE_LIST = "api/website/",
+    WEBSITE_ASSETS_READ = "assets/:path",
+    WEBSITE_ASSETS_WRITE = "assets/"
+}
+export interface LoginStatus {
+    backend: BackendData;
+    user: BackendUser;
+    websiteMeta?: WebsiteMeta;
+}
+export declare class ApiError extends Error {
+    readonly code: number;
+    constructor(message: string, code: number);
+}
+export declare function loginStatus(backendId: BackendId, type: BackendType, id?: WebsiteId): Promise<LoginStatus>;
+export declare function logout(backendId: BackendId, type: BackendType): Promise<void>;
+export declare function publish(websiteId: WebsiteId, data: PublicationData): Promise<[url: string, job: PublicationJobData]>;
+export declare function publicationStatus(jobId: JobId): Promise<PublicationJobData>;
+export declare function backendList(type: BackendType): Promise<BackendData[]>;
+export declare function websiteList(backendId: BackendId): Promise<WebsiteMeta[]>;
+export declare function websiteLoad(id: WebsiteId, backendId: BackendId): Promise<WebsiteData>;
+export declare function websiteSave(id: WebsiteId, backendId: BackendId, data: WebsiteData): Promise<void>;
+export declare function websiteDelete(id: WebsiteId, backendId: BackendId): Promise<void>;
+export declare function websiteAssetsLoad(path: string, id: WebsiteId, backendId: BackendId): Promise<string>;
+export declare function websiteAssetsSave(id: WebsiteId, backendId: BackendId, files: ClientSideFile[]): Promise<string[]>;
+export declare function api<ReqQuery, ReqBody, ResBody>(route: ApiRoute | string, method: string, query?: ReqQuery, payload?: ReqBody): Promise<ResBody>;

package/dist/client/constants.d.ts

@@ -1,4 +1,21 @@
 /**
  * @fileoverview define constants for Silex client and server
  */
+export declare const WEBSITE_DATA_FILE_NAME = "website.json";
+export declare const DEFAULT_WEBSITE_ID = "default";
+export declare const DEFAULT_BACKEND_ID = "";
+export declare const DEFAULT_LANGUAGE = "en";
 export declare const CLIENT_CONFIG_FILE_NAME = "silex.js";
+export declare const API_BACKEND_LOGIN_STATUS = "api/backend/login/status/";
+export declare const API_BACKEND_LIST = "api/backend/";
+export declare const API_BACKEND_LOGOUT = "api/backend/logout/";
+export declare const API_BACKEND_LOGIN = "api/backend/login/";
+export declare const API_BACKEND_LOGIN_CALLBACK = "api/backend/login/";
+export declare const API_PUBLICATION_PUBLISH = "api/publication/";
+export declare const API_PUBLICATION_STATUS = "/api/publication/status/";
+export declare const API_WEBSITE_READ = "api/website/";
+export declare const API_WEBSITE_WRITE = "api/website/";
+export declare const API_WEBSITE_DELETE = "api/website/";
+export declare const API_WEBSITE_LIST = "api/website/";
+export declare const API_WEBSITE_ASSETS_READ = "assets/:path";
+export declare const API_WEBSITE_ASSETS_WRITE = "assets/";

package/dist/client/css/admin.css

@@ -4042,20 +4042,27 @@ form.silex-form .silex-form__group.col2 {
   background-color: #444;
   z-index: 10;
   border-radius: 3px;
+  border: 2px solid rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
+}
+.silex-dialog-inline header {
   padding: 10px;
 }
 .silex-dialog-inline main {
   flex-grow: 1;
+  padding: 10px;
 }
 .silex-dialog-inline footer {
-  padding: 5px;
+  padding: 10px;
   text-align: right;
 }
 .silex-dialog-inline a {
   color: #7bc0ff;
 }
+.silex-dialog-inline header > * {
+  margin: 0;
+}
 
 #gjs {
   flex: 1 1 auto;
@@ -4119,6 +4126,82 @@ form.silex-form .silex-form__group.col2 {
   display: none;
 }
 
+/*
+*/
+.gjs-editor-cont .fa {
+  font-weight: 400;
+}
+
+.fa-square-o:before {
+  content: "\f0c8";
+}
+
+.fa-trash-o:before {
+  content: "\f1f8";
+}
+
+.fa-map-o:before {
+  content: "\f279";
+}
+
+.fa-youtube-play:before {
+  content: "\f04b";
+}
+
+/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
+.fa-chevron-right:before {
+  content: "\f054";
+}
+
+.fa-chevron-down:before {
+  content: "\f078";
+}
+
+.fa-cog:before {
+  font-weight: 900;
+}
+
+.fa-paint-brush:before {
+  font-weight: 900;
+}
+
+.fa-arrows-alt:before {
+  content: "\f065";
+  font-weight: 900;
+}
+
+.fa-caret-down:before {
+  content: "\f0d7";
+  font-weight: 900;
+}
+
+.fa-caret-right:before {
+  content: "\f0da";
+  font-weight: 900;
+}
+
+.fa-trash:before {
+  content: "\f2ed";
+  font-weight: 900;
+}
+
+.fa-list:before {
+  content: "\f03a";
+  font-weight: 900;
+}
+
+/*
+.fa-plus:before {
+	content: "+";
+  font-size: 35px;
+}
+.fa-diamond:before {
+  content: "\f3a5";
+}
+// .fa-plus {
+//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
+// }
+*/
 iframe.enable-squeeze.gjs-frame {
   transition: width 0.35s, height 0.35s, left 0.35s;
 }
@@ -4206,8 +4289,8 @@ iframe.enable-squeeze.silex-squeeze-left {
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button span {
   position: relative;
-  left: -6px;
-  top: 6px;
+  left: -2px;
+  top: -11px;
   font-weight: bolder;
   background-color: #444;
   border-radius: 100%;