initial testing

.obsidian/config

@@ -0,0 +1 @@
+{"baseFontSize":16,"pluginEnabledStatus":{"file-explorer":true,"global-search":true,"switcher":true,"graph":true,"backlink":true,"page-preview":true,"command-palette":true,"markdown-importer":true,"word-count":true,"open-with-default-app":true,"file-recovery":true},"enabledPlugins":["obsidian-react-components"]}

.obsidian/plugins/obsidian-react-components/data.json

@@ -0,0 +1 @@
+{"template_folder":"ReactComponents","auto_refresh":true}

.obsidian/plugins/obsidian-react-components/manifest.json

@@ -0,0 +1,10 @@
+{
+	"id": "obsidian-react-components",
+	"name": "Obsidian React Components",
+	"version": "0.0.5",
+	"minAppVersion": "0.9.12",
+	"description": "This is a plugin for Obsidian. It allows you to write and use React components with Jsx inside your Obsidian notes.",
+	"author": "Elias Sundqvist",
+	"authorUrl": "https://github.com/elias-sundqvist",
+	"isDesktopOnly": false
+}

ReactComponents/Buttons.md

@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+ 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Button variant="contained">Default</Button>
+      <Button variant="contained" color="primary">
+        Primary
+      </Button>
+      <Button variant="contained" color="secondary">
+        Secondary
+      </Button>
+      <Button variant="contained" disabled>
+        Disabled
+      </Button>
+      <Button variant="contained" color="primary" href="#contained-buttons">
+        Link
+      </Button>
+    </div>
+  );
+}

ReactComponents/Clock.md

@@ -0,0 +1,14 @@
+// file: Clock.md
+ const [date, setDate] = useState(new Date());
+ useEffect(() => {
+  var timerID = setInterval( () => setDate(new Date()), 1000 );
+  return function cleanup() {
+      clearInterval(timerID);
+    };
+ });
+return (
+  <div>
+	<h1>Hello, world!</h1>
+	<h2>It is {date.toLocaleTimeString()}.</h2>
+  </div>
+); 

ReactComponents/Counter.md

@@ -0,0 +1,10 @@
+// file: Counter.md
+const [count, setCount] = useState(0)
+return (
+<div>
+  <p>You clicked me {count} times!!!</p>
+  <button onClick={() => setCount(count + 1)}>
+	{props.source}
+  </button>
+</div>
+)

ReactComponents/MyLilModule.md

@@ -0,0 +1,9 @@
+// MyLilModle.js
+
+let dt = require('../src/mylilmodule.js');
+
+return (
+  <div>
+	<h2>My Date is {dt}.</h2>
+  </div>
+); 

ReactComponents/rand.md

@@ -0,0 +1,2 @@
+// file: rand.md
+return Math.random()

src/mylilmodule.js

@@ -0,0 +1,3 @@
+exports.myDateTime = function () {
+  return Date();
+};