Start rewriting with Phlexite
This commit is contained in:
Aleks Rūtiņš
parent
e063e315ed
commit
f464d585cc
30 changed files with 486 additions and 921 deletions
56
views/base_layout.rb
Normal file
56
views/base_layout.rb
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module BC
|
||||
module Views
|
||||
class BaseLayout < ::Phlex::HTML
|
||||
def initialize(title)
|
||||
@title = title
|
||||
end
|
||||
|
||||
def view_template
|
||||
doctype
|
||||
html do
|
||||
head do
|
||||
meta charset: 'utf-8'
|
||||
meta name: 'viewport', content: 'width=device-width, initial-scale=1.0'
|
||||
title { @title + " | Biocircuits for Mere Mortals" }
|
||||
|
||||
link rel: 'stylesheet', href: '/assets/site.css'
|
||||
|
||||
link rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css", integrity: "sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww", crossorigin: "anonymous"
|
||||
script defer: true, src: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js", integrity: "sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd", crossorigin: "anonymous"
|
||||
script defer: true, src: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/mhchem.min.js", integrity: "sha384-ifpG+NlgMq0kvOSGqGQxW1mJKpjjMDmZdpKGq3tbvD3WPhyshCEEYClriK/wRVU0", crossorigin: "anonymous"
|
||||
script defer: true, src: "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js", integrity: "sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk", crossorigin: "anonymous"
|
||||
|
||||
script src: "/assets/math.js"
|
||||
|
||||
script src: "https://unpkg.com/function-plot/dist/function-plot.js"
|
||||
end
|
||||
|
||||
body do
|
||||
div class: "app" do
|
||||
main do
|
||||
yield
|
||||
footer do
|
||||
p do
|
||||
span { "© 2024" }
|
||||
a(href: "https://farthergate.com") { "Aleks Rūtiņš" }
|
||||
end
|
||||
|
||||
unsafe_raw {
|
||||
<<EOF
|
||||
<p>Built with <a href="https://cheetah.farthergate.com">Cheetah</a>, <a href="https://mauriciopoppe.github.io/function-plot/">Function Plot</a>, and <a href="https://katex.org/">$\KaTeX$</a></p>
|
||||
<p>
|
||||
With the exception of pasted graphics, where the source is noted, this work is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution License CC BY-NC-SA 4.0</a>. All code contained herein is licensed under an <a href="https://opensource.org/license/mit">MIT license</a>.
|
||||
</p>
|
||||
EOF
|
||||
}
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
20
views/nav_links.rb
Normal file
20
views/nav_links.rb
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module BC
|
||||
module Views
|
||||
class NavLinks
|
||||
def initialize(back, fwd)
|
||||
@back = back
|
||||
@fwd = fwd
|
||||
end
|
||||
|
||||
def view_template
|
||||
nav class: 'nav-links' do
|
||||
@back ? a(href: @back) { "BACK" } : div
|
||||
a(href: "/") { "HOME" }
|
||||
@fwd ? a(href: @fwd) { "NEXT" } : div
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
28
views/page_layout.rb
Normal file
28
views/page_layout.rb
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module BC
|
||||
module Views
|
||||
class PageLayout < ::Phlex::HTML
|
||||
def initialize(title, back, fwd)
|
||||
@title = title
|
||||
@back = back
|
||||
@fwd = fwd
|
||||
end
|
||||
def view_template
|
||||
render(BaseLayout.new(@title)) do
|
||||
p
|
||||
|
||||
p do
|
||||
render(NavLinks.new(@back, @fwd))
|
||||
end
|
||||
|
||||
yield
|
||||
|
||||
p do
|
||||
render(NavLinks.new(@back, @fwd))
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
77
views/pages/index.rb
Normal file
77
views/pages/index.rb
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module BC
|
||||
module Views
|
||||
module Pages
|
||||
class Index < ::Phlex::HTML
|
||||
def sections = {
|
||||
"1. Concepts of Biocircuits" => "/concepts",
|
||||
"2. The Simplest Circuit" => "/simplest-circuit",
|
||||
"3. Repressors & Leaks" => "/repressors",
|
||||
"4. Activators" => "/activators",
|
||||
"5. Ultrasensitivity & the Hill Function" => "/hill-functions",
|
||||
"6. Choosing Between Activators & Repressors" => "/activators-vs-repressors"
|
||||
}
|
||||
|
||||
def view_template
|
||||
render(::BC::Views::BaseLayout.new("Home")) do
|
||||
section do
|
||||
h1 class: "welcome" do
|
||||
img src: "/assets/biocircuitslogo.svg", alt: "Biological Circuits"
|
||||
end
|
||||
|
||||
p(class: "tagline") { "for mere mortals" }
|
||||
p(class: "tagline") { "(albeit ones who know a bit of differential calculus)" }
|
||||
|
||||
p do
|
||||
strong do
|
||||
span { "DISCLAIMER: This is a school project. I would like to think that the CalTech course I've drawn from has made me somewhat knowledgeable on this topic, but please do not use this for medical advice, etc., etc. If you happen to know what you are doing, and you find a mistake on this website, please " }
|
||||
a(href: "https://github.com/aleksrutins/biocircuits/issues/new") { "tell me about it." }
|
||||
span { " With that said:" }
|
||||
end
|
||||
end
|
||||
|
||||
unsafe_raw(
|
||||
<<EOF
|
||||
<p class="fade">
|
||||
Biological circuit design is the science of abstracting <em>natural</em> biological processes by defining them
|
||||
as you would any synthetic circuit. It also allows us to create our own circuits out of natural components.
|
||||
As <a href="https://biocircuits.github.io">CalTech's open-source Biocircuits course</a> states:
|
||||
</p>
|
||||
|
||||
<blockquote class="fade fade2">
|
||||
Indeed, the marvelous progression of electronic circuit capabilities [...] could well describe biological circuits decades from now. Like electronics, we may will soon be able to program cellular “miracle devices” to create “little gadgets” that address serious environmental and medical applications.
|
||||
</blockquote>
|
||||
|
||||
<p class="fade fade3">That CalTech course will be the main source for this presentation. All diagrams are from it.</p>
|
||||
|
||||
<p class="fade fade4">Let's dive in!</p>
|
||||
EOF
|
||||
)
|
||||
|
||||
div class: "fade fade5" do
|
||||
sections.each { |title, link|
|
||||
render(SectionLink.new(link)) { title }
|
||||
}
|
||||
div class: "under-construction" do
|
||||
"More Sections To Come"
|
||||
end
|
||||
end
|
||||
|
||||
script {
|
||||
"
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
if(localStorage.getItem('faded'))
|
||||
document.querySelectorAll('.fade').forEach(it =>
|
||||
it.classList.add('no-delay'));
|
||||
localStorage.setItem('faded', true);
|
||||
});
|
||||
"
|
||||
}
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
29
views/section_link.rb
Normal file
29
views/section_link.rb
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module BC
|
||||
module Views
|
||||
class ChevronRightIcon < Phlex::SVG
|
||||
def view_template
|
||||
svg xmlns: 'http://www.w3.org/2000/svg', height: 24, width: 24, fill: "none", viewBox: "0 0 24 24 24", stroke_width: 1.5, stroke: "currentColor", class: "size-6" do
|
||||
path font_weight: "bold", stroke_linecap: "round", stroke_linejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
class SectionLink < Phlex::HTML
|
||||
def initialize(href)
|
||||
@href = href
|
||||
end
|
||||
|
||||
def view_template
|
||||
a href: @href, class: "section-link" do
|
||||
span do
|
||||
yield
|
||||
end
|
||||
|
||||
render ChevronRightIcon.new
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
Loading…
Add table
Add a link
Reference in a new issue