install: tailwind

update: favicon
rename: Procfile

Gemfile

@@ -14,8 +14,6 @@ gem "importmap-rails"
 gem "turbo-rails"
 # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
 gem "stimulus-rails"
-# Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
-gem "tailwindcss-rails"
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jbuilder"
 

Gemfile.lock

@@ -321,15 +321,6 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.2)
-    tailwindcss-rails (3.0.0)
-      railties (>= 7.0.0)
-      tailwindcss-ruby
-    tailwindcss-ruby (3.4.16)
-    tailwindcss-ruby (3.4.16-aarch64-linux)
-    tailwindcss-ruby (3.4.16-arm-linux)
-    tailwindcss-ruby (3.4.16-arm64-darwin)
-    tailwindcss-ruby (3.4.16-x86_64-darwin)
-    tailwindcss-ruby (3.4.16-x86_64-linux)
     thor (1.3.2)
     thruster (0.1.9)
     thruster (0.1.9-aarch64-linux)
@@ -404,7 +395,6 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1)
   stimulus-rails
-  tailwindcss-rails
   thruster
   turbo-rails
   tzinfo-data

Procfile

@@ -0,0 +1,2 @@
+web: bin/rails server
+vite: PORT=5173 bin/vite dev

app/assets/stylesheets/component.css

@@ -0,0 +1,5 @@
+@layer components {
+    .btn-primary {
+        @apply py-2 px-4 bg-blue-200 font-serif;
+    }
+}

app/assets/stylesheets/font.css

@@ -0,0 +1,82 @@
+/*Source Serif Pro*/
+@font-face {
+    font-family: 'SourceSerifPro';
+    src: url("https://fly.storage.tigris.dev/fonts/SourceSerifPro/SourceSerifPro-Regular.otf") format('opentype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SourceSerifPro';
+    src: url("https://fly.storage.tigris.dev/fonts/SourceSerifPro/SourceSerifPro-It.otf") format('opentype');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SourceSerifPro';
+    src: url("https://fly.storage.tigris.dev/fonts/SourceSerifPro/SourceSerifPro-Semibold.otf") format('opentype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'SourceSerifPro';
+    src: url("https://fly.storage.tigris.dev/fonts/SourceSerifPro/SourceSerifPro-SemiboldIt.otf") format('opentype');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+/*Inter*/
+@font-face {
+    font-family: 'Inter';
+    src: url('https://fly.storage.tigris.dev/fonts/Inter/Inter-VariableFont_wght.ttf') format('truetype');
+    font-weight: 100 900; /* Define the weight range for the variable font */
+    font-style: normal; /* Regular (non-italic) style */
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('https://fly.storage.tigris.dev/fonts/Inter/Inter-Italic-VariableFont_wght.ttf') format('truetype');
+    font-weight: 100 900; /* Same weight range */
+    font-style: italic; /* Italic style */
+    font-display: swap;
+}
+
+/* Jetbrains Mono */
+@font-face {
+    font-family: 'JetBrainsMono';
+    src: url("https://fly.storage.tigris.dev/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrainsMono';
+    src: url("https://fly.storage.tigris.dev/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf") format("truetype");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrainsMono';
+    src: url("https://fly.storage.tigris.dev/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrainsMono';
+    src: url("https://fly.storage.tigris.dev/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}

app/assets/stylesheets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/javascript/components/Hello.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<button class="btn-primary">Hello</button>
+</template>
+
+<style scoped>
+
+</style>

app/javascript/entrypoints/application.css

@@ -0,0 +1,3 @@
+@import "../../assets/stylesheets/tailwind.css";
+@import "../../assets/stylesheets/component.css";
+@import "../../assets/stylesheets/font.css";

app/javascript/entrypoints/application.js

@@ -1,28 +1,7 @@
-// To see this message, add the following to the `<head>` section in your
-// views/layouts/application.html.erb
-//
-//    <%= vite_client_tag %>
-//    <%= vite_javascript_tag 'application' %>
-console.log('Vite ⚡️ Rails')
-
-// If using a TypeScript entrypoint file:
-//     <%= vite_typescript_tag 'application' %>
-//
-// If you want to use .jsx or .tsx, add the extension:
-//     <%= vite_javascript_tag 'application.jsx' %>
+import {createApp} from "vue";
+import Hello from "../components/Hello.vue"
 
-console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
-
-// Example: Load Rails libraries in Vite.
-//
-// import * as Turbo from '@hotwired/turbo'
-// Turbo.start()
-//
-// import ActiveStorage from '@rails/activestorage'
-// ActiveStorage.start()
-//
-// // Import all channels.
-// const channels = import.meta.globEager('./**/*_channel.js')
+console.log('Vite ⚡️ Rails')
 
-// Example: Import a stylesheet in app/frontend/index.css
-// import '~/index.css'
+const app = createApp(Hello)
+app.mount(document.querySelector("#app"))

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= content_for(:title) || "Doc Roll" %></title>
+    <title><%= content_for(:title) || "docRoll" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
@@ -17,12 +17,9 @@
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
 
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
     <%= vite_client_tag %>
     <%= vite_javascript_tag 'application' %>
+    <%= vite_stylesheet_tag 'application' %>
     <!--
       If using a TypeScript entrypoint file:
         vite_typescript_tag 'application'

app/views/scripts/index.html.erb

@@ -3,7 +3,9 @@
     <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
   <% end %>
 
-  <% content_for :title, "Scripts" %>
+  <% content_for :title, "docRoll" %>
+
+  <div id="app"></div>
 
   <div class="flex justify-between items-center">
     <h1 class="font-bold text-4xl">Scripts</h1>

package.json

@@ -2,8 +2,14 @@
   "private": true,
   "type": "module",
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
     "vite": "^5.4.11",
     "vite-plugin-rails": "^0.5.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "vue": "^3.5.13"
+  }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./app/assets/stylesheets/**/*.css",
+        "./app/views/**/*.{html,html.erb,erb}",
+        "./app/javascript/components/**/*.vue",
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                serif: ["SourceSerifPro"],
+                sans: ["Inter"],
+                mono: ["JetBrainsMono"],
+            }
+        },
+    },
+    plugins: [],
+}

vite.config.ts

@@ -1,8 +1,10 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import ViteRails from 'vite-plugin-rails'
+import Vue from "@vitejs/plugin-vue"
 
 export default defineConfig({
-  plugins: [
-    ViteRails(),
-  ],
+    plugins: [
+        Vue(),
+        ViteRails(),
+    ],
 })