staticky 0.1.0

data/site_template/content/demo.md

@@ -0,0 +1,12 @@
+---
+title: Some Post
+date: 2024-03-02
+description: >-
+  This is a description in front matter
+categories:
+    - Something
+tags:
+    - A tag
+---
+
+This is the start of a great blog post

data/site_template/frontend/controllers/index.js

@@ -0,0 +1,3 @@
+import { Application } from "@hotwired/stimulus"
+
+window.Stimulus = Application.start()

data/site_template/frontend/entrypoints/application.js

@@ -0,0 +1,8 @@
+import "@fontsource-variable/inter"
+import "protos-stimulus"
+
+import "~/stylesheets/application.css"
+import "~/stylesheets/syntax.css"
+
+import "~/controllers"
+import "~/turbo_transitions.js"

data/site_template/frontend/stylesheets/application.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --spacing-xs: clamp(0.5rem, 1%, 1rem);
+    --spacing-sm: clamp(0.75rem, 3%, 1.2rem);
+    --spacing-md: clamp(1.25rem, 6%, 2.5rem);
+    --spacing-lg: clamp(3rem, 12%, 6rem);
+    --spacing-xl: clamp(6rem, 24%, 12rem);
+    --spacing-gap-xs: clamp(0.5rem, 1vmax, 1rem);
+    --spacing-gap-sm: clamp(1rem, 3vmax, 1.5rem);
+    --spacing-gap-md: clamp(1.5rem, 6vmax, 3rem);
+    --spacing-gap-lg: clamp(3rem, 8vmax, 4rem);
+    --spacing-gap-xl: clamp(4rem, 12vmax, 6rem);
+    --shadow-color: var(--b3);
+    --box-shadow-sm:
+      0.3px 0.5px 0.5px oklch(var(--shadow-color) / 0.49),
+      0.5px 0.7px 0.8px -1.9px oklch(var(--shadow-color) / 0.38),
+      1.3px 1.9px 2.2px -3.7px oklch(var(--shadow-color) / 0.27);
+    --box-shadow-md:
+      0.3px 0.5px 0.5px oklch(var(--shadow-color) / 0.51),
+      0.8px 1.2px 1.4px -1.2px oklch(var(--shadow-color) / 0.43),
+      2.3px 3.6px 4px -2.5px oklch(var(--shadow-color) / 0.34),
+      6.3px 9.6px 10.8px -3.7px oklch(var(--shadow-color) / 0.26);
+    --box-shadow-lg:
+      0.3px 0.5px 0.5px oklch(var(--shadow-color) / 0.54),
+      1.3px 1.9px 2.2px -0.6px oklch(var(--shadow-color) / 0.49),
+      2.7px 4.1px 4.6px -1.2px oklch(var(--shadow-color) / 0.44),
+      5.5px 8.4px 9.4px -1.9px oklch(var(--shadow-color) / 0.39),
+      10.6px 16.1px 18.1px -2.5px oklch(var(--shadow-color) / 0.34),
+      18.7px 28.4px 31.9px -3.1px oklch(var(--shadow-color) / 0.29),
+      30.7px 46.6px 52.3px -3.7px oklch(var(--shadow-color) / 0.23);
+    --navbar-height: 64px;
+    --main-scene: calc(100vh - var(--navbar-height));
+    --viewport-padding: var(--spacing-md);
+  }
+
+  body {
+    @apply bg-base-400;
+  }
+
+  .prose pre {
+    @apply bg-base-300 border;
+  }
+
+  * {
+    scrollbar-color: theme("colors.base-200") theme("colors.base-300");
+    border-color: theme("colors.base-200");
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    background: theme("colors.base-300")
+  }
+
+  *::-webkit-scrollbar-track {
+    background: theme("colors.base-200");
+  }
+}

data/site_template/frontend/stylesheets/syntax.css

