Merge pull request #19 from powersync-ja/formatting_and_fixes

Fix font in YJS demo
powersync-ja · Jan 12, 2024 · 7b3c430 · 7b3c430
2 parents df16dc1 + 2602c51
commit 7b3c430
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 56 deletions.
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/next.config.js b/demos/powersync-supabase-yjs-text-collab-demo/next.config.js
@@ -5,7 +5,7 @@ module.exports = withImages({
   images: {
     disableStaticImages: true
   },
-  webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
+  webpack: (config, { isServer }) => {
     if (isServer) {
       return config;
     }
@@ -16,7 +16,11 @@ module.exports = withImages({
         rules: [
           ...config.module.rules,
           {
-            test: /\.scss$/,
+            test: /\.css/,
+            use: ['style-loader', 'css-loader']
+          },
+          {
+            test: /\.scss/,
             use: ['style-loader', 'css-loader', 'sass-loader']
           }
         ]

diff --git a/demos/powersync-supabase-yjs-text-collab-demo/package.json b/demos/powersync-supabase-yjs-text-collab-demo/package.json
@@ -28,6 +28,7 @@
     "@tiptap/extension-task-list": "2.1.13",
     "@tiptap/react": "2.1.13",
     "@tiptap/starter-kit": "2.1.13",
+    "lato-font": "^3.0.0",
     "d3": "^7.3.0",
     "fast-glob": "^3.2.11",
     "formik": "^2.4.5",

diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/app/editor/[document_id]/page.tsx b/demos/powersync-supabase-yjs-text-collab-demo/src/app/editor/[document_id]/page.tsx
@@ -1,32 +1,15 @@
 'use client';
 
-import _ from 'lodash';
-import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useSupabase } from '@/components/providers/SystemProvider';
 import { usePowerSync, usePowerSyncWatchedQuery } from '@journeyapps/powersync-react';
-import {
-  Box,
-  Button,
-  Container,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  List,
-  TextField,
-  Typography,
-  styled
-} from '@mui/material';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
+import { Box, Container, Typography } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import { v4 as uuidv4 } from 'uuid';
 import { b64ToUint8Array, Uint8ArrayTob64 } from '@/library/binary-utils';
 
 import * as Y from 'yjs';
 import Collaboration from '@tiptap/extension-collaboration';
-import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
 import Highlight from '@tiptap/extension-highlight';
 import TaskItem from '@tiptap/extension-task-item';
 import TaskList from '@tiptap/extension-task-list';

diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/app/globals.scss b/demos/powersync-supabase-yjs-text-collab-demo/src/app/globals.scss
@@ -15,4 +15,6 @@ body {
   min-height: 100vh;
   margin: 0;
   background: var(--background-rgb);
+  font-family: Lato !important;
+  font-weight: 400 !important;;
 }
diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/app/layout.tsx b/demos/powersync-supabase-yjs-text-collab-demo/src/app/layout.tsx
@@ -1,52 +1,21 @@
 'use client';
 
 import React from 'react';
-import {
-  AppBar,
-  Box,
-  CssBaseline,
-  Divider,
-  Drawer,
-  IconButton,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Typography,
-  styled
-} from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import WifiIcon from '@mui/icons-material/Wifi';
-import SignalWifiOffIcon from '@mui/icons-material/SignalWifiOff';
-import ChecklistRtlIcon from '@mui/icons-material/ChecklistRtl';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
-import TerminalIcon from '@mui/icons-material/Terminal';
-
-import { usePowerSync } from '@journeyapps/powersync-react';
-import { useSupabase } from '@/components/providers/SystemProvider';
-
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import type { Metadata } from 'next';
+import { CssBaseline } from '@mui/material';
 
 import { ThemeProviderContainer } from '@/components/providers/ThemeProviderContainer';
 import { DynamicSystemProvider } from '@/components/providers/DynamicSystemProvider';
 
 import './globals.scss';
-
-import { Lato } from 'next/font/google';
-
-const font = Lato({ subsets: ['latin'], display: 'swap', weight: '400' });
+import 'lato-font';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
         <title>PowerSync Yjs CRDT Text Collaboration Demo</title>
       </head>
-      <body className={font.className}>
+      <body>
         <CssBaseline />
         <ThemeProviderContainer>
           <DynamicSystemProvider>{children}</DynamicSystemProvider>

diff --git a/demos/powersync-supabase-yjs-text-collab-demo/src/app/sql-console/page.tsx b/demos/powersync-supabase-yjs-text-collab-demo/src/app/sql-console/page.tsx
@@ -1,5 +1,4 @@
 'use client';
-import _ from 'lodash';
 import React from 'react';
 import { usePowerSyncWatchedQuery } from '@journeyapps/powersync-react';
 import { Box, Button, Grid, TextField, styled } from '@mui/material';

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml