Checkout develop dbl click pull

SCSS/base/ importot vinni kell minden komponensbe

@import '../abstracts/variables';

Definitions

export type CardDefinitions = {
    mainData: MainData,
    cardPackage: CardCategory[]
}

export type CardCategory = {
    cardCat: string,
    cardData: CardData[]
}

export type CardData = {
    cardTitle: string;
    cardText: string;
    cardImg?: string;
    cardColor: string;
}

export type MainData = {
    mainTitle: string;
    mainLead: string;
    mainImg: string;
}

Mock

import { CardDefinitions } from './app.definitions'; 

export const CardMock:CardDefinitions = {
    mainData: {
        mainTitle: 'Totális káosz! Szinte lehetetlenség lesz közlekedni mától Budapesten',
        mainLead: 'Mától fejre áll szinte az egész város közlekedése, szívnak az autósok és a tömegközlekedők is. Lezárják a budai alsó rakpartot a Lánchíd felújítása miatt, de a 2-es villamos és a 3-as metró közlekedésében is lesz változás.',
        mainImg: 'https://metropol.hu/wp-content/uploads/2022/06/5636819b004a637f0f5cd64ae5da529d22309d0collageImage.jpeg'
    },
    cardPackage: [
        {
            cardCat: 'Category 1',
            cardData: [
                { 
                    cardTitle: '[cat-1] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-1] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-1] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
        {
            cardCat: 'Category 2',
            cardData: [
                { 
                    cardTitle: '[cat-2] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-2] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-2] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
        {
            cardCat: 'Category 3',
            cardData: [
                { 
                    cardTitle: '[cat-3] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-3] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-3] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
    ]
}

Component

import { Component, OnInit } from '@angular/core';

import { CardDefinitions } from './app.definitions'; 
import { CardMock } from './app.mock';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent{
  cards: CardDefinitions = CardMock;
  ngOnInit() {}
}

HTML

<div class="row py-lg-5">
  <div class="col-lg-6 col-md-8 mx-auto">
    <img class="img-fluid" [src]="cards.mainData.mainImg" [alt]="cards.mainData.mainTitle">
    <h1 class="fw-light">
      {{cards.mainData.mainTitle}}
    </h1>
    <p class="lead text-muted">
      {{cards.mainData.mainLead}}
    </p>
  </div>
</div>

<div class="container">
  <ng-container *ngFor="let card of cards.cardPackage">
    <h2>{{card.cardCat}}</h2>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    <div class="col" *ngFor="let item of card.cardData">
      
      <div class="card shadow-sm" ngClass="{{card.cardColor}}">
        <img *ngIf="item.cardImg" class="card-img-top" [src]="item.cardImg" [alt]="item.cardTitle">
        <div class="card-body">
          <h4 class="card-title">
            {{item.cardTitle}}
          </h4>
          <p class="card-text">{{item.cardText}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="category">
              Kategória: <strong>{{item.cardCat}}</strong>
            </div>
          </div>
        </div>
      </div>
    
    </div>
    
  </div>
</ng-container>
</div>

Model

export interface Card {
    cardTitle: string;
    cardText: string;
    cardCat: string;
    cardImg: string;
    cardColor: string;
}

Service

import { Injectable } from '@angular/core';
import { Card } from '../models/Card'; 

@Injectable({
  providedIn: 'root'
})

export class CardService {
  
  cards: Card[];
  
  constructor() {
    
    this.cards = [
      { 
        cardTitle: 'Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
        cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
        cardCat: 'Okmány',
        cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
        cardColor: 'primary'
      },
      { 
          cardTitle: 'A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
          cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
          cardCat: 'Szentkirályi Alexandra',
          cardImg: 'https://metropol.hu/wp-content/uploads/2020/10/DYT20201001012-scaled.jpg',
          cardColor: 'secondary'
      },
      { 
          cardTitle: 'Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
          cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
          cardCat: 'Honvédelem',
          cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
          cardColor: 'primary'
      }
    ]
  }
  getCards(): Card[] {
    console.log('Fetching cards from service...');
    return this.cards;
  }
}

Component.ts

import { Component, OnInit } from '@angular/core';

import { CardService } from './services/card.service';
import { Card } from './models/Card'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  mainTitle = 'Totális káosz! Szinte lehetetlenség lesz közlekedni mától Budapesten';
  mainLead = 'Mától fejre áll szinte az egész város közlekedése, szívnak az autósok és a tömegközlekedők is. Lezárják a budai alsó rakpartot a Lánchíd felújítása miatt, de a 2-es villamos és a 3-as metró közlekedésében is lesz változás.';
  mainImg = 'https://metropol.hu/wp-content/uploads/2022/06/5636819b004a637f0f5cd64ae5da529d22309d0collageImage.jpeg';

  card: Card = {
    cardTitle: '',
    cardText: '',
    cardCat: '',
    cardImg: '',
    cardColor: ''
  }
  cards: Card[];

  constructor(private cardService: CardService) { }

  ngOnInit() {
   
    this.cards = this.cardService.getCards();

  }
}

HTML

<div class="row py-lg-5">
  <div class="col-lg-6 col-md-8 mx-auto">
    <img class="img-fluid" [src]="mainImg" [alt]="mainTitle">
    <h1 class="fw-light">
      {{mainTitle}}
    </h1>
    <p class="lead text-muted">
      {{mainLead}}
    </p>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    <div class="col" *ngFor="let card of cards">
      <div class="card shadow-sm">
        <img class="card-img-top" [src]="card.cardImg" [alt]="card.cardTitle">

        <div class="card-body">
          <h4 class="card-title">
            {{card.cardTitle}}
          </h4>
          <p class="card-text">{{card.cardText}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="category">
              Kategória: <strong>{{card.cardCat}}</strong>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Main lehúzása és merge-elése saját branch-be

git pull origin main

• A felkiáltójel a branch végén (!) → azt jelzi, hogy a branch nincs szinkronban a remote-tal (tipikusan van rajta olyan commit, amit még nem toltál fel, vagy épp rebase közben van). Ez egy figyelmeztetés, nem hiba.
• A (Rebasing) felirat → azt jelenti, hogy épp egy git rebase művelet van folyamatban. A Git ilyenkor lépésről lépésre “újrajátssza” a commitjaidat egy másik bázisra.
  • Ha minden tiszta, automatikusan végigmegy.
  • Ha ütközés van, meg kell oldanod, majd git rebase --continue.
  • Ha mégsem akarod, git rebase --abort.

Personal Access Token

git pull
username
password

Visszaállítja a munkakönyvtár összes fájlját az utolsó commit állapotára

git checkout -- .

Delete local branch

git branch -d branch_name

git branch -D branch_name

A -d opció csak akkor törli a branch-et, ha az már be lett mergelve a jelenlegi branch-be, míg a -D opció erőltetetten törli, függetlenül attól, hogy be lett-e mergelve.

Delete remote branch

git push origin --delete branch_name

Re-Push all files to repository

git commit --allow-empty -m "Trigger deployment"
git push origin main  # vagy az aktuális branch

Stash

git stash
git stash save 'comment example'
git stash list
git stash apply
git stash apply stash@{n}
git stash drop stash@{n}
git stash clear

Merge

git checkout dev
git pull
git checkout <sajat branch-em>
git merge dev

Vim Commit

• Írd be az üzenetet:

Merge dev branch into feature/HKD-674

• Nyomd meg Esc.
• Írd be :wq és nyomj Enter.

Ezek után a merge commit el fog készülni, és tovább tudsz lépni a fejlesztésben.

Git rebase

git checkout develop
git pull
git checkout branch-name
git rebase develop
git push origin +branch-name

Discard all

git reset --hard

Disconnect remote repo

git remote rm origin

// Enable PPA for PHP 7.4 in your system and install it.
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
 
sudo apt-get install php7.4
sudo apt-get install php7.4-cli php7.4-common php7.4-json php7.4-opcache php7.4-mysql php7.4-mbstring  php7.4-zip php7.4-fpm php7.4-intl php7.4-simplexml
 
// a2dismod disables the php8.0 module by removing those symlinks.
sudo a2dismod php8.0
 
// a2enmod enables php7.4 module within the apache2 configuration.
sudo a2enmod php7.4
 
// Restart apache2 service.
sudo service apache2 restart  
 
// Set alternative name path.
sudo update-alternatives --set php /usr/bin/php7.4
sudo update-alternatives --set phar /usr/bin/phar7.4
sudo update-alternatives --set phar.phar /usr/bin/phar.phar7.4
sudo update-alternatives --set phpize /usr/bin/phpize7.4
sudo update-alternatives --set php-config /usr/bin/php-config7.4

Check php version from terminal

php --version

Create a new droplet with password

#01 – LOGIN AS ROOT

ssh root@207.154.213.152

#02 – CHECK FOR UPDATES

apt update

#03 – RUN UPDATES

apt dist-upgrade

#04 – REBOOT THE VPS

reboot

#05 – CREATE NON ROOT USER

adduser wpflames

#06 – ADD SUPER USER PERMISSION

usermod -aG sudo wpflames

#07 – LOGIN WITH NEW USER to test

ssh wpflames@207.154.213.152

#08 – GENERATE SSH KEY ON YOUR COMPUTER

logout

ssh-keygen -t rsa -b 4096 -C "info@wpflames.com"

#09 – CHANGE PERMISSIONS

mkdir .ssh
sudo chmod -R go= .ssh
sudo chown -R wpflames:$wpflames .ssh
sudo chown -R wpflames:wpflames /var/www/html/
exit

#10 – COPY THE SSH KEY TO THE SERVER

ssh-copy-id wpflames@46.101.179.210

#11 – LOGIN USING SSH KEY WITHOUT PASSWORD

ssh wpflames@207.154.213.152

#12 – SECURE SSH CONNECTION – SSH CONFIG FILE

sudo nano /etc/ssh/sshd_config

Search: Ctrl + w

PermitRootLogin no
PasswordAuthentication no
PermitEmptyPasswords no
Port 4400

#13 – SSH SERVICE RESTART

Reload the sshd service to put these changes into effect:

sudo systemctl reload sshd

#14 – SSH LOGIN PORT 4400

ssh wpflames@167.172.161.138 -p 4400

Ha a véletlenül kitiltod magad, Digital Ocean admin console-lal belépsz root-ként

Megnézzük, melyik port aktív:

ss -tl

Check php version from terminal

php --version

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;

@use '../../../scss/shared' as *;

.entry-title{
    font-size: 30px;
    @include media-breakpoint-up(md){
        font-size: 48px;
    }
}

ngIf mobile

mobile: boolean = false;  

@HostListener('window:resize', ['$event'])
onResize(event: any){
  if (event.target.innerWidth <= 568) { // 768px portrait
    this.mobile = true;
  } else{
    this.mobile = false;
  }
}

html

<div (window:resize) = "onResize($event)" class="single-product">
    <div *ngIf="!mobile"  class="img">
        <img src="https://picsum.photos/600/600" alt="Lorem ipsum">
    </div>
    <div class="single-product-wrap">
        <div class="single-product-caption">
            <h2 class="title">{{data!.title}}</h2>
            <p class="text">{{data!.lead}}</p>
        </div>
        <div *ngIf="mobile" class="img">
            <img src="https://picsum.photos/536/354" alt="Lorem ipsum">
        </div>
        <div class="prices">
            <div class="price-normal">
                Régi ár: <del>{{data!.priceNormal}}</del>
            </div>
            <div class="price-sale">
                Új ár: <ins>{{data!.priceSale}}</ins>
            </div>
        </div>
    </div>
</div>

import helyett use

ez van abban amit behuzol:

_export-vars.scss

SCSS

@mixin exportVars($vars) {
  --kui-red-100: map.get($config, 'red-100', $red-100);
  --kui-font-primary: map.get($config, 'font-primary', $font-primary)
}

es igy kell behuzni:

@use 'export-vars' with {
  $vars: (
    "red-100": #aa0000,
    "font-primary": Roboto
  )
}