- fixed docker setup

- fixed classic editor - added community material icons - fixed elementor icons [third-party]
fatihbalsoy · Dec 24, 2023 · 92fc3e2 · 92fc3e2
1 parent 20fc76f
commit 92fc3e2
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 59 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+MYSQL_DATABASE=wordpress
+MYSQL_USER=wp_user
+MYSQL_PASSWORD=wp_password
+MYSQL_ROOT_PASSWORD=root_password
diff --git a/.readme/lang/README.tr.md b/.readme/lang/README.tr.md
@@ -1,4 +1,3 @@
-
 <!-- BU DOSYA OTOMATİK OLARAK OLUŞTURULMUŞTUR. LÜTFEN `.readme/lang/README.base.md` DOSYASINI DÜZENLEYİN VE `npm run mmg` KOMUTUNU ÇALIŞTIRIN. -->
 
 # ![Material Board](/.readme/banner.png?raw=true  "Material Board")
@@ -86,4 +85,4 @@ Bu proje aşağıdaki üçüncü taraf kaynaklara bağımlıdır:
 * Roboto Yazı Tipi, [Apache License 2.0](https://github.com/googlefonts/roboto/blob/master/LICENSE).
 * Resmi Material Design İkonları, [Apache License 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE).
 * Topluluk Material Design İkonları, [SIL Open Font License 1.1](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).
-* TinyColor, [MIT License](https://github.com/bgrins/TinyColor/blob/master/LICENSE).
+* TinyColor, [MIT License](https://github.com/bgrins/TinyColor/blob/master/LICENSE).
diff --git a/.readme/lang/SETUP.base.md b/.readme/lang/SETUP.base.md
@@ -74,7 +74,7 @@ Windows kullanıcıları, Ubuntu için uyarlanmış adımları takip etme üzere
 - Run the local server at localhost:* (WordPress Playground) using WebAssembly and SQLite
   - `npm run dev:wasm`
   - (creates wp environment at ~/.wp-now)
-- Run the local server at localhost:8000 (WordPress) and localhost:8080 (phpMyAdmin) using Docker
+- Run the local server at localhost:8080 (WordPress) and localhost:8081 (phpMyAdmin) using Docker
   - `npm run dev:docker`
 - Watch & compile source code without hosting a WordPress server
   - `npm run dev`
@@ -93,7 +93,7 @@ Windows kullanıcıları, Ubuntu için uyarlanmış adımları takip etme üzere
 - WebAssembly ve SQLite kullanarak yerel sunucuyu localhost:* (WordPress Playground) üzerinde çalıştırın
   - `npm run dev:wasm`
   - (~/.wp-now altında wp ortamını oluşturur)
-- Docker kullanarak yerel sunucuyu localhost:8000 (WordPress) ve localhost:8080 (phpMyAdmin) üzerinde çalıştırın
+- Docker kullanarak yerel sunucuyu localhost:8080 (WordPress) ve localhost:8081 (phpMyAdmin) üzerinde çalıştırın
   - `npm run dev:docker`
 - WordPress sunucusu barındırmadan kaynak kodunu izle ve derle
   - `npm run dev`
@@ -133,3 +133,20 @@ Password: `password`
 Kullanıcı adı: `admin`
 
 Şifre: `password`
+
+<!-- [common] -->
+## phpMyAdmin (Docker)
+
+<!-- [en] -->
+### Default Credentials
+
+Username: `wp_user`
+
+Password: `wp_password`
+
+<!-- [tr] -->
+### Varsayılan Kimlik Bilgileri
+
+Kullanıcı adı: `wp_user`
+
+Şifre: `wp_password`
diff --git a/.readme/lang/SETUP.tr.md b/.readme/lang/SETUP.tr.md
@@ -1,4 +1,3 @@
-
 <!-- BU DOSYA OTOMATİK OLARAK OLUŞTURULMUŞTUR. LÜTFEN `.readme/lang/SETUP.base.md` DOSYASINI DÜZENLEYİN VE `npm run mmg` KOMUTUNU ÇALIŞTIRIN. -->
 
 # Geliştirici Ortamını Kur
@@ -33,7 +32,7 @@ Windows kullanıcıları, Ubuntu için uyarlanmış adımları takip etme üzere
 - WebAssembly ve SQLite kullanarak yerel sunucuyu localhost:* (WordPress Playground) üzerinde çalıştırın
   - `npm run dev:wasm`
   - (~/.wp-now altında wp ortamını oluşturur)
-- Docker kullanarak yerel sunucuyu localhost:8000 (WordPress) ve localhost:8080 (phpMyAdmin) üzerinde çalıştırın
+- Docker kullanarak yerel sunucuyu localhost:8080 (WordPress) ve localhost:8081 (phpMyAdmin) üzerinde çalıştırın
   - `npm run dev:docker`
 - WordPress sunucusu barındırmadan kaynak kodunu izle ve derle
   - `npm run dev`
@@ -58,4 +57,12 @@ wp-now start --path=build/ --wp=6.3 --php=8.0
 
 Kullanıcı adı: `admin`
 
-Şifre: `password`
+Şifre: `password`
+
+## phpMyAdmin (Docker)
+
+### Varsayılan Kimlik Bilgileri
+
+Kullanıcı adı: `wp_user`
+
+Şifre: `wp_password`
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-
 <!-- THIS FILE IS AUTO-GENERATED. PLEASE EDIT `.readme/lang/README.base.md` AND RUN `npm run mmg`. -->
 
 # ![Material Board](/.readme/banner.png?raw=true  "Material Board")
@@ -87,3 +86,4 @@ This project depends on the following third-parties:
 * Official Material Design Icons, [Apache License 2.0](https://github.com/google/material-design-icons/blob/master/LICENSE).
 * Community Material Design Icons, [SIL Open Font License 1.1](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).
 * TinyColor, [MIT License](https://github.com/bgrins/TinyColor/blob/master/LICENSE).
+
diff --git a/SETUP.md b/SETUP.md
@@ -1,4 +1,3 @@
-
 <!-- THIS FILE IS AUTO-GENERATED. PLEASE EDIT `.readme/lang/SETUP.base.md` AND RUN `npm run mmg`. -->
 
 # Setup Developer Environment
@@ -31,7 +30,7 @@ Windows users must setup Windows Subsystem for Linux to follow the steps tailore
 - Run the local server at localhost:* (WordPress Playground) using WebAssembly and SQLite
   - `npm run dev:wasm`
   - (creates wp environment at ~/.wp-now)
-- Run the local server at localhost:8000 (WordPress) and localhost:8080 (phpMyAdmin) using Docker
+- Run the local server at localhost:8080 (WordPress) and localhost:8081 (phpMyAdmin) using Docker
   - `npm run dev:docker`
 - Watch & compile source code without hosting a WordPress server
   - `npm run dev`
@@ -57,3 +56,12 @@ wp-now start --path=build/ --wp=6.3 --php=8.0
 Username: `admin`
 
 Password: `password`
+
+## phpMyAdmin (Docker)
+
+### Default Credentials
+
+Username: `wp_user`
+
+Password: `wp_password`
+
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -11,64 +11,73 @@
 # STOP: docker-compose down
 # DELETE: docker-compose down --volumes
 
-version: '3'
-
-networks:
-  wpsite:
-
-    # persistent volumes
-volumes:
-  db_data:
-
+# https://gist.github.com/erikyuzwa/7411752ddcb95b09434aa88f38d91630
+version: "3.8"
 
 services:
-  # Database
-  db:
-    image: mysql:latest
+
+  database:
+    # We use a mariadb image which supports both amd64 & arm64 architecture
+    image: mariadb:10.6.4-focal
+    restart: unless-stopped
+    ports:
+      - 3306:3306
+    env_file: .env
+    environment:
+      MYSQL_ROOT_PASSWORD: '${MYSQL_ROOT_PASSWORD}'
+      MYSQL_DATABASE: '${MYSQL_DATABASE}'
+      MYSQL_USER: '${MYSQL_USER}'
+      MYSQL_PASSWORD: '${MYSQL_PASSWORD}'
     volumes:
       - ./volumes/db_data:/var/lib/mysql
-    restart: always
-    environment:
-      MYSQL_ROOT_PASSWORD: password
-      MYSQL_DATABASE: wordpress
-      MYSQL_USER: wordpress
-      MYSQL_PASSWORD: wordpress
     networks:
-      - wpsite
-  # phpmyadmin
+      - wordpress-network
+    deploy:
+      resources:
+        limits:
+          memory: 2048m
+
   phpmyadmin:
     depends_on:
-      - db
-    image: phpmyadmin:latest
-    restart: always
+      - database
+    image: phpmyadmin/phpmyadmin
+    restart: unless-stopped
     ports:
-      - '8080:80'
+      - 8081:80
+    env_file: .env
     environment:
-      PMA_HOST: db
-      MYSQL_ROOT_PASSWORD: password
+      PMA_HOST: database
+      MYSQL_ROOT_PASSWORD: '${MYSQL_ROOT_PASSWORD}'
     networks:
-      - wpsite
-  # Wordpress
+      - wordpress-network
+
   wordpress:
     depends_on:
-      - db
-    image: wordpress:latest
+      - database
+    image: wordpress:6.4.2-apache
+    restart: unless-stopped
     ports:
-      - '8000:80'
-    restart: always
+      - 8080:80
+    env_file: .env
+    environment:
+      WORDPRESS_DB_HOST: database:3306 # use the same name as database service
+      WORDPRESS_DB_NAME: '${MYSQL_DATABASE}'
+      WORDPRESS_DB_USER: '${MYSQL_USER}'
+      WORDPRESS_DB_PASSWORD: '${MYSQL_PASSWORD}'
     volumes:
+      # - ./wp-content:/var/www/html/wp-content
+      #       - '8000:80'
       # persistent local data
-      - ./build/.:/var/www/html/wp-content/plugins/material-board:cached
+      - ./build/material-board/.:/var/www/html/wp-content/plugins/material-board:cached
       # other data
       - ./volumes/wordpress:/var/www/html
       - ./volumes/plugins:/var/www/html/wp-content/plugins
-    environment:
-      # local dev environment
-      WORDPRESS_DEBUG: 1
-      DEVELOPMENT: 1
-      # docker wp config settings
-      WORDPRESS_DB_HOST: db:3306
-      WORDPRESS_DB_USER: admin
-      WORDPRESS_DB_PASSWORD: password
     networks:
-      - wpsite
+      - wordpress-network
+
+volumes:
+  db-data:
+
+networks:
+  wordpress-network:
+    driver: bridge  
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,4 +29,4 @@
     "typescript": "^5.0.4",
     "uglify-js": "^3.17.4"
   }
-}
+}
diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss
@@ -21,6 +21,12 @@
 // Community Material Icons - Apache License 2.0
 // Image: docs/images/fonts/material_icons_community.png
 // @import url(https://cdn.materialdesignicons.com/7.2.96/css/materialdesignicons.min.css);
+@font-face {
+    font-family: 'Community Material Icons';
+    src:
+        url($mdi-font-url) format('woff2 supports variations'),
+        url($mdi-font-url) format('woff2-variations');
+}
 
 // Colophon Foundry, DM Serif Display - SIL Open Font License 1.1
 // Image: docs/images/fonts/dm_serif_display.png

diff --git a/src/styles/icons/buddicons.css b/src/styles/icons/buddicons.css
@@ -6,6 +6,11 @@
  *   Copyright © 2023 Fatih Balsoy. All rights reserved.
  */
 
+/* buddpress logo */
+.dashicons-buddicons-buddypress-logo:before {
+    font-family: 'dashicons' !important;
+}
+
 /* forums */
 #adminmenu #menu-posts-forum .wp-menu-image::before, 
 #dashboard_right_now a.bbp-glance-forums::before, 
@@ -26,4 +31,17 @@ th .bbp_topics_column::before {
 #dashboard_right_now a.bbp-glance-replies::before, 
 th .bbp_replies_column::before {
     content: 'emoji_nature' !important;
+}
+
+/* users */
+#dashboard_right_now a.bbp-glance-users::before {
+    content: 'person' !important;
+}
+
+/* activity */
+#adminmenu #toplevel_page_bp-activity .wp-menu-image:before, 
+#adminmenu #toplevel_page_bp-activity_network .wp-menu-image:before, 
+#adminmenu #toplevel_page_bp-activity_user .wp-menu-image:before {
+    font-family: 'Community Material Icons' !important;
+    content: '\F07C2' !important;
 }
diff --git a/src/styles/icons/material-icons.css b/src/styles/icons/material-icons.css
@@ -28,9 +28,12 @@
 @import url(welcome-screen.css);
 @import url(widgets.css);
 @import url(wordpress-org.css);
+@import url(third-party.css);
 
+/* TODO: Should only affect elements that use the dashicons font */
 .dashicons,
 .dashicons-before:before,
+/* .dashicons-before:before[font-family="dashicons"], */
 /* .dashicons-before:before[style*="font-family: dashicons"], */
 /* .dashicons-before:before font[face="dashicons"], */
 .mce-ico, .wp-media-buttons .add_media span.wp-media-buttons-icon:before,
@@ -247,4 +250,13 @@ li.toplevel_page_et_divi_options div.wp-menu-image:before,
 	#et_search_icon:before{
 	    top: 6px !important;
 	}
