Skip to content

Comments

DRAFT: Update root.sfce for newer Phoenix templates#773

Open
bailey-coding wants to merge 1 commit intosurface-ui:mainfrom
bailey-coding:patch-1
Open

DRAFT: Update root.sfce for newer Phoenix templates#773
bailey-coding wants to merge 1 commit intosurface-ui:mainfrom
bailey-coding:patch-1

Conversation

@bailey-coding
Copy link

See diff below

git diff --cached -- lib/myapp_web/components/layouts/root.html.heex lib/myapp_web/components/layouts/root.sface
diff --git a/myapp/lib/myapp_web/components/layouts/root.html.heex b/myapp/lib/myapp_web/components/layouts/root.html.heex
deleted file mode 100644
index ab9a72b..0000000
--- a/myapp/lib/myapp_web/components/layouts/root.html.heex
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title default="MyApp" suffix=" · Phoenix Framework">
-      {assigns[:page_title]}
-    </.live_title>
-    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
-    </script>
-    <script>
-      (() => {
-        const setTheme = (theme) => {
-          if (theme === "system") {
-            localStorage.removeItem("phx:theme");
-            document.documentElement.removeAttribute("data-theme");
-          } else {
-            localStorage.setItem("phx:theme", theme);
-            document.documentElement.setAttribute("data-theme", theme);
-          }
-        };
-        if (!document.documentElement.hasAttribute("data-theme")) {
-          setTheme(localStorage.getItem("phx:theme") || "system");
-        }
-        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
-
-        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
-      })();
-    </script>
-  </head>
-  <body>
-    {@inner_content}
-  </body>
-</html>
diff --git a/myapp/lib/myapp_web/components/layouts/root.sface b/myapp/lib/myapp_web/components/layouts/root.sface
new file mode 100644
index 0000000..4f39c41
--- /dev/null
+++ b/myapp/lib/myapp_web/components/layouts/root.sface
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title suffix=" · Phoenix Framework">
+      {assigns[:page_title] || "MyAppWeb"}
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body class="bg-white antialiased">
+    {@inner_content}
+  </body>
+</html>

See diff below

```
git diff --cached -- lib/arw_web/components/layouts/root.html.heex lib/arw_web/components/layouts/root.sface | sed -e 's@arw@myapp@g' -e 's@Arw@MyApp@g'
diff --git a/myapp/lib/myapp_web/components/layouts/root.html.heex b/myapp/lib/myapp_web/components/layouts/root.html.heex
deleted file mode 100644
index ab9a72b..0000000
--- a/myapp/lib/myapp_web/components/layouts/root.html.heex
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title default="MyApp" suffix=" · Phoenix Framework">
-      {assigns[:page_title]}
-    </.live_title>
-    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
-    </script>
-    <script>
-      (() => {
-        const setTheme = (theme) => {
-          if (theme === "system") {
-            localStorage.removeItem("phx:theme");
-            document.documentElement.removeAttribute("data-theme");
-          } else {
-            localStorage.setItem("phx:theme", theme);
-            document.documentElement.setAttribute("data-theme", theme);
-          }
-        };
-        if (!document.documentElement.hasAttribute("data-theme")) {
-          setTheme(localStorage.getItem("phx:theme") || "system");
-        }
-        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
-
-        window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));
-      })();
-    </script>
-  </head>
-  <body>
-    {@inner_content}
-  </body>
-</html>
diff --git a/myapp/lib/myapp_web/components/layouts/root.sface b/myapp/lib/myapp_web/components/layouts/root.sface
new file mode 100644
index 0000000..4f39c41
--- /dev/null
+++ b/myapp/lib/myapp_web/components/layouts/root.sface
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title suffix=" · Phoenix Framework">
+      {assigns[:page_title] || "MyAppWeb"}
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body class="bg-white antialiased">
+    {@inner_content}
+  </body>
+</html>
```
@bailey-coding
Copy link
Author

I can create a simpler test case with a fresh phoenix install and a fresh surface.init, if this seems legitimate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant