dyarfi

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

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

version: "3.8"
services:
  mongodb:
    image: mongo
    container_name: mongodb
    restart: always
    ports:
      - 27018:27017
    volumes:
      - ./data:/data/db

dyarfi

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

<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

@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

<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

@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

<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

<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>