die

Gemfile

@@ -13,6 +13,8 @@ gem 'puma', '~> 5.0'
 gem 'sass-rails', '>= 6'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
 gem 'webpacker', '~> 5.0'
+# Svelte interop
+gem 'svelte-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

Gemfile.lock

@@ -80,6 +80,7 @@ GEM
     concurrent-ruby (1.1.9)
     crass (1.0.6)
     erubi (1.10.0)
+    execjs (2.8.1)
     ffi (1.15.4)
     globalid (1.0.0)
       activesupport (>= 5.0)
@@ -174,6 +175,9 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
+    svelte-rails (0.3.4)
+      execjs
+      railties (>= 5.2)
     thor (1.1.0)
     tilt (2.0.10)
     turbolinks (5.2.1)
@@ -218,6 +222,7 @@ DEPENDENCIES
   selenium-webdriver
   spring
   sqlite3 (~> 1.4)
+  svelte-rails
   turbolinks (~> 5)
   tzinfo-data
   web-console (>= 4.1.0)

app/controllers/svelte_controller.rb

@@ -0,0 +1,4 @@
+class SvelteController < ApplicationController
+    def index
+    end
+end

app/javascript/app.svelte

@@ -1,11 +1,19 @@
 <script>
-  export let name;
+  export let names;
 </script>
 
+<div width="100%" height="100%">
+  <div align="center">
+    <h1>jane {names[Math.floor(Math.random() * names.length)]} petrovna</h1>
+    <h2>jane#0009</h2>
+  </div>
+</div>
+
 <style>
   h1 {
-    color: #FF3E00;
+    color: #75004a;
+  }
+  h2 {
+    color: #753dad;
   }
 </style>
-
-<h1>Hello {name}!</h1>

app/javascript/packs/friends.js

@@ -0,0 +1,10 @@
+import App from '../friends.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+  });
+
+  window.app = app;
+})
+

app/javascript/packs/home.js

@@ -11,7 +11,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const app = new App({
     target: document.body,
     props: {
-      name: 'Svelte'
+      names: ['sunset', 'luna', 'bonnibel', 'marceline', 'artemis', 
+    'diana', 'constanze', 'twilight', 'bianca', 'dawn', 'rosa', 'akemi',
+  'glimmer']
     }
   });
 

app/javascript/packs/portfolio.js

@@ -0,0 +1,10 @@
+import App from '../portfolio.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+  });
+
+  window.app = app;
+})
+

app/javascript/portfolio.svelte

@@ -0,0 +1,67 @@
+ <script>
+     let type = 'tech';
+     let switchPortfolio = () => {
+         type = (
+             type === 'tech' ?
+             'arts' : 'tech'
+         );
+     };
+ </script> 
+  <div width="100%" height="100%">
+      <div id='center'>
+        <button on:click={switchPortfolio}>switch to {type === 'tech' ? 'arts' : 'tech'} portfolio</button>
+      <ul>
+          {#if type === 'tech'}
+          <li><h1><a href="https://github.com/janeptrv">github</a></h1></li>
+          <li><h1><a href="https://gitlab.com/janeptrv">gitlab</a></h1></li>
+          <li><h1><a href="https://gitdab.com/jane">gitdab</a></h1></li>
+          <br/>
+          <li><h1><a href='https://gitdab.com/jane/pinbot'>democratic discord pins bot</a></h1></li>
+          <br/>
+          <li><h1><a href='https://gitdab.com/jane/leds'>ws2812b pi controller</a></h1></li>
+          <li><h1><a href='https://gitdab.com/jane/led-bot'>ws2812b discord bot interface</a></h1></li>
+          <br/>
+          <li><h1><a href='https://gitdab.com/jane/lastfm-wrapped'>last.fm statistics scraper</a></h1></li>
+          <br/>
+          <li><h1><a href='https://gitdab.com/makise'>public miscellaneous projects</a></h1></li>
+          {/if}
+          {#if type === 'arts'}
+          <li><h1>tbd</h1></li>
+          {/if}
+      </ul>
+    </div>
+  </div>
+  
+  <style>
+    h1 {
+        font-size: 1.5em;
+        color: #75004a;
+    }
+    a {
+      color: #75004a;
+    }
+    li::marker {
+      color: #753dad;
+    }
+    #center {
+        position: absolute; 
+        top: 50%; 
+        left: 50%; 
+        margin-top: -300px; 
+        margin-left: -200px;
+        width: 400px;
+        height: 200px;
+    }
+    li {
+        text-align: center;
+        width: auto;
+    }
+    button {
+        background-color: #201020;
+        border: none;
+        text-align: center;
+        color: #fff;
+        width: inherit;
+    }
+  </style>
+  

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html style='background-color: #101010;'>
   <head>
-    <title>J4pm</title>
+    <title>j4.pm</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>

app/views/svelte/friends.html.erb

@@ -0,0 +1 @@
+<%= javascript_pack_tag 'friends' %>

app/views/svelte/index.html.erb

@@ -0,0 +1,3 @@
+<%= javascript_pack_tag 'home' %>
+<!--THOUGHTS: spell system to navigate between pages-->
+<!--THOUGHTS: rng star field background-->

app/views/svelte/portfolio.html.erb

@@ -0,0 +1 @@
+<%= javascript_pack_tag 'portfolio' %>

config/environments/development.rb

@@ -3,6 +3,8 @@ require "active_support/core_ext/integer/time"
 Rails.application.configure do
   # Settings specified here will take precedence over those in config/application.rb.
 
+  config.hosts << "dev.j4.pm"
+
   # In the development environment your application's code is reloaded any time
   # it changes. This slows down response time but is perfect for development
   # since you don't have to restart the web server when you make code changes.

config/routes.rb

@@ -1,3 +1,7 @@
 Rails.application.routes.draw do
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+  
+  get '/portfolio', to: 'svelte#portfolio'
+  get '/friends', to: 'svelte#friends'
+  root 'svelte#index'
 end

gemset.nix

@@ -231,6 +231,16 @@
     };
     version = "1.10.0";
   };
+  execjs = {
+    groups = ["default"];
+    platforms = [];
+    source = {
+      remotes = ["https://rubygems.org"];
+      sha256 = "121h6af4i6wr3wxvv84y53jcyw2sk71j5wsncm6wq6yqrwcrk4vd";
+      type = "gem";
+    };
+    version = "2.8.1";
+  };
   ffi = {
     groups = ["default" "development"];
     platforms = [];
@@ -673,6 +683,17 @@
     };
     version = "1.4.2";
   };
+  svelte-rails = {
+    dependencies = ["execjs" "railties"];
+    groups = ["default"];
+    platforms = [];
+    source = {
+      remotes = ["https://rubygems.org"];
+      sha256 = "0lcvvx0nd0ya7l6xxa8j40bl6x13qrzwisclckr0i2a6vcf4r1c1";
+      type = "gem";
+    };
+    version = "0.3.4";
+  };
   thor = {
     groups = ["default" "development"];
     platforms = [];