Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #57 from mlynch/ruucm-formatting

Browse Source 
app router structure support
This commit is contained in:
Nathan Chapman
2024-02-27 11:20:11 -06:00
committed by GitHub
parent 39fac554ee 785aa9a7c6
commit 83ede65b5e
5 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[...all]/page.tsx
+13
View File
@@ -0,0 +1,13 @@
import dynamic from 'next/dynamic';
const App = dynamic(() => import('../../components/AppShell'), {
ssr: false,
});
export function generateStaticParams() {
return [{ all: ['tabs', 'feed'] }];
}
export default function Page() {
return <App />;
}
pages/_app.tsx → app/layout.tsx
+22 -20
View File
@@ -1,7 +1,5 @@
import Head from 'next/head'; import type { Metadata, Viewport } from 'next';
import Script from 'next/script'; import Script from 'next/script';
import { AppProps } from 'next/app'
import { setupIonicReact } from '@ionic/react';
import 'tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css';
/* Core CSS required for Ionic components to work properly */ /* Core CSS required for Ionic components to work properly */
@@ -23,23 +21,27 @@ import '@ionic/react/css/display.css';
import '../styles/global.css'; import '../styles/global.css';
import '../styles/variables.css'; import '../styles/variables.css';
function MyApp({ Component, pageProps }: AppProps) { export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export const viewport: Viewport = {
initialScale: 1,
width: 'device-width',
viewportFit: 'cover',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return ( return (
<> <html lang="en">
<Head> <body>{children}</body>
<meta <Script type="module" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js" />
name="viewport" <Script noModule src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js" />
content="width=device-width, initial-scale=1.0, viewport-fit=cover" </html>
></meta>
</Head>
<Component {...pageProps} />
<Script
type="module"
src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"
></Script>
<Script noModule src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.js"></Script>
</>
); );
} }
export default MyApp;
pages/[...all].tsx → app/page.tsx
+1 -1
View File
@@ -4,6 +4,6 @@ const App = dynamic(() => import('../components/AppShell'), {
ssr: false, ssr: false,
}); });
export default function Index() { export default function Page() {
return <App />; return <App />;
} }
components/AppShell.tsx
+3 -7
View File
@@ -1,19 +1,15 @@
import { IonApp, IonLabel, IonRouterOutlet, setupIonicReact, IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react'; 'use client';
import { cog, flash, list } from 'ionicons/icons'; import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { StatusBar, Style } from '@capacitor/status-bar'; import { StatusBar, Style } from '@capacitor/status-bar';
import { IonReactRouter } from '@ionic/react-router'; import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom'; import { Redirect, Route } from 'react-router-dom';
import Feed from './pages/Feed';
import Lists from './pages/Lists';
import ListDetail from './pages/ListDetail';
import Settings from './pages/Settings';
import Tabs from './pages/Tabs'; import Tabs from './pages/Tabs';
setupIonicReact({}); setupIonicReact({});
window.matchMedia("(prefers-color-scheme: dark)").addListener(async (status) => { window.matchMedia('(prefers-color-scheme: dark)').addListener(async status => {
try { try {
await StatusBar.setStyle({ await StatusBar.setStyle({
style: status.matches ? Style.Dark : Style.Light, style: status.matches ? Style.Dark : Style.Light,
pages/index.tsx
-9
View File
@@ -1,9 +0,0 @@
import dynamic from 'next/dynamic';
const App = dynamic(() => import('../components/AppShell'), {
ssr: false,
});
export default function Index() {
return <App />;
}