Update all the things! (#74)

* update actions/checkout to v4 * elixir 1.14.5 and erlang 25.3.2.8 * fix `Passing an atom to "for" in the form component is deprecated.` warnings * remove deprecated phoenix compiler https://github.com/phoenixframework/phoenix/blob/66e9aaa84aa4ba1c5c7713d039ed7fba937293e8/CHANGELOG.md * remove unused and unneeded deps * align with phx_new 1.6.16 surface.init 0.9.4 * align with phx_new 1.7.7 surface.init 0.11.1
surface-ui · Feb 8, 2024 · 24562d2 · 24562d2
1 parent 06d4410
commit 24562d2
Show file tree

Hide file tree

Showing 50 changed files with 1,560 additions and 834 deletions.
diff --git a/.formatter.exs b/.formatter.exs
@@ -1,6 +1,5 @@
 [
-  import_deps: [:phoenix, :surface, :ecto],
-  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
-  surface_inputs: ["{lib,test}/**/*.{ex,exs,sface}"],
-  subdirectories: []
+  import_deps: [:phoenix, :surface],
+  plugins: [Phoenix.LiveView.HTMLFormatter, Surface.Formatter.Plugin],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "{lib,test}/**/*.sface"]
 ]
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,31 +14,32 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - elixir: 1.12.0
-            otp: 24.0
-          - elixir: 1.13.4
-            otp: 24.0
-          - elixir: 1.13.4
-            otp: 25.0
-            check_formatted: true
-            warnings_as_errors: true
-          - elixir: 1.14.0
-            otp: 25.0
+          - elixir: '1.14.5'
+            otp: '25.3.2.8'
     env:
       MIX_ENV: test
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: erlef/setup-beam@v1
         with:
           otp-version: ${{matrix.otp}}
           elixir-version: ${{matrix.elixir}}
+      - name: Deps and _build cache
+        uses: actions/cache@v4
+        id: deps-cache
+        with:
+          path: |
+              deps
+              _build
+          key: ${{ runner.os }}-${{ runner.arch }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('mix.lock') }}
       - name: Install Dependencies
+        if: steps.deps-cache.outputs.cache-hit != 'true'
         run: |
           mix local.hex --force
           mix local.rebar --force
           mix deps.get --only test
+      - run: mix deps.compile
+        if: steps.deps-cache.outputs.cache-hit != 'true'
       - run: mix compile --warnings-as-errors
-        if: matrix.warnings_as_errors
       - run: mix format --check-formatted
-        if: matrix.check_formatted
       - run: mix test
diff --git a/.gitignore b/.gitignore
@@ -19,31 +19,24 @@ erl_crash.dump
 # Also ignore archive artifacts (built via "mix archive.build").
 *.ez
 
+# Temporary files, for example, from tests.
+/tmp/
+
 # Ignore package tarball (built via "mix hex.build").
 surface_site-*.tar
 
-# If NPM crashes, it generates a log, let's ignore it too.
-npm-debug.log
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
 
-# The directory NPM downloads your dependencies sources to.
-/assets/node_modules/
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
 
-# Since we are building assets from assets/,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-# /priv/static/
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
 
-# Ignore assets that are produced by build tools.
-/priv/static/assets/
+# Ignore generated js hook files for components
+assets/js/_hooks/
 
