Separate css

README.md

@@ -1,3 +1,45 @@
 # contacts-pane
 
-Contact management: AddressBooks, Groups, Individuals and Organizations.
+SolidOS pane that displays a personal contact and address books.
+
+![CI](https://github.com/solid/contacts-pane/workflows/CI/badge.svg)
+
+## Contribute
+
+### Tech stack
+
+- JavaScript
+- Jest
+- Eslint
+- SolidOS
+
+### Tests
+
+To run all tests:
+```shell script
+npm test
+```
+
+If you are a first time developer/user on Windows 10, the repository may give package issues regarding webpack or jest.
+If this is the case, simply run "npm audit fix" and upgrade the repository. It should work fine.
+
+#### Unit tests
+
+Unit tests use `jest` and are placed in the `test` folder.
+
+### Dev Server
+
+Start a webpack dev server:
+
+```shell script
+npm start
+```
+
+Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a different profile.
+
+### Build
+
+```
+npm run build
+```
+

babel.config.mjs

@@ -14,8 +14,7 @@ export default {
     [
       'babel-plugin-inline-import', {
         extensions: [
-          '.ttl',
-          '.sparql'
+          '.ttl'
         ]
       }
     ]

declarations.d.ts

@@ -3,7 +3,7 @@ declare module '*.ttl' {
   export default content;
 }
 
-declare module '*.sparql' {
+declare module '*.css' {
   const content: string;
   export default content;
 }

dev/context.ts

@@ -0,0 +1,27 @@
+import { default as pane } from '../src/contactsPane' 
+import { DataBrowserContext, PaneRegistry } from 'pane-registry'
+import { solidLogicSingleton, store } from 'solid-logic'
+import { LiveStore } from 'rdflib'
+
+// Configure fetcher for development
+if (store.fetcher) {
+  // Configure for cross-origin requests
+  (store.fetcher as any).crossSite = true;
+  (store.fetcher as any).withCredentials = false;
+}
+
+export const context: DataBrowserContext = {
+  session: {
+    store: store as LiveStore,
+    paneRegistry: {
+      byName: (name: string) => {
+        return pane
+      }
+    } as PaneRegistry,
+    logic: solidLogicSingleton
+  },
+  dom: document,
+  getOutliner: () => null,
+}
+
+export const fetcher = store.fetcher