diff --git a/docs/README.md b/docs/README.md index 290ffe11..7f061e47 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,13 +1,40 @@ -# ⚠️ under construction ⚠️ -(we're still in the process of updating all the old docs && migrating them from the [old wiki](https://github.com/netizenorg/netnet.studio/wiki) if you can't find what you're looking for here, it might still be over there.) +### netnet.studio is an open-source hypermedia cyberspace for fully realizing the Web’s creative potential. +netnet's goal is to guide creatives in their journey, from curious beginners to creative code virtuosos, through interactive learning and experimental play with the medium itself. Our mission is to help artists, designers and other DIY makers reclaim the Internet as a hand-crafted space for self-expression. -![banner](readme-banner.png) + -## Welcome netizens to the netnet.studio docs! -Here you'll find general info on what netnet is and how it works, as well as guides for how to help support and contribute to the netnet.studio repo! +

+ netnet.studio is a free/libre open-source project please consider supporting it to keep it alive! +

-- [I'm a student and want to learn how to use netnet.studio!]() -- [I'm a teacher and want to learn how to use netnet in my class!]() -- [I'm a developer and want to help contribute to this repo!](developers/README.md) -- [I'm an advocate and want to help support this project!](advocates/README.md) +# Meet netnet ( ◕ ◞ ◕ ) + +When you visit netnet.studio you'll be greeted by a friendly artificial intelligence teaching assistant (AI-TA) named netnet! As an AI-TA, netnet supports students of the Web by explaining code fragments, encouraging best practices, and correcting common mistakes. However, in these AI-times it's worth clarifying that netnet is not a "large language model" or any other kind of "machine learning", *it* (preferred pronoun) is a human-authored *classical AI* system, less like a corporate chat bot and more like the AI in a retro video game. Every word has been carefully considered and written by humans (that's us), therefore netnet will never "hallucinate" nor will it write all your code for you (though it will help with a snippet here or there). + +We're not entirely opposed to LLMs, we believe there's lots of unexplored possibilities in the ethical and artistic application of "artificial neural networks" (we're currently working on creative AI/LLM literacy tools and lessons). However, we do feel that the way they're currently being integrated into coding tools is designed more for "people who think to make" (folks with ideas they want someone or some*thing* to make for them) and less for those who "make to think", meaning those of us who discover, learn and grow our creative ideas through the process of making and writing code ourselves. + +**If you're an aspiring student of the creative web, [start here](students/README.md)!** + +# The Platform + +The [first web browser](https://www.youtube.com/watch?v=3c3Rt6QbHDw) was both a tool for exploring the web and creating it. The first browsers were all research projects created in labs and universities, but when enterprising technologists saw its commercial potential they removed the "editor" part and left only the "browser" part. netnet brings the "editor" back into the "browser", where it was always meant to be. + +Unlike most web-based products of [surveillance capitalism](https://www.youtube.com/watch?v=hIXhnWUmMvw) (the dominant business model of big tech today) netnet.studio is not here to collect and profit off your data. The studio is carefully designed to be a privacy-focused safe space for creative experimentation (You can read our [privacy policy](https://dev.netnet.studio/?w=privacy-policy) at the studio). While netnet is modeled on modern code editors and does integrate with other third party tools like GitHub (for the purpose of teaching others the conventions and tooling of the day) we go to great lengths to make this all secure and extremely transparent while remaining accessible. + +**TODO** *update privacy-policy dev link to main link before pushing to main* + +**If you're an educator interested in leveraging the platform in your classroom, [start here](educators/README.md)!** + +# Our Mission + +What begun as a research project in computer networking in the late 1960s slowly grew into a globally distributed network of networks called the the *Inter*net. For the first couple of decades, using the Internet meant reading and typing into text-only displays. That is until the early 1990s, when a small group of scientists, taking inspiration from an experimental [media art/tech scene](https://archive.org/details/HyperlandBBSDouglasAdamsAndTomBaker1990), added a "hypertext" and "multi-media" interface called the World Wide Web. Like the physical infrastructure it was built on (the Internet) the Web reflected a set of values which enabled it to grow far beyond its inventors wildest dreams! + +Today, the Web's core values of openness, transparency, decentralization, accessibility, extensibility and interoperability have been slowly eroded by the profit-motives of greedy tech corporations which have colonized and privatized what was once an entirely public commons. This industry and its "[merchants of complexity](https://world.hey.com/dhh/merchants-of-complexity-4851301b)" will have you think that creating web sites and apps requires advanced skills and expensive infrastructure and that the only way to have a presence online is to either become an expert (the industry has always been guarded by a sort of "[priesthood](https://www.newmediareader.com/book_samples/nmr-2nelson.pdf)") or succumb to "posting" on *their* websites. + +But this re-writing of history could not be farther from [the truth](https://coolguy.website/introduction/). The Web was designed to be [hand-crafted](https://luckysoap.com/statements/handmadeweb.html) by anyone interested enough to take the time to learn a few basics and indeed, [in the early days it was](https://www.youtube.com/watch?v=2LzyRcLJdlg). While we're inspired by the hand made web of the 1990s, this project is not about nostalgia, netnet.studio encourages others to explore (and is itself created with) modern and cutting-edge web technologies. The Web has never had more creative potential and netnet.studio is a platform to help you decide [what the web of tomorrow should be](https://laurelschwulst.com/e/my-website-is-a-shifting-house/)! + +**If you believe in our mission and what to help contribute time to the project, [start here](contributors/README.md)!** diff --git a/docs/advocates/README.md b/docs/advocates/README.md deleted file mode 100644 index 5cf2877a..00000000 --- a/docs/advocates/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# Support netnet.studio - -netnet.studio is a netizen.org project being designed and developed by Nick Briz and Sarah Rooney with help from a handful of [other contributors](https://github.com/netizenorg/netnet.studio/graphs/contributors). The current version of netnet was made possible thanks to financial support from the Clinic for Open Source Arts, the Contemporary Practices Department at the School of the Art Institute of Chicago and Media Arts and Design at the University of Chicago. - -| [![cosa](cosa.png)](http://clinicopensourcearts.com/) | [![saic](saic.png)](https://www.saic.edu/academics/departments/contemporary-practices) | [![uchicago](uchicago.png)](https://cms.uchicago.edu/undergraduate/major-minor/minor-media-arts-and-design) | -|:---:|:---:|:---:| - -netnet.studio is constantly evolving and is currently seeking financial support from individuals and institutions who benefit from open access to this platform and who support our mission to reclaim creative agency on the Internet and to nurture and grow the hand-crafted expressive parts of the World Wide Web. - -### How can institutions support? - -netnet.studio has been implemented into University curriculum around the world during our beta development phase (see testimonials below). We are aiming to launch for the public summer 2025. As part of this launch, we will begin offering support and integration services for universities and other educational institutions looking to use netnet.studio in their curriculum. Our institutional license fee of $2,500 a year includes a yearly pedagogy workshop and curricular plan customized for your institution's educational needs. Email hi@netizen.org for more info. - -### How can individuals support? - -netnet.studio is a non-profit open-source project and needs all the help it can get! There are different ways you can help support it's development as an individual: - -- if you notice any bugs or have any feedback feel free to open a new [issue](https://github.com/netizenorg/netnet.studio/issues) on this repo or send us an email: hi@netizen.org - -- if you'd like to contribute edits to the project yourself check out our [contributors guide](../developers) - -- if you're an educator teaching web art/design coding courses for creatively inclined individuals and want to help us improve netnet by providing feedback/thoughts/examples or please reach out so we can chat about what that can look like: hi@netizen.org - -- netizen.org is a 501(c)3 tax deductible organization, so you might consider making a donation! We're working on setting up multiple avenues for financial contributions alongside our official launch this summer 2025, but for now you can make donations to the org using our [donorbox](https://donorbox.org/netizen) account or get in touch if you'd like to help support netnet.studio directly: hi@netizen.org - - -### Testimonials - -For almost 5 years, netnet.studio has been in beta, meaning we’ve been developing it iteratively alongside creative coding educators and students using it in the classroom. It’s been used by hundreds of students across multiple universities including, The School of the Art Institute of Chicago, the University of Chicago and the University of Waterloo among others. Professors like Greg Smith (University of Waterloo) have noted the difference using netnet in their classroom’s have made. - -> I'm once again using netnet in my web design class! I've had 120 Uwaterloo students happily working with it this semester and 60 more slated for the winter. It's going really well, and I can't stress enough how netnet makes my life a little easier! 🙂 [...] THANK YOU AGAIN FOR MAKING THIS GREAT TOOL! Please pass my gratitude on to your team. - -Students have also responded overwhelmingly positive in anonymous evaluations, saying: - -> netnet is awesome and really thoughtfully built. - -> Since it’s a browser–based platform, I didn’t have to worry about setting up a local development environment or dealing with installations, which made it much easier to focus on learning HTML and CSS right away. The simplicity of NetNet allowed me to jump straight into writing and experimenting with code without being overwhelmed by extra setup steps. - -> "[netnet] was one of the coolest parts of the class. I really appreciated the interactivity of the software, as it allowed me to learn by doing as well as listening." - -> "The interactive tutorials were fun and more engaging! Even though I have experience with HTML and CSS from other classes, I still felt that it was a good foundation for rally understanding how HTML works and found the tutorials valuable." - -> "Coding on netnet really highlights the creative aspect of coding and obscures the more boring technical parts like git and version control etc. I think it's great for beginners and super user-friendly." - -> "netnet was great because I could see all of my changes take place immediately [this] allowed me to experiment more." - -> I liked netnet as a code editor! I've previously used other IDEs and netnet was really use[r] friendly [...] Its integration with github was really easy to use and understand especially considering the amount of issues I've previously run into with merge conflicts and even just setting up the github repo. - -> I found that the interactive nature of the NetNet.Studio tutorials really helped reinforce my understanding of the material. Being able to experiment with code in real–time and immediately see the results made the learning process more engaging and hands–on. Instead of just passively watching a video or reading through instructions, I was actively writing and adjusting code, which helped solidify key concepts. - -> My favorite aspect of this course (and the one that contributed the most to my learning) was NetNet! I loved the lectures, tutorials, etc. There's limitless information to be found/explored on that website. HTML and CSS were explained in a way that was thorough and easily accessible. diff --git a/docs/build-docs.js b/docs/build-docs.js index c819f5c6..95d32e4b 100644 --- a/docs/build-docs.js +++ b/docs/build-docs.js @@ -2,69 +2,101 @@ const fs = require('fs') const path = require('path') const { marked } = require('marked') +const fldrDict = { + students: 'Dear Students', + educators: 'Dear Educators', + contributors: 'Dear Contributors' +} +const skipFldrs = ['images'] + // update some of the "marked" library's rendering behavior // ........................................................ const renderer = new marked.Renderer() renderer.link = function (obj) { let { href, text } = obj - + // format links if (typeof href !== 'string') href = '#' - - // Replace .md with .html for local links - if (href.endsWith('.md')) { - href = href.replace(/\.md$/, '.html') - } - - // Add target="_blank" for external links + if (href.endsWith('.md')) href = href.replace(/\.md$/, '.html') + if (href.includes('README')) href = href.replace('README', 'index') + // add target="_blank" for external links const isExternal = href.startsWith('http') || href.startsWith('//') const targetAttr = isExternal ? ' target="_blank"' : '' - - // Check if the text contains an image using basic Markdown syntax for images + // check for linked images const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/ const match = text.match(imageRegex) - if (match) { - // Extract the alt text and image source const alt = match[1] const src = match[2] - - // Construct the tag with the nested tag return `${alt}` } - // Return a standard tag for regular links return `${text}` } +renderer.code = function (token) { + // add custom class to js, html && css blocks so that we can nn.getAll + // in scripts.js && style correctly when converted into a Netitor instance + const lang = token.lang || '' + const cls = lang === 'js' ? 'javascript' : lang + const classAttr = cls ? ` class="${cls}"` : '' + const content = this.options.highlight + ? this.options.highlight(token.text, lang) + : token.text + .replace(/&/g, '&') + .replace(//g, '>') + return `
${content}
\n` +} marked.setOptions({ renderer }) // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -// ~~~~~~~~~~~ MD to HTML function ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +// ~~~~~~~~~~~ create side-panel navigation