-# Files matching config/*.secret.exs pattern contain sensitive
-# data and you should not commit them into version control.
-#
-# Alternatively, you may comment the line below and commit the
-# secrets files as long as you replace their contents by environment
-# variables.
-/config/*.secret.exs
-
-# Ignore auto-generated hook files
-/assets/js/_hooks/
-/assets/css/_components.css
+# Ignore generated CSS file for components
+assets/css/_components.css
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1,2 @@
+erlang 25.3.2.8
+elixir 1.14.5-otp-25
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # Surface Site
+
 Documentation website for the [Surface](https://surface-ui.org/) project.
 
 ## Development
 
 To start your Phoenix server:
 
-  * Run `mix setup`
-  * Start Phoenix endpoint with `mix phx.server`
+* Run `mix setup`
+* Start Phoenix endpoint with `mix phx.server`
 
 Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -1,3 +1,13 @@
+/* Import scoped CSS rules for components
+@import "./_components.css";
+
+TODO: Tailwind
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+This file is for your main application CSS */
+
 body.mobile-sidebar-open {
   overflow: hidden;
   position: fixed;
@@ -30,6 +40,7 @@ code {
   margin-top: .2em;
   margin-bottom: .3em;
 }
+
 .menu-list li a {
   padding: .4em .75em;
 }
@@ -40,7 +51,7 @@ code {
   position: absolute;
   right: 0;
   top: 0;
-  background: hsla(0,0%,4%,.86);
+  background: hsla(0, 0%, 4%, .86);
   position: fixed;
   z-index: 40;
 }
@@ -64,7 +75,7 @@ code {
 
 .mobile-sidebar .sidebar-content {
   background-color: #f5f5f5;
-  box-shadow: 5px 0 13px 3px hsla(0,0%,4%,.1);
+  box-shadow: 5px 0 13px 3px hsla(0, 0%, 4%, .1);
   width: 260px;
   z-index: 41;
 }
@@ -121,7 +132,7 @@ code {
 
 .dark.card {
   border-radius: 10px;
-  box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
 }
 
 .dark.card > .card-content {
@@ -203,7 +214,7 @@ code {
   color: #7a7a7a;
 }
 
-#ComponentInfo_Markdown div.Example pre > code{
+#ComponentInfo_Markdown div.Example pre > code {
   line-height: 1.6;
 }
 
@@ -239,11 +250,12 @@ code {
 
 /* SurfaceSiteWeb.Components.ComponentAPI */
 
-.ComponentAPI table{
+.ComponentAPI table {
   font-size: .9rem;
 }
 
-.ComponentAPI .table td, .table th {
+.ComponentAPI .table td,
+.table th {
   line-height: 1.5;
 }
 
@@ -256,7 +268,7 @@ code {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
-  color: rgba(0,0,0,.7);
+  color: rgba(0, 0, 0, .7);
   margin: 2.25rem 0;
 }
 
@@ -416,31 +428,29 @@ pre > code[class*="language-"] .token.attr-value .token.punctuation.string {
 
 .markdown pre.line-numbers,
 pre[class*="language-"].line-numbers {
-	position: relative;
-	padding-left: 3.8em;
-	counter-reset: linenumber;
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
 }
 
 pre[class*="language-"].line-numbers > code {
-	position: relative;
-	white-space: inherit;
+  position: relative;
+  white-space: inherit;
 }
 
 .line-numbers .line-numbers-rows {
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	font-size: 100%;
-	left: -3.8em;
-	width: 3em; /* works for line-numbers below 1000 lines */
-	letter-spacing: -1px;
-	border-right: 1px solid #999;
-
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .line-numbers-rows > span {
@@ -459,76 +469,75 @@ pre[class*="language-"].line-numbers > code {
 /* Prism's line-highlight plugin */
 
 pre[data-line] {
-	position: relative;
-	padding: 1em 0 1em 3em;
+  position: relative;
+  padding: 1em 0 1em 3em;
 }
 
 .line-highlight {
-	position: absolute;
-	left: 0;
-	right: 0;
-	padding: inherit 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
   /* Same as .prism’s padding-top */
-	/* margin-top: 1em; */
-	margin-top: 0.85em;
-
-	background: hsla(24, 20%, 50%,.08);
-	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-
-	pointer-events: none;
-
-	line-height: inherit;
-	white-space: pre;
+  /* margin-top: 1em; */
+  margin-top: 0.85em;
+  background: hsla(24, 20%, 50%, .08);
+  background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
+  pointer-events: none;
+  line-height: inherit;
+  white-space: pre;
 }
 
 @media print {
-	.line-highlight {
-		/*
+  .line-highlight {
+    /*
 		 * This will prevent browsers from replacing the background color with white.
 		 * It's necessary because the element is layered on top of the displayed code.
 		 */
-		-webkit-print-color-adjust: exact;
-		color-adjust: exact;
-	}
-}
-
-	.line-highlight:before,
-	.line-highlight[data-end]:after {
-		content: attr(data-start);
-		position: absolute;
-		top: .4em;
-		left: .6em;
-		min-width: 1em;
-		padding: 0 .5em;
-		background-color: hsla(24, 20%, 50%,.4);
-		color: hsl(24, 20%, 95%);
-		font: bold 65%/1.5 sans-serif;
-		text-align: center;
-		vertical-align: .3em;
-		border-radius: 999px;
-		text-shadow: none;
-		box-shadow: 0 1px white;
-	}
-
-	.line-highlight[data-end]:after {
-		content: attr(data-end);
-		top: auto;
-		bottom: .4em;
-	}
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+  content: attr(data-start);
+  position: absolute;
+  top: .4em;
+  left: .6em;
+  min-width: 1em;
+  padding: 0 .5em;
+  background-color: hsla(24, 20%, 50%, .4);
+  color: hsl(24, 20%, 95%);
+  font: bold 65%/1.5 sans-serif;
+  text-align: center;
+  vertical-align: .3em;
+  border-radius: 999px;
+  text-shadow: none;
+  box-shadow: 0 1px white;
+}
+
+.line-highlight[data-end]:after {
+  content: attr(data-end);
+  top: auto;
+  bottom: .4em;
+}
 
 .line-numbers .line-highlight:before,
 .line-numbers .line-highlight:after {
-	content: none;
+  content: none;
 }
 
 pre[id].linkable-line-numbers span.line-numbers-rows {
-	pointer-events: all;
+  pointer-events: all;
 }
+
 pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
-	cursor: pointer;
+  cursor: pointer;
 }
+
 pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
-	background-color: rgba(128, 128, 128, .2);
+  background-color: rgba(128, 128, 128, .2);
 }
 
 pre.language-mermaid {
@@ -568,7 +577,7 @@ div#nprogress .bar .peg {
 
 /* Customize vsc-dark-plus theme */
 
-.token.slotable-name.class-name{
+.token.slotable-name.class-name {
   color: #9cdcfe;
 }