@@ -0,0 +1,151 @@
+.highlight table td {
+  padding: 5px;
+}
+
+.highlight table pre {
+  margin: 0;
+}
+
+.highlight,
+.highlight .w {
+  color: #abb2bf;
+}
+
+.highlight .err {
+  color: #282c34;
+  background-color: #e06c75;
+}
+
+.highlight .c,
+.highlight .ch,
+.highlight .cd,
+.highlight .cm,
+.highlight .cpf,
+.highlight .c1,
+.highlight .cs {
+  color: #545862;
+}
+
+.highlight .cp {
+  color: #e5c07b;
+}
+
+.highlight .nt {
+  color: #e5c07b;
+}
+
+.highlight .o,
+.highlight .ow {
+  color: #abb2bf;
+}
+
+.highlight .p,
+.highlight .pi {
+  color: #abb2bf;
+}
+
+.highlight .gi {
+  color: #98c379;
+}
+
+.highlight .gd {
+  color: #e06c75;
+}
+
+.highlight .gh {
+  color: #61afef;
+  background-color: #282c34;
+  font-weight: bold;
+}
+
+.highlight .k,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kv {
+  color: #c678dd;
+}
+
+.highlight .kc {
+  color: #d19a66;
+}
+
+.highlight .kt {
+  color: #d19a66;
+}
+
+.highlight .kd {
+  color: #d19a66;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .dl,
+.highlight .sd,
+.highlight .s2,
+.highlight .sh,
+.highlight .sx,
+.highlight .s1 {
+  color: #98c379;
+}
+
+.highlight .sa {
+  color: #c678dd;
+}
+
+.highlight .sr {
+  color: #56b6c2;
+}
+
+.highlight .si {
+  color: #be5046;
+}
+
+.highlight .se {
+  color: #be5046;
+}
+
+.highlight .nn {
+  color: #e5c07b;
+}
+
+.highlight .nc {
+  color: #e5c07b;
+}
+
+.highlight .no {
+  color: #e5c07b;
+}
+
+.highlight .na {
+  color: #61afef;
+}
+
+.highlight .m,
+.highlight .mb,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo,
+.highlight .mx {
+  color: #98c379;
+}
+
+.highlight .ss {
+  color: #98c379;
+}
+
+.highlight .nf {
+  color: #61afef;
+}
+
+.highlight .err {
+  color: #353b45;
+  background-color: #e06c75;
+}
+
+.highlight .c1 {
+  color: #969DA8;
+}

data/site_template/frontend/tailwindcss/variable_font_plugin.js

@@ -0,0 +1,103 @@
+// This is a custom plugin for Tailwind CSS to enable font-variation-settings
+import plugin from "tailwindcss/plugin";
+
+const fontVariationSettings = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".font-thin": {
+      fontWeight: 100,
+      fontVariationSettings: '"wght" 100',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 100',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-extralight": {
+      fontWeight: 200,
+      fontVariationSettings: '"wght" 200',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 200',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-light": {
+      fontWeight: 300,
+      fontVariationSettings: '"wght" 300',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 300',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-normal": {
+      fontWeight: 400,
+      fontVariationSettings: '"wght" 400',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 400',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-medium": {
+      fontWeight: 500,
+      fontVariationSettings: '"wght" 500',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 500',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-semibold": {
+      fontWeight: 600,
+      fontVariationSettings: '"wght" 600',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 600',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-bold": {
+      fontWeight: 700,
+      fontVariationSettings: '"wght" 700',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 700',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-extrabold": {
+      fontWeight: 800,
+      fontVariationSettings: '"wght" 800',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 800',
+      },
+    },
+  });
+
+  addUtilities({
+    ".font-black": {
+      fontWeight: 900,
+      fontVariationSettings: '"wght" 900',
+      "&.italic": {
+        fontVariationSettings: '"slnt" -10, "wght" 900',
+      },
+    },
+  });
+
+  addUtilities({
+    ".italic": {
+      fontStyle: "italic",
+      fontVariationSettings: '"slnt" -10',
+    },
+  });
+});
+
+export default fontVariationSettings;

data/site_template/frontend/turbo_transitions.js

@@ -0,0 +1,54 @@
+document.addEventListener("turbo:visit", () => {
+  let main = document.querySelector("main");
+  if (main.dataset.turboTransition == "false") return;
+
+  let [movement, scale] = ["15px", "0.99"];
+
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    [movement, scale] = ["7px", "1"];
+  }
+
+  main.style.transformOrigin = "50% 0%";
+  main.dataset.animatingOut = true;
+
+  main.animate(
+    [
+      { opacity: 1, transform: "translateY(0px) scale(1)" },
+      { opacity: 0, transform: `translateY(${movement}) scale(${scale})` },
+    ],
+    {
+      duration: 300,
+      easing: "cubic-bezier(0.45, 0, 0.55, 1)",
+      fill: "forwards",
+    },
+  );
+
+  Promise.all(main.getAnimations().map((animation) => animation.finished)).then(
+    () => {
+      if (main.dataset.animatingOut) main.style.visibility = "hidden";
+    },
+  );
+});
+
+document.addEventListener("turbo:load", () => {
+  let main = document.querySelector("main");
+  if (main.dataset.turboTransition == "false") return;
+
+  let [movement, scale] = ["-10px", "0.99"];
+
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    [movement, scale] = ["-5px", "1"];
+  }
+
+  main.style.visibility = "visible";
+  main.style.transformOrigin = "50% 0%";
+  delete main.dataset.animatingOut;
+
+  main.animate(
+    [
+      { opacity: 0, transform: `translateY(${movement}) scale(${scale})` },
+      { opacity: 1, transform: "translateY(0px) scale(1)" },
+    ],
+    { duration: 150, easing: "cubic-bezier(0.45, 0, 0.55, 1)" },
+  );
+});

