This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}> | |
<> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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`, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="container"> | |
<div> | |
<logo /> | |
<h2 class="subtitle">Reactive Router query: {{ myQuery }}</h2> | |
<div class="links"> | |
<a | |
class="button--grey" | |
@click="handleClick" | |
> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
import { | |
computed, | |
defineComponent, | |
reactive, | |
watch | |
} from '@vue/composition-api' | |
import Logo from '~/components/Logo.vue' | |
export default defineComponent({ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 | |
}, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"plugins": [ | |
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ], | |
], | |
"presets": ["next/babel"] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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({ |