Commit 46a4417
Changed files (13)
app
assets
stylesheets
javascript
packs
styles
views
layouts
shared
config
app/assets/stylesheets/application.css
@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
app/javascript/packs/application.js
@@ -1,3 +1,4 @@
import Rails from "@rails/ujs"
+import '../styles';
Rails.start()
app/javascript/styles/variables/colours.scss
@@ -0,0 +1,136 @@
+
+// stylelint-disable primer/no-unused-vars
+
+// Immutable (static) color system
+
+// Note: These color variables were perviously used in Primer CSS.
+// They are immutable and won't change when switching color modes.
+// Only use for rare edge cases like when needing SASS color functions (`lighten/darken`).
+// Eventually we'd like to replace them with functional variables.
+
+// Black based on same hue as $static-color-gray-900
+$static-color-black: #1b1f23 !default;
+$static-color-white: #fff !default;
+
+//
+//
+// -------- Grays --------
+$static-color-gray-000: #fafbfc !default;
+$static-color-gray-100: #f6f8fa !default;
+$static-color-gray-200: #e1e4e8 !default;
+$static-color-gray-300: #d1d5da !default;
+$static-color-gray-400: #959da5 !default;
+$static-color-gray-500: #6a737d !default;
+$static-color-gray-600: #586069 !default;
+$static-color-gray-700: #444d56 !default;
+$static-color-gray-800: #2f363d !default;
+$static-color-gray-900: #24292e !default; // body font color
+
+// -------- Blue --------
+$static-color-blue-000: #f1f8ff !default;
+$static-color-blue-100: #dbedff !default;
+$static-color-blue-200: #c8e1ff !default;
+$static-color-blue-300: #79b8ff !default;
+$static-color-blue-400: #2188ff !default;
+$static-color-blue-500: #0366d6 !default; // Default: Passes AA with #fff
+$static-color-blue-600: #005cc5 !default;
+$static-color-blue-700: #044289 !default;
+$static-color-blue-800: #032f62 !default;
+$static-color-blue-900: #05264c !default; // Passes with 1/2/300 blues
+
+// -------- Green --------
+$static-color-green-000: #f0fff4 !default;
+$static-color-green-100: #dcffe4 !default;
+$static-color-green-200: #bef5cb !default;
+$static-color-green-300: #85e89d !default;
+$static-color-green-400: #34d058 !default;
+$static-color-green-500: #28a745 !default; // Default. passes AA Large
+$static-color-green-600: #22863a !default; // Text green, passes AA on #fff
+$static-color-green-700: #176f2c !default;
+$static-color-green-800: #165c26 !default;
+$static-color-green-900: #144620 !default;
+
+// -------- Yellow --------
+$static-color-yellow-000: #fffdef !default;
+$static-color-yellow-100: #fffbdd !default;
+$static-color-yellow-200: #fff5b1 !default;
+$static-color-yellow-300: #ffea7f !default;
+$static-color-yellow-400: #ffdf5d !default;
+$static-color-yellow-500: #ffd33d !default;
+$static-color-yellow-600: #f9c513 !default;
+$static-color-yellow-700: #dbab09 !default;
+$static-color-yellow-800: #b08800 !default;
+$static-color-yellow-900: #735c0f !default;
+
+// -------- Orange --------
+$static-color-orange-000: #fff8f2 !default;
+$static-color-orange-100: #ffebda !default;
+$static-color-orange-200: #ffd1ac !default;
+$static-color-orange-300: #ffab70 !default;
+$static-color-orange-400: #fb8532 !default;
+$static-color-orange-500: #f66a0a !default; // Default. passes AA Large with #fff
+$static-color-orange-600: #e36209 !default;
+$static-color-orange-700: #d15704 !default;
+$static-color-orange-800: #c24e00 !default;
+$static-color-orange-900: #a04100 !default;
+
+// -------- Red --------
+$static-color-red-000: #ffeef0 !default;
+$static-color-red-100: #ffdce0 !default;
+$static-color-red-200: #fdaeb7 !default;
+$static-color-red-300: #f97583 !default;
+$static-color-red-400: #ea4a5a !default;
+$static-color-red-500: #d73a49 !default; // Default. passes AA
+$static-color-red-600: #cb2431 !default;
+$static-color-red-700: #b31d28 !default;
+$static-color-red-800: #9e1c23 !default;
+$static-color-red-900: #86181d !default;
+
+// -------- Purple --------
+$static-color-purple-000: #f5f0ff !default;
+$static-color-purple-100: #e6dcfd !default;
+$static-color-purple-200: #d1bcf9 !default;
+$static-color-purple-300: #b392f0 !default;
+$static-color-purple-400: #8a63d2 !default;
+$static-color-purple-500: #6f42c1 !default; // passes AA with #fff
+$static-color-purple-600: #5a32a3 !default;
+$static-color-purple-700: #4c2889 !default;
+$static-color-purple-800: #3a1d6e !default;
+$static-color-purple-900: #29134e !default;
+
+// -------- Pink --------
+$static-color-pink-000: #ffeef8 !default;
+$static-color-pink-100: #fedbf0 !default;
+$static-color-pink-200: #f9b3dd !default;
+$static-color-pink-300: #f692ce !default;
+$static-color-pink-400: #ec6cb9 !default;
+$static-color-pink-500: #ea4aaa !default;
+$static-color-pink-600: #d03592 !default;
+$static-color-pink-700: #b93a86 !default;
+$static-color-pink-800: #99306f !default;
+$static-color-pink-900: #6d224f !default;
+
+// -------- Fades --------
+$static-color-black-fade-15: rgba($static-color-black, 0.15) !default;
+$static-color-black-fade-30: rgba($static-color-black, 0.3) !default;
+$static-color-black-fade-50: rgba($static-color-black, 0.5) !default;
+$static-color-black-fade-70: rgba($static-color-black, 0.7) !default;
+$static-color-black-fade-85: rgba($static-color-black, 0.85) !default;
+
+$static-color-white-fade-15: rgba($static-color-white, 0.15) !default;
+$static-color-white-fade-30: rgba($static-color-white, 0.3) !default;
+$static-color-white-fade-50: rgba($static-color-white, 0.5) !default;
+$static-color-white-fade-70: rgba($static-color-white, 0.7) !default;
+$static-color-white-fade-85: rgba($static-color-white, 0.85) !default;
+
+// -------- Color defaults --------
+$static-color-red: $static-color-red-500 !default;
+$static-color-purple: $static-color-purple-500 !default;
+$static-color-blue: $static-color-blue-500 !default;
+$static-color-green: $static-color-green-500 !default;
+$static-color-yellow: $static-color-yellow-500 !default;
+$static-color-orange: $static-color-orange-500 !default;
+
+$static-color-gray-dark: $static-color-gray-900 !default;
+$static-color-gray-light: $static-color-gray-400 !default;
+$static-color-gray: $static-color-gray-500 !default;
app/javascript/styles/application.scss
@@ -0,0 +1,14 @@
+@import "@primer/css/alerts/index.scss";
+@import "@primer/css/avatars/index.scss";
+@import "@primer/css/blankslate/index.scss";
+@import "@primer/css/core/index.scss";
+@import "@primer/css/dropdown/index.scss";
+@import "@primer/css/forms/index.scss";
+@import "@primer/css/header/index.scss";
+@import "@primer/css/labels/index.scss";
+@import "@primer/css/layout/grid.scss";
+@import "@primer/css/popover/index.scss";
+@import "@primer/css/support/index.scss";
+@import "@primer/css/timeline/index.scss";
+@import "@primer/css/utilities/index.scss";
+@import "@primer/octicons/index.scss";
app/javascript/styles/index.js
@@ -0,0 +1,1 @@
+import './application.scss';
app/views/layouts/application.html.erb
@@ -1,16 +1,40 @@
<!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
<head>
- <title>Sparkles</title>
+ <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Sparkles</title>
+ <meta name="theme-color" content="#24292e">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
-
- <%= stylesheet_link_tag 'application', media: 'all' %>
+ <%= stylesheet_pack_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
</head>
-
<body>
- <%= yield %>
+ <header class="Header flex-justify-between">
+ <div class="Header-item">
+ <%= link_to root_path, class: 'Header-link f4 d-flex flex-items-center' do %>
+ <%= render(Primer::OcticonComponent.new(icon: "mark-github", size: :medium, mr: 2, vertical_align: :middle)) %>
+ <% end %>
+ <span>SparkleHub</span>
+ </div>
+
+ <nav class="Header-item mr-0" data-avatar>
+ <%= link_to sparkles_path, class: "avatar text-white" do %>
+ <%= render(Primer::OcticonComponent.new(icon: "person", size: :medium)) %>
+ <% end %>
+ </nav>
+ </header>
+
+ <main>
+ <%= yield %>
+ </main>
+
+ <footer class="app-footer d-flex flex-items-center flex-justify-center px-5 py-5 text-center border-top">
+ <%= render(Primer::OcticonComponent.new(icon: "mark-github", mr: 1)) %>
+ <div>GitHub ✨</div>
+ </footer>
+
+ <%= render "shared/hovercard_template" %>
</body>
</html>
config/application.rb
@@ -14,6 +14,7 @@ require "action_view/railtie"
# require "action_cable/engine"
# require "sprockets/railtie"
require "rails/test_unit/railtie"
+require "primer/view_components/engine"
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
config/routes.rb
@@ -1,6 +1,7 @@
Rails.application.routes.draw do
# For details on the DSL available within this file,
# see https://guides.rubyonrails.org/routing.html
- resources :users
+ resources :users, only: [:index, :show, :new, :create]
+ resources :sparkles, only: [:index]
root "users#index"
end
Gemfile
@@ -1,5 +1,8 @@
source 'https://rubygems.org'
+gem 'gemoji'
+gem 'octicons_helper'
+gem 'primer_view_components', '0.0.14'
gem 'puma', '~> 5.0'
gem 'rails', '~> 6.1.3'
gem 'sqlite3', '~> 1.4'
Gemfile.lock
@@ -64,6 +64,7 @@ GEM
concurrent-ruby (1.1.8)
crass (1.0.6)
erubi (1.10.0)
+ gemoji (3.0.1)
globalid (0.4.2)
activesupport (>= 4.2.0)
i18n (1.8.10)
@@ -80,6 +81,15 @@ GEM
nio4r (2.5.7)
nokogiri (1.11.3-x86_64-darwin)
racc (~> 1.4)
+ octicons (11.3.0)
+ nokogiri (>= 1.6.3.1)
+ octicons_helper (11.3.0)
+ octicons (= 11.3.0)
+ rails
+ primer_view_components (0.0.14)
+ octicons_helper (>= 9.0.0, < 12.0.0)
+ rails (>= 5.0.0, < 7.0)
+ view_component (>= 2.0.0, < 3.0)
puma (5.2.2)
nio4r (~> 2.0)
racc (1.5.2)
@@ -127,6 +137,8 @@ GEM
thor (1.1.0)
tzinfo (2.0.4)
concurrent-ruby (~> 1.0)
+ view_component (2.31.1)
+ activesupport (>= 5.0.0, < 7.0)
webpacker (5.3.0)
activesupport (>= 5.2)
rack-proxy (>= 0.6.1)
@@ -141,6 +153,9 @@ PLATFORMS
x86_64-darwin-19
DEPENDENCIES
+ gemoji
+ octicons_helper
+ primer_view_components (= 0.0.14)
puma (~> 5.0)
rails (~> 6.1.3)
sqlite3 (~> 1.4)
package.json
@@ -2,6 +2,7 @@
"name": "sparkles",
"private": true,
"dependencies": {
+ "@primer/css": "^16.3.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.3.0",
"webpack": "^4.46.0",
yarn.lock
@@ -892,6 +892,26 @@
mkdirp "^1.0.4"
rimraf "^3.0.2"
+"@primer/css@^16.3.0":
+ version "16.3.0"
+ resolved "https://registry.yarnpkg.com/@primer/css/-/css-16.3.0.tgz#1dca32ff75e6bf23fbe8c27c014b35dfe1294ac0"
+ integrity sha512-nfgvRLPVGS1cdEh/Y1cak17gwEVI8HtQpbGQHvBcWrVQ78sbS3EHvdRUGpFM/Lyi/WKVZInAAwIXG9RWKukOag==
+ dependencies:
+ "@primer/octicons" "13.0.0"
+ "@primer/primitives" "4.2.1"
+
+"@primer/octicons@13.0.0":
+ version "13.0.0"
+ resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-13.0.0.tgz#dab1f156ac601d2cb7c83eab9242a1739429cf2e"
+ integrity sha512-kMNu3Ny3eocOTl2hxRC0YX0na7zJwpSIQNiZqmyqbLMKp2YwNAwk5Tan4RLGe35f30st+EbNq15dEjiMzslAcw==
+ dependencies:
+ object-assign "^4.1.1"
+
+"@primer/primitives@4.2.1":
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.2.1.tgz#e8fac9b4b78eb81d81384ce5fcfe32bbb4115861"
+ integrity sha512-sI0Bw/PMCZ1kfPX1MRwoNYD6RWdvU0sGk9YYD8euYASwrr4E6aNH9dutMmHTRVe/N3/coBN7QUkV79GMt0UKyQ==
+
"@rails/ujs@^6.0.0":
version "6.1.3"
resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.3.tgz#90ef26caa0925492b1a3b1495db09cfbe49e745e"