Replace partials with html/react.html.erb

This commit is contained in:
0x1eef 2024-01-13 06:27:19 -03:00
parent 07530d194d
commit 765358b4aa
11 changed files with 27 additions and 34 deletions

View file

@ -2,9 +2,8 @@
## ##
# GET / # GET /
compile '/html/projects/index.html.erb' do compile '/html/react.html.erb', rep: "projects/index" do
layout "/default.*" filter(:erb, locals: {src: "/js/main/projects.js"})
filter(:erb)
write('/projects/index.html') write('/projects/index.html')
end end

View file

@ -2,9 +2,8 @@
## ##
# GET /tasks/new/ # GET /tasks/new/
compile '/html/tasks/new/index.html.erb' do compile '/html/react.html.erb', rep: "tasks/new" do
layout "/default.*" filter(:erb, locals: {src: "/js/main/task/new.js"})
filter(:erb)
write("/tasks/new/index.html") write("/tasks/new/index.html")
end end
@ -18,11 +17,9 @@ end
## ##
# GET / # GET /
# GET /tasks/ # GET /tasks/
compile("/html/tasks/index.html.erb") do compile("/html/react.html.erb", rep: "tasks/index") do
layout "/default.*" filter(:erb, locals: {src: "/js/main/tasks.js"})
filter(:erb)
write("/tasks/index.html") write("/tasks/index.html")
write("/index.html")
end end
## ##
@ -34,9 +31,8 @@ end
## ##
# GET /tasks/edit#id=X # GET /tasks/edit#id=X
compile("/html/tasks/edit/index.html.erb") do compile("/html/react.html.erb") do
layout "/default.*" filter(:erb, locals: {src: '/js/main/task/edit.js'})
filter(:erb)
write("/tasks/edit/index.html") write("/tasks/edit/index.html")
end end

View file

@ -0,0 +1,14 @@
@font-face {
font-family: "Noto Sans Regular";
src: url("/fonts/noto-sans-regular.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans Mono Regular";
src: url("/fonts/noto-sans-mono-regular.ttf") format("truetype");
}
@font-face {
font-family: "Noto Serif Regular";
src: url("/fonts/noto-serif-regular.ttf") format("truetype");
}

View file

@ -1,4 +0,0 @@
<div class='wrapper m-0-auto maxw-1024'>
<div class="react-mount projects"></div>
<script src="/js/main/projects.js"></script>
</div>

View file

@ -7,6 +7,7 @@
<link rel="icon" href="/favicon.svg"/> <link rel="icon" href="/favicon.svg"/>
</head> </head>
<body> <body>
<%= yield %> <div class="wrapper react-mount w-full"></div>
<script src="<%= src %>"></script>
</body> </body>
</html> </html>

View file

@ -1,4 +0,0 @@
<div class="wrapper w-full">
<div class="react-mount edit-task"></div>
<script src="/js/main/task/edit.js"></script>
</div>

View file

@ -1,4 +0,0 @@
<div class="wrapper w-full">
<div class="react-mount tasks"></div>
<script src="/js/main/tasks.js"></script>
</div>

View file

@ -1,4 +0,0 @@
<div class="wrapper w-full">
<div class="react-mount new-task"></div>
<script src="/js/main/task/new.js"></script>
</div>

View file

@ -2,7 +2,6 @@ import { ApolloProvider } from "@apollo/client";
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { Task as Component } from "/components/Task"; import { Task as Component } from "/components/Task";
import { Task } from "/types/schema";
import { ApolloClient, InMemoryCache } from "@apollo/client"; import { ApolloClient, InMemoryCache } from "@apollo/client";
(function () { (function () {
@ -16,7 +15,7 @@ import { ApolloClient, InMemoryCache } from "@apollo/client";
uri: "/servlet/graphql", uri: "/servlet/graphql",
cache: new InMemoryCache(), cache: new InMemoryCache(),
}); });
const root = document.querySelector(".react-mount.edit-task")!; const root = document.querySelector(".react-mount")!;
ReactDOM.createRoot(root).render( ReactDOM.createRoot(root).render(
<ApolloProvider client={client}> <ApolloProvider client={client}>
<Component taskId={Number(params.id)} /> <Component taskId={Number(params.id)} />

View file

@ -4,7 +4,7 @@ import { Task } from "/components/Task";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"; import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
(function () { (function () {
const root = document.querySelector(".react-mount.new-task")!; const root = document.querySelector(".react-mount")!;
const client = new ApolloClient({ const client = new ApolloClient({
uri: "/servlet/graphql", uri: "/servlet/graphql",
cache: new InMemoryCache(), cache: new InMemoryCache(),

View file

@ -4,7 +4,7 @@ import ReactDOM from "react-dom/client";
import { Tasks } from "/components/Tasks"; import { Tasks } from "/components/Tasks";
(function () { (function () {
const root = document.querySelector(".react-mount.tasks")!; const root = document.querySelector(".react-mount")!;
const client = new ApolloClient({ const client = new ApolloClient({
uri: "/servlet/graphql", uri: "/servlet/graphql",
cache: new InMemoryCache(), cache: new InMemoryCache(),