{"id":26848022,"url":"https://github.com/opensource-force/savage","last_synced_at":"2025-09-12T13:46:43.977Z","repository":{"id":257208520,"uuid":"853097790","full_name":"opensource-force/SaVaGe","owner":"opensource-force","description":"A repo for the Open Source Force logo","archived":false,"fork":false,"pushed_at":"2025-02-16T23:37:48.000Z","size":5014,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-20T15:39:37.351Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opensource-force.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-06T01:44:56.000Z","updated_at":"2025-02-16T23:37:52.000Z","dependencies_parsed_at":"2025-07-20T15:34:25.493Z","dependency_job_id":"9e5d231d-3e3c-40ef-a3f8-35a85cb1f563","html_url":"https://github.com/opensource-force/SaVaGe","commit_stats":null,"previous_names":["opensource-force/savage"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/opensource-force/SaVaGe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensource-force%2FSaVaGe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensource-force%2FSaVaGe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensource-force%2FSaVaGe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensource-force%2FSaVaGe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opensource-force","download_url":"https://codeload.github.com/opensource-force/SaVaGe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opensource-force%2FSaVaGe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274823231,"owners_count":25356644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-30T20:38:08.512Z","updated_at":"2025-09-12T13:46:43.955Z","avatar_url":"https://github.com/opensource-force.png","language":"JavaScript","readme":"# SaVaGe\n\n* SaVaGe (named for [Augusta Savage][augusta], an American artist associated with the Harlem Rennaisance; the fact that it contains the letters [SVG][ht1], and the fact that SaVaGe is a dope name for something), is a repo for collecting useful drawing abstractions, _in code_, for use by SVGs on the web, and anywhere else that SVGs might show up. \n\nThe initial purpose of this repo is to build a logo for [Open Source Force][osf].\nIf you don't see a really cool logo in this README, it means we haven't finished it yet.\n\n## Overview\n\nScalable Vector Graphics are xml documents that implement a drawing API to draw images into your browser.\nIn general they are used for simpler graphics where things like dithering aren't as important.\nThis is because for _most_ people who care about graphical things, making them with a graphical program is easier than learning the SVG spec, and writing a bunch of drawing instructions in xml.\n\nI am not one of those people.\n\nI can't draw my way out of a paper bag.\nWhat I can do is figure out how to turn pixels on and off in pretty much any programming language folks can dream up, and then create a series of increasingly complicated abstractions in order to get a cat drawing on the screen.\n\nI will literally recreate the laws of Physics in code before trying to draw with a stylus anywhere. \n\nSo it's been on my list of things to do to look at SVG, and Lottie, to see if either or both could be used to update with code to make logos. \nI was expecting it to be a bunch of unreadable gobbledy-gook full of one letter properties and whatnot, and I was not let down. \nBut after spending an evening reading through the [MDN SVG Tutorial][mdn], I'm more convinced than ever that coding up a logo is more feasible than trying to draw one, and so here we are.\n\n## The Repo\n\nAfter talking with Wick3d, we landed on using Blazor and thus C# for this project. \nFor one it seems to be one of the least polarizing languages on the server, and for two, Microsoft can afford to pay technical writers to make their docs, a useful property for any project trying to reach a group of different language programmers.\n\nTo start, the two files we care about are `Components/App.cs` and `wwwroot/osf-logo.js`. \n\n`App.cs` is the Blazor web app that gets served. \nIts main action happens in the Routes folder, which I've removed for now.\nBut we can add things to this app to make SVG editing easier... or not, if we only use Blazor to test the SVG and serve it up, that'd be sufficient.\n\n`wwwroot/osf-logo.js` is the js file we'll want to use to have the logo render on a webpage. \nRight now, a placeholder svg is hardcoded in the file to show the basics of how this works, but we can use both C#, and JavaScript to do interesting stuff before, and while the logo is rendered. \nThis creates a possible graphics pipeline that looks like this:\n\n```mermaid\nflowchart LR\n    A[Persisted SVG logo] --\u003e B[C# preprocessor]\n    B --\u003e C[JavaScript preprocessor]\n    C --\u003eD[JavaScript runtime processing]\n```\n\nWhat could we do with all that?\nI really don't know, lol. \nMaybe C# hits some weather API, and if it's raining then it's raining on the logo.\nThen the JS preprocessor could grab accent colors from the receiving site and highlight them in the logo.\nAnd then maybe the logo's on fire.\n\n## Contributing\n\nThe flowchart above takes place in code as follows:\n\n`Middleware/DynamicJavaScriptMiddleware.cs` receives a request for a SaVaGe element. \nThat request gets sent to the appropriate class in `Middleware/SVGs`. \nThat class puts together the svg and js files in wwwroot, and the middleware returns it back to the client.\n\nThe wwwroot dir has the following structure:\n\n├── animations            // these are specifically svg animations that can be added to components\n├── bootstrap             // leftover from the original blazor app\n├── containers            // these are backgrounds and/or layers for holding svgs\n│   ├── backgrounds       // backgrounds\n│   ├── parent            // this container fills its parent container\n│   └── webpage           // this container is the body element of a webpage\n├── effects               // special effects like sparkles and lightning bolts\n├── game-scene            // building towards a whole layered game scene \n├── logos                 // logos for use like the Open Source Force logo\n│   ├── osf-logo          // Open Source Force logo\n│   ├── planet-nine-logo  // Planet Nine logo\n│   └── savage-logo       // SaVaGe logo\n├── planet's-test-dir     // feel free to make your own test dir for trying things out\n└── ui                    // base ui elements\n    ├── button            // button, the onclick handling is a bit awkward right now\n    ├── image             // image\n    ├── link              // a wrapper that can turn any svg into a link\n    └── text              // text\n\nIf you have never made SVG via code, which is likely because I don't think people really do that, please read this [primer][primer].\n\nThere are two types of components: js and svg. \njs components are meant to be served by the blazor server after being composed.\nsvg components are the pieces of svg composed into the js.\n\n#### Adding an svg component\n\nsvg components will always be wrapped in svg tags. \nsvg can have svg in it so you can wrap your component in svg or not.\nIf you don't it'll be appended wherever in the svg dom it gets added during composition.\n\nIn the svg, we use mustache templating for interpolated values.\nA double mustache {{replacementString}} is for values inserted by the server via C#.\nA single mustache {replacementString} is for values inserted by javascript.\n\n#### Adding a js component\n\njs components are IIFEs that will add themselves to the dom.\nIf an html element with the correct id exists, it'll add the svg as a child to that element. \njs components are what get served from the SaVaGe server.\n\nTo add to this repo, feel free to make a [pull request][pr].\n\n## Totally optional history section\n\nI just so happened to be in fifth grade during the very brief period where American schools had the budget to purchase computers, but there wasn't the internet, and thus a whole lot of things that were interesting to do on them.\nTo keep kids entertained on the glowing black and green boxes, teachers turned to a humble turtle.\n\n[Logo][logo] is a programming language developed in 1967. \nWhile it does a whole lot more than just move a turtle, most people's engagement with the language was through turtle graphics--a drawing program where you programmed instructions to move the turtle around and draw.\n\nI would've programmed that turtle forever if I could.\n\n25 years later I would give a talk at a conference about just how much more difficult it is to get into programming. \nTo make my point here, I went to go check CodeAcademy and saw that most of their content is now paid. \nSo there you go, got to sink money into a website just for them to make you feel stupid for not knowing what an array is.\n\nAll this is to say I have a special place in my heart for drawing APIs. \nWhen you're ten, moving around a turtle to draw is right in line with your priorities.\nnpm installing 50 dependencies, and adding a transpiler, and downloading an ide, and... well all that business is not.\n\n\n\n[augusta]: https://en.wikipedia.org/wiki/Augusta_Savage\n[osf]: https://opensourceforce.net\n[mdn]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial\n[pr]: https://github.com/opensource-force/savage/pulls\n[logo]: https://en.wikipedia.org/wiki/Logo_(programming_language)\n[primer]: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction\n\n[ht1]: ## \"Scalable Vector Graphics, an image format for the web.\"\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensource-force%2Fsavage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensource-force%2Fsavage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensource-force%2Fsavage/lists"}