Skip to content

Instantly share code, notes, and snippets.

@swsalim
swsalim / About.vue
Last active May 31, 2021 08:59
Nuxt - Prismic - About Page sample
<template>
<div>
<div class="prose prose-lg">
<prismic-rich-text :field="page.content" />
</div>
</div>
</template>
<script>
export default {
@swsalim
swsalim / link-resolver.js
Created May 31, 2021 08:05
Prismic Link Resolver
@swsalim
swsalim / nuxt.config.js
Last active May 31, 2021 08:04
Nuxt.js with Prismic module
{
buildModules: [
'@nuxtjs/prismic'
],
prismic: {
endpoint: 'https://<REPOSITORY>.cdn.prismic.io/api/v2',
modern: true
/* see configuration for more */
}
}
import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";
/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
const [mouseX, mouseY] = useMousePosition();
const positions = { x, y, h, w, mouseX, mouseY };
return (
<div
@swsalim
swsalim / nuxt-mapbox-gl.vue
Created August 16, 2020 16:13
Real-word example of using the Mapbox GL library in a Nuxt static app
<template>
<div id="map" class="mt-4 sm:mt-8 sm:mx-5 sm:mb-5"></div>
</template>
<script>
export default {
name: 'DepotsMap',
data() {
return {
selectedMarker: null,
@swsalim
swsalim / example.com
Created August 8, 2020 01:58 — forked from 1hakr/example.com
Supercharge your NGIX config
proxy_cache_path /tmp/cacheapi levels=1:2 keys_zone=microcacheapi:100m max_size=1g inactive=1d use_temp_path=off;
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name example.com;
location /api/ {
# Rate Limiting
limit_req zone=reqlimit burst=20; # Max burst of request
<a href="https://www.typeeighty.com" data-vars-ga-category="Navigation" data-vars-ga-action="Outbound Link Click" data-vars-ga-label="https://www.typeeighty.com">Track Me</a>
<a href="https://www.typeeighty.com" data-vars-ga-category="<category>" data-vars-ga-action="<action>" data-vars-ga-label="<label>">Track Me</a>
BEFORE:
<input type="submit" value="Send Message" class="wpcf7-form-control wpcf7-submit btn btn-accent">
AFTER:
<!-- Google Analytics -->
<input type="submit" value="Send Message" class="wpcf7-form-control wpcf7-submit btn btn-accent" onclick="ga('send', 'event', 'Form', 'Click', 'Contact Us Form', '0');">
<!-- Or -->
<!-- Global site tag (gtag.js) - Google Analytics -->