fix font loading

This commit is contained in:
Timothy 2021-01-10 14:31:38 +08:00
parent 5c1b4943ad
commit 11776b2e29
5 changed files with 64 additions and 67 deletions

7
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "tailwind-blog",
"name": "tailwind-nextjs-starter-blog",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
@ -5469,11 +5469,6 @@
"integrity": "sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==",
"dev": true
},
"next-google-fonts": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/next-google-fonts/-/next-google-fonts-1.2.1.tgz",
"integrity": "sha512-BhVSldP1oZBTwXeJdMtjmu2qbDT1EkbQO2rG83Oj6APYm6aUsIcMu00Pzkzd8TTkrQW9HyC08Pzr10PY4pE6jA=="
},
"next-mdx-remote": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-2.1.0.tgz",

View File

@ -21,7 +21,6 @@
"image-size": "0.9.3",
"just-kebab-case": "^1.1.0",
"next": "10.0.5",
"next-google-fonts": "^1.2.1",
"next-mdx-remote": "^2.0.0",
"next-seo": "4.17.0",
"next-themes": "^0.0.10",

View File

@ -6,7 +6,6 @@ import { DefaultSeo } from 'next-seo'
import Head from 'next/head'
import SEO from '@/components/SEO'
import LayoutWrapper from '@/components/LayoutWrapper'
import MDXComponents from '@/components/MDXComponents'
export default function App({ Component, pageProps }) {
@ -18,19 +17,7 @@ export default function App({ Component, pageProps }) {
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<DefaultSeo {...SEO} />
<Head>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
</Head>
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>
<Component {...pageProps} />
</div>
</MDXProvider>
</ThemeProvider>

View File

@ -1,48 +1,64 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import GoogleFonts from 'next-google-fonts'
import LayoutWrapper from '@/components/LayoutWrapper'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" />
<Head>
<link rel="apple-touch-icon" sizes="76x76" href="/static/favicons/apple-touch-icon.png" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/static/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/static/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/static/favicons/site.webmanifest" />
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" href="/static/favicons/index.xml" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossOrigin="anonymous"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
media="print"
onload="this.media='all'"
/>
<link href="/static/favicons/favicon.ico" rel="shortcut icon" />
<link href="/static/favicons/site.webmanifest" rel="manifest" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin="" />
<noscript>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>
</noscript>
<link
href="/static/favicons/apple-touch-icon.png"
rel="apple-touch-icon"
sizes="180x180"
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css"
integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j"
crossorigin="anonymous"
/>
<link
href="/static/favicons/favicon-32x32.png"
rel="icon"
sizes="32x32"
type="image/png"
/>
<link
href="/static/favicons/favicon-16x16.png"
rel="icon"
sizes="16x16"
type="image/png"
/>
<link color="#00aba9" href="/static/favicons/safari-pinned-tab.svg" rel="mask-icon" />
<link rel="alternate" type="application/rss+xml" href="/index.xml" />
<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
<meta content="#ffffff" name="theme-color" />
<meta content="#00aba9" name="msapplication-TileColor" />
<meta content="/static/favicons/browserconfig.xml" name="msapplication-config" />
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js"
integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ"
crossorigin="anonymous"
></script>
</Head>
<body className="bg-white dark:bg-gray-900 text-black dark:text-white">
<Main />
<NextScript />
<LayoutWrapper>
<Main />
<NextScript />
</LayoutWrapper>
</body>
</Html>
)

View File

@ -2,56 +2,56 @@
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Next.js Starter Blog</title>
<link>https://nextjs-starter-blog-demo.com/blog</link>
<link>https://tailwind-nextjs-starter-blog.vercel.app/blog</link>
<description>A blog created with Next.js and Tailwind.css</description>
<language>en-us</language>
<lastBuildDate>Wed, 11 Nov 2020 00:00:00 GMT</lastBuildDate>
<atom:link href="https://nextjs-starter-blog-demo.com/index.xml" rel="self" type="application/rss+xml"/>
<atom:link href="https://tailwind-nextjs-starter-blog.vercel.app/index.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://nextjs-starter-blog-demo.comguide-to-using-images-in-nextjs</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.appguide-to-using-images-in-nextjs</guid>
<title>Images in Next.js</title>
<link>https://nextjs-starter-blog-demo.comguide-to-using-images-in-nextjs</link>
<link>https://tailwind-nextjs-starter-blog.vercel.appguide-to-using-images-in-nextjs</link>
<description>In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.</description>
<pubDate>Wed, 11 Nov 2020 00:00:00 GMT</pubDate>
</item>
<item>
<guid>https://nextjs-starter-blog-demo.comderiving-ols-estimator</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.appderiving-ols-estimator</guid>
<title>Deriving the OLS Estimator</title>
<link>https://nextjs-starter-blog-demo.comderiving-ols-estimator</link>
<link>https://tailwind-nextjs-starter-blog.vercel.appderiving-ols-estimator</link>
<description>How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.</description>
<pubDate>Sat, 16 Nov 2019 00:00:00 GMT</pubDate>
</item>
<item>
<guid>https://nextjs-starter-blog-demo.comgithub-markdown-guide</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.appgithub-markdown-guide</guid>
<title>Markdown Guide</title>
<link>https://nextjs-starter-blog-demo.comgithub-markdown-guide</link>
<link>https://tailwind-nextjs-starter-blog.vercel.appgithub-markdown-guide</link>
<description>Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on Github Flavored Markdown.</description>
<pubDate>Fri, 11 Oct 2019 00:00:00 GMT</pubDate>
</item>
<item>
<guid>https://nextjs-starter-blog-demo.comthe-time-machine</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.appthe-time-machine</guid>
<title>The Time Machine</title>
<link>https://nextjs-starter-blog-demo.comthe-time-machine</link>
<link>https://tailwind-nextjs-starter-blog.vercel.appthe-time-machine</link>
<description>The Time Traveller (for so it will be convenient to speak of him) was expounding a recondite matter to us. His pale grey eyes shone and twinkled, and his usually pale face was flushed and animated...</description>
<pubDate>Wed, 15 Aug 2018 00:00:00 GMT</pubDate>
</item>
<item>
<guid>https://nextjs-starter-blog-demo.compictures-of-canada</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.apppictures-of-canada</guid>
<title>O Canada</title>
<link>https://nextjs-starter-blog-demo.compictures-of-canada</link>
<link>https://tailwind-nextjs-starter-blog.vercel.apppictures-of-canada</link>
<description>The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.</description>
<pubDate>Sat, 15 Jul 2017 00:00:00 GMT</pubDate>
</item>
<item>
<guid>https://nextjs-starter-blog-demo.comcode-sample</guid>
<guid>https://tailwind-nextjs-starter-blog.vercel.appcode-sample</guid>
<title>Sample .md file</title>
<link>https://nextjs-starter-blog-demo.comcode-sample</link>
<link>https://tailwind-nextjs-starter-blog.vercel.appcode-sample</link>
<description>Example of a markdown file with code blocks and syntax highlighting</description>
<pubDate>Tue, 08 Mar 2016 00:00:00 GMT</pubDate>
</item>