Skip to content

Feature landing page #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LewisYoul merged 4 commits into from
Feb 28, 2021
Merged

Feature landing page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55c5f2a
feature/Add unauthenticated root
LewisYoul Feb 23, 2021
d90fa5b
feature/Add basic landing page
LewisYoul Feb 28, 2021
5199135
feature/Use one dark theme
Feb 28, 2021
2db6988
feature/add popular snippets
Feb 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions app/assets/stylesheets/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@
margin-bottom: $topbar-margin;
}

#header-nav-wrapper {
box-shadow: 0 1px 4px lightgrey;
}

#header-nav {
max-width: 1080px;
margin: 0 auto !important;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/themes/one-light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
.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}
6 changes: 5 additions & 1 deletion app/controllers/application_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ class ApplicationController < ActionController::Base
serialization_scope :view_context
before_action :configure_permitted_parameters, if: :devise_controller?
before_action :set_toast_message, if: -> { params[:notice].present? || params[:alert].present? }
before_action :assign_users_for_connect
before_action :assign_users_for_connect, :assign_popular_snippets

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

Expand Down Expand Up @@ -38,4 +38,8 @@ def assign_users_for_connect

@users_for_connect = user_base.order(Arel.sql('RANDOM()')).limit(3)
end

def assign_popular_snippets
@popular_snippets = Snippet.popular.limit(3)
end
end
7 changes: 7 additions & 0 deletions app/controllers/unauthenticated/home_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
class Unauthenticated::HomeController < ApplicationController
layout 'unauthenticated'

def index

end
end
3 changes: 2 additions & 1 deletion app/javascript/controllers/codemirror_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Controller } from 'stimulus';
import CodeMirror from 'codemirror';
import 'codemirror/mode/meta.js'
// import 'codemirror/theme/lucario.css'

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