data/site_template/lib/component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "staticky/phlex/view_helpers"
+
+class Component < Protos::Component
+  include ViteHelpers
+
+  class NullViewContext
+    def root? = true
+    def current_path = "/"
+  end
+
+  def helpers
+    @_view_context ||= NullViewContext.new # rubocop:disable Naming/MemoizedInstanceVariableName
+  end
+
+  def asset_path(...)
+    vite_asset_path(...)
+  end
+
+  def image_tag(path, alt:, **)
+    img(src: asset_path(path), alt:, **)
+  end
+
+  def icon(...)
+    render Icon.new(...)
+  end
+
+  def inline_link(text, url)
+    render Protos::Typography::InlineLink.new(href: url) { text }
+  end
+end

data/site_template/lib/icon.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class Icon < Component
+  param :name, reader: false
+  option :variant, reader: false, default: -> {}
+  option :size, default: -> { :md }, reader: false
+
+  def template
+    div(**attrs) do
+      render Protos::Icon.heroicon(@name, variant:)
+    end
+  end
+
+  private
+
+  def variant
+    @variant || {
+      xs: :micro,
+      sm: :mini,
+      md: :solid,
+      lg: :solid
+    }.fetch(@size)
+  end
+
+  def size
+    {
+      xs: "w-3 h-3",
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-7 h-7"
+    }.fetch(@size)
+  end
+
+  def theme
+    {
+      container: tokens(size, "opacity-90", "inline-block")
+    }
+  end
+end

data/site_template/lib/layout.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Layout < Component
+end

data/site_template/lib/page.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Page < Component
+  # Example of a nested layout
+
+  def around_template(&block)
+    render Layouts::Site.new do |layout|
+      layout.with_content(&block)
+    end
+  end
+end

data/site_template/lib/vite_helpers.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ViteHelpers
+  def vite_client_tag
+    src = vite_manifest.vite_client_src || "/vite-dev/@vite/client"
+    script(src:, type: :module)
+  end
+
+  def vite_javascript_tag(
+    *names,
+    type: :module,
+    asset_type: :javascript,
+    crossorigin: :anonymous,
+    **options
+  )
+    entries = vite_manifest.resolve_entries(*names, type: asset_type)
+    entries.fetch(:scripts).each do |src|
+      script(
+        src:,
+        type:,
+        crossorigin:,
+        extname: :js,
+        **options
+      )
+    end
+    entries.fetch(:stylesheets).each do |href|
+      link(href:, rel: :stylesheet, type: "text/css")
+    end
+  end
+
+  def vite_manifest
+    ViteRuby.instance.manifest
+  end
+
+  def vite_asset_path(name, **)
+    vite_manifest.path_for(name, **)
+  end
+end

data/site_template/nginx.conf

@@ -0,0 +1,59 @@
+worker_processes 1;
+error_log stderr;
+pid nginx.pid;
+
+events {
+  worker_connections 768;
+}
+
+http {
+  types_hash_max_size 2048;
+  include mime.types;
+  charset UTF-8;
+  gzip on;
+  gzip_comp_level 6;
+  gzip_min_length 256;
+  gzip_types text/plain text/css application/json application/javascript application/xml;
+  gzip_proxied any;
+  gzip_vary on;
+
+  server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+    server_name  _;
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    port_in_redirect off;
+    add_header X-Content-Type-Options "nosniff";
+
+    location / {
+      try_files $uri $uri.html =404;
+      expires 1h;
+    }
+
+    location ~* \.(?:ico|gif|jpe?g|png|svg|webp)$ {
+      expires 31536000s;
+      add_header Cache-Control "public, max-age=31536000, immutable";
+    }
+
+    location ~* \.(css|js)$ {
+        expires 31536000s;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        charset utf-8;
+        gzip_static on;
+    }
+
+    location ~* \.woff2$ {
+        expires 31536000s;
+        add_header Cache-Control "public, max-age=31536000, immutable";
+        types { font/woff2 woff2; }
+        gzip off;
+        add_header Vary Accept-Encoding;
+    }
+
+    location ~* \.webmanifest$ {
+        charset off;
+        gzip off;
+    }
+  }
+}

data/site_template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "static-starter",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "heroku-postbuild": "bin/rake site:build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.0.20",
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo": "^8.0.5",
+    "@tailwindcss/typography": "^0.5.14",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.10",
+    "protos-stimulus": "^0.0.3",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.0",
+    "vite-plugin-ruby": "^5.0.0",
+    "vite-plugin-full-reload": "^1.2.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-arm64-musl": "4.20.0"
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}

data/site_template/postcss.config.js

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

data/site_template/public/robots.txt.erb

@@ -0,0 +1 @@
+Sitemap: <%= URI.join(url, "sitemap.xml") %>

data/site_template/public/site.webmanifest.erb

@@ -0,0 +1,19 @@
+{
+  "name": <%= title %>,
+  "short_name": <%= title %>,
+  "icons": [
+    {
+      "src":"/android-chrome-192x192.png",
+      "sizes":"192x192",
+      "type":"image/png"
+    },
+    {
+      "src":"/android-chrome-512x512.png",
+      "sizes":"512x512",
+      "type":"image/png"
+    }
+  ],
+  "theme_color":"#61afef",
+  "background_color":"#1e2227",
+  "display":"standalone"
+}