+}
+
+/* WordPress 6.4.2 Welcome Panel - Pencil Icon */
+/* path[d="M32.0668 17.0854L28.8221 13.9454L18.2008 24.671L16.8983 29.0827L21.4257 27.8309L32.0668 17.0854ZM16 32.75H24V31.25H16V32.75Z"] {
+    d: path("M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z");
+} */
+
+.welcome-panel .welcome-panel-close:before {
+    font-size: 20px;
 }
diff --git a/src/styles/icons/third-party.css b/src/styles/icons/third-party.css
@@ -0,0 +1,21 @@
+/*
+ *   third-party.css
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 24 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+ */
+
+/* TODO: Should only affect elements that use the dashicons font */
+
+/*? ELEMENTOR ?*/
+
+/* Elementor Icon */
+#adminmenu #toplevel_page_elementor div.wp-menu-image:before {
+    font-family: eicons !important;
+}
+
+/* Folder */
+#adminmenu #menu-posts-elementor_library .wp-menu-image:before {
+    content: 'folder' !important;
+}
diff --git a/src/styles/shared.css b/src/styles/shared.css
@@ -84,6 +84,7 @@
     /* adminbar popup menu */
     --br-100pc: 100%;
     --br-100px: 100px;
+    --br-10px-top: 10px 10px 0px 0px;
     --br-10px-bottom: 0px 0px 10px 10px;
     --br-10px-right: 0px 10px 10px 0px;
     --br-10px: 10px;

