Applaying Framework7 with Remix.js
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- react, typescript
- 領域
- frontend, mobile-dev
調査の方向性
app/root.tsx から始め、特に Framework7 App/View の設定と Remix Outlet を確認し、その後 app/routes/_index.tsx と app/routes/about.tsx のナビゲーションを比較します。リンクによるナビゲーションを再現し、Remix と Framework7 のルーターを通じて期待されるページがレンダリングされる間に、ブラウザーの URL が更新されることを確認します。
索引モデルが issue の本文から書いたものです。
説明
Overview
Hello Folks,
I'm trying to apply Framework7 latest version [v8.3.4] to my Remix.js app, i do all nesessry things from boath side (remix and framework7) and it's working with remix router issue
Explain the project Remix.js file
- app/root.tsx
- app/routers/_index.tsx
- app/routers/about.tsx
let's take a look how this file look like with the code:
- for full code overview take a look to this code repo: []
1- root.tsx:
import {
Links,
Meta,
Scripts,
Outlet,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
// Import F7 Bundle and React Plugin
import Framework7 from 'framework7/lite-bundle';
import Framework7React, { App, View } from 'framework7-react';
import AboutPage from './routes/about';
import HomePage from './routes/_index';
// Initialize Framework7 with the React plugin globally
Framework7.use(Framework7React);
// Framework7 module styles
import '../node_modules/framework7/framework7-bundle.css'
export const links: LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
const f7params = {
name: 'My App',
// routes
routes: [
{
path: '/',
component: HomePage,
},
{
path: '/about/',
component: AboutPage,
},
],
// ... other params
}
export default function MyApp() {
return (
<App theme="auto" {...f7params}>
{/* Main View component with "main" prop */}
<View main url="/ss">
{/* This renders nested routes via Outlet */}
<Outlet />
</View>
</App>
);
}
2- _index.tsx: (as home page with route '/')
import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { Navbar, Page } from 'framework7-react';
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
// Main Framework7 App component where we pass Framework7 params
<Page>
<Navbar title="Home" />
<p>Welcome to the Home Page</p>
<Link to="/about/">About Page</Link>
</Page>
);
}
3- about.tsx: (as home page with route '/about')
import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";
import { Page, Navbar } from 'framework7-react';
export const meta: MetaFunction = () => {
return [
{ title: "Remix App - About" },
{ name: "description", content: "Welcome to About Page!" },
];
};
const about = () => {
return (
<Page>
{/* Top Navbar */}
<Navbar title="About"></Navbar>
{/* Page Content */}
<p>Page About</p>
<Link to="/">Home</Link>
</Page>
)
}
export default about
I was wondering how to make router in Framework7 compatible with Remix
this is working but url not updated on my browser
- 主要言語
- JavaScript
- スター
- 18.8k
- フォーク
- 3.2k
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
framework7io/framework7 のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
framework7io/framework7#4365 · コメント 1 件 ·
-
propsHistory オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
framework7io/framework7#4347 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
framework7io/framework7#4222 · コメント 3 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
framework7io/framework7#4175 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
framework7io/framework7#3969 · コメント 3 件 ·
framework7io/framework7 の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
antfu-collective/icones#398 ·
-
ECmail.com オープン
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
wesbos/burner-email-providers#554 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
radiantearth/stac-browser#1023 ·
-
HMR stops working オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
components-web-app/docs#92 ·