initializeCodeMirror() {
this.codeMirror = CodeMirror.fromTextArea(this.mirrorTarget, {
theme: 'one-light',
theme: 'one-dark',
mode: "javascript",
readOnly: this.readOnlyValue ? 'nocursor' : false,
scrollbarStyle: "null"
Expand Down
3 changes: 2 additions & 1 deletion app/javascript/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@

.CodeMirror {
/* Set height, width, borders, and global font properties here */
@apply font-mono p-2 rounded-sm border text-sm;
@apply font-mono p-2 text-sm rounded-br-md rounded-bl-md;
height: auto;
color: black;
direction: ltr;
// overflow-y: scroll;
padding-left: 14px;
}

@import '../../assets/stylesheets/themes/one-light.scss';
Expand Down
1 change: 1 addition & 0 deletions app/models/snippet.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class Snippet < ApplicationRecord

scope :public_snippets, -> { where(public: true) }
scope :private_snippets, -> { where(public: false) }
scope :popular, -> { order(likes_count: :desc) }

def folder_for_user(user)
folders.find_by(user_id: user&.id)
Expand Down
19 changes: 19 additions & 0 deletions app/views/layouts/unauthenticated.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>Snippet Safe</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'snippet_app' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>
</head>

<body>
<%= yield %>
</body>
</html>
30 changes: 27 additions & 3 deletions app/views/shared/_sidebar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,33 @@

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

<div>
<p class="text-center text-xs text-gray-500">by <%= link_to '@lewisyoul', 'https://twitter.com/lewisyoul', target: '_blank', class: 'hover:underline' %></p>
</div>
<%= render 'shared/cards/card_no_padding' do %>
<h4 class="text-center pt-2">Popular</h4>

<ul class="divide-y divide-gray-200" data-infinite-scroll-window-target="entries" data-action="scroll@window->infinite-scroll-window#scroll">
<% @popular_snippets.each do |snippet| %>
<li
class="cursor-pointer hover:bg-gray-50 group transition pt-4 pb-4 px-4"
data-controller="navigation"
data-navigation-url-value="<%= snippet_path(snippet) %>"
data-action="click->navigation#navigate"
>
<div class="flex justify-between">
<div class="flex">
<%= render partial: 'shared/icons/heart', locals: { width: 5, height: 5, color: 'text-red-500' } %>
<% if snippet.likes? %>
<span class="inline-block text-sm text-gray-500 ml-1 -mb-0.5"><%= snippet.likes_count %></span>
<% end %>
</div>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
<%= snippet.language.name %>
</span>
</div>
<p class="mt-2 font-normal group-hover:underline"><%= snippet.description %></p>
</li>
<% end %>
</ul>
<% end %>

</div>
</aside>
2 changes: 1 addition & 1 deletion app/views/shared/cards/_card.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
class="px-4 py-5 sm:p-4 bg-white shadow rounded-sm mb-4 <%= defined?(classes) ? classes : '' %>"
class="px-4 py-5 sm:p-4 bg-white shadow rounded-md mb-4 <%= defined?(classes) ? classes : '' %>"
<% if defined?(id) %>
id="<%= id %>"
<% end %>
Expand Down
4 changes: 2 additions & 2 deletions app/views/shared/cards/_card_navigation.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="bg-white overflow-hidden shadow rounded-sm mb-4 cursor-pointer hover:shadow-md transition"
<div class="bg-white overflow-hidden shadow rounded-md mb-4 cursor-pointer hover:shadow-md transition"
<% if defined?(id) %>
id="<%= id %>"
<% end %>
data-controller="navigation"
data-navigation-url-value="<%= url %>"
data-action="click->navigation#navigate"
>
<div class="px-4 py-5 sm:p-4">
<div class="<%= defined?(classes) ? classes : '' %>">
<%= yield %>
</div>
</div>
12 changes: 11 additions & 1 deletion app/views/shared/cards/_card_no_padding.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
<div class="bg-white shadow rounded-sm mb-4 <%= defined?(classes) ? classes : '' %>">
<div
class="bg-white shadow rounded-md mb-4 <%= defined?(classes) ? classes : '' %>"
<% if defined?(id) %>
id="<%= id %>"
<% end %>
<% if defined?(data) %>
<% data.each do |key, value| %>
data-<%= key.to_s.dasherize %>="<%= value %>"
<% end %>
<% end %>
>
<%= yield %>
</div>
18 changes: 18 additions & 0 deletions app/views/shared/icons/_logo.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<svg class="w-<%= width %> h-<%= height %> <%= color %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="158.99999999999997 79 84.00000000000003 104" width="100" height="100">
<defs>
<path d="M160 80L220 80L220 100L160 100L160 80Z" id="a7dSAlYCNy"></path>
<path d="M181.08 120L240 120L240 140L181.08 140L181.08 120Z" id="hASAxdwr9"></path>
<path d="M160 160L220 160L220 180L160 180L160 160Z" id="d4KpUcG1Lz"></path>
</defs>
<g>
<g>
<use xlink:href="#a7dSAlYCNy" opacity="1" fill="currentColor" fill-opacity="1"></use>
</g>
<g>
<use xlink:href="#hASAxdwr9" opacity="1" fill="currentColor" fill-opacity="1"></use>
</g>
<g>
<use xlink:href="#d4KpUcG1Lz" opacity="1" fill="currentColor" fill-opacity="1"></use>
</g>
</g>
</svg>
46 changes: 24 additions & 22 deletions app/views/snippets/_snippet.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<% folder = snippet.folder_for_user(current_user) %>

<%= render 'shared/cards/card', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %>
<div class="relative flex items-start space-x-3">
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
<div>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
<% if snippet.private? %>
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
<% end %>
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
<span class="block text-xs"><%= snippet.language.name %></span>
<%= render 'shared/cards/card_no_padding', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %>
<div class="px-4 py-5 sm:pb-0">
<div class="relative flex items-start space-x-3">
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
<div>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
<% if snippet.private? %>
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
<% end %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
<%= snippet.language.name %>
</span>
<% if @display_popover %>
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
<% end %>
</div>
<% if @display_popover %>
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
<% end %>
</div>
</div>
</div>
</div>

<div class="flex mt-4 mb-2 justify-between">
<div>
<h5 class="m-0"><%= snippet.description %></h5>
</div>
<div class="flex mt-4 mb-2 justify-between">
<div>
<h5 class="m-0"><%= snippet.description %></h5>
</div>

<div class="flex">
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
<div class="flex">
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
</div>
</div>
</div>

Expand Down
44 changes: 23 additions & 21 deletions app/views/snippets/_snippet_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
<%= render 'shared/cards/card_navigation', url: snippet_path(snippet), id: snippet.client_id do %>
<div>
<div class="relative flex items-start space-x-3">
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
<div>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
<% if snippet.private? %>
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
<% end %>
<div class="rounded-sm bg-gray-100 px-2 py-1 text-gray-500">
<span class="block text-xs"><%= snippet.language.name %></span>
<div class="px-4 py-5 sm:pb-0">
<div class="relative flex items-start space-x-3">
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
<div>
<div style="display: flex; flex-direction: column;">
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
<% if snippet.private? %>
<%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %>
<% end %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
<%= snippet.language.name %>
</span>
<% if @display_popover %>
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
<% end %>
</div>
<% if @display_popover %>
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
<% end %>
</div>
</div>
</div>
</div>

<div class="flex mt-4 mb-2 justify-between">
<div>
<h5 class="m-0"><%= snippet.description %></h5>
</div>
<div class="flex mt-4 mb-2 justify-between">
<div>
<h5 class="m-0"><%= snippet.description %></h5>
</div>

<div class="flex">
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
<div class="flex">
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
</div>
</div>
</div>

Expand Down
Loading