diff --git a/src/styles/utilities/_variables.scss b/src/styles/utilities/_variables.scss
@@ -40,6 +40,9 @@ $hubot-sans-path: '../assets/fonts/hubot-sans.woff2';
 /// @type String
 $dm-serif-display-path: '../assets/fonts/dm-serif-display.woff2';
 $dm-serif-display-ext-path: '../assets/fonts/dm-serif-display-ext.woff2';
+/// Community Material Icons URL
+/// @type String
+$mdi-font-url: 'https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/fonts/materialdesignicons-webfont.woff2';
 
 /*  
     TODO: Define by dp's

diff --git a/src/styles/wp-admin.scss b/src/styles/wp-admin.scss
@@ -284,13 +284,19 @@ table.widefat {
 }
 
 .wp-editor-wrap .wp-editor-tools {
-    margin-top: 10px;
     background-color: var(--primary-color) !important;
-    padding-right: 10px;
-    padding-left: 10px;
+    padding-bottom: 1.5px;
     border-radius: var(--br-10px-top);
 }
 
+.wp-media-buttons {
+    padding-left: 10px;
+}
+
+.wp-editor-tabs {
+    padding-right: 10px;
+}
+
 .wp-editor-wrap .wp-switch-editor {
     border: none;
     margin-bottom: -2px;