I had an interesting couple of days trying to add code markdown to Trix. If I'm going to be blogging and showing code, I want it to look nice, right? I had done some searching and found a very h...
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['source'];
connect() {
document.addEventListener(
'DOMContentLoaded',
this.applyFormattingToPreBlocks()
);
}
applyFormattingToPreBlocks = () => {
const trixElements = document.querySelectorAll('.trix-content');
trixElements.forEach((trixElement) => {
const preElements = trixElement.querySelectorAll('pre');
preElements.forEach((preElement) => {
if (preElement.length !== 0) {
const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
const codeElement = document.createElement('code');
if (preElement.childNodes.length > 1) {
console.error(
'<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.'
);
}
let preElementTextNode = preElement.removeChild(
preElement.firstChild
);
let language = preElementTextNode.textContent.match(regex);
if (language) {
language = language[0].toString().trim();
preElementTextNode.textContent =
preElementTextNode.textContent.replace(language, '');
codeElement.classList.add(language, 'line-numbers');
}
codeElement.append(preElementTextNode);
preElement.append(codeElement);
}
});
});
};
}
lang-javascriptimport TrixMarkController from './trix_mark_controller.js';
application.register('trix-mark', TrixMarkController);
lang-javascript<div data-controller="trix-mark"> <div data-trix-mark-target="source"> lang-html
<meta name="turbo-visit-control" content="reload"> lang-html
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.min.js"></script> lang-html
Greetings. I am currently working on The Odin Project, and I'm doing the final rails project, which is a "facebook clone". It doesn't have to look like facebook, but it needs the functions of pos...
data: { turbo_method: :post }
lang-ruby<div class="github-login" data-turbo="false"> <%= button_to "Sign in with Github", member_github_omniauth_authorize_path, format: :html, method: :post, class: "button is-link" %> </div>lang-ruby
puts member.errors.full_messages lang-ruby
gem 'dotenv-rails' gem 'devise' gem 'omniauth-facebook', '~> 9.0' gem 'omniauth-rails_csrf_protection' gem 'omniauth-github', '~> 2.0', '>= 2.0.1' gem 'omniauth-google-oauth2' lang-ruby
GITHUB_CLIENT_ID=Iv1.7fd3298d016109b6 GITHUB_CLIENT_SECRET=86266384c7634b15746216dc7a765a9c4026025 GOOGLE_OAUTH2_CLIENT_ID=538637935741-eus398tnf75g4n9vcjb435l621f5pnn8.apps.googleusercontent.com GOOGLE_OAUTH2_CLIENT_SECRET=GODSPX-UPz4W3NBj9XTOsLngDc12gYlI0vh lang-ruby
config.omniauth :github,
ENV["GITHUB_CLIENT_ID"],
ENV["GITHUB_CLIENT_SECRET"],
scope: "user"
config.omniauth :google_oauth2,
ENV["GOOGLE_OAUTH2_CLIENT_ID"],
ENV["GOOGLE_OAUTH2_CLIENT_SECRET"]
lang-ruby devise_scope :member do
get "member", to: "members/sessions#new"
end
devise_for :members,
controllers: {
sessions: "members/sessions",
registrations: "members/registrations",
omniauth_callbacks: "members/omniauth_callbacks"
}lang-rubyclass CreateAuthorizations < ActiveRecord::Migration[7.0]
def change
create_table :authorizations do |t|
t.integer :member_id
t.string :provider
t.string :uid
t.string :token
t.string :secret
t.string :username
t.timestamps
end
end
end
lang-rubyclass Member < ApplicationRecord
devise :database_authenticatable, :registerable, :recoverable,
:rememberable, :validatable, :omniauthable,
omniauth_providers: %i[facebook github google_oauth2]
mount_uploader :profile, ProfileUploader
has_many :likes
has_many :friends, class_name: "Member"
has_many :comments
has_and_belongs_to_many :friend_requests
has_many :authorizations
def self.from_omniauth(auth, current_member)
authorization = Authorization.where(
provider: auth.provider,
uid: auth.uid.to_s,
token: auth.credentials.token,
secret: auth.credentials.secret
).first_or_initialize
if authorization.member.blank? member = (
if current_member.nil?
Member.where("email = ?", auth["info"]["email"]).first
else
current_member
end )
if member.blank?
Member.new(
email: auth.info.email,
password: Devise.friendly_token[0, 10],
name: auth.info.name,
locations: auth.info.location,
profile: auth.info.image )
auth.provider == "twitter" ? user.save!(validate: false) : user.save!
end
authorization.username = auth.info.nickname
authorization.member_id = member.id
authorization.save!
end
authorization.member
end
end
lang-rubyclass Authorization < ApplicationRecord belongs_to :member end lang-ruby
class Members::OmniauthCallbacksController < Devise::OmniauthCallbacksController
skip_before_action :authenticate_member!
def all
member = Member.from_omniauth(request.env["omniauth.auth"], current_member)
if member.persisted?
flash[:notice] = "you are successfully logged in!!"
sign_in_and_redirect(member)
else
session["devise.member_attributes"] = member.attributes
puts member.errors.full_messages
redirect_to new_user_registration_url
end
end
def failure
super
end
alias_method :facebook, :all
alias_method :github, :all
alias_method :google_oauth2, :all
end
lang-rubyI wanted to write this blog for the specific purpose of documenting what went into creating this portfolio app. I am doing this partly to refresh myself on earlier parts of the project, but also to...
Rails.application.config.assets.paths << Rails.root.join('node_modules')
lang-ruby