diff --git a/app/assets/stylesheets/_header.scss b/app/assets/stylesheets/_header.scss index d150171..6ca2bb7 100644 --- a/app/assets/stylesheets/_header.scss +++ b/app/assets/stylesheets/_header.scss @@ -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; diff --git a/app/assets/stylesheets/themes/one-light.scss b/app/assets/stylesheets/themes/one-light.scss index 79d7017..2d16d0a 100644 --- a/app/assets/stylesheets/themes/one-light.scss +++ b/app/assets/stylesheets/themes/one-light.scss @@ -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} diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index dcc7f6c..78e49e5 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -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 @@ -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 diff --git a/app/controllers/unauthenticated/home_controller.rb b/app/controllers/unauthenticated/home_controller.rb new file mode 100644 index 0000000..54d340c --- /dev/null +++ b/app/controllers/unauthenticated/home_controller.rb @@ -0,0 +1,7 @@ +class Unauthenticated::HomeController < ApplicationController + layout 'unauthenticated' + + def index + + end +end \ No newline at end of file diff --git a/app/javascript/controllers/codemirror_controller.js b/app/javascript/controllers/codemirror_controller.js index e080b92..e4cad5c 100644 --- a/app/javascript/controllers/codemirror_controller.js +++ b/app/javascript/controllers/codemirror_controller.js @@ -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"]; @@ -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" diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 5b2ae9b..b0c7873 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -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'; diff --git a/app/models/snippet.rb b/app/models/snippet.rb index 0c6d341..6a467d6 100644 --- a/app/models/snippet.rb +++ b/app/models/snippet.rb @@ -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) diff --git a/app/views/layouts/unauthenticated.html.erb b/app/views/layouts/unauthenticated.html.erb new file mode 100644 index 0000000..f192287 --- /dev/null +++ b/app/views/layouts/unauthenticated.html.erb @@ -0,0 +1,19 @@ + + + + Snippet Safe + + + <%= 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" %> + + + + <%= yield %> + + diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb index f480ba5..66b71cc 100644 --- a/app/views/shared/_sidebar.html.erb +++ b/app/views/shared/_sidebar.html.erb @@ -16,9 +16,33 @@ <%= render partial: 'shared/connect' %> -
-

by <%= link_to '@lewisyoul', 'https://twitter.com/lewisyoul', target: '_blank', class: 'hover:underline' %>

-
+ <%= render 'shared/cards/card_no_padding' do %> +

Popular

