Skip to content

Commit 5b9a73f

Browse files
LewisYoulLewisYoul
authored
Merge pull request #13 from SnippetSafe/feature-landing-page
Feature landing page
2 parents 21d02f9 + 2db6988 commit 5b9a73f

File tree

20 files changed

+302
-65
lines changed

20 files changed

+302
-65
lines changed

‎app/assets/stylesheets/_header.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@
1616
margin-bottom: $topbar-margin;
1717
}
1818

19-
#header-nav-wrapper {
20-
box-shadow: 0 1px 4px lightgrey;
21-
}
22-
2319
#header-nav {
2420
max-width: 1080px;
2521
margin: 0 auto !important;

‎app/assets/stylesheets/themes/one-light.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.CodeMirror.cm-s-one-light{color:#383a42;background-color:#fafafa}.cm-s-one-light .CodeMirror-selected{background-color:#c3c3c3}.cm-s-one-light .CodeMirror-gutter,.cm-s-one-light .CodeMirror-gutters{border:none;background-color:#fafafa}.cm-s-one-light .CodeMirror-linenumber,.cm-s-one-light .CodeMirror-linenumbers{color:#929292!important;background-color:transparent}.cm-s-one-light .CodeMirror-lines{color:#27292f!important;background-color:transparent}.cm-s-one-light .CodeMirror-cursor{border-left:2px solid #526fff!important}.cm-s-one-light .cm-header{color:#e45649}.cm-s-one-light .cm-quote{color:#a0a1a7;font-style:italic}.cm-s-one-light .cm-negative{color:#e45649}.cm-s-one-light .cm-positive{color:#e45649}.cm-s-one-light .cm-strong{color:#986801;font-weight:700}.cm-s-one-light .cm-header .cm-strong{color:#986801;font-weight:700}.cm-s-one-light .cm-em{color:#a626a4;font-style:italic}.cm-s-one-light .cm-header .cm-em{color:#a626a4;font-style:italic}.cm-s-one-light .cm-tag{color:#e45649}.cm-s-one-light .cm-attribute{color:#d19a66}.cm-s-one-light .cm-link{color:#4078f2;border-bottom:solid 1px #4078f2}.cm-s-one-light .cm-string.cm-url{color:#0184bc;border-bottom:solid 1px #0184bc}.cm-s-one-light .cm-builtin{color:#e45649}.cm-s-one-light .cm-keyword{color:#a626a4}.cm-s-one-light .cm-def{color:#4078f2}.cm-s-one-light .cm-atom{color:#d19a66}.cm-s-one-light .cm-number{color:#986801}.cm-s-one-light .cm-property{color:#4078f2}.cm-s-one-light .cm-qualifier{color:#986801}.cm-s-one-light .cm-variable{color:#e06c75}.cm-s-one-light .cm-variable-2{color:#e45649}.cm-s-one-light .cm-string{color:#50a14f}.cm-s-one-light .cm-punctuation{color:#383a42}.cm-s-one-light .cm-operator{color:#0184bc}.cm-s-one-light .cm-meta{color:#383a42}.cm-s-one-light .cm-bracket{color:#383a42}.cm-s-one-light .cm-comment{color:#a0a1a7;font-style:italic}.cm-s-one-light .cm-error{color:#e06c75}.cm-s-one-light .cm-m-css.cm-variable{color:#828997}.cm-s-one-light .cm-m-css.cm-property{color:#383a42}.cm-s-one-light .cm-m-css.cm-atom{color:#0184bc}.cm-s-one-light .cm-m-css.cm-builtin{color:#56b6c2}
1+
.CodeMirror.cm-s-one-dark{color:#abb2bf;background-color:#373b42}.cm-s-one-dark .CodeMirror-selected{background-color:#3e4451}.cm-s-one-dark .CodeMirror-gutter,.cm-s-one-dark .CodeMirror-gutters{border:none;background-color:#282c34}.cm-s-one-dark .CodeMirror-linenumber,.cm-s-one-dark .CodeMirror-linenumbers{color:#5c6370!important;background-color:transparent}.cm-s-one-dark .CodeMirror-lines{color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-cursor{border-left:2px solid #56b6c2!important}.cm-s-one-dark .CodeMirror-matchingbracket,.cm-s-one-dark .CodeMirror-matchingtag{border-bottom:2px solid #56b6c2;color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-nonmatchingbracket{border-bottom:2px solid #e06c75;color:#abb2bf!important;background-color:transparent}.cm-s-one-dark .CodeMirror-foldgutter,.cm-s-one-dark .CodeMirror-foldgutter-folded,.cm-s-one-dark .CodeMirror-foldgutter-open,.cm-s-one-dark .CodeMirror-foldmarker{border:none;text-shadow:none;color:#5c6370!important;background-color:transparent}.cm-s-one-dark .CodeMirror-activeline-background{background-color:rgba(153,187,255,.04)}.cm-s-one-dark .cm-header{color:#e06c75}.cm-s-one-dark .cm-quote{color:#5c6370;font-style:italic}.cm-s-one-dark .cm-negative{color:#e06c75}.cm-s-one-dark .cm-positive{color:#e06c75}.cm-s-one-dark .cm-strong{color:#d19a66;font-weight:700}.cm-s-one-dark .cm-header .cm-strong{color:#d19a66;font-weight:700}.cm-s-one-dark .cm-em{color:#c678dd;font-style:italic}.cm-s-one-dark .cm-header .cm-em{color:#c678dd;font-style:italic}.cm-s-one-dark .cm-tag{color:#e06c75}.cm-s-one-dark .cm-attribute{color:#d19a66}.cm-s-one-dark .cm-link{color:#98c379;border-bottom:solid 1px #98c379}.cm-s-one-dark .cm-builtin{color:#e06c75}.cm-s-one-dark .cm-keyword{color:#c678dd}.cm-s-one-dark .cm-def{color:#e5c07b}.cm-s-one-dark .cm-atom{color:#d19a66}.cm-s-one-dark .cm-number{color:#d19a66}.cm-s-one-dark .cm-property{color:#56b6c2}.cm-s-one-dark .cm-qualifier{color:#d19a66}.cm-s-one-dark .cm-variable{color:#e06c75}.cm-s-one-dark .cm-string{color:#98c379}.cm-s-one-dark .cm-punctuation{color:#abb2bf}.cm-s-one-dark .cm-operator{color:#56b6c2}.cm-s-one-dark .cm-meta{color:#abb2bf}.cm-s-one-dark .cm-bracket{color:#abb2bf}.cm-s-one-dark .cm-comment{color:#5c6370;font-style:italic}.cm-s-one-dark .cm-error{color:#e06c75}.cm-s-one-dark .cm-m-css.cm-variable{color:#828997}.cm-s-one-dark .cm-m-css.cm-property{color:#abb2bf}.cm-s-one-dark .cm-m-css.cm-atom{color:#56b6c2}.cm-s-one-dark .cm-m-css.cm-builtin{color:#56b6c2}.cm-s-one-dark .cm-m-lua.cm-variable{color:#56b6c2}

‎app/controllers/application_controller.rb‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ class ApplicationController < ActionController::Base
33
serialization_scope :view_context
44
before_action :configure_permitted_parameters, if: :devise_controller?
55
before_action :set_toast_message, if: -> { params[:notice].present? || params[:alert].present? }
6-
before_action :assign_users_for_connect
6+
before_action :assign_users_for_connect, :assign_popular_snippets
77

88
UNAUTHORIZED = 'You do not have access to this page'.freeze
99

@@ -38,4 +38,8 @@ def assign_users_for_connect
3838

3939
@users_for_connect = user_base.order(Arel.sql('RANDOM()')).limit(3)
4040
end
41+
42+
def assign_popular_snippets
43+
@popular_snippets = Snippet.popular.limit(3)
44+
end
4145
end

‎app/controllers/unauthenticated/home_controller.rb‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
class Unauthenticated::HomeController < ApplicationController
2+
layout 'unauthenticated'
3+
4+
def index
5+
6+
end
7+
end

‎app/javascript/controllers/codemirror_controller.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Controller } from 'stimulus';
22
import CodeMirror from 'codemirror';
33
import 'codemirror/mode/meta.js'
4+
// import 'codemirror/theme/lucario.css'
45

56
export default class extends Controller {
67
static targets = ["wrapper", "mirror", "body", "description"];
@@ -27,7 +28,7 @@ export default class extends Controller {
2728

2829
initializeCodeMirror() {
2930
this.codeMirror = CodeMirror.fromTextArea(this.mirrorTarget, {
30-
theme: 'one-light',
31+
theme: 'one-dark',
3132
mode: "javascript",
3233
readOnly: this.readOnlyValue ? 'nocursor' : false,
3334
scrollbarStyle: "null"

‎app/javascript/stylesheets/application.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
.CodeMirror {
77
/* Set height, width, borders, and global font properties here */
8-
@apply font-mono p-2 rounded-sm border text-sm;
8+
@apply font-mono p-2 text-sm rounded-br-md rounded-bl-md;
99
height: auto;
1010
color: black;
1111
direction: ltr;
1212
// overflow-y: scroll;
13+
padding-left: 14px;
1314
}
1415

1516
@import '../../assets/stylesheets/themes/one-light.scss';

‎app/models/snippet.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class Snippet < ApplicationRecord
1414

1515
scope :public_snippets, -> { where(public: true) }
1616
scope :private_snippets, -> { where(public: false) }
17+
scope :popular, -> { order(likes_count: :desc) }
1718

1819
def folder_for_user(user)
1920
folders.find_by(user_id: user&.id)

‎app/views/layouts/unauthenticated.html.erb‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Snippet Safe</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<%= csrf_meta_tags %>
8+
<%= csp_meta_tag %>
9+
10+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11+
<%= javascript_pack_tag 'snippet_app' %>
12+
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
13+
<%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>
14+
</head>
15+
16+
<body>
17+
<%= yield %>
18+
</body>
19+
</html>

‎app/views/shared/_sidebar.html.erb‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,33 @@
1616

1717
<%= render partial: 'shared/connect' %>
1818

19-
<div>
20-
<p class="text-center text-xs text-gray-500">by <%= link_to '@lewisyoul', 'https://twitter.com/lewisyoul', target: '_blank', class: 'hover:underline' %></p>
21-
</div>
19+
<%= render 'shared/cards/card_no_padding' do %>
20+
<h4 class="text-center pt-2">Popular</h4>
21+
22+
<ul class="divide-y divide-gray-200" data-infinite-scroll-window-target="entries" data-action="scroll@window->infinite-scroll-window#scroll">
23+
<% @popular_snippets.each do |snippet| %>
24+
<li
25+
class="cursor-pointer hover:bg-gray-50 group transition pt-4 pb-4 px-4"
26+
data-controller="navigation"
27+
data-navigation-url-value="<%= snippet_path(snippet) %>"
28+
data-action="click->navigation#navigate"
29+
>
30+
<div class="flex justify-between">
31+
<div class="flex">
32+
<%= render partial: 'shared/icons/heart', locals: { width: 5, height: 5, color: 'text-red-500' } %>
33+
<% if snippet.likes? %>
34+
<span class="inline-block text-sm text-gray-500 ml-1 -mb-0.5"><%= snippet.likes_count %></span>
35+
<% end %>
36+
</div>
37+
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
38+
<%= snippet.language.name %>
39+
</span>
40+
</div>
41+
<p class="mt-2 font-normal group-hover:underline"><%= snippet.description %></p>
42+
</li>
43+
<% end %>
44+
</ul>
45+
<% end %>
2246

2347
</div>
2448
</aside>

‎app/views/shared/cards/_card.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div
2-
class="px-4 py-5 sm:p-4 bg-white shadow rounded-sm mb-4 <%= defined?(classes) ? classes : '' %>"
2+
class="px-4 py-5 sm:p-4 bg-white shadow rounded-md mb-4 <%= defined?(classes) ? classes : '' %>"
33
<% if defined?(id) %>
44
id="<%= id %>"
55
<% end %>

0 commit comments

Comments
 (0)