Skip to content

Instantly share code, notes, and snippets.

View atomjoy's full-sized avatar

Atomjoy atomjoy

6 followers · 0 following
View GitHub Profile
@atomjoy
atomjoy / ChangeTheme.vue
Created March 22, 2025 10:00
Change page theme in Vue 3.
<script setup>
import { onMounted, ref } from 'vue';
let th = ref('light');
th.value = localStorage.getItem('theme-xxx-theme') ?? 'light';
function update() {
document.querySelector('html').setAttribute('color-scheme', th.value);
}
@atomjoy
atomjoy / ChangeTitle.vue
Created March 22, 2025 09:58
Change page title in Vue 3.
<template></template>
<script setup>
import { useI18n } from 'vue-i18n';
import { watch, onMounted } from 'vue';
const { t, locale } = useI18n({ useScope: 'global' });
const props = defineProps({
title: {
type: String,
@atomjoy
atomjoy / ChangeDescription.vue
Created March 22, 2025 09:57
Change page description in Vue 3.
<template></template>
<script setup>
import { watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ useScope: 'global' });
const props = defineProps({
description: {
type: String,
@atomjoy
atomjoy / ChangeBg.vue
Last active March 22, 2025 10:37
Vue 3 css v-bind attributes, color and background image url (background-attachment fixed).
<script setup>
import { onBeforeMount } from 'vue';
let props = defineProps({
image: { type: String, default: '/default/default.webp' },
});
onBeforeMount(() => {
const img = new Image();
img.src = props.image;
@atomjoy
atomjoy / code-line-numbers.css
Created March 20, 2025 11:31
CSS Pre code line numbers.
/*
Line numbers css
<pre>
<code>
<span class="line">Line 1</span>
<span class="line">Line 2</span>
<span class="line">Line 3</span>
</code>
@atomjoy
atomjoy / Html.php
Last active March 20, 2025 16:28
Html entities in php articles (Laravel, Vue).
<?php
namespace App\Validate;
use Throwable;
use DOMDocument;
/**
* Dla artykułu na bloga
* Zapisz normalnie html z textarea do bazy danych w laravelu
@atomjoy
atomjoy / code_htmlentities.php
Last active March 20, 2025 16:29
Czyszczenie tagów z html w php.
<?php
$code = '<h1>Article title goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate iste blanditiis ratione possimus in eum. Dolore assumenda eos, qui quia illo cumque ab recusandae dolor itaque nemo, tenetur minima doloribus?</p>
<style>pre {background: #fafafa; color: #010101;font-family:consolas;font-size:16px}</style>
<pre>
<code wow="error">
<span style="color: red;">Hello</span>
<?php
echo "hello from js";
@atomjoy
atomjoy / htmlentities.vue
Last active March 18, 2025 12:33
How to display html with php code in pre code tags in JavaScript and Vue 3.
<script setup>
import { ref } from 'vue';
function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
let code = ref(`
<span style="color: red;">Hello</span>
<?php
@atomjoy
atomjoy / bw-theme.css
Last active March 1, 2025 20:04
Css minimal styles
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
:root {
--bw-text-1: #0f0f0f;
@atomjoy
atomjoy / theme.css
Last active February 22, 2025 19:35
Dark, light mode css.
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
:root {
--color-gray-50: #fafafa;