- Updated readme

- Added resizable columns

README.md

@@ -1,6 +1,26 @@
 # Open 777
 
+### 🜁🜂 Visit [Open 777 Here](https://adamblvck.github.io/open_777/) 🜄🜃
 
+## About
+
+Open 777 is a small online website for easily looking up Crowley's Esoteric Kabbalistic correspondences, meant for Esoteric Study & Practice.
+
+The website consists of transcriptions done by ADAM BLVCK from the now in open-domain book "777" by Aleister Crowley. Since looking up online correspondences can be a true hassle, and since no courated dataset of these correspondences could be found (which in itself is a treasure mine for enhancing AI-models), I decided to create one.
+
+## The Website
+
+In the books, the tables of correspondences is organized in 32 rows which represent the Kabbalistic scale of meaning, which spans many pages of correspondence categories. In the app a transposed approach is used, where the 32 "steps" on the scale are presented as columns, whereas the rows indicate categories.
+
+The website uses [Glide Data Grid](https://github.com/glideapps/glide-data-grid) which is most suitable for this purpose, and includes search-functionality across the whole table.
+
+## Data
+
+The to-transcribe data is huge, and thus this website will be updated every few days until all correspondences are covered. If you think you can help with transcription, please message me here or at contact@adamblvck.com.
+
+The correspondence dataset can be found as a json object in the file `src/liber_777.js`, or `docs/liber_777.csv`, but the source of both these files is now hosted on [Google Sheets](https://docs.google.com/spreadsheets/d/1bJPN_gs6USHniUfmWFIACCroOAzOq8jX2XWITclSBA0/edit?usp=sharing). The python notebook located at `docs/convert_json.ipynb` can be used to convert a csv (exported from the Google Sheet) into an appropriate format for use in a website, or javascript environment.
+
+### 🜁🜂 Visit [Open 777 Here](https://adamblvck.github.io/open_777/) 🜄🜃
 
 ## Publishing to GitHub Pages
 

docs/convert_json.ipynb

@@ -15,7 +15,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "df = pd.read_csv(\"./liver_777.csv\")"
+    "df = pd.read_csv(\"./liber_777.csv\")"
    ]
   },
   {

src/App.js

@@ -13,18 +13,20 @@ import { TableColumns, TableIndex } from './structure';
 import { Liber777 } from './liber_777';
 import { DarkTheme } from './dark';
 
+import _ from 'lodash';
+
 function App() {
 
 	const [showSearch, setShowSearch] = React.useState(false);
 	const onSearchClose = React.useCallback(() => setShowSearch(false), []);
 
+	const [columns, setColumns] = React.useState(TableColumns);
+
 	const getContent = React.useCallback( cell => {
 		const [col, row] = cell;
 		const dataRow = Liber777[row];
 		// dumb but simple way to do this
 
-		console.log (col, row, TableIndex[col], dataRow);
-
 		const d = dataRow[ TableIndex[col]];
 		return {
 			kind: GridCellKind.Text,
@@ -59,6 +61,20 @@ function App() {
 		return text_color;
 	}
 
+	const handleColumnResize = (column, newSize) => {
+		console.log("event", column, newSize);
+
+		setColumns(prevCols => {
+			const index = _.findIndex(prevCols, { id: column.id });
+			const newCols = [...prevCols];
+			newCols.splice(index, 1, {
+				...prevCols[index],
+				width: newSize,
+			});
+			return newCols;
+		});
+	}
+
 	return (
 		<div className="App">
 			<div className="App-header">
@@ -83,6 +99,8 @@ function App() {
 					<DataEditor
 						theme={DarkTheme}
 
+						onColumnResize={handleColumnResize}
+
 						freezeColumns={1}
 						experimental={{hyperWrapping:true}}
 
@@ -92,7 +110,7 @@ function App() {
 						onSearchClose={onSearchClose}
 						className="data"
 						getCellContent={getContent}
-						columns={TableColumns}
+						columns={columns}
 						rows={Liber777.length}
 
 						drawCell={args => {