You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

102 lines
54 KiB

<!doctype html><html lang=en dir=ltr><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Rich Content – Simple CRUD Generator for Laravel</title><script defer src=/SimpleCrudGenerator/js/fuse.min.94c78ad70b02749822921660cf4e9f0b3701bc0680c421afb784a78228de0275.js></script><script src=/SimpleCrudGenerator/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/SimpleCrudGenerator/js/lazysizes.min.31dd6a2d3a1ec0f78a8df007535cf23f03aeb5c70f026e6d6a19dac3b3acc340.js></script><script defer src=/SimpleCrudGenerator/js/helper/getParents.min.1618c696be7c98933f9a92677f518b512a74e55bdbb976b09936b4182e93181b.js></script><script defer src=/SimpleCrudGenerator/js/helper/fadeinout.min.93a331f96194789a542f33690bbe4f0c102c7e78ffc018217f5a1c33010bad91.js></script><script>"use strict";window.onload=function(){var languagedir=JSON.parse("\"ltr\"");var baseurl=JSON.parse("\"https://nafiesl.github.io/SimpleCrudGenerator\"");var permalink=JSON.parse("\"https://nafiesl.github.io/SimpleCrudGenerator/blog/rich-content/\"");var toggleSidebarElem=document.getElementById("toggle-sidebar");var toggleMenuElem=document.getElementById("toggle-menu");var tocBodyElem=document.querySelector('.toc__body');var tocLabelElem=document.querySelector('.toc__label');var listMainElem=document.getElementById('list-main');var listSideElem=document.getElementById('list-side');var singleMenuElem=document.getElementById('single-menu');var sliderIcons=document.querySelectorAll('.slider__icon');toggleSidebarElem?toggleSidebarElem.addEventListener('change',function(e){if(e.target.checked){if(tocBodyElem){fadeIn(tocBodyElem,200);}
if(tocLabelElem){fadeIn(tocLabelElem,200);}
if(listMainElem&&listSideElem){listMainElem.className='m';listSideElem.className='r';}
sliderIcons&&sliderIcons.forEach(function(elem){if(elem.classList.contains('hide')){elem.classList.remove('hide');}else{elem.classList.add('hide');}});}else{if(tocBodyElem){fadeOut(tocBodyElem,200);}
if(tocLabelElem){fadeOut(tocLabelElem,200);}
if(listMainElem&&listSideElem){listMainElem.className='mr';listSideElem.className='hide';}
sliderIcons&&sliderIcons.forEach(function(elem){if(elem.classList.contains('hide')){elem.classList.remove('hide');}else{elem.classList.add('hide');}});}}):null;toggleMenuElem?toggleMenuElem.addEventListener('change',function(e){if(e.target.checked){if(listMainElem&&singleMenuElem){listMainElem.className='m';singleMenuElem.className='l';}
sliderIcons&&sliderIcons.forEach(function(elem){if(elem.classList.contains('hide')){elem.classList.remove('hide');}else{elem.classList.add('hide');}});}else{if(listMainElem&&singleMenuElem){listMainElem.className='lm';singleMenuElem.className='hide';}
sliderIcons&&sliderIcons.forEach(function(elem){if(elem.classList.contains('hide')){elem.classList.remove('hide');}else{elem.classList.add('hide');}});}}):null;var navCollapseBtn=document.getElementById('navCollapseBtn');navCollapseBtn?navCollapseBtn.addEventListener('click',function(e){var navCollapse=document.querySelector('.navbar__collapse');if(navCollapse){var dataOpen=navCollapse.getAttribute('data-open');if(dataOpen==='true'){navCollapse.setAttribute('data-open','false');navCollapse.style.maxHeight=0;}else{navCollapse.setAttribute('data-open','true');navCollapse.style.maxHeight=navCollapse.scrollHeight+"px";}}}):null;var expandBtn=document.querySelectorAll('.expand__button');for(let i=0;i<expandBtn.length;i++){expandBtn[i].addEventListener("click",function(){var content=this.nextElementSibling;if(content.style.maxHeight){content.style.maxHeight=null;this.querySelector('svg').classList.add('expand-icon__right');this.querySelector('svg').classList.remove('expand-icon__down');}else{content.style.maxHeight=content.scrollHeight+"px";this.querySelector('svg').classList.remove('expand-icon__right');this.querySelector('svg').classList.add('expand-icon__down');}});}
document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(elem,idx){var containerId=elem.getAttribute('id');var containerElem=elem;var tabLinks=elem.querySelectorAll('.tab__link');var tabContents=elem.querySelectorAll('.tab__content');var ids=[];tabLinks&&tabLinks.length>0?tabLinks.forEach(function(link,index,self){link.onclick=function(e){for(var i=0;i<self.length;i++){if(index===parseInt(i,10)){if(!self[i].classList.contains('active')){self[i].classList.add('active');tabContents[i].style.display='block';}}else{self[i].classList.remove('active');tabContents[i].style.display='none';}}}}):null;}):null;document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(elem,idx){var containerId=elem.getAttribute('id');var containerElem=elem;var codetabLinks=elem.querySelectorAll('.codetab__link');var codetabContents=elem.querySelectorAll('.codetab__content');var ids=[];codetabLinks&&codetabLinks.length>0?codetabLinks.forEach(function(link,index,self){link.onclick=function(e){for(var i=0;i<self.length;i++){if(index===parseInt(i,10)){if(!self[i].classList.contains('active')){self[i].classList.add('active');codetabContents[i].style.display='block';}}else{self[i].classList.remove('active');codetabContents[i].style.display='none';}}}}):null;}):null;var enableDarkMode=JSON.parse("true");var root=document.getElementById('root');var toggleToLightBtn=document.getElementById('toggleToLight');var toggleToDarkBtn=document.getElementById('toggleToDark');if(!enableDarkMode){root.className='theme__light';localStorage.setItem('theme','light');}
if(toggleToDarkBtn){toggleToDarkBtn.onclick=function(e){root.className='theme__dark';localStorage.setItem('theme','dark');toggleToLightBtn.className='navbar__icons--icon';toggleToDarkBtn.className='hide';}}
if(toggleToLightBtn){toggleToLightBtn.onclick=function(e){root.className='theme__light';localStorage.setItem('theme','light');toggleToLightBtn.className='hide';toggleToDarkBtn.className='navbar__icons--icon';}}
document.querySelectorAll('.menu__list').forEach(function(elem){if(elem.classList.contains('active')){elem.style.maxHeight=elem.scrollHeight+"px";}});document.querySelectorAll('.menu__title--collapse').forEach(function(elem){elem.addEventListener('click',function(e){var content=this.nextElementSibling;var menuTitleIcon=this.querySelector('.menu__title--icon');if(!content){return null;}
var parent=elem.parentNode;while(parent.classList.contains('menu__list')&&parent.classList.contains('active')){parent.style.maxHeight=100*parent.children.length+"px";parent=parent.parentNode;}
if(content.style.maxHeight){content.style.maxHeight=null;content.classList.remove('active');menuTitleIcon.classList.add('right');if(languagedir==='rtl'){menuTitleIcon.classList.remove('downrtl');}else{menuTitleIcon.classList.remove('down');}}else{content.style.maxHeight=content.scrollHeight+"px";content.classList.add('active');menuTitleIcon.classList.remove('right');if(languagedir==='rtl'){menuTitleIcon.classList.add('downrtl');}else{menuTitleIcon.classList.add('down');}}});});var mobileLogo=document.getElementById('mobileLogo');var modal=document.getElementById("myModal");var drawer=document.getElementById('myDrawer');var drawerCloseBtn=document.querySelector('.drawer__close');var openDrawer=function(){modal.style.opacity=1;if(languagedir==='rtl'){modal.style.right=0;drawer.style.right=0;}else{modal.style.left=0;drawer.style.left=0;}}
var closeDrawer=function(){modal.style.opacity=0;if(languagedir==='rtl'){drawer.style.right='-100%';}else{drawer.style.left='-100%';}
setTimeout(function(){if(languagedir==='rtl'){modal.style.right='-100%';}else{modal.style.left='-100%';}},250);}
mobileLogo.onclick=function(){openDrawer();localStorage.setItem('isDrawerOpen','true');}
modal.onclick=function(){closeDrawer();localStorage.setItem('isDrawerOpen','false');}
drawerCloseBtn.onclick=function(){closeDrawer();localStorage.setItem('isDrawerOpen','false');}
var lastScrollTop=window.pageYOffset||document.documentElement.scrollTop;var tocElem=document.querySelector('.toc');var tableOfContentsElem=tocElem?tocElem.querySelector('#TableOfContents'):null;var singleContentsElem=document.querySelector('.single__contents');var dataBGImgs=document.querySelectorAll('div[data-bgimg]');var tocLevels=JSON.parse("[\"h2\",\"h3\",\"h4\"]");if(tocLevels){tocLevels=tocLevels.toString();}else{tocLevels="h1, h2, h3, h4, h5, h6";}
var isLandingBgImg=JSON.parse("null");var isHome=JSON.parse("false");function setNavbarBG(scrollTop){if(isHome&&isLandingBgImg&&Object.keys(isLandingBgImg).length){if(isLandingBgImg.height<=scrollTop){dataBGImgs.forEach(function(elem){elem.setAttribute('data-bgimg','false');});}else{dataBGImgs.forEach(function(elem){elem.setAttribute('data-bgimg','true');});}}}
setNavbarBG(lastScrollTop);window.onscroll=function(){var st=window.pageYOffset||document.documentElement.scrollTop;if(st>lastScrollTop){singleContentsElem?singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem){if(document.documentElement.scrollTop>=elem.offsetTop){if(tableOfContentsElem){var id=elem.getAttribute('id');tocElem.querySelectorAll('a').forEach(function(elem){elem.classList.remove('active');});tocElem.querySelector('a[href="#'+id+'"]')?tocElem.querySelector('a[href="#'+id+'"]').classList.add('active'):null;}}}):null;setNavbarBG(st);}else{singleContentsElem?singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem){if(document.documentElement.scrollTop>=elem.offsetTop){if(tableOfContentsElem){var id=elem.getAttribute('id');tocElem.querySelectorAll('a').forEach(function(elem){elem.classList.remove('active');});tocElem.querySelector('a[href="#'+id+'"]')?tocElem.querySelector('a[href="#'+id+'"]').classList.add('active'):null;}}}):null;setNavbarBG(st);}
lastScrollTop=st<=0?0:st;};var mobileSearchInputElem=document.querySelector('#search-mobile');var mobileSearchClassElem=document.querySelector('.mobile-search');var mobileSearchBtnElem=document.querySelector('#mobileSearchBtn');var mobileSearchCloseBtnElem=document.querySelector('#search-mobile-close');var mobileSearchContainer=document.querySelector('#search-mobile-container');var mobileSearchResultsElem=document.querySelector('#search-mobile-results');var htmlElem=document.querySelector('html');if(mobileSearchClassElem){mobileSearchClassElem.style.display='none';}
mobileSearchBtnElem?mobileSearchBtnElem.addEventListener('click',function(){if(mobileSearchContainer){mobileSearchContainer.style.display='block';}
if(mobileSearchInputElem){mobileSearchInputElem.focus();}
if(htmlElem){htmlElem.style.overflowY='hidden';}}):null;mobileSearchCloseBtnElem?mobileSearchCloseBtnElem.addEventListener('click',function(){if(mobileSearchContainer){mobileSearchContainer.style.display='none';}
if(mobileSearchInputElem){mobileSearchInputElem.value='';}
if(mobileSearchResultsElem){while(mobileSearchResultsElem.firstChild){mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);}}
if(htmlElem){htmlElem.style.overflowY='visible';}}):null;mobileSearchInputElem?mobileSearchInputElem.addEventListener('keydown',function(e){if(e.key==='Escape'){if(mobileSearchContainer){mobileSearchContainer.style.display='none';}
if(mobileSearchInputElem){mobileSearchInputElem.value='';}
if(mobileSearchResultsElem){while(mobileSearchResultsElem.firstChild){mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);}}
if(htmlElem){htmlElem.style.overflowY='visible';}}}):null;var localTheme=localStorage.getItem('theme');var rootEleme=document.getElementById('root');var selectThemeElem=document.querySelectorAll('.select-theme');var selectThemeItemElem=document.querySelectorAll('.select-theme__item');if(localTheme){selectThemeItemElem?selectThemeItemElem.forEach(function(elem){if(elem.text.trim()===localTheme){elem.classList.add('is-active');}else{elem.classList.remove('is-active');}}):null;}
selectThemeItemElem?selectThemeItemElem.forEach(function(v,i){v.addEventListener('click',function(e){var selectedThemeVariant=e.target.text.trim();localStorage.setItem('theme',selectedThemeVariant);rootEleme.removeAttribute('class');rootEleme.classList.add(`theme__${selectedThemeVariant}`);selectThemeElem.forEach(function(rootElem){rootElem.querySelectorAll('a').forEach(function(elem){if(elem.classList){if(elem.text.trim()===selectedThemeVariant){if(!elem.classList.contains('is-active')){elem.classList.add('is-active');}}else{if(elem.classList.contains('is-active')){elem.classList.remove('is-active');}}}});});if(window.mermaid){if(selectedThemeVariant==="dark"||selectedThemeVariant==="hacker"){mermaid.initialize({theme:'dark'});location.reload();}else{mermaid.initialize({theme:'default'});location.reload();}}
var utterances=document.querySelector('iframe');if(utterances){utterances.contentWindow.postMessage({type:'set-theme',theme:selectedThemeVariant==="dark"||selectedThemeVariant==="hacker"?'photon-dark':selectedThemeVariant==='kimbie'?'github-dark-orange':'github-light',},'https://utteranc.es');}});}):null;var langprefix=JSON.parse("\"\"");var searchResults=null;var searchMenu=null;var searchText=null;var enableSearchHighlight=JSON.parse("true");var enableSearch=JSON.parse("true");var fuse=null;if(enableSearch){(function initFuse(){var xhr=new XMLHttpRequest();xhr.open('GET',baseurl+langprefix+"/index.json");xhr.setRequestHeader('Content-Type','application/json; charset=utf-8');xhr.onload=function(){if(xhr.status===200){fuse=new Fuse(JSON.parse(xhr.response.toString('utf-8')),{keys:['title','description','content'],includeMatches:enableSearchHighlight,shouldSort:true,threshold:0.4,location:0,distance:100,maxPatternLength:32,minMatchCharLength:1,});}
else{console.error(`[${xhr.status}]Error:`,xhr.statusText);}};xhr.send();})();}
function makeLi(ulElem,obj){var li=document.createElement('li');li.className='search-result__item';var a=document.createElement('a');a.innerHTML=obj.title;a.setAttribute('class','search-result__item--title');a.setAttribute('href',obj.permalink);var descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');if(obj.description){descDiv.innerHTML=obj.description;}else if(obj.content){descDiv.innerHTML=obj.content.substring(0,80);}
li.appendChild(a);li.appendChild(descDiv);ulElem.appendChild(li);}
function makeHighlightLi(ulElem,obj){var li=document.createElement('li');li.className='search-result__item';var descDiv=null;var a=document.createElement('a');a.innerHTML=obj.item.title;a.setAttribute('class','search-result__item--title');a.setAttribute('href',obj.item.uri);if(obj.matches&&obj.matches.length){for(var i=0;i<obj.matches.length;i++){if('title'===obj.matches[i].key){a=document.createElement('a');a.innerHTML=generateHighlightedText(obj.matches[i].value,obj.matches[i].indices);a.setAttribute('class','search-result__item--title');a.setAttribute('href',obj.item.uri);}
if('description'===obj.matches[i].key){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=generateHighlightedText(obj.item.description,obj.matches[i].indices);}else if('content'===obj.matches[i].key){if(!descDiv){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=generateHighlightedText(obj.item.content.substring(0,80),obj.matches[i].indices);}}else{if(obj.item.description){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=obj.item.description;}else{descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=obj.item.content.substring(0,80);}}}
li.appendChild(a);if(descDiv){li.appendChild(descDiv);}
if(li){ulElem.appendChild(li);}}}
function renderSearchResults(searchText,results){searchResults=document.getElementById('search-results');searchMenu=document.getElementById('search-menu');searchResults.setAttribute('class','dd is-active');var ul=document.createElement('ul');ul.setAttribute('class','dd-content search-content');if(results.length){results.forEach(function(result){var li=document.createElement('li');var a=document.createElement('a');a.setAttribute('href',result.uri);a.setAttribute('class','dd-item');a.appendChild(li);var titleDiv=document.createElement('div');titleDiv.innerHTML=result.title;titleDiv.setAttribute('class','search-result__item--title');var descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');if(result.description){descDiv.innerHTML=result.description;}else if(result.content){descDiv.innerHTML=result.content.substring(0,80);}
li.appendChild(titleDiv);li.appendChild(descDiv);ul.appendChild(a);});}else{var li=document.createElement('li');li.setAttribute('class','dd-item');li.innerText='No results found';ul.appendChild(li);}
while(searchMenu.hasChildNodes()){searchMenu.removeChild(searchMenu.lastChild);}
searchMenu.appendChild(ul);}
function renderSearchHighlightResults(searchText,results){searchResults=document.getElementById('search-results');searchMenu=document.getElementById('search-menu');searchResults.setAttribute('class','dd is-active');var ul=document.createElement('ul');ul.setAttribute('class','dd-content search-content');if(results.length){results.forEach(function(result){var li=document.createElement('li');var a=document.createElement('a');var descDiv=null;a.setAttribute('href',result.item.uri);a.setAttribute('class','dd-item');a.appendChild(li);var titleDiv=document.createElement('div');titleDiv.innerHTML=result.item.title;titleDiv.setAttribute('class','search-result__item--title');if(result.matches&&result.matches.length){for(var i=0;i<result.matches.length;i++){if('title'===result.matches[i].key){titleDiv.innerHTML=generateHighlightedText(result.matches[i].value,result.matches[i].indices);}
if('description'===result.matches[i].key){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=generateHighlightedText(result.item.description,result.matches[i].indices);}else if('content'===result.matches[i].key){if(!descDiv){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=generateHighlightedText(result.item.content.substring(0,80),result.matches[i].indices);}}else{if(result.item.description){descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=result.item.description;}else{descDiv=document.createElement('div');descDiv.setAttribute('class','search-result__item--desc');descDiv.innerHTML=result.item.content.substring(0,80);}}}
li.appendChild(titleDiv);if(descDiv){li.appendChild(descDiv);}
ul.appendChild(a);}});}else{var li=document.createElement('li');li.setAttribute('class','dd-item');li.innerText='No results found';ul.appendChild(li);}
while(searchMenu.hasChildNodes()){searchMenu.removeChild(searchMenu.lastChild);}
searchMenu.appendChild(ul);}
function renderSearchResultsMobile(searchText,results){searchResults=document.getElementById('search-mobile-results');var content=document.createElement('div');content.setAttribute('class','mobile-search__content');if(results.length>0){results.forEach(function(result){var item=document.createElement('a');item.setAttribute('href',result.uri);item.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+result.title+'</div><div class="mobile-search__item--desc">'+(result.description?result.description:result.content)+'</div></div>';content.appendChild(item);});}else{var item=document.createElement('span');content.appendChild(item);}
let wrap=document.getElementById('search-mobile-results');while(wrap.firstChild){wrap.removeChild(wrap.firstChild)}
searchResults.appendChild(content);}
function renderSearchHighlightResultsMobile(searchText,results){searchResults=document.getElementById('search-mobile-results');var ul=document.createElement('div');ul.setAttribute('class','mobile-search__content');if(results.length){results.forEach(function(result){var li=document.createElement('li');var a=document.createElement('a');var descDiv=null;a.setAttribute('href',result.item.uri);a.appendChild(li);li.setAttribute('class','mobile-search__item');var titleDiv=document.createElement('div');titleDiv.innerHTML=result.item.title;titleDiv.setAttribute('class','mobile-search__item--title');if(result.matches&&result.matches.length){for(var i=0;i<result.matches.length;i++){if('title'===result.matches[i].key){titleDiv.innerHTML=generateHighlightedText(result.matches[i].value,result.matches[i].indices);}
if('description'===result.matches[i].key){descDiv=document.createElement('div');descDiv.setAttribute('class','mobile-search__item--desc');descDiv.innerHTML=generateHighlightedText(result.item.description,result.matches[i].indices);}else if('content'===result.matches[i].key){if(!descDiv){descDiv=document.createElement('div');descDiv.setAttribute('class','mobile-search__item--desc');descDiv.innerHTML=generateHighlightedText(result.item.content.substring(0,150),result.matches[i].indices);}}else{if(result.item.description){descDiv=document.createElement('div');descDiv.setAttribute('class','mobile-search__item--desc');descDiv.innerHTML=result.item.description;}else{descDiv=document.createElement('div');descDiv.setAttribute('class','mobile-search__item--desc');descDiv.innerHTML=result.item.content.substring(0,150);}}}
li.appendChild(titleDiv);if(descDiv){li.appendChild(descDiv);}
ul.appendChild(a);}});}else{var item=document.createElement('span');ul.appendChild(item);}
let wrap=document.getElementById('search-mobile-results');while(wrap.firstChild){wrap.removeChild(wrap.firstChild)}
searchResults.appendChild(ul);}
function generateHighlightedText(text,regions){if(!regions){return text;}
var content='',nextUnhighlightedRegionStartingIndex=0;regions.forEach(function(region){if(region[0]===region[1]){return null;}
content+=''+
text.substring(nextUnhighlightedRegionStartingIndex,region[0])+
'<span class="search__highlight">'+
text.substring(region[0],region[1]+1)+
'</span>'+
'';nextUnhighlightedRegionStartingIndex=region[1]+1;});content+=text.substring(nextUnhighlightedRegionStartingIndex);return content;};var searchElem=document.getElementById('search');var searchMobile=document.getElementById('search-mobile');var searchResultsContainer=document.getElementById('search-results');searchElem?searchElem.addEventListener('input',function(e){if(!e.target.value|window.innerWidth<770){searchResultsContainer?searchResultsContainer.setAttribute('class','dd'):null;return null;}
searchText=e.target.value;var results=fuse.search(e.target.value);if(enableSearchHighlight){renderSearchHighlightResults(searchText,results);}else{renderSearchResults(searchText,results);}
var dropdownItems=searchResultsContainer.querySelectorAll('.dd-item');dropdownItems?dropdownItems.forEach(function(item){item.addEventListener('mousedown',function(e){e.target.click();});}):null;}):null;searchElem?searchElem.addEventListener('blur',function(){if(window.innerWidth<770){return null;}
searchResultsContainer?searchResultsContainer.setAttribute('class','dd'):null;}):null;searchElem?searchElem.addEventListener('click',function(e){if(window.innerWidth<770){return null;}
if(!e.target.value){searchResultsContainer?searchResultsContainer.setAttribute('class','dd'):null;return null;}
searchText=e.target.value;var results=fuse.search(e.target.value);if(enableSearchHighlight){renderSearchHighlightResults(searchText,results);}else{renderSearchResults(searchText,results);}
var dropdownItems=searchResultsContainer.querySelectorAll('.dd-item');dropdownItems?dropdownItems.forEach(function(item){item.addEventListener('mousedown',function(e){e.target.click();});}):null;}):null;var searchMenuElem=document.getElementById("search-menu");var activeItem=document.querySelector('#search-menu .dd-item.is-active');var activeIndex=null;var items=null;var searchContainerMaxHeight=350;searchElem?searchElem.addEventListener('keydown',function(e){if(window.innerWidth<770){return null;}
var items=document.querySelectorAll('#search-menu .dd-item');if(e.key==='ArrowDown'){if(activeIndex===null){activeIndex=0;items[activeIndex].classList.remove('is-active');}else{items[activeIndex].classList.remove('is-active');activeIndex=activeIndex===items.length-1?0:activeIndex+1;}
items[activeIndex].classList.add('is-active');let overflowedPixel=items[activeIndex].offsetTop+items[activeIndex].clientHeight-searchContainerMaxHeight;if(overflowedPixel>0){document.querySelector(".search-content").scrollTop+=items[activeIndex].getBoundingClientRect().height;}else if(activeIndex===0){document.querySelector(".search-content").scrollTop=0;}}else if(e.key==='ArrowUp'){if(activeIndex===null){activeIndex=items.length-1;items[activeIndex].classList.remove('is-active');}else{items[activeIndex].classList.remove('is-active');activeIndex=activeIndex===0?items.length-1:activeIndex-1;}
items[activeIndex].classList.add('is-active');let overflowedPixel=items[activeIndex].offsetTop+items[activeIndex].clientHeight-searchContainerMaxHeight;if(overflowedPixel<0){document.querySelector(".search-content").scrollTop-=items[activeIndex].getBoundingClientRect().height;}else{document.querySelector(".search-content").scrollTop=overflowedPixel+items[activeIndex].getBoundingClientRect().height;}}else if(e.key==='Enter'){var currentItemLink=items[activeIndex].getAttribute('href');if(currentItemLink){location.href=currentItemLink;}}else if(e.key==='Escape'){e.target.value=null;if(searchResults){searchResults.classList.remove('is-active');}}}):null;searchMobile?searchMobile.addEventListener('input',function(e){if(!e.target.value){let wrap=document.getElementById('search-mobile-results');while(wrap.firstChild){wrap.removeChild(wrap.firstChild);}
return null;}
searchText=e.target.value;var results=fuse.search(e.target.value);if(enableSearchHighlight){renderSearchHighlightResultsMobile(searchText,results);}else{renderSearchResultsMobile(searchText,results);}
var dropdownItems=searchResultsContainer.querySelectorAll('.dd-item');dropdownItems?dropdownItems.forEach(function(item){item.addEventListener('mousedown',function(e){e.target.click();});}):null;}):null;}</script><link rel=stylesheet href=/SimpleCrudGenerator/css/main.min.css><meta name=description content><meta name=keywords content><meta name=created content="2019-03-10T00:00:00+0000"><meta name=modified content="2019-03-10T00:00:00+0000"><meta name=author content="Hugo Authors"><meta property="og:site_name" content="Simple CRUD Generator for Laravel"><meta property="og:title" content="Rich Content"><meta property="og:url" content="https://nafiesl.github.io/SimpleCrudGenerator/blog/rich-content/"><meta property="og:type" content="article"><meta property="og:image" content="https://nafiesl.github.io/SimpleCrudGenerator/images/mountain.jpg"><meta name=generator content="Hugo 0.80.0"><meta name=msapplication-TileColor content="#ffffff"><meta name=theme-color content="#ffffff"><link rel=canonical href=https://nafiesl.github.io/SimpleCrudGenerator/blog/rich-content/><link rel=manifest href=/SimpleCrudGenerator/manifest.json><link rel=apple-touch-icon sizes=57x57 href=/SimpleCrudGenerator/favicon/apple-icon-57x57.png><link rel=apple-touch-icon sizes=60x60 href=/SimpleCrudGenerator/favicon/apple-icon-60x60.png><link rel=apple-touch-icon sizes=72x72 href=/SimpleCrudGenerator/favicon/apple-icon-72x72.png><link rel=apple-touch-icon sizes=76x76 href=/SimpleCrudGenerator/favicon/apple-icon-76x76.png><link rel=apple-touch-icon sizes=114x114 href=/SimpleCrudGenerator/favicon/apple-icon-114x114.png><link rel=apple-touch-icon sizes=120x120 href=/SimpleCrudGenerator/favicon/apple-icon-120x120.png><link rel=apple-touch-icon sizes=144x144 href=/SimpleCrudGenerator/favicon/apple-icon-144x144.png><link rel=apple-touch-icon sizes=152x152 href=/SimpleCrudGenerator/favicon/apple-icon-152x152.png><link rel=apple-touch-icon sizes=180x180 href=/SimpleCrudGenerator/favicon/apple-icon-180x180.png><link rel=icon type=image/png sizes=192x192 href=/SimpleCrudGenerator/favicon/android-icon-192x192.png><link rel=icon type=image/png sizes=192x192 href=/SimpleCrudGenerator/favicon/android-icon-512x512.png><link rel=icon type=image/png sizes=32x32 href=/SimpleCrudGenerator/favicon/favicon-32x32.png><link rel=icon type=image/png sizes=96x96 href=/SimpleCrudGenerator/favicon/favicon-96x96.png><link rel=icon type=image/png sizes=16x16 href=/SimpleCrudGenerator/favicon/favicon-16x16.png><meta name=msapplication-TileColor content="#ffffff"><meta name=msapplication-TileImage content="/ms-icon-144x144.png"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Rich Content","datePublished":"2019-03-10T00:00:00Z","dateModified":"2019-03-10T00:00:00Z","url":"https://nafiesl.github.io/SimpleCrudGenerator/blog/rich-content/","description":"\u003cp\u003eLorem est tota propiore conpellat pectoribus de\u003cbr /\u003e pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice\u003cbr /\u003e subde tollit usus habet Arctonque, furores …\u003c/p\u003e","keywords":["shortcodes","privacy"],"image":"https://nafiesl.github.io/SimpleCrudGenerator/images/mountain.jpg","author":{"@type":"Person","name":"Hugo Authors"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://nafiesl.github.io/SimpleCrudGenerator"},"publisher":{"@type":"Organization","name":"Simple CRUD Generator for Laravel","url":"https://nafiesl.github.io/SimpleCrudGenerator"}}</script></head><body id=root class=theme__light><script>var rootElem=document.getElementById('root');var themeOptions=JSON.parse("[\"light\",\"dark\"]");var localTheme=localStorage.getItem('theme');if(localTheme){if(themeOptions&&themeOptions.length>0){themeOptions.includes(localTheme)?rootElem.className=`theme__${localTheme}`:rootElem.className=`theme__${themeOptions[0]}`;}}</script><div id=container><div id=myDrawer class=drawer><div class=drawer__header><a href=/ class=drawer__header--text>ZDoc</a><div class=grow></div><div class=drawer__close><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M18.3 5.71c-.39-.39-1.02-.39-1.41.0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02.0 1.41s1.02.39 1.41.0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02.0-1.4z"/></svg></div></div><div class=drawer__body><div class=menu><h6 class=menu__label>Rich Content</h6><ul><li><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/markdown-syntax/ class=menu__title>Markdown Syntax Guide</a></li><li class=active><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/rich-content/ class="menu__title active">Rich Content</a></li><li><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/placeholder-text/ class=menu__title>Placeholder Text</a></li><li><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/emoji-support/ class=menu__title>Emoji Support</a></li></ul></div><script>var menuTitle=document.querySelectorAll('.menu__title');var modal=document.getElementById("myModal");var drawer=document.getElementById('myDrawer');var closeDrawer=function(){setTimeout(function(){modal.style.opacity=0;drawer.style.left='-100%';modal.style.left='-100%';},250);}
menuTitle?menuTitle.forEach(function(elem){elem.onclick=function(){closeDrawer();localStorage.setItem('isDrawerOpen','false');}}):null;</script></div></div><div id=myModal class=modal></div><script>var isDrawerOpen=localStorage.getItem('isDrawerOpen');var modal=document.getElementById("myModal");var drawer=document.getElementById('myDrawer');var languagedir=JSON.parse("\"ltr\"");var openDrawer=function(){modal.style.opacity=1;if(languagedir==="rtl"){modal.style.right=0;drawer.style.right=0;}else{modal.style.left=0;drawer.style.left=0;}}
if(isDrawerOpen&&isDrawerOpen==='true'){openDrawer();}</script><nav class=nav><div class=navbar__wrapper data-bgimg=false><div class=divider><div class="navbar lmr"><div id=siteLogo class=navbar__logo--wrapper><a href=/SimpleCrudGenerator/ rel=home class=navbar__logo--link><img src=/SimpleCrudGenerator/logo.png alt=Home class=navbar__logo></a>
<a href=/SimpleCrudGenerator/ rel=home class=navbar__logo--text-link><h6 class=navbar__logo--text data-bgimg=false>ZDoc</h6></a></div><div class=navbar__menu--wrapper><div id=tabletLogo class=hide><a href=/SimpleCrudGenerator/ rel=home class=navbar__logo--link><img src=/SimpleCrudGenerator/logo.png alt=Home class=navbar__logo></a></div><div id=mobileLogo class=hide><a href=# class=navbar__logo--link><div class=navbar__icons--icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M4 18h16c.55.0 1-.45 1-1s-.45-1-1-1H4c-.55.0-1 .45-1 1s.45 1 1 1zm0-5h16c.55.0 1-.45 1-1s-.45-1-1-1H4c-.55.0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55.0 1-.45 1-1s-.45-1-1-1H4c-.55.0-1 .45-1 1z"/></svg></div></a></div><span id=navMenuMobile class=hide><button id=navCollapseBtn class=navbar__dropdown--title aria-label="Section Menu" data-dir=ltr>
blog<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 9.29 12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41.0s.39 1.02.0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41.0L6.7 10.7c-.39-.39-.39-1.02.0-1.41.39-.38 1.03-.39 1.42.0z"/></svg></button><div class=navbar__collapse data-open=false><ul><li class=navbar__menu--mobile-item><a href=/SimpleCrudGenerator/docs>Docs</a></li><li class=navbar__menu--mobile-item><a href=/SimpleCrudGenerator/updates>Updates</a></li><li class="navbar__menu--mobile-item active"><a href=/SimpleCrudGenerator/blog class=active>Blog</a></li></ul></div></span><ul id=navMenu class=navbar__menu><li class=navbar__menu--item><a href=/SimpleCrudGenerator/docs data-bgimg=false>Docs</a></li><li class=navbar__menu--item><a href=/SimpleCrudGenerator/updates data-bgimg=false>Updates</a></li><li class="navbar__menu--item active"><a href=/SimpleCrudGenerator/blog data-bgimg=false>Blog</a></li></ul></div><div class=grow></div><div id=siteSearch><div class=search data-bgimg=false><span class=icon><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentcolor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49.0s.41-1.08.0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></span><input id=search aria-label="Site Search" class=input type=text autocomplete=off placeholder=Search><div id=search-results class=dropdown><div id=search-menu class=dropdown-menu></div></div></div></div><div id=mobileSearch class=hide><div id=mobileSearchBtn class=mobile-search__btn><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentcolor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49.0s.41-1.08.0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div><div id=search-mobile-container class="mobile-search hide"><div class=mobile-search__top><input id=search-mobile type=text aria-label="Mobile Search" placeholder=Search... class=mobile-search__top--input><div id=search-mobile-close class=mobile-search__top--icon><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div id=search-mobile-results class=mobile-search__body></div></div></div><div class=navbar__icons><button id=toggleToDark class=navbar__icons--icon aria-label="Toggle to dark mode"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentcolor" d="M20 15.31 23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31.0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg></button>
<button id=toggleToLight class=navbar__icons--icon aria-label="Toggle to light mode"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentcolor" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31.0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21.0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg></button>
<script>var theme=localStorage.getItem('theme');var toggleToLightBtn=document.getElementById('toggleToLight');var toggleToDarkBtn=document.getElementById('toggleToDark');if(theme&&theme==='dark'){toggleToLightBtn.className='navbar__icons--icon';toggleToDarkBtn.className='hide';}else{toggleToLightBtn.className='hide';toggleToDarkBtn.className='navbar__icons--icon';}</script><div class=navbar__icons--icon><a href=https://github.com/zzossig/hugo-theme-zdoc title="Github repository" aria-label="Github repository" target=_blank rel=noreferrer><svg fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22"><path d="M10.9 2.1c-4.6.5-8.3 4.2-8.8 8.7-.5 4.7 2.2 8.9 6.3 10.5C8.7 21.4 9 21.2 9 20.8v-1.6s-.4.1-.9.1c-1.4.0-2-1.2-2.1-1.9-.1-.4-.3-.7-.6-1C5.1 16.3 5 16.3 5 16.2 5 16 5.3 16 5.4 16c.6.0 1.1.7 1.3 1 .5.8 1.1 1 1.4 1 .4.0.7-.1.9-.2.1-.7.4-1.4 1-1.8-2.3-.5-4-1.8-4-4 0-1.1.5-2.2 1.2-3C7.1 8.8 7 8.3 7 7.6c0-.4.0-.9.2-1.3C7.2 6.1 7.4 6 7.5 6h.1C8.1 6.1 9.1 6.4 10 7.3 10.6 7.1 11.3 7 12 7s1.4.1 2 .3c.9-.9 2-1.2 2.5-1.3h.1c.2.0.3.1.4.3C17 6.7 17 7.2 17 7.6c0 .8-.1 1.2-.2 1.4.7.8 1.2 1.8 1.2 3 0 2.2-1.7 3.5-4 4 .6.5 1 1.4 1 2.3v2.6c0 .3.3.6.7.5 3.7-1.5 6.3-5.1 6.3-9.3C22 6.1 16.9 1.4 10.9 2.1z"/></svg></a></div></div></div></div></div></nav><script>var siteLogo=document.getElementById('siteLogo');var tabletLogo=document.getElementById('tabletLogo');var mobileLogo=document.getElementById('mobileLogo');var navMenu=document.getElementById('navMenu');var navMenuMobile=document.getElementById('navMenuMobile');var siteSearch=document.getElementById('siteSearch');var mobileSearch=document.getElementById('mobileSearch');enquire.register("screen and (max-width:1280px)",{match:function(){siteLogo.className='navbar__logo--wrapper';tabletLogo.className='hide';mobileLogo.className='hide';navMenu.className='navbar__menu';navMenuMobile.className='hide';siteSearch.className='';mobileSearch.className='hide';},unmatch:function(){siteLogo.className='navbar__logo--wrapper';tabletLogo.className='hide';mobileLogo.className='hide';navMenu.className='navbar__menu';navMenuMobile.className='hide';siteSearch.className='';mobileSearch.className='hide';},}).register("screen and (max-width:960px)",{match:function(){siteLogo.className='hide';tabletLogo.className='';mobileLogo.className='hide';navMenu.className='navbar__menu';navMenuMobile.className='hide';siteSearch.className='hide';mobileSearch.className='navbar__icons--icon';},unmatch:function(){siteLogo.className='navbar__logo--wrapper';tabletLogo.className='hide';mobileLogo.className='hide';navMenu.className='navbar__menu';navMenuMobile.className='hide';siteSearch.className='';mobileSearch.className='hide';},}).register("screen and (max-width:600px)",{match:function(){siteLogo.className='hide';tabletLogo.className='hide';mobileLogo.className='';navMenu.className='hide';navMenuMobile.className='';siteSearch.className='hide';mobileSearch.className='navbar__icons--icon';},unmatch:function(){siteLogo.className='hide';tabletLogo.className='';mobileLogo.className='hide';navMenu.className='navbar__menu';navMenuMobile.className='hide';siteSearch.className='hide';mobileSearch.className='navbar__icons--icon';},});</script><div class=mid><div class=divider><nav id=single-menu class=l data-dir=ltr></nav><article id=list-main class=m data-dir=ltr><nav class=breadcrumb aria-label=breadcrumbs data-is-blog=true><ol><li><a href=https://nafiesl.github.io/SimpleCrudGenerator/ class=capitalize>Laravel Simple CRUD Generator</a></li><li><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/ class=capitalize>Blog</a></li><li class=is-active><span>Rich Content</span></li></ol></nav><div class=single data-display=block><div class=single__title>Rich Content</div><div class=single__meta><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentcolor"><path d="M4 4H20V8H4z" opacity=".3"/><path d="M6 1H8V5H6zM16 1h2V5H16z"/><path d="M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1.0 2-.9 2-2V5C21 3.9 20.1 3 19 3zm0 16H5V9h14V19zM19 7H5V5h14V7z"/></svg><time title="Written At">Mar 10, 2019</time> &nbsp;&nbsp;<svg fill="#000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="currentcolor" d="M9 1V3h6V1H9zM18.958984 2.7929688 17.666016 4.3183594 20.615234 6.8183594 21.908203 5.2929688 18.958984 2.7929688zM12 4C7.0225467 4 3 8.0225467 3 13 3 17.977453 7.0225467 22 12 22 16.977453 22 21 17.977453 21 13 21 8.0225467 16.977453 4 12 4zm0 2C15.910547 6 19 9.0894533 19 13 19 16.910547 15.910547 20 12 20 8.0894533 20 5 16.910547 5 13 5 9.0894533 8.0894533 6 12 6zM11 8v6h2V8H11z"/></svg> <span title="Reading Time">1 min read</span> &nbsp;&nbsp;<svg fill="#000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"><path fill="currentcolor" d="M16 5C12.144531 5 9 8.144531 9 12 9 14.410156 10.230469 16.550781 12.09375 17.8125 8.527344 19.34375 6 22.882813 6 27H8C8 22.570313 11.570313 19 16 19 20.429688 19 24 22.570313 24 27h2C26 22.882813 23.472656 19.34375 19.90625 17.8125 21.769531 16.550781 23 14.410156 23 12 23 8.144531 19.855469 5 16 5zm0 2C18.773438 7 21 9.226563 21 12 21 14.773438 18.773438 17 16 17 13.226563 17 11 14.773438 11 12 11 9.226563 13.226563 7 16 7z"/></svg> <span title="WRITTEN BY">Hugo Authors</span></div><article class=single__contents data-dir=ltr><p>Lorem est tota propiore conpellat pectoribus de<br>pectora summo. Redit teque digerit hominumque toris verebor lumina non cervice<br>subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc<br>caluere tempus</p><p>Hugo ships with several <a href=https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes target=_blank>Built-in Shortcodes</a> for rich content, along with a <a href=https://gohugo.io/about/hugo-and-gdpr/ target=_blank>Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p><hr><br><hr><h2 id=youtube-privacy-enhanced-shortcode>YouTube Privacy Enhanced Shortcode</h2><div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframe src=https://www.youtube.com/embed/ZJthWmvUzzc style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe></div><br><hr><h2 id=twitter-simple-shortcode>Twitter Simple Shortcode</h2><style type=text/css>.twitter-tweet{font:14px/1.45 -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;border-left:4px solid #2b7bb9;padding-left:1.5em;color:#555}.twitter-tweet a{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus{text-decoration:underline}</style><blockquote class=twitter-tweet><p lang=en dir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>&mdash; Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote><br><hr><h2 id=vimeo-simple-shortcode>Vimeo Simple Shortcode</h2><style>.__h_video{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;width:100%;background:#000}.__h_video img{width:100%;height:auto;color:#000}.__h_video .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;cursor:pointer}</style><div class="s_video_simple __h_video"><a href=https://vimeo.com/4.8912912e+07 rel=noopener target=_blank><img src=https://i.vimeocdn.com/video/337401969_640.jpg srcset="https://i.vimeocdn.com/video/337401969_640.jpg 1x, https://i.vimeocdn.com/video/337401969.jpg 2x" alt="Sing Jan Swing - Kinetic Type"><div class=play><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"/><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2.0-4.4l-16.6-9z" fill="#fff"/></svg></div></a></div></article></div><div class=grow></div><nav class=pagination-single><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/markdown-syntax/ title="Markdown Syntax Guide" class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__right-title>Markdown Syntax Guide</div></a><div class=grow></div><a href=https://nafiesl.github.io/SimpleCrudGenerator/blog/placeholder-text/ title="Placeholder Text" class=pagination-single__right><div class=pagination-single__left-title>Placeholder Text</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav></article><section id=list-side class=r data-dir=ltr><div class=toc><h6 class=toc__label>What's on this Page</h6><div class=toc__body><nav id=TableOfContents><ul><li><a href=#youtube-privacy-enhanced-shortcode>YouTube Privacy Enhanced Shortcode</a></li><li><a href=#twitter-simple-shortcode>Twitter Simple Shortcode</a></li><li><a href=#vimeo-simple-shortcode>Vimeo Simple Shortcode</a></li></ul></nav></div></div></section></div></div><script>'use strict';function wrap(el,wrapper){el.parentNode.insertBefore(wrapper,el);wrapper.appendChild(el);}
(function(){var singleContentsElem=document.querySelector('.single__contents');singleContentsElem?singleContentsElem.querySelectorAll('pre > code').forEach(function(elem){var dataLang=elem.getAttribute('data-lang');var dataLangWrapper=document.createElement('div');var code=null;var codeTitle=null;if(dataLang&&dataLang.includes(':')){code=dataLang.split(':')[0];codeTitle=dataLang.split(':')[1];dataLangWrapper.className='language-'+code;dataLangWrapper.setAttribute('data-lang',codeTitle);elem.className='language-'+code;elem.setAttribute('data-lang',codeTitle);elem.setAttribute('id',codeTitle);}
if(!dataLang||codeTitle){wrap(elem.parentNode,dataLangWrapper);}}):null;})();var dollarCodeElem=document.querySelectorAll('div.language-\\$');var gtCodeElem=document.querySelectorAll('div.language-\\>');dollarCodeElem?dollarCodeElem.forEach(function(elem){var lnts=elem.parentNode.parentNode?elem.parentNode.parentNode.querySelectorAll('.lnt'):null;lnts?lnts.forEach(function(lnt){lnt.innerHTML='$<br/>';}):null;}):null;gtCodeElem?gtCodeElem.forEach(function(elem){var lnts=elem.parentNode.parentNode?elem.parentNode.parentNode.querySelectorAll('.lnt'):null;lnts?lnts.forEach(function(lnt){lnt.innerHTML='><br/>';}):null;}):null;</script><script defer src=/SimpleCrudGenerator/js/helper/getParents.min.js></script><script defer src=/SimpleCrudGenerator/js/helper/closest.min.js></script><script defer src=/SimpleCrudGenerator/js/helper/prev.min.js></script><script defer src=/SimpleCrudGenerator/js/helper/prop.min.js></script><script defer src=/SimpleCrudGenerator/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){'use strict';var tables=document.querySelectorAll('.single__contents > table');for(let i=0;i<tables.length;i++){var table=tables[i];var wrapper=document.createElement('div');wrapper.className='table-wrapper';table.parentElement.replaceChild(wrapper,table);wrapper.appendChild(table);}
var lib=JSON.parse("null");if(lib&&lib.includes('mermaid')){var themeVariant=localStorage.getItem('theme')||'light';if(themeVariant==="dark"){mermaid.initialize({theme:'dark'});}else{mermaid.initialize({theme:'default'});}
var mermaids=[];[].push.apply(mermaids,document.getElementsByClassName('language-mermaid'));mermaids.forEach(function(elem){var elemParentNode=elem.parentNode;if(elemParentNode!==document.body){elemParentNode.parentNode.insertBefore(elem,elemParentNode);elemParentNode.parentNode.removeChild(elemParentNode);}
var newElemWrapper=document.createElement('div');newElemWrapper.classList.add('mermaid');newElemWrapper.innerHTML=elem.innerHTML;elem.replaceWith(newElemWrapper);});}
if(lib&&lib.includes('katex')){var mathElements=document.getElementsByClassName('math');var options={delimiters:[{left:"$$",right:"$$",display:true},{left:"\\[",right:"\\]",display:true},{left:"$",right:"$",display:false},{left:"\\(",right:"\\)",display:false}],};renderMathInElement(document.querySelector('.single__contents'),options);}
if(lib&&lib.includes('flowchartjs')){var options=JSON.parse("{\"arrow-end\":\"block\",\"element-color\":\"black\",\"fill\":\"white\",\"flowstate\":{\"approved\":{\"fill\":\"#58C4A3\",\"font-size\":12,\"no-text\":\"n/a\",\"yes-text\":\"APPROVED\"},\"current\":{\"fill\":\"yellow\",\"font-color\":\"red\",\"font-weight\":\"bold\"},\"future\":{\"fill\":\"#FFFF99\"},\"invalid\":{\"fill\":\"#444444\"},\"past\":{\"fill\":\"#CCCCCC\",\"font-size\":12},\"rejected\":{\"fill\":\"#C45879\",\"font-size\":12,\"no-text\":\"REJECTED\",\"yes-text\":\"n/a\"},\"request\":{\"fill\":\"blue\"}},\"font-color\":\"black\",\"font-size\":14,\"line-color\":\"black\",\"line-length\":50,\"line-width\":3,\"no-text\":\"no\",\"scale\":1,\"symbols\":{\"end\":{\"class\":\"end-element\"},\"start\":{\"element-color\":\"green\",\"fill\":\"yellow\",\"font-color\":\"red\"}},\"text-margin\":10,\"x\":0,\"y\":0,\"yes-text\":\"yes\"}");var jsonContent=null;var flowchartPrefix="language-flowchart";var index=0;Array.prototype.forEach.call(document.querySelectorAll("[class^="+flowchartPrefix+"]"),function(x){x.style.display='none'
x.parentNode.style.backgroundColor="transparent"
jsonContent=x.innerText;var node0=document.createElement('div');node0.id='flowchart'+index;x.parentNode.insertBefore(node0,x);var diagram=flowchart.parse(jsonContent);diagram.drawSVG("flowchart"+index,options);index+=1;});}
if(lib&&lib.includes('chart')){var borderColor="#666";var bgColor="#ddd";var borderWidth=2;Chart.defaults.global.elements.rectangle.borderWidth=borderWidth;Chart.defaults.global.elements.rectangle.borderColor=borderColor;Chart.defaults.global.elements.rectangle.backgroundColor=bgColor;Chart.defaults.global.elements.line.borderWidth=borderWidth;Chart.defaults.global.elements.line.borderColor=borderColor;Chart.defaults.global.elements.line.backgroundColor=bgColor;Chart.defaults.global.elements.point.borderWidth=borderWidth;Chart.defaults.global.elements.point.borderColor=borderColor;Chart.defaults.global.elements.point.backgroundColor=bgColor;var chartPrefix="language-chart";var index=0;var jsonContent=null;Array.prototype.forEach.call(document.querySelectorAll("[class^="+chartPrefix+"]"),function(x){x.style.display='none'
x.parentNode.style.backgroundColor="transparent"
jsonContent=x.innerText;var node0=document.createElement('canvas');var source=null;node0.height=200;node0.style.height=200;node0.id='myChart'+index;source=JSON.parse(jsonContent);x.parentNode.insertBefore(node0,x);var ctx=document.getElementById('myChart'+index).getContext('2d');var myChart=new Chart(ctx,source);index+=1;});}
if(lib&&lib.includes('viz')){var vizPrefix="language-viz-";Array.prototype.forEach.call(document.querySelectorAll("[class^="+vizPrefix+"]"),function(x){x.style.display='none'
x.parentNode.style.backgroundColor="transparent"
var engine;x.getAttribute("class").split(" ").forEach(function(cls){if(cls.startsWith(vizPrefix)){engine=cls.substr(vizPrefix.length);}});var viz=new Viz();viz.renderSVGElement(x.innerText,{engine:engine}).then(function(element){element.style.width="100%";x.parentNode.insertBefore(element,x);})});}});</script><script>var singleMenu=document.getElementById('single-menu');var listMain=document.getElementById('list-main');var listSide=document.getElementById('list-side');var wideViewAsDefault=JSON.parse("null");enquire.register("screen and (max-width:1280px)",{match:function(){if(wideViewAsDefault){singleMenu.className='hide';listMain.className='lm';listSide.className='r';}else{singleMenu.className='l';listMain.className='m';listSide.className='r';}},unmatch:function(){if(wideViewAsDefault){singleMenu.className='hide';listMain.className='lm';listSide.className='r';}else{singleMenu.className='l';listMain.className='m';listSide.className='r';}},}).register("screen and (max-width:960px)",{match:function(){listSide.className='r';listMain.className='lm';singleMenu.className='hide';},unmatch:function(){if(wideViewAsDefault){singleMenu.className='hide';listMain.className='lm';listSide.className='r';}else{singleMenu.className='l';listMain.className='m';listSide.className='r';}},}).register("screen and (max-width:600px)",{match:function(){listSide.className='hide';listMain.className='lmr';singleMenu.className='hide';},unmatch:function(){listSide.className='r';listMain.className='lm';singleMenu.className='hide';},});</script><div class=bot><footer class=footer><div class=divider><div class=lmr><p class=caption>Copyright © 2017 Nafies Luthfi.</p><p class=caption>Powered by <a href=https://gohugo.io/ rel=noreferrer>Hugo</a> and the <a href=https://github.com/zzossig/hugo-theme-zdoc rel=noreferrer>zDoc theme</a></p></div></div></footer></div></div></body></html>