+ + + <% end %> \ No newline at end of file diff --git a/app/views/shared/cards/_card.html.erb b/app/views/shared/cards/_card.html.erb index 8f7a9b0..3ea62b3 100644 --- a/app/views/shared/cards/_card.html.erb +++ b/app/views/shared/cards/_card.html.erb @@ -1,5 +1,5 @@
id="<%= id %>" <% end %> diff --git a/app/views/shared/cards/_card_navigation.html.erb b/app/views/shared/cards/_card_navigation.html.erb index ec1b42e..96b682f 100644 --- a/app/views/shared/cards/_card_navigation.html.erb +++ b/app/views/shared/cards/_card_navigation.html.erb @@ -1,4 +1,4 @@ -
id="<%= id %>" <% end %> @@ -6,7 +6,7 @@ data-navigation-url-value="<%= url %>" data-action="click->navigation#navigate" > -
+
<%= yield %>
diff --git a/app/views/shared/cards/_card_no_padding.html.erb b/app/views/shared/cards/_card_no_padding.html.erb index 5ae6e4f..c9631d4 100644 --- a/app/views/shared/cards/_card_no_padding.html.erb +++ b/app/views/shared/cards/_card_no_padding.html.erb @@ -1,3 +1,13 @@ -
+
+ id="<%= id %>" + <% end %> + <% if defined?(data) %> + <% data.each do |key, value| %> + data-<%= key.to_s.dasherize %>="<%= value %>" + <% end %> + <% end %> +> <%= yield %>
diff --git a/app/views/shared/icons/_logo.html.erb b/app/views/shared/icons/_logo.html.erb new file mode 100644 index 0000000..b120cb6 --- /dev/null +++ b/app/views/shared/icons/_logo.html.erb @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/views/snippets/_snippet.html.erb b/app/views/snippets/_snippet.html.erb index 4bb6450..143dd25 100644 --- a/app/views/snippets/_snippet.html.erb +++ b/app/views/snippets/_snippet.html.erb @@ -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 %> -
- <%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %> -
-
-
- <% if snippet.private? %> - <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %> - <% end %> -
- <%= snippet.language.name %> +<%= render 'shared/cards/card_no_padding', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %> +
+
+ <%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %> +
+
+
+ <% if snippet.private? %> + <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %> + <% end %> + + <%= snippet.language.name %> + + <% if @display_popover %> + <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %> + <% end %>
- <% if @display_popover %> - <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %> - <% end %>
-
-
-
-
<%= snippet.description %>
-
+
+
+
<%= snippet.description %>
+
-
- <%= render partial: 'shared/like_button', locals: { snippet: snippet } %> - <%= render partial: 'shared/comment_button', locals: { snippet: snippet } %> +
+ <%= render partial: 'shared/like_button', locals: { snippet: snippet } %> + <%= render partial: 'shared/comment_button', locals: { snippet: snippet } %> +
diff --git a/app/views/snippets/_snippet_preview.html.erb b/app/views/snippets/_snippet_preview.html.erb index c7f6973..6290f23 100644 --- a/app/views/snippets/_snippet_preview.html.erb +++ b/app/views/snippets/_snippet_preview.html.erb @@ -1,32 +1,34 @@ <%= render 'shared/cards/card_navigation', url: snippet_path(snippet), id: snippet.client_id do %>
-
- <%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %> -
-
-
- <% if snippet.private? %> - <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %> - <% end %> -
- <%= snippet.language.name %> +
+
+ <%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %> +
+
+
+ <% if snippet.private? %> + <%= render partial: 'shared/icons/lock_closed', locals: { height: 4, width: 4, color: 'text-yellow-500 mr-1' } %> + <% end %> + + <%= snippet.language.name %> + + <% if @display_popover %> + <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %> + <% end %>
- <% if @display_popover %> - <%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %> - <% end %>
-
-
-
-
<%= snippet.description %>
-
+
+
+
<%= snippet.description %>
+
-
- <%= render partial: 'shared/like_button', locals: { snippet: snippet } %> - <%= render partial: 'shared/comment_button', locals: { snippet: snippet } %> +
+ <%= render partial: 'shared/like_button', locals: { snippet: snippet } %> + <%= render partial: 'shared/comment_button', locals: { snippet: snippet } %> +
diff --git a/app/views/unauthenticated/home/index.html.erb b/app/views/unauthenticated/home/index.html.erb new file mode 100644 index 0000000..dd77971 --- /dev/null +++ b/app/views/unauthenticated/home/index.html.erb @@ -0,0 +1,139 @@ + +
+
+ + +
+
+ +
+ + +
+
+
+
+ +
+
+ +
+
+ + + Log in + +
+
+ +
+
+

+ Find out what + everyone is building +

+

+ Create, file and share code snippets, and keep track of snippets others create. +

+
+
+
+
+ +
+ App screenshot +
+
+
+
+
+

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
diff --git a/app/views/users/_connect.html.erb b/app/views/users/_connect.html.erb index 8fa754e..d49ed24 100644 --- a/app/views/users/_connect.html.erb +++ b/app/views/users/_connect.html.erb @@ -1,8 +1,9 @@ -
  • +
  • <%= render partial: 'notifications/user_avatar', locals: { user: user } %> diff --git a/config/routes.rb b/config/routes.rb index cc75b2e..39b7ff5 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -15,8 +15,17 @@ confirmations: 'confirmations', omniauth_callbacks: 'omniauth_callbacks' } - # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html - root to: 'home#index' + + devise_scope :user do + authenticated do + root 'home#index' + end + + unauthenticated do + root 'unauthenticated/home#index', as: :unauthenticated_root + end + end + get '/connect', to: 'home#connect' namespace :modals do diff --git a/public/example.png b/public/example.png new file mode 100644 index 0000000..936c104 Binary files /dev/null and b/public/example.png differ diff --git a/tailwind.config.js b/tailwind.config.js index d668d56..ca41cb2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,6 +16,9 @@ module.exports = { 'plum': { DEFAULT: '#8F3985' }, + 'code': { + DEFAULT: '#282C34' + } } }, },