diff --git a/deps/gray-matter/package.json b/deps/gray-matter/package.json index 3fd600c..59eb5b4 100644 --- a/deps/gray-matter/package.json +++ b/deps/gray-matter/package.json @@ -2,6 +2,7 @@ "name": "gray-matter", "version": "4.0.3", "author": "Jon Schlinkert (https://github.com/jonschlinkert)", + "type":"module", "license": "MIT", "files": [ "gray-matter.d.ts", diff --git a/package-lock.json b/package-lock.json index e309da1..912f7c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@preact/preset-vite": "^2.5.0", "@types/node": "^20.4.9", + "front-matter": "^4.0.2", "glob": "^10.3.3", "markdown-to-jsx": "^7.3.2", "typescript": "^5.1.6", @@ -53,6 +54,15 @@ "node": ">=6.0" } }, + "deps/gray-matter/node_modules/front-matter": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.3.0.tgz", + "integrity": "sha512-+gOIDsGWHVAiWSDfg3vpiHwkOrwO4XNS3YQH5DMmneLEPWzdCAnbSQCtxReF4yPK1nszLvAmLeR2SprnDQDnyQ==", + "dev": true, + "dependencies": { + "js-yaml": "^3.10.0" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", @@ -3405,12 +3415,12 @@ } }, "node_modules/front-matter": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.3.0.tgz", - "integrity": "sha512-+gOIDsGWHVAiWSDfg3vpiHwkOrwO4XNS3YQH5DMmneLEPWzdCAnbSQCtxReF4yPK1nszLvAmLeR2SprnDQDnyQ==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz", + "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==", "dev": true, "dependencies": { - "js-yaml": "^3.10.0" + "js-yaml": "^3.13.1" } }, "node_modules/fs-exists-sync": { diff --git a/package.json b/package.json index c1170b5..84c0e70 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@preact/preset-vite": "^2.5.0", "@types/node": "^20.4.9", + "front-matter": "^4.0.2", "glob": "^10.3.3", "markdown-to-jsx": "^7.3.2", "typescript": "^5.1.6", diff --git a/public/posts.jsonl b/public/posts.jsonl index 8ba8df4..bf32038 100644 --- a/public/posts.jsonl +++ b/public/posts.jsonl @@ -1,2 +1,3 @@ -{"title":"Objects as Reference","date":"2023-01-11T00:00:00.000Z","location":"London, UK","slug":"test"} -{"title":"Foobar","date":"2023-10-30T00:00:00.000Z","location":"Somewhere in England","slug":"foobar"} \ No newline at end of file +{"date":"2023-01-11T00:00:00.000Z","slug":"test","title":"Objects as Reference","location":"Devon, UK"} +{"date":"2023-02-17T00:00:00.000Z","slug":"wobblywoo","title":"Some temporary title","location":"Mars"} +{"date":"2023-10-30T00:00:00.000Z","slug":"foobar","title":"Foobar","location":"Somewhere in England"} \ No newline at end of file diff --git a/public/posts/wobblywoo.md b/public/posts/wobblywoo.md new file mode 100644 index 0000000..4d3ba4e --- /dev/null +++ b/public/posts/wobblywoo.md @@ -0,0 +1,39 @@ +--- +title: "Some temporary title" +date: 2023-02-17 +location: Mars +--- + +# Discussion +I'm going to switch modes for this last section. I've run out of steam for this draft, so let me just touch on some things I might like to discuss in colloquial language. + +Identifying three key responsibilities or roles of "object systems", and arguing that the tight coupling of these responsibilities is detrimental to our information infrastructure. Decoupling these is key to enabling "better" objects: + +1. *Reference*, which conditions the ways objects come to exist and several of their key properties. +2. *Structure*, which conditions how objects are or can be interrelated and the forms they must take. E.g. filesystems impose metadata on their objects, task manager apps impose ways that tasks can be organised, etc. +3. *Identity*, which conditions the ways objects can be considered the same. This is the least-explored part of the paper so far but is super important, I think there's a lot of under-explored ways we can manage identity, but currently this is left to the mutability rules of a system (e.g. file modification) or is implicit in the structure and use of objects (e.g. we consider an image in two formats to be the same). This topic is so big and interesting it may merit its own paper, and I do have one idea for a generalisable approach, which is to view identity as a kind of *governance.* That is to say, that identity comes first from the ways that *people* agree that something is the same. We could imagine identity systems that are highly pluralistic with many overlapping identities. This governance position is currently dominated by system designers such as those designing filesystems, but I think we could articulate a much more decentralised and participatory approach to identity. + +Looking at the "wants from objects", what do different discourses want from the objects of concern in their discourse? Malleable software wants interface objects that can are independent of apps; Itemised systems want user-facing data objects to be independent of application boundaries and freely structurable (calendar events, notes, tasks, contacts, etc); post-document systems want the objects currently hidden inside documents to be decoupled from the documents; and so on... One running theme through a lot of these wants is that objects should be robustly referenceable and independent, and that we need to *disaggregate* key objects into smaller referenceable parts. I'd like to expand and articulate these wants through the dimensions laid out earlier in the paper. And I'd like to argue that these discourses should be articulating demands of information *infrastructure* to enable success with these efforts, and recognise the limits of building isolated systems or new platforms — though this can be an effective way of exploring their goals. + +I'd like to explore the predictive and explanatory power of this work. If it is a truly *robust* theory, which I think it could become, this needs to be proved out more empirically. Part of this would involve expanding approaches to analysis, while the dimensions are a nice start I would like to do a more systemic analysis of objects "in the wild" and explore the possibilities of formalising some of this work. + +While individual systems have been explored, in practice these systems overlap and interconnect in many ways. Characterising interrelationships among multiple systems is a key point to expand on. E.g. the relation between an interface element and the "code" objects that underly it. There's lots of work that cares about these relationships and tries to do things with them, such as bidirectional lenses, linking languages, or linked data protocols. An empirical analysis would need to consider the many systems in seemingly "singular" objects: a JSON file, for example, involves file objects, unicode objects, named ontology elements, and these all interact nontrivially, such as the way that hierarchical structure is encoded in a linear structure of unicode objects. + +There's a lot that could be said about expressibility, user agency, and the role of objects in "digital language" — as through reference we create new “words" to speak *with* and new objects to speak *about.* + +I'd like to explore implications for infrastructure design, and this is probably a theme that needs to run through the rest of the paper... + +There's a political-economic dimension, mentioned in the "public-private" dimension, that's worth expanding on. Referenceability is one way that companies can obstruct more open, decentralised, and I think generally "better" systems from emerging. One could argue that some companies benefit from a "monopoly on referenceability" and that this is something we should try and escape, a fun idea here is to borrow the notion of "adversarial interoperability" and advocate for a kind of "adversarial referenceability" as a political/economic demand [@Doctorow_2019a]. + +Through this work it became clear that certain roles of objects are poorly supported: + +1. *semantic objects* — which gain usefulness through being stable tokens around which semantic structure can emerge — are poorly supported in our systems. Unicode words or phrases are nice tokens, but are highly dependent on files and are not independent in the way we'd like. Files (especially content-addressed ones) are stable and independent but are primarily *pointers* and have too much imposed structure to be good semantic objects. Imagining the best of both worlds is interesting to me: objects that are robust, atemporal, independent, tokens. Imagine if a phrase like "graph databases" could be its own object with a robust reference like a hash, which could be freely linked to, put into relation with other objects and be used in many contexts and places and not tied to a specific system (as files tend to be, but words do not)... +2. *relational objects* — which gain usefulness through expressing relations *between* objects — are also poorly served, as most relations are implicitly embedded in systems and have no independent representation. Research to address this often imposes *a ton* of assumptions and conditions, such as RDF or other semantic web efforts. I'm interested to explore what can be done here and am working on one approach for content-addressed systems with *content-addressed relations*, these do not impose (but can support the representation of) structure — no ordering of relata, no types/labels, no set arity, etc. These relational objects are compelling to me because they can be stable, independent, atemporal, and granular. One could imagine an ambient graph-like network emerging not through some decentralised database or protocol, but as a side effect of creating these kinds of relational objects in many different contexts. + +I've focused on limited kinds of objects, things like files, words, PDFs, reminders, etc. Objects that are mostly referenced through *addressing systems.* The choice of examples in this paper need to be interrogated a lot more and there are other kinds of objects which I barely addressed at all, like the artefacts of HCI research: buttons, widgets, etc. Grappling with the wider existence of objects feels out of scope but is pretty important if this theory is to stand up to scrutiny. + +Lastly, an obvious omission to this paper and discussion is a deeper exploration of the *usefulness* of this work to *specific* research efforts, this needs to change but I am still figuring out which discourses and specific research work I want to give the most attention in this paper. Feedback on this is *incredibly welcome*! + +There's much more to do! And much to do that I *do not know about yet*! If you can help me figure out *any* of this I will be eternally grateful! + +# References {.unnumbered} \ No newline at end of file diff --git a/public/stream.jsonl b/public/stream.jsonl new file mode 100644 index 0000000..098e03e --- /dev/null +++ b/public/stream.jsonl @@ -0,0 +1,2 @@ +{"date":"2023-01-11","markdown":">When asked, “How could you possibly have done the first interactive graphics program, the first non-procedural programming language, the first object oriented software system, all in one year?” Ivan replied: “Well, I didnt know it was hard.”\n\n— via Alan Kay, Doing with Images Makes Symbols, 1987"} +{"date":"2023-05-21","markdown":"**Little excerpt**\n\nAn approach to interfaces in which a network of transformations, constraints, preferences, and other relations connect object(s) of interest to an interface surrogate. The system as a whole is responsible for resolving the arbitrary and complex relationship between an object and surrogate and bridging that surrogate representation to a representation which is observable to users."} \ No newline at end of file diff --git a/scripts/prepare.js b/scripts/prebuild.mjs similarity index 63% rename from scripts/prepare.js rename to scripts/prebuild.mjs index 1799e27..68b97df 100755 --- a/scripts/prepare.js +++ b/scripts/prebuild.mjs @@ -1,18 +1,20 @@ import {glob} from 'glob'; import fs from 'fs'; -import matter from 'gray-matter'; +import fm from 'front-matter'; function loadStrings() { const posts = glob.sync('public/posts/*.md').map((file) => { const content = fs.readFileSync(file, 'utf8'); - const { title, date, location } = matter(content).data; + const { title, date, location } = fm(content).attributes; const slug = file.replace('public/posts/', '').replace('.md', ''); - return { title, date, location, slug }; + return { date, slug, title, location }; }); + posts.sort((a, b) => new Date(a.date) - new Date(b.date)) return posts; } function saveStrings(posts) { + console.log(posts); const jsonl = posts.map((post) => JSON.stringify(post)).join('\n'); fs.writeFileSync('public/posts.jsonl', jsonl); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3ddeb86..3b97a7d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -5,12 +5,18 @@ const useStyles = createStyles((theme) => ({ fontFamily: theme.headings.fontFamily, fontSize: '1.2em', fontWeight: 800, + '&:not(:hover)': { + textDecoration: 'none', + }, }, link: { color: theme.black, fontFamily: theme.headings.fontFamily, fontSize: '1.2em', fontWeight: 400, + '&:not(:hover)': { + textDecoration: 'none', + }, }, })) export function Header({ dark }: { dark?: boolean }) { diff --git a/src/index.tsx b/src/index.tsx index 252838c..c387938 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,20 +6,24 @@ import Post from '@/pages/Post' import Stream from '@/pages/Stream' import { NotFound } from '@/pages/404' import { MantineProvider } from '@mantine/styles' +import { Box } from '@mantine/core' import { Header } from '@/components/Header' import { style } from '@/style' + export function App() { return ( - - - - - - - - - + + + + + + + + + + + ) } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 6ee6ec3..2cf04a2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,39 +1,41 @@ import { Header } from '@/components/Header' -import { Container, Text } from '@mantine/core' +import { Container, Text, Title, Anchor, Space } from '@mantine/core' export function Home() { return ( <>
- - At vero eos et accusamus et iusto odio dignissimos ducimus qui - blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, - similique sunt in culpa qui officia deserunt mollitia animi, id est - laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita - distinctio. Nam libero tempore, cum soluta nobis est eligendi optio - cumque nihil impedit quo minus id quod maxime placeat facere possimus, - omnis voluptas assumenda est, omnis dolor repellendus. Temporibus - autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe - eveniet ut et voluptates repudiandae sint et molestiae non recusandae. - Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis - voluptatibus maiores alias consequatur aut perferendis doloribus - asperiores repellat. -
- At vero eos et accusamus et iusto odio dignissimos ducimus qui - blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, - similique sunt in culpa qui officia deserunt mollitia animi, id est - laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita - distinctio. Nam libero tempore, cum soluta nobis est eligendi optio - cumque nihil impedit quo minus id quod maxime placeat facere possimus, - omnis voluptas assumenda est, omnis dolor repellendus. Temporibus - autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe - eveniet ut et voluptates repudiandae sint et molestiae non recusandae. - Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis - voluptatibus maiores alias consequatur aut perferendis doloribus - asperiores repellat. + Hello! 👋 + + My research investigates the intersection of computing, human-system + interfaces, and emancipatory politics. I am interested in the + potential of computing as a medium for thought, as a tool for + collective action, and as a means of emancipation. + + + My current focus is basic research into the nature of digital + organisation, developing theoretical toolkits to improve shared + infrastructure, and applying this research to the design of new + systems and protocols which support the self-organisation of knowledge + and computational artifacts. + + My work + + Alongside my independent work I am a researcher at{' '} + Block Science building{' '} + knowledge organisation infrastructure and at{' '} + ECSA working on{' '} + computational media. Previous work includes software and video + game development, programming tools, and film production. I have + expertise in knowledge representation, programming systems design, and + human-computer interaction. + + Get in touch + + I am occasionally active on Twitter as @OrionReedOne and on + Mastadon as @orion@hci.social. The best way to reach me is + through Twitter or my email, me@orionreed.com diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 3dc4b08..a58e09c 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -6,6 +6,7 @@ import { Text, Anchor, useMantineTheme, + createStyles, } from '@mantine/core' import { format } from 'date-fns' import { useEffect, useState } from 'preact/hooks' @@ -22,10 +23,20 @@ async function getPosts() { }) } -function PostListItem({ slug, title, date }) { +const useStyles = createStyles((theme) => ({ + index: { + fontFamily: 'monospace', + }, +})) + +function PostListItem({ slug, title, date, index }) { + const { classes } = useStyles() const black = useMantineTheme().black return ( + + {`${index}`.padStart(3, '0')} + {title} @@ -41,7 +52,7 @@ function Frame({ children }) { <>
- Posts + 2023 {children} @@ -69,12 +80,13 @@ export function Posts() { } else { return ( - {posts.map((post) => { + {posts.map((post, index, array) => { return ( ) })} diff --git a/src/pages/Stream.tsx b/src/pages/Stream.tsx index f95480f..ba357f9 100644 --- a/src/pages/Stream.tsx +++ b/src/pages/Stream.tsx @@ -1,13 +1,116 @@ +import { + Group, + Text, + useMantineTheme, + Container, + Stack, + Flex, + createStyles, + Divider, +} from '@mantine/core' +import { format } from 'date-fns' +import { useEffect, useState } from 'preact/hooks' import { Header } from '@/components/Header' -import { Container } from '@mantine/core' +import Markdown from 'markdown-to-jsx' -export default function Stream() { +const margin = '0.3em' + +const useStyles = createStyles((theme) => ({ + group: { + color: theme.black, + lineHeight: '1.4em', + fontFamily: theme.headings.fontFamily, + }, + item: { + flexWrap: 'nowrap', + '& :first-child': { + marginTop: 0, + }, + '& p': { + marginTop: margin, + marginBottom: margin, + }, + '& pre': { + marginTop: margin, + marginBottom: margin, + }, + '& ul': { + marginTop: margin, + marginBottom: margin, + paddingLeft: '1.4em', + }, + + '& blockquote': { + marginTop: '0.8em', + marginBottom: '0.8em', + marginLeft: 0, + paddingLeft: '1em', + borderLeft: `0.25em solid ${theme.colors.gray[3]}`, + }, + }, + date: { + fontFamily: theme.headings.fontFamily, + + marginRight: '0.2em', + whiteSpace: 'nowrap', + }, +})) + +function friendlyDate(dateString: string): string { + const inputDate = new Date(dateString) + return format(inputDate, 'do MMM yyyy') +} + +async function getStream() { + const response = await fetch('stream.jsonl') + return await (await response.text()).split('\n').map((post) => { + return JSON.parse(post) + }) +} + +function StreamItem({ date, markdown }) { + const { classes } = useStyles() + const black = useMantineTheme().black return ( - <> -
- - Stream is work-in-progress... Check back sometime. - - + + + {friendlyDate(date)} + + + {markdown} + + ) } + +export default function Stream() { + const { classes } = useStyles() + const [stream, setPost] = useState>(null) + useEffect(() => { + getStream().then(setPost) + }, []) + + if (!stream) { + return Loading stream... + } else { + return ( + <> +
+ + + This stream is a place for me to think out loud and to share + as I learn. It's not a place for well-formed ideas or for things I'm + sure about. It's a place to explore, to be wrong, and to trust the + reader (and myself) that this is okay. + + + + {stream.map((s) => { + return + })} + + + + ) + } +} diff --git a/src/style.ts b/src/style.ts index 3198a20..6e0922a 100644 --- a/src/style.ts +++ b/src/style.ts @@ -14,4 +14,28 @@ export const style = { }, black: '#24292e', primaryColor: 'red', + components: { + Anchor: { + styles: (theme, { variant }) => ({ + root: { + color: theme.black, + textDecoration: 'underline', + textUnderlineOffset: '0.15rem', + textDecorationThickness: '0.15rem', + textDecorationColor: theme.colors.dark[1], + '&:hover': { + textDecorationThickness: '0.15rem', + textDecorationColor: theme.black, + }, + }, + }), + }, + Text: { + styles: (theme, { variant }) => ({ + root: { + marginBottom: '0.6rem', + }, + }), + }, + }, }