Skip to content

Instantly share code, notes, and snippets.

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from 'src/styles/theme'
import Home from 'src/components/Home'
import Global from 'src/styles/global'
const App: React.FC = (props) => {
return (
<ThemeProvider theme={theme}>
<>
const theme = {
breakpoints: ['40em', '52em', '64em'],
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fonts: {
body: `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif`,
heading: 'inherit',
monospace: `source-code-pro, Menlo, Monaco, Consolas, Courier New,
monospace`,
import logo from 'src/logo.svg'
import React from 'react'
import { Box, Image, Flex, Link, Text } from 'theme-ui'
import { keyframes } from '@emotion/core'
const spin = keyframes({
from: {
transform: 'rotate(0deg)',
},
to: {
<template>
<div class="container">
<div>
<logo />
<h2 class="subtitle">Reactive Router query: {{ myQuery }}</h2>
<div class="links">
<a
class="button--grey"
@click="handleClick"
>
<script lang="ts">
import {
computed,
defineComponent,
reactive,
watch
} from '@vue/composition-api'
import Logo from '~/components/Logo.vue'
export default defineComponent({
import { reactive, toRefs, watch } from '@vue/composition-api'
import { Route } from 'vue-router'
import { getRuntimeVM } from '~/utils/runtime'
type State = {
route: Route
}
const useRouter = () => {
const vm = getRuntimeVM()
<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api'
import Logo from '~/components/Logo.vue'
import useRouter from '~/hooks/useRouter'
export default defineComponent({
components: {
Logo
},
{
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
],
"presets": ["next/babel"]
}
import React from 'react'
import styled from 'styled-components'
const Home = () => (
<Container>
<Heading>hi there</Heading>
</Container>
)
const Container = styled.div`
width: 960px;
height: 100vh;
import React from 'react'
import NextDocument from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class Document extends NextDocument {
static async getInitialProps (ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({