Skip to content

Instantly share code, notes, and snippets.

View atomjoy's full-sized avatar

Atomjoy atomjoy

View GitHub Profile
@atomjoy
atomjoy / Ftp-Storage-Image-Upload-Laravel.md
Created March 28, 2025 12:56
Laravel FTP Storage image upload.
@atomjoy
atomjoy / Paginate-Laravel.md
Created March 28, 2025 12:23
How to paginate models in Laravel application.

Laravel Paginate

Pagination is a technique used to divide a large dataset into smaller pages.

Paginate

<?php

use App\Models\User;
@atomjoy
atomjoy / Polymorphic-Relations-Laravel.md
Last active March 28, 2025 18:31
Polymorphic relationships in Laravel.

Polymorphic Relations in Laravel

A polymorphic relationship allows a single table (model) to be associated with multiple other tables (models).

One to One (Polymorphic)

One to One Tables

admin
@atomjoy
atomjoy / 001_ArticleResource.php
Last active March 26, 2025 12:18
Add additional data to resource.
<?php
namespace App\Http\Resources;
use App\Models\Admin;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;
class ArticleResource extends JsonResource
{
@atomjoy
atomjoy / Paginate-Relations-In-Laravel.md
Last active March 22, 2025 19:37
How to paginate category model articles relations with resource class in Laravel.

Paginate Relations in Laravel

How to paginate category model articles relations with resource class in Laravel.

CategoryResource.php

<?php

namespace App\Http\Resources;
@atomjoy
atomjoy / LoadSvg1.vue
Last active March 22, 2025 10:19
Load svg in Vue 3 component dynamically.
<script setup>
import svg from '@/assets/svg/edit-svgrepo-com.svg?raw';
</script>
<template>
<div class="input-wrapper__icon" v-html="svg"></div>
</template>
@atomjoy
atomjoy / ShikiCodeHighlighter.vue
Last active March 22, 2025 10:16
Vue 3 Shiki Highlighter component (multipe code tags)
<script setup>
import { codeToHtml } from 'https://esm.sh/[email protected]';
import { onMounted } from 'vue';
onMounted(() => {
const all = document.querySelectorAll('code');
all.forEach(async (f) => {
const theme = ['github-light', 'slack-ochin', 'vitesse-light', 'everforest-light', 'everforest-dark', 'vitesse-dark', 'one-dark-pro', 'synthwave-84', 'gruvbox-dark-medium', 'gruvbox-dark-soft', 'gruvbox-light-soft', 'rose-pine', 'rose-pine-moon', 'rose-pine-dawn', 'plastic', 'laserwave', 'kanagawa-dragon', 'kanagawa-wave', 'material-theme', 'material-theme-darker'];
let code = f.innerText;
@atomjoy
atomjoy / AddSchema.vue
Created March 22, 2025 10:05
Add page structured data in json in Vue 3.
<template></template>
<script setup>
import { watch } from 'vue';
const props = defineProps({
json: {
type: [Array, Object],
default: [],
},
});
@atomjoy
atomjoy / AddMeta.vue
Created March 22, 2025 10:04
Add page meta tags in Vue 3.
<template></template>
<script setup>
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ useScope: 'global' });
const props = defineProps({
json: {
type: [Array, Object],
@atomjoy
atomjoy / ChangeLocale.vue
Created March 22, 2025 10:01
Change locale in Vue 3.
<template>
<div class="change_locale">
<select v-model="locale" class="locale_select">
<option
v-for="lang in availableLocales"
:key="`locale-${lang}`"
:value="lang"
>
{{ t(lang) }}
</option>