Skip to content

Instantly share code, notes, and snippets.

Avatar
🤖
Building products

Shashike Jayatunge donrestarone

🤖
Building products
View GitHub Profile
@donrestarone
donrestarone / index.html.erb
Created Dec 25, 2020
turbo stream with rails 6
View index.html.erb
<p id="notice"><%= notice %></p>
<h1>Tweets</h1>
<table>
<thead>
<tr>
<th colspan="3"></th>
</tr>
</thead>
@donrestarone
donrestarone / tweet.rb
Created Dec 25, 2020
hotwire demo rails 6
View tweet.rb
class Tweet < ApplicationRecord
has_rich_text :content
after_create_commit {broadcast_prepend_to "tweets"}
after_update_commit {broadcast_replace_to "tweets"}
after_destroy_commit {broadcast_remove_to "tweets"}
end
@donrestarone
donrestarone / index.css
Created Dec 23, 2020
css fix for react-zoom-pan-pinch rendering invisible pan area
View index.css
/* fix not rendering on chrome/safari */
.react-transform-component {
width: unset !important;
height: unset !important;
}
.react-transform-element {
width: unset !important;
height: unset !important;
}
@donrestarone
donrestarone / todolist.js
Created Dec 23, 2020
a function for dynamically generating dummy data for react-grid-layout
View todolist.js
let faker = require('faker');
export const todoList = () => {
let columnCount = 12
let maxBlocksPerColumn = 12
let layout = []
let i = 0
const cardWidth = 3
const cardHeight = 8
const inlineYaxis = 1
@donrestarone
donrestarone / app.js
Created Dec 23, 2020
react component demo'ing react-grid-layout and pan pinch zoom
View app.js
import React, {useEffect} from 'react'
import './index.css';
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import {todoList} from './constants/todo'
import {useState} from 'react'
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import GridLayout from 'react-grid-layout';
function App(props) {
@donrestarone
donrestarone / index.js
Created Dec 23, 2020
React entrypoint for Phoenix
View index.js
import { define } from 'remount'
import App from './App'
define({ 'x-application': App })
@donrestarone
donrestarone / webpack.config.js
Created Dec 23, 2020
webpack configuration for React (in a Phoenix application)
View webpack.config.js
const path = require('path');
const glob = require('glob');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode !== 'production';
@donrestarone
donrestarone / babel.config.js
Created Dec 23, 2020
babel configuration for React (used in a Phoenix application)
View babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = [
'@babel/preset-env',
'@babel/preset-react',
]
const plugins = [
]
@donrestarone
donrestarone / home_view.ex
Created Dec 23, 2020
view function to avoid missing view error in phoenix
View home_view.ex
defmodule WorkshopWeb.HomeView do
use WorkshopWeb, :view
end
@donrestarone
donrestarone / home_controller.ex
Created Dec 23, 2020
phoenix controller file
View home_controller.ex
defmodule WorkshopWeb.HomeController do
use WorkshopWeb, :controller
def index(conn, _params) do
render(
conn,
"index.html",
props: Jason.encode!(%{foo: "bar"})
)
end