This commit is contained in:
jane 2022-04-01 21:16:05 -04:00
parent aa20cf0f0b
commit 1bf90caeec
17 changed files with 147 additions and 7 deletions

View file

@ -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

View file

@ -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)

View file

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

View file

@ -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>

View file

View file

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

View file

View file

@ -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']
}
});

View file

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

View file

@ -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>

View file

@ -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 %>

View file

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

View file

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

View file

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

View file

@ -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.

View file

@ -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

View file

@ -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 = [];