Skip to content

Instantly share code, notes, and snippets.

@dyarfi
dyarfi / docker-compose.yml
Created June 1, 2022 10:50
WordPress, PhpMyAdmin, MySQL and Nginx
version: "3.7"
services:
wordpress:
image: wordpress:latest
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: root
WORDPRESS_DB_PASSWORD: MyStr0ngP455
@dyarfi
dyarfi / docker-compose.yml
Last active June 25, 2023 07:36
Docker container for MySQL Database with PhpMyAdmin
version: "3.3"
services:
db:
container_name: mysqldb
image: mysql/mysql-server:8.0.23
command: --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
restart: always
environment:
MYSQL_ROOT_PASSWORD: example
MYSQL_DATABASE: test
@dyarfi
dyarfi / docker-compose.yml
Last active March 31, 2022 18:34
Docker Compose to open MongoDB container to open MongoDB server from localhost using Robo 3T.
version: "3.8"
services:
mongodb:
image: mongo
container_name: mongodb
restart: always
ports:
- 27018:27017
volumes:
- ./data:/data/db

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript
@dyarfi
dyarfi / nuxtjs-pagination-component.vue
Created September 29, 2021 02:13
Nuxt.js Pagination
<template>
<nav id="pagination">
<ul class="page-numbers" v-if="$store.state.totalPageCount">
<li v-for="num in this.pageNumbers" v-if="num != null" v-bind:style="{ width: (100 / pageNumberCount) + '%' }">
<nuxt-link v-if="num != $route.query.page && num != currentPage" :to="{ path: '/', query: { page: num } }">{{ num }}</nuxt-link>
<span v-else>{{ num }}</span>
</li>
</ul>
<ul class="page-guides" v-if="this.$store.state.totalPageCount != 1">
<li>
@dyarfi
dyarfi / magazine_layout.scss
Created August 23, 2021 10:14
magazine_layout.scss
@import "https://fonts.googleapis.com/css?family=Playfair+Display:300,400,600,700,900";
body {
font-size: .95rem;
}
h1,h2,h3,h4,h4 {
font-family: 'Playfair Display', sans-serif;
font-weight: 900;
}
.content {
&:first-letter {
@dyarfi
dyarfi / magazine_layout.html
Created August 23, 2021 10:13
magazine_layout.html
<div class="container-fluid bg-dark p-1 p-md-5">
<div class="row bg-light no-gutters p-1 p-md-5">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-6">
<div class="container no-gutters mx-auto">
<div class="position-relative">
<img class="img-fluid ilist-c pt-3 text-center" src="https://placeimg.com/1280/1940/people"/>
<div class="img-headline px-3 px-sm-2">Be Happy and Smile!</div>
</div>
<div class="small mt-2 text-center">Text by : <a href="https://www.lipsum.com/" target="_blank" class="text-muted">Lipsum</a> and Image by : <a href="https://placeimg.com" target="_blank" class="text-muted">Placeimg</a>.
Made by <a href="https://dyarfi.github.io/" target="_blank" class="text-muted">dyarfi.github.io</a></div>
@dyarfi
dyarfi / custom_bs_dark_cards.scss
Created August 23, 2021 09:32
custom_bs_dark_cards.scss
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,900&display=swap');
body {
background-color: hsl(0, 0%, 30%);
}
h1, h2, h3, h4, h5 { font-weight: 700; }
a {
color: var(--light);
&:hover {
color: var(--secondary);
}
@dyarfi
dyarfi / custom_bs_dark_cards.html
Created August 23, 2021 09:30
custom_bs_dark_cards.html
<div class="container py-5">
<h1 class="text-center font-weight-bold text-light mb-5 pb-3 display-4">Responsive <span class="px-2 bg-secondary">Card</span> Component</h1>
<div class="card-group">
<div class="col-md-4 py-3">
<div class="card text-white bg-dark">
<img src="https://source.unsplash.com/random/800x400/?caferacer" class="card-img-top" alt="Card Component">
<div class="card-body">
<div class="card-title">
<h5><a href="javascript:;">CB100 Classic Ride Custom Build</a></h5>
</div>
@dyarfi
dyarfi / button_hover_reveal.html
Created August 23, 2021 09:04
button_hover_reveal.html
<div class="container py-5">
<!-- H1 heading purpose only -->
<h1 class="text-center font-weight-light text-dark mb-5 pb-3 display-4">Bootstrap 4 <em class="px-2 bg-warning">Hover</em> Button Icon</h1>
<!-- Rounded Button | Font Awesome -->
<h1 class="font-weight-light">Font Awesome</h1>
<div class="row my-4">
<div class="col-md-2 text-center">
<!-- button classes -->
<button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
<i class="fa fa-chevron-left"></i> <span class="spn">Submit</span>