Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix meta pwa #534

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix meta pwa #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b3b831
fix OG and meta tags, implement PWA
Brian-Pob Mar 28, 2024
a9060a2
apply formatting
Brian-Pob Mar 28, 2024
4c66095
Merge branch 'solidjs:main' into fix-meta-pwa
Brian-Pob Apr 2, 2024
86b3d51
fix introduced rehype error
Brian-Pob Apr 2, 2024
bc92d4d
remove generated files
Brian-Pob Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 22 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@
<html style="scroll-behavior: smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png" />
<meta name="msapplication-TileImage" content="/img/favicons/ms-icon-144x144.png" />
<meta name="msapplication-TileColor" content="#2c4f7c" />
<meta name="theme-color" content="#2c4f7c" />
<meta name="msapplication-TileColor" content="#2c4f7c" />
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" />

<title>SolidJS</title>
<meta name="description"
content="A declarative, efficient, and flexible JavaScript library for building user interfaces." />
<meta name="theme-color" content="#2c4f7c" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<meta name="og:title" content="SolidJS" />
<meta name="og:url" content="https://www.solidjs.com" />
<meta name="og:type" content="article" />
<meta name="og:image:width" content="1200" />
<meta name="og:image:height" content="627" />
<meta name="og:image:url" content="https://www.solidjs.com/og.jpg" />
<meta name="og:image:secure_url" content="https://www.solidjs.com/og.jpg" />

<meta property="og:title" content="SolidJS" />
<meta property="og:description"
content="A declarative, efficient, and flexible JavaScript library for building user interfaces." />
<meta property="og:url" content="https://www.solidjs.com" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://www.solidjs.com/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:url" content="https://www.solidjs.com/og.jpg" />
<meta property="og:image:secure_url" content="https://www.solidjs.com/og.jpg" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://www.solidjs.com/og.jpg" />
<meta name="twitter:site" content="@solid_js" />

<meta name="msvalidate.01" content="2430336572A8F5A3CCB92DC181ADA489" />
<meta
name="og:description"
content="Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries."
/>
<meta
name="description"
content="A declarative, efficient and flexible JavaScript library for building user interfaces."
/>
<meta name="msapplication-TileImage" content="/img/favicons/ms-icon-144x144.png" />
<meta name="msapplication-TileColor" content="#2c4f7c" />

<link rel="sitemap" href="sitemap.xml" type="application/xml" />
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" />
<script src="/src/main.tsx" type="module"></script>
</head>
<body class="font-display bg-white text-black dark:bg-solid-darkbg dark:text-white">
Expand Down
Binary file added public/img/screenshots/sc-narrow.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/screenshots/sc-wide.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions pwaoptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import type { VitePWAOptions } from 'vite-plugin-pwa';
const iconPath = '/img/favicons/';
const iconAssets = ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'];
const assets = iconAssets.map((icon) => `${iconPath}${icon}`);

const iconSizes = [192, 256, 384, 512];
const iconFiles = iconSizes.map((size) => ({
src: `${iconPath}icon-${size}x${size}.png`,
sizes: `${size}x${size}`,
type: 'image/png',
}));

const pwaoptions: Partial<VitePWAOptions> = {
includeAssets: [...assets],
devOptions: { enabled: true },
manifest: {
name: 'SolidJS',
short_name: 'SolidJS',
description:
'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
theme_color: '#2c4f7c',
icons: [...iconFiles],
screenshots: [
{
src: 'img/screenshots/sc-narrow.jpg',
sizes: '720x1280',
type: 'image/png',
form_factor: 'narrow',
label: 'Mobile Screenshot',
},
{
src: 'img/screenshots/sc-wide.jpg',
sizes: '1920x1261',
type: 'image/png',
form_factor: 'wide',
label: 'Desktop Screenshot',
},
],
},
};
export default pwaoptions;
4 changes: 3 additions & 1 deletion vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import mdx from '@mdx-js/rollup';
import rehypeHighlight from 'rehype-highlight';
import remarkGfm from 'remark-gfm';
import pckg from './package.json' assert { type: 'json' };
import { VitePWA } from 'vite-plugin-pwa';
import pwaoptions from './pwaoptions';

export default defineConfig({
define: {
Expand All @@ -22,7 +24,7 @@ export default defineConfig({
enforce: 'pre',
} as Plugin,
solid({ extensions: ['.md', '.mdx'] }),
// VitePWA(pwaOptions),
VitePWA(pwaoptions),
],
optimizeDeps: {
include: ['monaco-textmate', 'onigasm', 'monaco-editor-textmate'],
Expand Down