├── .editorconfig
├── .formatter.exs
├── .github
    └── workflows
    │   └── release.yml
├── .gitignore
├── .iex.exs
├── .nova
    ├── Configuration.json
    └── Tasks
    │   ├── Dev.json
    │   └── Test.json
├── .tool-versions
├── .vscode
    └── settings.json
├── LICENSE
├── Makefile
├── README.md
├── assets
    ├── .babelrc
    ├── css
    │   ├── app.css
    │   └── tela.css
    ├── index.html
    ├── js
    │   ├── app.js
    │   ├── customElements
    │   │   ├── enhanced-navigation.js
    │   │   ├── filter-items.js
    │   │   ├── phx-current-page.js
    │   │   ├── wasm-chunked-html.js
    │   │   ├── wasm-http-server.js
    │   │   ├── wasm-simple-html.js
    │   │   ├── wasm-state-machine.js
    │   │   └── wasm-string-builder.js
    │   ├── socket.js
    │   └── wasm
    │   │   └── memoryIO.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── static
    │   ├── favicon.ico
    │   ├── images
    │   │   ├── phoenix.png
    │   │   └── swiftui-96x96_2x.png
    │   └── robots.txt
    ├── tailwind.config.js
    ├── vendor
    │   └── topbar.js
    └── webpack.config.js
├── checksum-Elixir.ComponentsGuide.Rustler.Math.exs
├── compile
├── config
    ├── config.exs
    ├── dev.exs
    ├── prod.exs
    ├── prod.secret.exs
    ├── runtime.exs
    └── test.exs
├── e2e
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    ├── playwright.config.ts
    ├── tests-examples
    │   └── demo-todo-app.spec.ts
    └── tests
    │   └── home.spec.ts
├── elixir_buildpack.config
├── lib
    ├── components_guide.ex
    ├── components_guide
    │   ├── application.ex
    │   ├── collected_repo.ex
    │   ├── content.ex
    │   ├── content
    │   │   ├── text.ex
    │   │   ├── text2.ex
    │   │   └── text_import.ex
    │   ├── fake_search.ex
    │   ├── fetch.ex
    │   ├── fetch
    │   │   ├── request.ex
    │   │   ├── response.ex
    │   │   └── timings.ex
    │   ├── git
    │   │   └── pkt_line.ex
    │   ├── research
    │   │   ├── source.ex
    │   │   ├── sources
    │   │   │   └── typescript.ex
    │   │   ├── spec.ex
    │   │   └── static.ex
    │   ├── rustler
    │   │   └── molten.ex
    │   └── wasm
    │   │   └── examples
    │   │       ├── base64
    │   │           └── base64.ex
    │   │       ├── calendar
    │   │           └── calendar_grid.ex
    │   │       ├── cloudflare_dns
    │   │           └── cloudflare_dns.ex
    │   │       ├── collected
    │   │           └── collected_press.ex
    │   │       ├── color_picker
    │   │           ├── color_conversion.ex
    │   │           ├── lab_swatch.ex
    │   │           ├── lab_swatch.wasm
    │   │           └── lab_swatch.wat
    │   │       ├── cors
    │   │           └── cors.ex
    │   │       ├── dovetail
    │   │           └── dovetail.ex
    │   │       ├── epub
    │   │           └── epub_builder.ex
    │   │       ├── examples.ex
    │   │       ├── examples_format.ex
    │   │       ├── examples_html.ex
    │   │       ├── examples_http_headers.ex
    │   │       ├── examples_http_server.ex
    │   │       ├── examples_magic_numbers.ex
    │   │       ├── examples_memory.ex
    │   │       ├── examples_numeric.ex
    │   │       ├── examples_parser.ex
    │   │       ├── examples_sitemap_form.ex
    │   │       ├── examples_sqlite.ex
    │   │       ├── examples_state.ex
    │   │       ├── examples_svg.ex
    │   │       ├── favicon
    │   │           └── favicon_generator.ex
    │   │       ├── http_harness
    │   │           └── http_harness.ex
    │   │       ├── lemire
    │   │           └── parse_u8.ex
    │   │       ├── mime_types
    │   │           └── mime_types.ex
    │   │       ├── podcast_feed
    │   │           ├── podcast_feed.ex
    │   │           └── xml_formatter.ex
    │   │       ├── string_builder.ex
    │   │       ├── temperature
    │   │           └── temperature_converter.ex
    │   │       └── url_encoded.ex
    ├── components_guide_web.ex
    ├── components_guide_web
    │   ├── channels
    │   │   └── user_socket.ex
    │   ├── components
    │   │   ├── browser_compat_components.ex
    │   │   ├── calendar_component.ex
    │   │   ├── core_components.ex
    │   │   ├── dev_calendar_component.ex
    │   │   └── preload.ex
    │   ├── controllers
    │   │   ├── accessibility_first_controller.ex
    │   │   ├── calendar_controller.ex
    │   │   ├── calendar_html
    │   │   │   └── index.html.heex
    │   │   ├── cheatsheets_controller.ex
    │   │   ├── color_controller.ex
    │   │   ├── composable_systems_controller.ex
    │   │   ├── concepts_controller.ex
    │   │   ├── content_length_controller.ex
    │   │   ├── encoding_controller.ex
    │   │   ├── fake_search_controller.ex
    │   │   ├── graphics_controller.ex
    │   │   ├── landing_controller.ex
    │   │   ├── links_controller.ex
    │   │   ├── react_editor_controller.ex
    │   │   ├── react_typescript_controller.ex
    │   │   ├── research_controller.ex
    │   │   ├── research_html
    │   │   │   ├── empty.html.heex
    │   │   │   ├── index.html.heex
    │   │   │   ├── loading.html.heex
    │   │   │   ├── results.html.heex
    │   │   │   ├── search_header.html.heex
    │   │   │   └── typescript.html.heex
    │   │   ├── robust_javascript_interactivity_controller.ex
    │   │   ├── swift_ui_controller.ex
    │   │   ├── text2_html
    │   │   │   ├── edit.html.heex
    │   │   │   ├── index.html.heex
    │   │   │   ├── new.html.heex
    │   │   │   └── show.html.heex
    │   │   ├── text_controller.ex
    │   │   ├── wasm_controller.ex
    │   │   ├── wasm_html
    │   │   │   ├── color.html.heex
    │   │   │   ├── custom_elements.html.md
    │   │   │   ├── demo.html.heex
    │   │   │   └── index.html.heex
    │   │   └── web_standards_controller.ex
    │   ├── endpoint.ex
    │   ├── gettext.ex
    │   ├── live
    │   │   ├── activity.ex
    │   │   ├── browser_compat.ex
    │   │   ├── color.ex
    │   │   ├── fake_search.ex
    │   │   ├── latency_calculator.ex
    │   │   ├── latency_comparison.ex
    │   │   ├── orb_html_live.ex
    │   │   ├── types_search.ex
    │   │   ├── view_github_repo.ex
    │   │   ├── view_source.ex
    │   │   ├── wasm_http_server.ex
    │   │   └── wasm_inspector.ex
    │   ├── router.ex
    │   ├── telemetry.ex
    │   ├── template_engines
    │   │   ├── image_engine.ex
    │   │   └── markdown_engine.ex
    │   ├── templates
    │   │   ├── accessibility_first
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── accessibility-tree-snapshot-failure-diff.png
    │   │   │   ├── accessible-name.html.md
    │   │   │   ├── content.html.md
    │   │   │   ├── forms.html.md
    │   │   │   ├── github-banner-search.png
    │   │   │   ├── github-banner-signed-in.png
    │   │   │   ├── github-contentinfo.png
    │   │   │   ├── github-new-repo-form.png
    │   │   │   ├── github-two-navs.png
    │   │   │   ├── google-homepage.png
    │   │   │   ├── index-old.html.eex
    │   │   │   ├── index.html.heex
    │   │   │   ├── intro.html.md
    │   │   │   ├── landmarks-extension.png
    │   │   │   ├── landmarks.html.md
    │   │   │   ├── mozilla-contentinfo.png
    │   │   │   ├── navigation.html.md
    │   │   │   ├── playwright.html.md
    │   │   │   ├── properties-cheatsheet.html.eex
    │   │   │   ├── refactoring-accessibility.html.md
    │   │   │   ├── roles.html.md
    │   │   │   ├── stripe-nav.png
    │   │   │   ├── twitter-profile-vertical-banner.png
    │   │   │   └── widgets-cheatsheet.html.eex
    │   │   ├── cheatsheets
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── astro.html.md
    │   │   │   ├── cloud-limits.html.md
    │   │   │   ├── custom-elements.md
    │   │   │   ├── error-messages.html.md
    │   │   │   ├── github-change-org-name-to-blank.png
    │   │   │   ├── github-org-name-unavailable.png
    │   │   │   ├── index.html.eex
    │   │   │   ├── intro.html.heex
    │   │   │   ├── rxjs.html.md
    │   │   │   └── vscode-marketplace-offline.png
    │   │   ├── color
    │   │   │   └── index.html.eex
    │   │   ├── composable_systems
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── desirable-properties.html.md
    │   │   │   ├── index.html.eex
    │   │   │   ├── intro.html.md
    │   │   │   └── opinionated-vs-flexible.html.md
    │   │   ├── concepts
    │   │   │   └── index.html.eex
    │   │   ├── events
    │   │   │   └── events-design-system.html.md
    │   │   ├── fake_search
    │   │   │   └── index.html.eex
    │   │   ├── graphics
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── index.html.eex
    │   │   │   ├── postage-stamp.html.md
    │   │   │   └── postage_stamp_live.ex
    │   │   ├── integrations
    │   │   │   └── convertkit_form.html.eex
    │   │   ├── landing
    │   │   │   ├── index.html copy.eex
    │   │   │   └── index.html.heex
    │   │   ├── layout
    │   │   │   ├── _banner.html.heex
    │   │   │   ├── _contentinfo.html.eex
    │   │   │   ├── app.html.heex
    │   │   │   ├── live.html.heex
    │   │   │   └── root.html.heex
    │   │   ├── links
    │   │   │   └── index.html.eex
    │   │   ├── react_editor
    │   │   │   └── index.html.eex
    │   │   ├── react_typescript
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _headline.html.heex
    │   │   │   ├── _nav.html.heex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── editor-prolog.html.eex
    │   │   │   ├── editor.html.eex
    │   │   │   ├── event-handlers.html.md
    │   │   │   ├── form-reducers.html.md
    │   │   │   ├── forms.html.md
    │   │   │   ├── goodbye-use-effect.html.md
    │   │   │   ├── hooks-concurrent-world.html.md
    │   │   │   ├── index.html.eex
    │   │   │   ├── lifecycle.html.md
    │   │   │   ├── list-of-roles.png
    │   │   │   ├── list-of-roles.png.png
    │   │   │   ├── logical-clocks.html.md
    │   │   │   ├── reducer-patterns.html.md
    │   │   │   ├── state-levels.html.md
    │   │   │   ├── testing.html.md
    │   │   │   ├── tips.html.md
    │   │   │   └── zero-hook-dependencies.html.md
    │   │   ├── robust_javascript_interactivity
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.heex
    │   │   │   ├── idempotent-javascript-operations.html.md
    │   │   │   ├── index.html.eex
    │   │   │   └── intro.html.md
    │   │   ├── swift_ui
    │   │   │   └── index.html.eex
    │   │   ├── text
    │   │   │   ├── edit.html.heex
    │   │   │   ├── import_form.html.eex
    │   │   │   ├── index.html.eex
    │   │   │   ├── new.html.eex
    │   │   │   └── show.html.eex
    │   │   └── web_standards
    │   │   │   ├── _header.html.eex
    │   │   │   ├── _nav.html.eex
    │   │   │   ├── _top.html.eex
    │   │   │   ├── html.html.md
    │   │   │   ├── http-caching.html.md
    │   │   │   ├── http-headers.html.md
    │   │   │   ├── http_caching_live.ex
    │   │   │   ├── index.html.eex
    │   │   │   ├── intro.html.md
    │   │   │   ├── javascript-collections.html.md
    │   │   │   ├── media-queries.html.md
    │   │   │   ├── promise.html.md
    │   │   │   ├── robots-txt.html.md
    │   │   │   ├── url.html.md
    │   │   │   └── url_form_live.ex
    │   └── views
    │   │   ├── asset_helpers.ex
    │   │   ├── collected_view.ex
    │   │   ├── color_view.ex
    │   │   ├── composable_systems_view.ex
    │   │   ├── concepts_view.ex
    │   │   ├── custom_element_helpers.ex
    │   │   ├── error_view.ex
    │   │   ├── fake_search_view.ex
    │   │   ├── formatting_helpers.ex
    │   │   ├── integrations_view.ex
    │   │   ├── landing_view.ex
    │   │   ├── layout_view.ex
    │   │   ├── link_helpers.ex
    │   │   ├── links_view.ex
    │   │   ├── markdown_helpers.ex
    │   │   ├── primitive_helpers.ex
    │   │   ├── snippets.ex
    │   │   ├── styling_helpers.ex
    │   │   ├── swift_ui_view.ex
    │   │   ├── text_view.ex
    │   │   ├── theme_view.ex
    │   │   └── topics_view.ex
    ├── mix
    │   └── tasks
    │   │   └── template_assets.ex
    └── orb-demo-ideas.md
├── mix.exs
├── mix.lock
├── native
    └── molten
    │   ├── .cargo
    │       └── config
    │   ├── .gitignore
    │   ├── Cargo.lock
    │   ├── Cargo.toml
    │   ├── README.md
    │   └── src
    │       └── lib.rs
├── phoenix_static_buildpack.config
├── priv
    └── gettext
    │   ├── en
    │       └── LC_MESSAGES
    │       │   └── errors.po
    │   └── errors.pot
├── samples
    └── snippets.exs
└── test
    ├── components_guide
        ├── fetch_test.exs
        ├── git
        │   └── pkt_line_test.exs
        ├── research
        │   └── sources
        │   │   └── typescript_test.exs
        ├── rustler
        │   └── molten_test.exs
        └── wasm
        │   ├── examples
        │       ├── color_picker_test.exs
        │       ├── examples_test.exs
        │       ├── format_test.exs
        │       ├── html_test.exs
        │       ├── http_headers_test.exs
        │       ├── http_server_test.exs
        │       ├── lemire
        │       │   └── parse_u8_test.exs
        │       ├── magic_numbers_test.exs
        │       ├── memory_test.exs
        │       ├── numeric_test.exs
        │       ├── parser_test.exs
        │       ├── podcast_feed_test.exs
        │       ├── podcast_feed_xml.wasm
        │       ├── podcast_feed_xml.wat
        │       ├── podcast_feed_xml_OPT.wasm
        │       ├── podcast_feed_xml_OPT.wat
        │       ├── sitemap_form_test.exs
        │       ├── sqlite_test.exs
        │       ├── state_test.exs
        │       ├── svg_test.exs
        │       ├── url_encode.wasm
        │       ├── url_encode.wat
        │       ├── url_encode_OPT.wasm
        │       ├── url_encode_OPT.wat
        │       └── url_encoded_test.exs
        │   └── i32
        │       └── string_test.exs
    ├── components_guide_web
        ├── components
        │   └── calendar_component_test.exs
        ├── controllers
        │   ├── page_controller_test.exs
        │   └── text_controller_test.exs
        └── views
        │   ├── error_view_test.exs
        │   ├── layout_view_test.exs
        │   ├── page_view_test.exs
        │   └── research_html_test.exs
    ├── support
        ├── channel_case.ex
        ├── component_case.ex
        └── conn_case.ex
    └── test_helper.exs


/.editorconfig:
--------------------------------------------------------------------------------
 1 | [*]
 2 | charset = utf-8
 3 | indent_style = space
 4 | indent_size = 2
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | 
 8 | [*.rs]
 9 | indent_size = 4
10 | 


--------------------------------------------------------------------------------
/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 |   import_deps: [:ecto, :phoenix],
3 |   subdirectories: ["priv/*/migrations"],
4 |   plugins: [Phoenix.LiveView.HTMLFormatter],
5 |   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
6 | ]
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # The directory Mix will write compiled artifacts to.
 2 | /_build/
 3 | 
 4 | # If you run "mix test --cover", coverage assets end up here.
 5 | /cover/
 6 | 
 7 | # The directory Mix downloads your dependencies sources to.
 8 | /deps/
 9 | 
10 | # Where 3rd-party dependencies like ExDoc output generated docs.
11 | /doc/
12 | 
13 | # Ignore .fetch files in case you like to edit your project deps locally.
14 | /.fetch
15 | 
16 | # If the VM crashes, it generates a dump, let's ignore it too.
17 | erl_crash.dump
18 | 
19 | # Also ignore archive artifacts (built via "mix archive.build").
20 | *.ez
21 | 
22 | # Ignore package tarball (built via "mix hex.build").
23 | components_guide-*.tar
24 | 
25 | /assets/node_modules/
26 | 
27 | # Since we are building assets from web/static,
28 | # we ignore priv/static. You may want to comment
29 | # this depending on your deployment strategy.
30 | /priv/static/
31 | 
32 | # Rustler
33 | priv/native/
34 | 
35 | # If NPM crashes, it generates a log, let's ignore it too.
36 | npm-debug.log
37 | 
38 | .elixir_ls/
39 | 
40 | .DS_Store
41 | .vscode/*.log
42 | .envrc
43 | dump.rdb
44 | 


--------------------------------------------------------------------------------
/.iex.exs:
--------------------------------------------------------------------------------
 1 | defmodule App do
 2 |   def restart do
 3 |     Application.stop(:components_guide)
 4 |     Application.stop(:components_guide_web)
 5 |     recompile()
 6 |     Application.ensure_all_started(:components_guide)
 7 |     Application.ensure_all_started(:components_guide_web)
 8 |   end
 9 | end
10 | 


--------------------------------------------------------------------------------
/.nova/Configuration.json:
--------------------------------------------------------------------------------
1 | {
2 |   "index.use_scm_ignored_files" : true
3 | }
4 | 


--------------------------------------------------------------------------------
/.nova/Tasks/Dev.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "actions" : {
 3 |     "run" : {
 4 |       "enabled" : true,
 5 |       "script" : "source .envrc\nmake dev"
 6 |     }
 7 |   },
 8 |   "openLogOnRun" : "start"
 9 | }
10 | 


--------------------------------------------------------------------------------
/.nova/Tasks/Test.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "actions" : {
 3 |     "build" : {
 4 |       "enabled" : true,
 5 |       "script" : "source .envrc\nmix format\nmake test\nif [[ $? -eq 0 ]]; then\n\tsay \"Green\"\nelse\n\tsay \"Red\"\nfi"
 6 |     }
 7 |   },
 8 |   "openLogOnRun" : "start"
 9 | }
10 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs 20.10.0
2 | erlang 26.2.1
3 | elixir 1.16.1-otp-26
4 | python 3.12.1
5 | rust 1.74.1
6 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "workbench.colorCustomizations": {
 3 |     "activityBar.background": "#ca82d2",
 4 |     "activityBar.activeBackground": "#ca82d2",
 5 |     "activityBar.activeBorder": "#e6e1b9",
 6 |     "activityBar.foreground": "#15202b",
 7 |     "activityBar.inactiveForeground": "#15202b99",
 8 |     "activityBarBadge.background": "#e6e1b9",
 9 |     "activityBarBadge.foreground": "#15202b",
10 |     "titleBar.activeBackground": "#ba5cc5",
11 |     "titleBar.inactiveBackground": "#ba5cc599",
12 |     "titleBar.activeForeground": "#15202b",
13 |     "titleBar.inactiveForeground": "#15202b99",
14 |     "statusBar.background": "#ba5cc5",
15 |     "statusBarItem.hoverBackground": "#a43eb0",
16 |     "statusBar.foreground": "#15202b"
17 |   },
18 |   "peacock.color": "#ba5cc5"
19 | }


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | default: install
 2 | 
 3 | install: install_mix install_assets
 4 | 
 5 | install_mix:
 6 | 	mix deps.get
 7 | 
 8 | install_assets:
 9 | 	cd assets/ && npm ci
10 | 
11 | test_watch:
12 | 	watchexec -e ex,exs mix test
13 | 
14 | dev:
15 | 	RUST_BACKTRACE=1 iex -S mix phx.server
16 | 
17 | .PHONY: test
18 | test:
19 | 	RUST_BACKTRACE=1 mix test --max-failures 1
20 | 
21 | .PHONY: e2e
22 | e2e:
23 | 	cd e2e && npx playwright test
24 | 
25 | production_build:
26 | 	MIX_ENV=prod mix production_build
27 | 
28 | cargo_build:
29 | 	cd native/componentsguide_rustler_math/ && cargo build --release
30 | 
31 | clean:
32 | 	rm -rf ./_build
33 | 	cd native/componentsguide_rustler_math/ && cargo clean
34 | 
35 | production:
36 | 	git pull --rebase
37 | 	git push origin master
38 | 	git push gigalixir master
39 | 
40 | deploy: production
41 | 
42 | status:
43 | 	gigalixir ps
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [components.guide](https://components.guide/)
 2 | 
 3 | [![CC BY-SA 4.0][cc-by-sa-shield]][cc-by-sa]
 4 | 
 5 | ```sh
 6 | mix deps.get
 7 | cd assets && npm i
 8 | 
 9 | make dev
10 | make test
11 | make e2e
12 | ```
13 | 
14 | Now you can visit [`localhost:4333`](http://localhost:4333) from your browser.
15 | 
16 | ## Dependencies
17 | 
18 | <https://gustavoaraujo.dev/elixir/2022/12/07/til-elixir-how-to-unlock-dependencies.html>
19 | 
20 | ```console
21 | mix deps.clean --unused --unlock
22 | ```
23 | 
24 | ----
25 | 
26 | This work is licensed under a
27 | [Creative Commons Attribution-ShareAlike 4.0 International License][cc-by-sa].
28 | 
29 | [![CC BY-SA 4.0][cc-by-sa-image]][cc-by-sa]
30 | 
31 | [cc-by-sa]: http://creativecommons.org/licenses/by-sa/4.0/
32 | [cc-by-sa-image]: https://licensebuttons.net/l/by-sa/4.0/88x31.png
33 | [cc-by-sa-shield]: https://img.shields.io/badge/License-CC%20BY--SA%204.0-lightgrey.svg
34 | 
35 | Guides to creating modern UIs with components.
36 | 
37 | Covers React, TypeScript, Accessibility, HTML, CSS, JavaScript, WebAssembly.
38 | 


--------------------------------------------------------------------------------
/assets/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": [
3 |         "@babel/preset-env"
4 |     ]
5 | }
6 | 


--------------------------------------------------------------------------------
/assets/css/tela.css:
--------------------------------------------------------------------------------
  1 | [visually-hidden], [data-affordance] {
  2 |   position: absolute;
  3 |   overflow: hidden;
  4 |   clip: rect(0 0 0 0);
  5 |   width: 1px;
  6 |   height: 1px;
  7 |   margin: -1px;
  8 |   padding: 0;
  9 |   border: 0;
 10 | }
 11 | 
 12 | /* Font */
 13 | 
 14 | [font-size="+7"] {
 15 |   font-size: var(--size-7);
 16 | }
 17 | [font-size="+6"] {
 18 |   font-size: var(--size-6);
 19 | }
 20 | [font-size="+5"] {
 21 |   font-size: var(--size-5);
 22 | }
 23 | [font-size="+4"] {
 24 |   font-size: var(--size-4);
 25 | }
 26 | [font-size="+3"] {
 27 |   font-size: var(--size-3);
 28 | }
 29 | [font-size="+2"] {
 30 |   font-size: var(--size-2);
 31 | }
 32 | [font-size="+1"] {
 33 |   font-size: var(--size-1);
 34 | }
 35 | [font-size="0"] {
 36 |   font-size: var(--size-0);
 37 | }
 38 | [font-size="-1"] {
 39 |   font-size: var(--size--1);
 40 | }
 41 | [font-size="-2"] {
 42 |   font-size: var(--size--2);
 43 | }
 44 | 
 45 | /* Sizing */
 46 | 
 47 | [w-max="md"] {
 48 |   max-width: 768px;
 49 | }
 50 | 
 51 | [w-full] {
 52 |   width: 100%;
 53 | }
 54 | 
 55 | /* Flex row */
 56 | 
 57 | .X,
 58 | [x-x] {
 59 |   display: flex;
 60 |   flex-direction: row;
 61 |   justify-content: center;
 62 |   align-items: center;
 63 | }
 64 | 
 65 | [x-space="between"] {
 66 |   justify-content: space-between;
 67 | }
 68 | 
 69 | [x-space] > * + * {
 70 |   margin-left: 1rem;
 71 | }
 72 | [x-space="1/2"] > * + * {
 73 |   margin-left: 0.5rem;
 74 | }
 75 | [x-space="1/4"] > * + * {
 76 |   margin-left: 0.25rem;
 77 | }
 78 | [x-space="auto"] > * {
 79 |   margin-left: auto;
 80 |   margin-right: auto;
 81 | }
 82 | 
 83 | /* Flex column */
 84 | 
 85 | .Y,
 86 | [y-y] {
 87 |   display: flex;
 88 |   flex-direction: column;
 89 |   justify-content: center;
 90 |   align-items: center;
 91 | }
 92 | 
 93 | [y-stretch] {
 94 |   align-items: stretch;
 95 | }
 96 | 
 97 | [y-space] > * + * {
 98 |   margin-top: 1rem;
 99 | }
100 | 
101 | /* Padding */
102 | 
103 | [p-t] {
104 |   padding-top: 1rem;
105 | }
106 | [p-b] {
107 |   padding-bottom: 1rem;
108 | }
109 | [p-l] {
110 |   padding-left: 1rem;
111 | }
112 | [p-r] {
113 |   padding-right: 1rem;
114 | }
115 | 
116 | /* MEDIUM BREAKPOINT */
117 | 
118 | /* Flex column (medium) */
119 | 
120 | /* 48em ~= 768px */
121 | @media (min-width: 48em) {
122 |   .X\>\=48em,
123 |   [x-x~="md"] {
124 |     display: flex;
125 |     flex-direction: row;
126 |     justify-content: center;
127 |     align-items: center;
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/assets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <link rel="icon" href="/favicon.ico" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>V-Dashboard</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 |   <script type="module" src="/js/app.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/assets/js/customElements/enhanced-navigation.js:
--------------------------------------------------------------------------------
 1 | customElements.define('enhanced-navigation', class extends HTMLElement {
 2 |   constructor() {
 3 |     super();
 4 | 
 5 |     const document = this.ownerDocument;
 6 |     const features = this.dataset;
 7 | 
 8 |     function El(base, props, ...children) {
 9 |       const el = typeof base === 'string' ? document.createElement(base) : base.cloneNode(false);
10 |       Object.assign(el, props);
11 |       el.append(...children);
12 |       return el;
13 |     }
14 | 
15 |     if ('addArticleNavigation' in features) {
16 |       const aside = this.querySelector('aside');
17 |       aside.hidden = false;
18 | 
19 |       const navItemsSlot = this.querySelector('slot[name=article-navigation-items]');
20 |       const navItemsTemplates = navItemsSlot.querySelector('template').content;
21 |       const linkTemplate = navItemsTemplates.querySelector('a');
22 |       const ulTemplate = navItemsTemplates.querySelector('ul');
23 |       const liTemplate = navItemsTemplates.querySelector('li');
24 | 
25 |       const articles = this.querySelectorAll('article'); 
26 |       // const article = this.querySelector('article');
27 |       for (const article of articles) {
28 |         const headings = article.querySelectorAll('h2, table caption');
29 |         const items = Array.from(headings, (headingEl, index) => {
30 |           if (!headingEl.id) {
31 |             headingEl.id = article.id + "-" + index;
32 |           }
33 |           return El(liTemplate, {}, El(linkTemplate, { href: '#' + headingEl.id }, headingEl.innerText));
34 |         });
35 |   
36 |         navItemsSlot.append(El(ulTemplate, {}, ...items));
37 |       }
38 |     }
39 | 
40 |     if ('addAriaCurrentPage' in features) {
41 |       const currentPath = document.location.pathname;
42 |       for (const link of this.querySelectorAll(`a[href="${currentPath}"`)) {
43 |         link.ariaCurrent = "page";
44 |       }
45 |     }
46 |   }
47 | });
48 | 


--------------------------------------------------------------------------------
/assets/js/customElements/filter-items.js:
--------------------------------------------------------------------------------
 1 | function cssForFilter(id, filter) {
 2 |   if (filter === "") {
 3 |     return ``;
 4 |   }
 5 | 
 6 |   return `
 7 | #{${id}} [data-filterable]:not([data-filterable*=${JSON.stringify(filter)}]) { display: none; }
 8 | `;
 9 | }
10 | 
11 | customElements.define('filter-items', class extends HTMLElement {
12 |   get inputEl() {
13 |     return this.querySelector("input[type=search]");
14 |   }
15 | 
16 |   connectedCallback() {
17 |     const aborter = new AbortController();
18 |     const signal = aborter.signal;
19 |     const id = this.id || `filter-items-${crypto.randomUUID()}`;
20 | 
21 |     const style = this.ownerDocument.createElement("style");
22 | 
23 |     function update(inputEl) {
24 |       const filter = inputEl.value.trim();
25 |       style.innerText = cssForFilter(id, filter);
26 |       inputEl.insertAdjacentElement("afterend", style);
27 |     }
28 | 
29 |     this.addEventListener("input", ({ target: inputEl }) => {
30 |       if (inputEl.matches("input[type=search]")) {
31 |         update(inputEl)
32 |       }
33 |     }, { signal });
34 | 
35 |     requestAnimationFrame(() => {
36 |       update(this.inputEl);
37 |     });
38 | 
39 |     // window.addEventListener("phx:page-loading-stop", () => {
40 |     //   const { inputEl } = this;
41 |     //   const filter = inputEl.value.trim();
42 |     //   style.innerText = cssForFilter(id, filter);
43 |     //   inputEl.insertAdjacentElement("afterend", style);
44 |     // }, { signal });
45 | 
46 |     this.id = id;
47 |     this.aborter = aborter;
48 |   }
49 | 
50 |   disconnectedCallback() {
51 |     if (this.aborter) {
52 |       this.aborter.abort();
53 |       this.aborter = undefined;
54 |     }
55 |   }
56 | });
57 | 


--------------------------------------------------------------------------------
/assets/js/customElements/phx-current-page.js:
--------------------------------------------------------------------------------
 1 | customElements.define('phx-current-page', class extends HTMLElement {
 2 |   linksWithHref(href) {
 3 |     return Array.from(this.querySelectorAll("a[href]"))
 4 |       .filter(a => a.href === href);
 5 |   }
 6 |   linksWithCurrentPage() {
 7 |     return Array.from(this.querySelectorAll("a[aria-current=page]"));
 8 |   }
 9 | 
10 |   connectedCallback() {
11 |     const aborter = new AbortController();
12 |     const signal = aborter.signal;
13 | 
14 |     const update = () => {
15 |       for (const el of this.linksWithCurrentPage()) {
16 |         el.removeAttribute("aria-current");
17 |       }
18 |       for (const el of this.linksWithHref(window.location.href)) {
19 |         el.setAttribute("aria-current", "page");
20 |       }
21 |     }
22 | 
23 |     requestAnimationFrame(update);
24 |     window.addEventListener("phx:page-loading-stop", update, { signal });
25 | 
26 |     this.disconnectedCallback = () => {
27 |       aborter.abort();
28 |     }
29 |   }
30 | 
31 |   // disconnectedCallback() {
32 |   //   if (this.aborter) {
33 |   //     this.aborter.abort();
34 |   //     this.aborter = undefined;
35 |   //   }
36 |   // }
37 | });
38 | 


--------------------------------------------------------------------------------
/assets/js/socket.js:
--------------------------------------------------------------------------------
 1 | // NOTE: The contents of this file will only be executed if
 2 | // you uncomment its entry in "assets/js/app.js".
 3 | 
 4 | // To use Phoenix channels, the first step is to import Socket,
 5 | // and connect at the socket path in "lib/web/endpoint.ex".
 6 | //
 7 | // Pass the token on params as below. Or remove it
 8 | // from the params if you are not using authentication.
 9 | import {Socket} from "phoenix"
10 | 
11 | let socket = new Socket("/socket", {params: {token: window.userToken}})
12 | 
13 | // When you connect, you'll often need to authenticate the client.
14 | // For example, imagine you have an authentication plug, `MyAuth`,
15 | // which authenticates the session and assigns a `:current_user`.
16 | // If the current user exists you can assign the user's token in
17 | // the connection for use in the layout.
18 | //
19 | // In your "lib/web/router.ex":
20 | //
21 | //     pipeline :browser do
22 | //       ...
23 | //       plug MyAuth
24 | //       plug :put_user_token
25 | //     end
26 | //
27 | //     defp put_user_token(conn, _) do
28 | //       if current_user = conn.assigns[:current_user] do
29 | //         token = Phoenix.Token.sign(conn, "user socket", current_user.id)
30 | //         assign(conn, :user_token, token)
31 | //       else
32 | //         conn
33 | //       end
34 | //     end
35 | //
36 | // Now you need to pass this token to JavaScript. You can do so
37 | // inside a script tag in "lib/web/templates/layout/app.html.eex":
38 | //
39 | //     <script>window.userToken = "<%= assigns[:user_token] %>";</script>
40 | //
41 | // You will need to verify the user token in the "connect/3" function
42 | // in "lib/web/channels/user_socket.ex":
43 | //
44 | //     def connect(%{"token" => token}, socket, _connect_info) do
45 | //       # max_age: 1209600 is equivalent to two weeks in seconds
46 | //       case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
47 | //         {:ok, user_id} ->
48 | //           {:ok, assign(socket, :user, user_id)}
49 | //         {:error, reason} ->
50 | //           :error
51 | //       end
52 | //     end
53 | //
54 | // Finally, connect to the socket:
55 | socket.connect()
56 | 
57 | // Now that you are connected, you can join channels with a topic:
58 | let channel = socket.channel("topic:subtopic", {})
59 | channel.join()
60 |   .receive("ok", resp => { console.log("Joined successfully", resp) })
61 |   .receive("error", resp => { console.log("Unable to join", resp) })
62 | 
63 | export default socket
64 | 


--------------------------------------------------------------------------------
/assets/js/wasm/memoryIO.js:
--------------------------------------------------------------------------------
 1 | const utf8Encoder = new TextEncoder();
 2 | const utf8Decoder = new TextDecoder();
 3 | 
 4 | export class MemoryIO {
 5 |   constructor(exports) {
 6 |     this.memoryBytes = new Uint8Array(exports.memory.buffer);
 7 |     this.alloc = exports.alloc;
 8 |   }
 9 |   
10 |   readString(ptr) {
11 |     const { memoryBytes } = this;
12 |     
13 |     // Search for null-terminating byte.
14 |     const endPtr = memoryBytes.indexOf(0, ptr);
15 |     // Get subsection of memory between start and end, and decode it as UTF-8.
16 |     return utf8Decoder.decode(memoryBytes.subarray(ptr, endPtr));
17 |   }
18 |   
19 |   writeStringAt(stringValue, memoryOffset) {
20 |     const { memoryBytes } = this;
21 |     
22 |     stringValue = stringValue.toString();
23 |     const bytes = utf8Encoder.encode(stringValue);
24 |     utf8Encoder.encodeInto(stringValue, memoryBytes.subarray(memoryOffset));
25 |     memoryBytes[memoryOffset + bytes.length] = 0x0;
26 |     return bytes.byteLength;
27 |   }
28 | 
29 |   writeString(stringValue) {
30 |     const { memoryBytes, alloc } = this;
31 |     
32 |     stringValue = stringValue.toString();
33 |     const bytes = utf8Encoder.encode(stringValue);
34 |     const strPtr = alloc(bytes.length + 1);
35 |     utf8Encoder.encodeInto(stringValue, memoryBytes.subarray(strPtr));
36 |     memoryBytes[strPtr + bytes.length] = 0x0;
37 |     return Object.freeze([strPtr, bytes.byteLength]);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/assets/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "repository": {},
 3 |   "license": "MIT",
 4 |   "scripts": {
 5 |     "deploy": "webpack --mode production",
 6 |     "watch": "NODE_ENV=development webpack --mode development --watch"
 7 |   },
 8 |   "dependencies": {
 9 |     "@testing-library/dom": "^7.31.2",
10 |     "phoenix": "file:../deps/phoenix",
11 |     "phoenix_html": "file:../deps/phoenix_html",
12 |     "phoenix_live_view": "file:../deps/phoenix_live_view"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.9.6",
16 |     "@babel/preset-env": "^7.9.6",
17 |     "@tailwindcss/forms": "^0.2.1",
18 |     "autoprefixer": "^10.4.7",
19 |     "babel-loader": "^8.2.2",
20 |     "copy-webpack-plugin": "^8.0.0",
21 |     "css-loader": "^5.1.3",
22 |     "install": "^0.13.0",
23 |     "mini-css-extract-plugin": "^1.3.9",
24 |     "npm": "^6.14.5",
25 |     "optimize-css-assets-webpack-plugin": "^5.0.4",
26 |     "postcss": "^8.2.8",
27 |     "postcss-import": "^14.0.0",
28 |     "postcss-loader": "^5.2.0",
29 |     "tailwindcss": "^2.1.1",
30 |     "uglifyjs-webpack-plugin": "^2.2.0",
31 |     "vue-loader": "^15.9.2",
32 |     "vue-template-compiler": "^2.6.11",
33 |     "webpack": "^5.26.3",
34 |     "webpack-cli": "^4.5.0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/assets/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     //'postcss-preset-env',
4 |     //'postcss-import',
5 |     'tailwindcss',
6 |     'autoprefixer',
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/assets/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/assets/static/favicon.ico


--------------------------------------------------------------------------------
/assets/static/images/phoenix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/assets/static/images/phoenix.png


--------------------------------------------------------------------------------
/assets/static/images/swiftui-96x96_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/assets/static/images/swiftui-96x96_2x.png


--------------------------------------------------------------------------------
/assets/static/robots.txt:
--------------------------------------------------------------------------------
1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
2 | #
3 | # To ban all spiders from the entire site uncomment the next two lines:
4 | # User-agent: *
5 | # Disallow: /
6 | 


--------------------------------------------------------------------------------
/assets/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | // See the Tailwind configuration guide for advanced usage
 2 | // https://tailwindcss.com/docs/configuration
 3 | 
 4 | module.exports = {
 5 |   content: [
 6 |     './assets/js/**/*.js',
 7 |     './lib/components_guide_web.ex',
 8 |     './lib/components_guide_web/**/*.{ex,heex,eex,md}',
 9 |     './lib/components_guide/wasm/**/*.{ex,heex,eex,md}',
10 |   ],
11 |   plugins: [
12 |     require('@tailwindcss/forms'),
13 |     require('@tailwindcss/typography')
14 |   ],
15 |   theme: {
16 |     extend: {
17 |       colors: {
18 |         current: 'currentColor',
19 |       }
20 |     },
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/assets/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const glob = require('glob');
 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 4 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 5 | 
 6 | module.exports = (env, options) => ({
 7 |   optimization: {
 8 |     minimizer: [
 9 |       new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false })
10 |     ]
11 |   },
12 |   entry: {
13 |       './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
14 |   },
15 |   output: {
16 |     filename: 'app.js',
17 |     path: path.resolve(__dirname, '../priv/static/assets')
18 |   },
19 |   module: {
20 |     rules: [
21 |       {
22 |         test: /\.js$/,
23 |         exclude: /node_modules/,
24 |         use: {
25 |           loader: 'babel-loader'
26 |         }
27 |       }
28 |     ]
29 |   },
30 |   plugins: [
31 |     new CopyWebpackPlugin({ patterns: [{ from: 'static/', to: '../' }] })
32 |   ]
33 | });
34 | 


--------------------------------------------------------------------------------
/checksum-Elixir.ComponentsGuide.Rustler.Math.exs:
--------------------------------------------------------------------------------
1 | %{
2 |   "libcomponentsguide_rustler_math-v0.1.2-nif-2.16-aarch64-apple-darwin.so.tar.gz" =>
3 |     "sha256:0e30ecf8c0614f9c0fffc553683ecef147caf0737e57304d2a37532f3cf9657d"
4 | }
5 | 


--------------------------------------------------------------------------------
/compile:
--------------------------------------------------------------------------------
1 | cd $phoenix_dir
2 | npm --prefix assets ci
3 | mix "assets.deploy"
4 | 


--------------------------------------------------------------------------------
/config/config.exs:
--------------------------------------------------------------------------------
 1 | # This file is responsible for configuring your application
 2 | # and its dependencies with the aid of the Config module.
 3 | #
 4 | # This configuration file is loaded before any dependency and
 5 | # is restricted to this project.
 6 | 
 7 | # General application configuration
 8 | import Config
 9 | 
10 | # Configures the endpoint
11 | config :components_guide, ComponentsGuideWeb.Endpoint,
12 |   url: [host: "localhost"],
13 |   secret_key_base: "GIQzLogQXRdH7r9im+a6kEsZIbX6FmAvCt8bj+BYSkBahfkl6u9oRHSPs7Go81at",
14 |   render_errors: [view: ComponentsGuideWeb.ErrorView, accepts: ~w(html json)],
15 |   pubsub_server: ComponentsGuide.PubSub,
16 |   live_view: [signing_salt: "JNYbgmOL"]
17 | 
18 | # Configures Elixir's Logger
19 | config :logger, :console,
20 |   format: "$time $metadata[$level] $message\n",
21 |   metadata: [:request_id]
22 | 
23 | # Use Jason for JSON parsing in Phoenix
24 | config :phoenix, :json_library, Jason
25 | 
26 | config :floki, :html_parser, Floki.HTMLParser.Html5ever
27 | 
28 | # Allow rendering markdown templates
29 | config :phoenix, :template_engines,
30 |   md: ComponentsGuideWeb.TemplateEngines.MarkdownEngine,
31 |   png: ComponentsGuideWeb.TemplateEngines.ImageEngine,
32 |   collected: ComponentsGuideWeb.TemplateEngines.ImageEngine
33 | 
34 | # Configure esbuild (the version is required)
35 | config :esbuild,
36 |   version: "0.17.11",
37 |   default: [
38 |     args:
39 |       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
40 |     cd: Path.expand("../assets", __DIR__),
41 |     env: %{
42 |       "NODE_PATH" =>
43 |         [
44 |           Path.expand("../deps", __DIR__),
45 |           Path.expand("../assets", __DIR__)
46 |         ]
47 |         |> Enum.join(":")
48 |     }
49 |   ]
50 | 
51 | config :tailwind,
52 |   version: "3.3.1",
53 |   default: [
54 |     args: ~w(
55 |     --config=assets/tailwind.config.js
56 |     --input=assets/css/app.css
57 |     --output=priv/static/assets/app.css
58 |   ),
59 |     cd: Path.expand("..", __DIR__)
60 |   ]
61 | 
62 | # Import environment specific config. This must remain at the bottom
63 | # of this file so it overrides the configuration defined above.
64 | import_config "#{config_env()}.exs"
65 | 


--------------------------------------------------------------------------------
/config/dev.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | port = String.to_integer(System.get_env("PORT") || "4333")
 4 | 
 5 | # For development, we disable any cache and enable
 6 | # debugging and code reloading.
 7 | #
 8 | # The watchers configuration can be used to run external
 9 | # watchers to your application. For example, we use it
10 | # with webpack to recompile .js and .css sources.
11 | config :components_guide, ComponentsGuideWeb.Endpoint,
12 |   http: [port: port],
13 |   check_origin: false,
14 |   code_reloader: true,
15 |   debug_errors: true,
16 |   # reloadable_compilers: [:phoenix, :gettext],
17 |   secret_key_base: "98yN/0NbJtdHMD0KaWg6ISyxFUpTDT/2nus2c96f8kMF76kqY7dqIWKkOL2Uk6SQ",
18 |   watchers: [
19 |     # npm: [
20 |     #   "run",
21 |     #   "watch",
22 |     #   cd: Path.expand("../assets", __DIR__)
23 |     # ],
24 |     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
25 |     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
26 |     redis: {System, :cmd, ["redis-server", ~w(--port 4337)]}
27 |   ]
28 | 
29 | # ## SSL Support
30 | #
31 | # In order to use HTTPS in development, a self-signed
32 | # certificate can be generated by running the following
33 | # Mix task:
34 | #
35 | #     mix phx.gen.cert
36 | #
37 | # Note that this task requires Erlang/OTP 20 or later.
38 | # Run `mix help phx.gen.cert` for more information.
39 | #
40 | # The `http:` config above can be replaced with:
41 | #
42 | #     https: [
43 | #       port: 4001,
44 | #       cipher_suite: :strong,
45 | #       keyfile: "priv/cert/selfsigned_key.pem",
46 | #       certfile: "priv/cert/selfsigned.pem"
47 | #     ],
48 | #
49 | # If desired, both `http:` and `https:` keys can be
50 | # configured to run both http and https servers on
51 | # different ports.
52 | 
53 | # Watch static and templates for browser reloading.
54 | config :components_guide, ComponentsGuideWeb.Endpoint,
55 |   live_reload: [
56 |     patterns: [
57 |       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
58 |       ~r"priv/gettext/.*(po)$",
59 |       ~r"lib/components_guide_web/{live,views}/.*(ex)$",
60 |       ~r"lib/components_guide_web/templates/.*(heex|eex|md)$"
61 |     ]
62 |   ]
63 | 
64 | # Do not include metadata nor timestamps in development logs
65 | config :logger, :console, format: "[$level] $message\n"
66 | 
67 | # Initialize plugs at runtime for faster development compilation
68 | config :phoenix, :plug_init_mode, :runtime
69 | 
70 | # Set a higher stacktrace during development. Avoid configuring such
71 | # in production as building large stacktraces may be expensive.
72 | config :phoenix, :stacktrace_depth, 20
73 | 


--------------------------------------------------------------------------------
/config/prod.secret.exs:
--------------------------------------------------------------------------------
 1 | # In this file, we load production configuration and
 2 | # secrets from environment variables. You can also
 3 | # hardcode secrets, although such is generally not
 4 | # recommended and you have to remember to add this
 5 | # file to your .gitignore.
 6 | import Config
 7 | 
 8 | secret_key_base =
 9 |   System.get_env("SECRET_KEY_BASE") ||
10 |     raise """
11 |     environment variable SECRET_KEY_BASE is missing.
12 |     You can generate one by calling: mix phx.gen.secret
13 |     """
14 | 
15 | config :components_guide, ComponentsGuideWeb.Endpoint,
16 |   http: [:inet6, port: String.to_integer(System.get_env("PORT") || "4000")],
17 |   secret_key_base: secret_key_base
18 | 


--------------------------------------------------------------------------------
/config/test.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | # We don't run a server during test. If one is required,
 4 | # you can enable the server option below.
 5 | config :components_guide, ComponentsGuideWeb.Endpoint,
 6 |   http: [port: 4002],
 7 |   server: false
 8 | 
 9 | # Print only warnings and errors during test
10 | config :logger, level: :warning
11 | # config :logger, level: :debug
12 | config :logger, truncate: :infinity
13 | 
14 | # Initialize plugs at runtime for faster test compilation
15 | config :phoenix, :plug_init_mode, :runtime
16 | 


--------------------------------------------------------------------------------
/e2e/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | /test-results/
3 | /playwright-report/
4 | /blob-report/
5 | /playwright/.cache/
6 | 


--------------------------------------------------------------------------------
/e2e/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "e2e",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {},
 7 |   "keywords": [],
 8 |   "author": "",
 9 |   "license": "ISC",
10 |   "devDependencies": {
11 |     "@playwright/test": "^1.40.1",
12 |     "@types/node": "^20.10.4"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/e2e/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, devices } from '@playwright/test';
 2 | 
 3 | /**
 4 |  * Read environment variables from file.
 5 |  * https://github.com/motdotla/dotenv
 6 |  */
 7 | // require('dotenv').config();
 8 | 
 9 | /**
10 |  * See https://playwright.dev/docs/test-configuration.
11 |  */
12 | export default defineConfig({
13 |   testDir: './tests',
14 |   /* Run tests in files in parallel */
15 |   fullyParallel: true,
16 |   /* Fail the build on CI if you accidentally left test.only in the source code. */
17 |   forbidOnly: !!process.env.CI,
18 |   /* Retry on CI only */
19 |   retries: process.env.CI ? 2 : 0,
20 |   /* Opt out of parallel tests on CI. */
21 |   workers: process.env.CI ? 1 : undefined,
22 |   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
23 |   reporter: 'html',
24 |   /* Run your local dev server before starting the tests */
25 |   webServer: {
26 |     command: 'cd .. && PORT=4334 mix phx.server',
27 |     url: 'http://127.0.0.1:4334',
28 |     reuseExistingServer: !process.env.CI,
29 |   },
30 |   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
31 |   use: {
32 |     /* Base URL to use in actions like `await page.goto('/')`. */
33 |     baseURL: 'http://127.0.0.1:4334',
34 | 
35 |     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
36 |     trace: 'on-first-retry',
37 |   },
38 | 
39 |   /* Configure projects for major browsers */
40 |   projects: [
41 |     {
42 |       name: 'chromium',
43 |       use: { ...devices['Desktop Chrome'] },
44 |     },
45 | 
46 |     {
47 |       name: 'firefox',
48 |       use: { ...devices['Desktop Firefox'] },
49 |     },
50 | 
51 |     {
52 |       name: 'webkit',
53 |       use: { ...devices['Desktop Safari'] },
54 |     },
55 | 
56 |     /* Test against mobile viewports. */
57 |     {
58 |       name: 'Mobile Chrome',
59 |       use: { ...devices['Pixel 5'] },
60 |     },
61 |     {
62 |       name: 'Mobile Safari',
63 |       use: { ...devices['iPhone 12'] },
64 |     },
65 | 
66 |     /* Test against branded browsers. */
67 |     // {
68 |     //   name: 'Microsoft Edge',
69 |     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
70 |     // },
71 |     // {
72 |     //   name: 'Google Chrome',
73 |     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
74 |     // },
75 |   ],
76 | });
77 | 


--------------------------------------------------------------------------------
/e2e/tests/home.spec.ts:
--------------------------------------------------------------------------------
 1 | import { test, expect } from '@playwright/test';
 2 | 
 3 | test.beforeEach(async ({ page }) => {
 4 |   await page.goto("/");
 5 | });
 6 | 
 7 | 
 8 | test('has title', async ({ page }) => {
 9 |   await expect(page).toHaveTitle("Guides to React, Accessibility, Modern CSS, TypeScript · Components.Guide");
10 | });
11 | 
12 | // test('get started link', async ({ page }) => {
13 | //   // Click the get started link.
14 | //   await page.getByRole('link', { name: 'Get started' }).click();
15 | 
16 | //   // Expects page to have a heading with the name of Installation.
17 | //   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
18 | // });
19 | 


--------------------------------------------------------------------------------
/elixir_buildpack.config:
--------------------------------------------------------------------------------
1 | erlang_version="OTP-24.2.1"
2 | elixir_version=1.13.3
3 | 


--------------------------------------------------------------------------------
/lib/components_guide.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide do
 2 |   @moduledoc """
 3 |   ComponentsGuide keeps the contexts that define your domain
 4 |   and business logic.
 5 | 
 6 |   Contexts are also responsible for managing your data, regardless
 7 |   if it comes from the database, an external API or others.
 8 |   """
 9 | end
10 | 


--------------------------------------------------------------------------------
/lib/components_guide/application.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Application do
 2 |   # See https://hexdocs.pm/elixir/Application.html
 3 |   # for more information on OTP Applications
 4 |   @moduledoc false
 5 | 
 6 |   use Application
 7 | 
 8 |   @impl true
 9 |   def start(_type, _args) do
10 |     redis_config = Application.fetch_env!(:components_guide, :redis)
11 |     redis_url_string = Access.fetch!(redis_config, :url)
12 | 
13 |     children = [
14 |       # Start the Telemetry supervisor
15 |       ComponentsGuideWeb.Telemetry,
16 |       # Start the PubSub system
17 |       {Phoenix.PubSub, name: ComponentsGuide.PubSub},
18 |       # Start the Endpoint (http/https)
19 |       ComponentsGuideWeb.Endpoint,
20 |       # Start a worker by calling: MiniModules.Worker.start_link(arg)
21 |       # {MiniModules.Worker, arg}
22 | 
23 |       # {Cachex, [:content_cache, []]}
24 |       # Supervisor.child_spec({Cachex, {:content_cache, []}}, id: :content_cache)
25 |       %{
26 |         id: :content_cache,
27 |         start: {Cachex, :start_link, [:content_cache, []]}
28 |       },
29 |       %{
30 |         id: ComponentsGuide.Research.Source.cache_name(),
31 |         start: {Cachex, :start_link, [ComponentsGuide.Research.Source.cache_name(), []]}
32 |       },
33 |       %{
34 |         id: ComponentsGuide.Research.Static.Sources.cache_name(),
35 |         start: {Cachex, :start_link, [ComponentsGuide.Research.Static.Sources.cache_name(), []]}
36 |       },
37 |       {Redix, {redis_url_string, [name: :redix_cache]}}
38 |       # ComponentsGuide.Worker
39 |     ]
40 | 
41 |     # See https://hexdocs.pm/elixir/Supervisor.html
42 |     # for other strategies and supported options
43 |     opts = [strategy: :one_for_one, name: ComponentsGuide.Supervisor]
44 |     Supervisor.start_link(children, opts)
45 |   end
46 | 
47 |   # Tell Phoenix to update the endpoint configuration
48 |   # whenever the application is updated.
49 |   @impl true
50 |   def config_change(changed, _new, removed) do
51 |     ComponentsGuideWeb.Endpoint.config_change(changed, removed)
52 |     :ok
53 |   end
54 | end
55 | 


--------------------------------------------------------------------------------
/lib/components_guide/collected_repo.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.CollectedRepo do
 2 |   def has?(_content_id), do: raise("todo")
 3 |   def get!(_content_id), do: raise("todo")
 4 | 
 5 |   def run_isolated!(_content_id), do: raise("todo")
 6 | 
 7 |   def new_instance_definition(_content_id, _imports), do: raise("unimplemented")
 8 |   # Replace with a gen server
 9 |   def start_instance(_instance_definition), do: raise("unimplemented")
10 | end
11 | 


--------------------------------------------------------------------------------
/lib/components_guide/content.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Content do
 2 |   alias ComponentsGuide.Content.Text
 3 |   alias ComponentsGuide.Content.TextImport
 4 |   alias ComponentsGuide.Fetch
 5 | 
 6 |   @cache_name :content_cache
 7 | 
 8 |   def list_content do
 9 |     query = Cachex.Query.create(true, {:key, :value})
10 | 
11 |     Cachex.stream!(@cache_name, query)
12 |     |> Enum.map(fn {id, content} -> %Text{id: id, content: content} end)
13 |   end
14 | 
15 |   def change_text(%Text{} = text) do
16 |     Text.changeset(text)
17 |   end
18 | 
19 |   defp build_text(params) do
20 |     with {:ok, text} <-
21 |            %Text{}
22 |            |> Text.changeset(params)
23 |            |> Ecto.Changeset.apply_action(:insert) do
24 |       {:ok, %Text{text | id: :crypto.hash(:sha256, text.content)}}
25 |     end
26 |   end
27 | 
28 |   def create_text(params) do
29 |     with {:ok, text} <- build_text(params),
30 |          {:ok, _} <- Cachex.put(@cache_name, text.id, text.content) do
31 |       {:ok, text}
32 |     end
33 |   end
34 | 
35 |   defp get_url(url) do
36 |     Fetch.get_following_redirects!(url)
37 |   end
38 | 
39 |   def import_text(params) do
40 |     with changeset <- TextImport.changeset(%TextImport{}, params),
41 |          {:ok, text_import} <- Ecto.Changeset.apply_action(changeset, :insert),
42 |          response <- get_url(text_import.url),
43 |          {:ok, text} <- build_text(%{content: response.body}),
44 |          {:ok, _} <- Cachex.put(@cache_name, text.id, text.content) do
45 |       {:ok, text}
46 |     end
47 |   end
48 | 
49 |   defp decode_id(id_encoded), do: Base.url_decode64(id_encoded)
50 | 
51 |   def get_text!(id_encoded) do
52 |     with {:ok, id} <- decode_id(id_encoded),
53 |          {:ok, content} <- Cachex.get(@cache_name, id) do
54 |       %Text{id: id, content: content}
55 |     else
56 |       _ -> raise Ecto.NoResultsError
57 |     end
58 |   end
59 | 
60 |   def delete_text(id_encoded) do
61 |     with {:ok, id} <- decode_id(id_encoded) do
62 |       Cachex.del(@cache_name, id)
63 |     end
64 |   end
65 | end
66 | 


--------------------------------------------------------------------------------
/lib/components_guide/content/text.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Content.Text do
 2 |   use Ecto.Schema
 3 |   import Ecto.Changeset
 4 | 
 5 |   embedded_schema do
 6 |     field :content, :string
 7 |   end
 8 | 
 9 |   def changeset(%ComponentsGuide.Content.Text{} = text, params \\ %{}) do
10 |     text
11 |     |> cast(params, [:content])
12 |     |> validate_required([:content])
13 |   end
14 | 
15 |   def to_param(%ComponentsGuide.Content.Text{id: id}) do
16 |     Base.url_encode64(id)
17 |   end
18 | 
19 |   def to_param(%ComponentsGuide.Content.Text{content: content}) when is_binary(content) do
20 |     Base.url_encode64(:crypto.hash(:sha256, content))
21 |   end
22 | end
23 | 
24 | # defimpl Phoenix.Param, for: ComponentsGuide.Content.Text do
25 | #   def to_param(%ComponentsGuide.Content.Text{id: id}) do
26 | #     Base.url_encode64(id)
27 | #   end
28 | 
29 | #   def to_param(%ComponentsGuide.Content.Text{content: content}) when is_binary(content) do
30 | #     Base.url_encode64(:crypto.hash(:sha256, content))
31 | #   end
32 | # end
33 | 


--------------------------------------------------------------------------------
/lib/components_guide/content/text2.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Content.Text2 do
 2 |   use Ecto.Schema
 3 |   import Ecto.Changeset
 4 | 
 5 |   embedded_schema do
 6 |     field :content, :string
 7 | 
 8 |     timestamps()
 9 |   end
10 | 
11 |   @doc false
12 |   def changeset(text2, attrs) do
13 |     text2
14 |     |> cast(attrs, [:content])
15 |     |> validate_required([:content])
16 |   end
17 | end
18 | 


--------------------------------------------------------------------------------
/lib/components_guide/content/text_import.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Content.TextImport do
 2 |   use Ecto.Schema
 3 |   import Ecto.Changeset
 4 | 
 5 |   embedded_schema do
 6 |     field :url, :string
 7 |   end
 8 | 
 9 |   def changeset(%ComponentsGuide.Content.TextImport{} = text_import, params \\ %{}) do
10 |     text_import
11 |     |> cast(params, [:url])
12 |     |> validate_required([:url])
13 |   end
14 | end
15 | 


--------------------------------------------------------------------------------
/lib/components_guide/fake_search.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.FakeSearch do
 2 |   alias ComponentsGuide.Fetch
 3 | 
 4 |   def list() do
 5 |     response = Fetch.get_following_redirects!("https://jsonplaceholder.typicode.com/posts")
 6 |     data = Jason.decode!(response.body)
 7 |     data
 8 |   end
 9 | end
10 | 


--------------------------------------------------------------------------------
/lib/components_guide/fetch/request.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Fetch.Request do
 2 |   defstruct method: "GET", url_string: "", uri: %URI{}, headers: [], body: nil
 3 | 
 4 |   def new(uri_or_url_string, options \\ [])
 5 | 
 6 |   def new(uri = %URI{}, options) do
 7 |     headers = Keyword.get(options, :headers, [])
 8 |     method = Keyword.get(options, :method, "GET")
 9 |     body = Keyword.get(options, :body)
10 |     url_string = URI.to_string(uri)
11 |     %__MODULE__{method: method, url_string: url_string, uri: uri, headers: headers, body: body}
12 |   end
13 | 
14 |   def new(url_string, options) when is_binary(url_string) do
15 |     headers = Keyword.get(options, :headers, [])
16 |     method = Keyword.get(options, :method, "GET")
17 |     body = Keyword.get(options, :body)
18 | 
19 |     with {:ok, uri} <- URI.new(url_string) do
20 |       {:ok,
21 |        %__MODULE__{method: method, url_string: url_string, uri: uri, headers: headers, body: body}}
22 |     else
23 |       {:error, _} = value -> value
24 |     end
25 |   end
26 | 
27 |   def new!(uri_or_url_string, options \\ [])
28 | 
29 |   def new!(url_string, options) when is_binary(url_string) do
30 |     headers = Keyword.get(options, :headers, [])
31 |     method = Keyword.get(options, :method, "GET")
32 |     body = Keyword.get(options, :body)
33 |     uri = URI.new!(url_string)
34 |     %__MODULE__{method: method, url_string: url_string, uri: uri, headers: headers, body: body}
35 |   end
36 | end
37 | 


--------------------------------------------------------------------------------
/lib/components_guide/fetch/response.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Fetch.Response do
 2 |   alias ComponentsGuide.Fetch.Timings
 3 | 
 4 |   defstruct done?: false,
 5 |             url: nil,
 6 |             status: nil,
 7 |             headers: [],
 8 |             body: "",
 9 |             error: nil,
10 |             timings: %Timings{}
11 | 
12 |   def new(url_string, timings = %Timings{}) do
13 |     %__MODULE__{url: url_string, done?: false, timings: timings}
14 |   end
15 | 
16 |   def failed(url_string, error) do
17 |     new(url_string, nil) |> add_error(error)
18 |   end
19 | 
20 |   def add_responses(receiver = %__MODULE__{}, responses, ref) do
21 |     Enum.reduce(responses, receiver, fn
22 |       {:status, ^ref, code}, acc ->
23 |         IO.puts("status #{code}")
24 | 
25 |         acc
26 |         |> Map.update!(:timings, &Timings.did_receive_status/1)
27 |         |> Map.put(:status, code)
28 | 
29 |       {:headers, ^ref, headers}, acc ->
30 |         IO.puts("headers")
31 | 
32 |         acc
33 |         |> Map.update!(:timings, &Timings.did_receive_headers/1)
34 |         |> Map.update(:headers, headers, &(&1 ++ headers))
35 | 
36 |       {:data, ^ref, data}, acc ->
37 |         IO.puts("data")
38 |         Map.update(acc, :body, data, &(&1 <> data))
39 | 
40 |       {:done, ^ref}, acc ->
41 |         IO.puts("done")
42 |         Map.put(acc, :done?, true)
43 |     end)
44 |   end
45 | 
46 |   def finish_timings(receiver = %__MODULE__{}, event_name, metadata \\ %{}) do
47 |     update_in(receiver.timings, &Timings.finish_with_telemetry(&1, event_name, metadata))
48 |   end
49 | 
50 |   def add_error(receiver = %__MODULE__{}, error) do
51 |     put_in(receiver.error, error)
52 |   end
53 | 
54 |   def find_header(receiver = %__MODULE__{}, header_name) when is_binary(header_name) do
55 |     header_name = String.downcase(header_name)
56 | 
57 |     Enum.find_value(receiver.headers, fn {name, value} ->
58 |       case String.downcase(name) do
59 |         ^header_name -> value
60 |         _ -> nil
61 |       end
62 |     end)
63 |   end
64 | end
65 | 


--------------------------------------------------------------------------------
/lib/components_guide/fetch/timings.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Fetch.Timings do
 2 |   defstruct [:start, :connected, :received_status, :received_headers, :duration]
 3 | 
 4 |   def start() do
 5 |     %__MODULE__{
 6 |       start: System.monotonic_time()
 7 |     }
 8 |   end
 9 | 
10 |   def did_connect(timings = %__MODULE__{start: start}) do
11 |     duration = System.monotonic_time() - start
12 |     put_in(timings.connected, duration)
13 |   end
14 | 
15 |   def did_receive_status(timings = %__MODULE__{start: start}) do
16 |     duration = System.monotonic_time() - start
17 |     put_in(timings.received_status, duration)
18 |   end
19 | 
20 |   def did_receive_headers(timings = %__MODULE__{start: start}) do
21 |     duration = System.monotonic_time() - start
22 |     put_in(timings.received_headers, duration)
23 |   end
24 | 
25 |   def finish(timings = %__MODULE__{start: start}) do
26 |     duration = System.monotonic_time() - start
27 |     put_in(timings.duration, duration)
28 |   end
29 | 
30 |   def start_with_telemetry(event_name, metadata \\ %{}) do
31 |     t = start()
32 | 
33 |     :telemetry.execute(
34 |       event_name,
35 |       %{start: t.start},
36 |       metadata
37 |     )
38 | 
39 |     t
40 |   end
41 | 
42 |   def finish_with_telemetry(t = %__MODULE__{}, event_name, metadata \\ %{}) do
43 |     t = finish(t)
44 | 
45 |     :telemetry.execute(
46 |       event_name,
47 |       %{duration: t.duration},
48 |       metadata
49 |     )
50 | 
51 |     t
52 |   end
53 | end
54 | 


--------------------------------------------------------------------------------
/lib/components_guide/rustler/molten.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Rustler.Molten do
 2 |   defmodule Native do
 3 |     use Rustler, otp_app: :components_guide, crate: "molten"
 4 | 
 5 |     def add(_, _), do: error()
 6 |     def js(_), do: error()
 7 |     def typescript_module(_, _, _), do: error()
 8 |     def parse_js(_), do: error()
 9 | 
10 |     defp error, do: :erlang.nif_error(:nif_not_loaded)
11 |   end
12 | 
13 |   def add(a, b), do: Native.add(a, b)
14 |   def js(source), do: Native.js(source)
15 | 
16 |   def typescript_module(source) do
17 |     ref = make_ref()
18 |     Native.typescript_module(source, self(), ref)
19 |   end
20 | 
21 |   def parse_js(source) do
22 |     case Native.parse_js(source) do
23 |       {:ok, json} -> {:ok, Jason.decode!(json)}
24 |       other -> other
25 |     end
26 |   end
27 | end
28 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/base64/base64.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Base64 do
 2 |   # Accepts compile-time arguments:
 3 |   # - URL-safe or not
 4 |   # - Padding
 5 |   #
 6 |   # This will output different WebAssembly code, effectively “tree-shaking” the pieces of
 7 |   # code that are unused. It also removes branching (“is url-safe or not”) and optimized the size.
 8 |   #
 9 |   # Orb.defcomptimeflag :url_safe?, true
10 |   # Orb.defcomptimeflag :padding?, true
11 | end
12 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/calendar/calendar_grid.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Calendar.Grid do
 2 |   # Displays an HTML calendar grid for a given year and month.
 3 |   # Uses Elixir’s Date, Date.Range, Calendar.ISO to grab all the data for each year.
 4 | 
 5 |   # for year <- 1970..2100 do
 6 |   #   year_days = if Date.leap_year?(year), do: 366, else: 365
 7 |   #   for year_day <- 1..year_days do
 8 | 
 9 |   #   end
10 |   # end
11 | 
12 |   # testw "leap_year?" do
13 |   #   assert call(:leap_year?, 2000) = Calendar.ISO.leap_year?(2000)
14 |   #   # Property-based testing
15 |   # end
16 | end
17 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/cloudflare_dns/cloudflare_dns.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuide.Wasm.CloudflareDNS do
2 |   # curl -H "accept: application/dns-json" "https://1.1.1.1/dns-query?name=icing.space&type=TXT"
3 |   # curl -o /dev/null -s -w 'Establish Connection: %{time_connect}s\nTTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n' -H "accept: application/dns-json" "https://1.1.1.1/dns-query?name=icing.space&type=TXT"
4 | end
5 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/collected/collected_press.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Collected.CollectedPress do
 2 |   # It will find Markdown file corresponding to input path, and load it.
 3 |   # It will load _head.html
 4 |   # It will load _nav.md
 5 |   # It will load _contentinfo.md
 6 |   # It will ask for them to be transformed into Markdown
 7 |   # It will combine them into one HTML stream.
 8 | 
 9 |   use Orb
10 | 
11 |   # defmodule URL do
12 |   #   def wasm_type(), do: :i32
13 |   # end
14 | 
15 |   # strings I32.StringStartAndLength
16 | 
17 |   I32.export_enum([:url_to_proxy_provided, :response_provided])
18 | 
19 |   defmodule Datasource do
20 |     use Orb.Import
21 | 
22 |     defw(load_repo_content_text(path: I32.String, write_ptr: I32), I32)
23 |     defw(render_markdown_to_html(markdown: I32.String, write_ptr: I32), I32)
24 |   end
25 | 
26 |   importw(Datasource, :datasource)
27 | 
28 |   global :export_mutable do
29 |     @repo_owner ""
30 |     @repo_name ""
31 |     @path "/"
32 |   end
33 | 
34 |   defw text_html(), I32.String do
35 |     "<!doctype html>"
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/color_picker/lab_swatch.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide/wasm/examples/color_picker/lab_swatch.wasm


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/cors/cors.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Cors do
 2 |   defmodule Browser do
 3 |     use Orb
 4 | 
 5 |     global :export_mutable do
 6 |       @origin "example.com"
 7 |       @method "GET"
 8 |       # @path "/"
 9 |       @origin_headers ""
10 |     end
11 | 
12 |     defw can_access_origin?(), I32 do
13 |       # 1. request origin to get headers
14 |       # 2. process headers to calculate 0 or 1
15 |       0
16 |     end
17 |   end
18 | 
19 |   defmodule OriginA do
20 |     use Orb
21 | 
22 |     Memory.pages(1)
23 | 
24 |     global :export_mutable do
25 |       @method "GET"
26 |     end
27 | 
28 |     defw http_headers do
29 |       [
30 |         "Access-Control-Allow-Origin: a.com",
31 |         "Access-Control-Allow-Methods: GET, POST"
32 |       ]
33 |       |> Enum.join("\r\n")
34 |     end
35 |   end
36 | 
37 |   defmodule OriginB do
38 |     use Orb
39 | 
40 |     Memory.pages(1)
41 | 
42 |     global :export_mutable do
43 |       @method "GET"
44 |     end
45 | 
46 |     defw http_headers do
47 |       [
48 |         "Access-Control-Allow-Origin: b.com",
49 |         "Access-Control-Allow-Methods: GET, POST"
50 |       ]
51 |       |> Enum.join("\r\n")
52 |     end
53 |   end
54 | end
55 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/dovetail/dovetail.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Dovetail do
 2 |   # https://github.com/RoyalIcing/Dovetail
 3 | 
 4 |   alias ComponentsGuide.Wasm.Examples.Dovetail.ElementsStack
 5 |   use Orb
 6 |   alias require SilverOrb.Arena
 7 | 
 8 |   Arena.def(ElementsStack, pages: 1)
 9 |   Arena.def(Document, pages: 1)
10 | 
11 |   defw text(string: I32.String), I32.UnsafePointer, size: I32 do
12 |     size = Orb.String.byte_size(string)
13 |     ElementsStack.alloc!(size)
14 |     # TODO
15 |   end
16 | 
17 |   defw link(href_ptr: I32.String, text_ptr: I32.UnsafePointer) do
18 |     # TODO
19 |   end
20 | 
21 |   defw h(level: I32, text_ptr: I32.UnsafePointer) do
22 |     # TODO
23 |   end
24 | 
25 |   defw p(text_ptr: I32.UnsafePointer) do
26 |     # TODO
27 |   end
28 | 
29 |   defw nav(name: I32.String, items_ptr: I32.UnsafePointer) do
30 |     # TODO
31 |   end
32 | 
33 |   # An Elixir list of items, which is added to the stack.
34 |   def items(items) do
35 | 
36 |   end
37 | 
38 |   defw button(text_ptr: I32.UnsafePointer) do
39 |     # TODO
40 |   end
41 | 
42 |   defw textbox(text_ptr: I32.UnsafePointer) do
43 |     # TODO
44 |   end
45 | 
46 |   defw form_get(path_ptr: I32.String, text_ptr: I32.UnsafePointer) do
47 |     # TODO
48 |   end
49 | 
50 |   defw form_post(path_ptr: I32.String, text_ptr: I32.UnsafePointer) do
51 |     # TODO
52 |   end
53 | end
54 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/epub/epub_builder.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuide.Wasm.Examples.Epub.Builder do
2 |   # https://opensource.com/article/22/8/epub-file
3 |   # https://github.com/futurepress/epub.js
4 |   # https://idpf.github.io/epub3-samples/30/samples.html
5 |   # https://github.com/standardebooks/bertrand-russell_roads-to-freedom/blob/master/src/epub/toc.xhtml
6 | end
7 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/examples_http_server.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.HTTPServer do
 2 |   alias ComponentsGuide.Wasm.Examples.StringBuilder
 3 |   alias ComponentsGuide.Wasm.Examples.Format.IntToString
 4 | 
 5 |   defmodule PortfolioSite do
 6 |     use Orb
 7 |     use SilverOrb.BumpAllocator
 8 |     use I32.String
 9 |     use IntToString
10 |     use StringBuilder
11 | 
12 |     SilverOrb.BumpAllocator.export_alloc()
13 | 
14 |     I32.global(
15 |       method: 0,
16 |       path: 0
17 |     )
18 | 
19 |     defw set_method(method: I32.UnsafePointer) do
20 |       @method = method
21 |     end
22 | 
23 |     defw set_path(path: I32.UnsafePointer) do
24 |       @path = path
25 |     end
26 | 
27 |     defw get_status(), I32 do
28 |       I32.String.match @method do
29 |         ~S"GET" ->
30 |           I32.String.match @path do
31 |             ~S"/" ->
32 |               200
33 | 
34 |             ~S"/about" ->
35 |               200
36 | 
37 |             _ ->
38 |               404
39 |           end
40 | 
41 |         _ ->
42 |           405
43 |       end
44 |     end
45 | 
46 |     defw get_body(), I32.String do
47 |       if not I32.String.streq(@method, ~S"GET") do
48 |         return(~S"""
49 |         <!doctype html>
50 |         <h1>Method not allowed</h1>
51 |         """)
52 |       end
53 | 
54 |       I32.String.match @path do
55 |         ~S"/" ->
56 |           ~S"""
57 |           <!doctype html>
58 |           <h1>Welcome</h1>
59 |           """
60 | 
61 |         ~S"/about" ->
62 |           ~S"""
63 |           <!doctype html>
64 |           <h1>About</h1>
65 |           """
66 | 
67 |         _ ->
68 |           build! do
69 |             ~S"""
70 |             <!doctype html>
71 |             """
72 | 
73 |             ~S"<h1>Not found: "
74 |             append!(string: @path)
75 |             ~S"</h1>\n"
76 |           end
77 | 
78 |           # ~E"""
79 |           # <!doctype html>
80 |           # <h1>Not found: <%= path %></h1>
81 |           # """
82 |       end
83 |     end
84 |   end
85 | end
86 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/examples_magic_numbers.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.MagicNumbers do
 2 |   defmodule MobileThrottling do
 3 |     use Orb
 4 | 
 5 |     I32.export_global(:readonly,
 6 |       slow_3g_latency_ms: 2000,
 7 |       slow_3g_download: 50_000,
 8 |       slow_3g_upload: 50_000
 9 |     )
10 | 
11 |     I32.export_global(:readonly,
12 |       fast_3g_latency_ms: 563,
13 |       fast_3g_download: 180_000,
14 |       fast_3g_upload: 84_375
15 |     )
16 |   end
17 | 
18 |   defmodule MobileThrottlingJSON do
19 |     use Orb
20 | 
21 |     Memory.pages(1)
22 | 
23 |     def json do
24 |       Jason.encode!(%{
25 |         slow_3g_latency_ms: 2000,
26 |         slow_3g_download: 50_000,
27 |         slow_3g_upload: 50_000,
28 |         fast_3g_latency_ms: 563,
29 |         fast_3g_download: 180_000,
30 |         fast_3g_upload: 84_375
31 |       })
32 |     end
33 | 
34 |     defw application_json, I32.String do
35 |       json()
36 |     end
37 |   end
38 | end
39 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/examples_numeric.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Numeric do
 2 |   defmodule BasicMath do
 3 |     use Orb
 4 | 
 5 |     Orb.__append_body do
 6 |       func i32_double(value: I32), I32 do
 7 |         I32.mul(value, 2)
 8 |       end
 9 | 
10 |       func f32_double(value: F32), F32 do
11 |         F32.mul(value, 2.0)
12 |       end
13 |     end
14 |   end
15 | 
16 |   defmodule UnitInterval do
17 |     use Orb
18 | 
19 |     Orb.__append_body do
20 |       func to_int_in_range(value: F32, min: I32, max: I32), I32 do
21 |         # Math.floor(Math.random() * (max - min + 1)) + min
22 |         I32.add(
23 |           I32.trunc_f32_s(
24 |             F32.mul(
25 |               value,
26 |               I32.sub(max, min) |> I32.add(1) |> F32.convert_i32_s()
27 |               # F32.convert_i32_s(I32.math do: max - min + 1))
28 |             )
29 |           ),
30 |           min
31 |         )
32 |       end
33 |     end
34 |   end
35 | end
36 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/examples_parser.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Parser do
 2 |   defmodule HexConversion do
 3 |     use Orb
 4 | 
 5 |     # @wasm_memory 1
 6 |     # Memory.increase! pages: 1
 7 |     Memory.pages(1)
 8 | 
 9 |     wasm_mode(U32)
10 | 
11 |     defw u32_to_hex_lower(value: I32, write_ptr: I32.U8.UnsafePointer),
12 |       i: I32,
13 |       digit: I32 do
14 |       i = 8
15 | 
16 |       loop Digits do
17 |         i = i - 1
18 | 
19 |         digit = I32.rem_u(value, 16)
20 |         value = value / 16
21 | 
22 |         if digit > 9 do
23 |           write_ptr[at!: i] = ?a + digit - 10
24 |         else
25 |           write_ptr[at!: i] = ?0 + digit
26 |         end
27 | 
28 |         Digits.continue(if: i > 0)
29 |       end
30 |     end
31 |   end
32 | 
33 |   defmodule DomainNames do
34 |     use Orb
35 |     use SilverOrb.BumpAllocator
36 |     use I32.String
37 | 
38 |     SilverOrb.BumpAllocator.export_alloc()
39 | 
40 |     defw lookup_domain_name(value: I32.String), I32 do
41 |       I32.String.match value do
42 |         ~S"com" -> 1
43 |         ~S"org" -> 1
44 |         _ -> 0
45 |       end
46 |     end
47 |   end
48 | end
49 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/examples_svg.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.SVG do
 2 |   alias OrbWasmtime.Instance
 3 |   alias ComponentsGuide.Wasm.Examples.Parser.HexConversion
 4 | 
 5 |   defmodule Square do
 6 |     use Orb
 7 | 
 8 |     Memory.pages(2)
 9 | 
10 |     I32.export_global(:mutable,
11 |       # Opaque black
12 |       color_hex: 0x000000FF
13 |     )
14 | 
15 |     I32.global(body_chunk_index: 0)
16 | 
17 |     Orb.__append_body do
18 |       HexConversion.funcp(:u32_to_hex_lower)
19 | 
20 |       func rewind do
21 |         @body_chunk_index = 0
22 |       end
23 | 
24 |       func next_body_chunk(), I32.String do
25 |         I32.match @body_chunk_index do
26 |           0 ->
27 |             ~S[<svg width="64" height="64">]
28 | 
29 |           1 ->
30 |             ~S[<rect width="64" height="64" fill="]
31 | 
32 |           2 ->
33 |             Memory.store!(I32.U8, 0x10000, ?#)
34 |             HexConversion.u32_to_hex_lower(@color_hex, 0x10001)
35 |             push(0x10000)
36 | 
37 |           3 ->
38 |             ~S[" />]
39 | 
40 |           4 ->
41 |             ~S[</svg>\n]
42 | 
43 |           _ ->
44 |             0x0
45 |         end
46 | 
47 |         @body_chunk_index = I32.add(@body_chunk_index, 1)
48 |       end
49 |     end
50 | 
51 |     def read_body(instance) do
52 |       Instance.call_joining_string_chunks(instance, :next_body_chunk)
53 |     end
54 |   end
55 | end
56 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/favicon/favicon_generator.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Favicon.FaviconGenerator do
 2 |   # You supply a PNG? SVG? And it gets converted to the image/vnd.microsoft.icon format.
 3 |   # Or you can draw basic shapes that get rasterized?
 4 |   # https://docs.fileformat.com/image/ico/
 5 | 
 6 |   @ico_header <<0x00000100::16>> <> <<0x0400::16>>
 7 | 
 8 |   def image_header(width, height) do
 9 |     0x10100000_01002000_28050000
10 |   end
11 | end
12 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/http_harness/http_harness.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuide.Wasm.Examples.HTTPHarness do
2 |   # Takes another WebAssembly module as imports, who has the role of a HTTP server.
3 |   # This module lets you validate things like HTTP caching headers e.g. etag and date modified.
4 | end
5 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/lemire/parse_u8.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Lemire.ParseU8 do
 2 |   @moduledoc """
 3 |   https://lemire.me/blog/2023/11/28/parsing-8-bit-integers-quickly/
 4 |   """
 5 | 
 6 |   use Orb
 7 | 
 8 |   Memory.pages(1)
 9 |   wasm_mode(U32)
10 |   # Orb.string_type(Memory.Range)
11 | 
12 |   defw parse_uint8_naive(str: I32.String, len: I32), {I32, I32},
13 |     i: I32,
14 |     r: I32,
15 |     d: I32,
16 |     n: I32 do
17 |     r = len &&& 0x3
18 | 
19 |     loop EachChar do
20 |       d = str[at!: i] - ?0
21 | 
22 |       if d > 9 do
23 |         0
24 |         0
25 |         return()
26 |       end
27 | 
28 |       n = n * 10 + d
29 |       i = i + 1
30 |       EachChar.continue(if: i < r)
31 |     end
32 | 
33 |     n < 256 &&& len !== 0 &&& len < 4
34 |     n
35 |   end
36 | 
37 |   defw parse_uint8_fastswar(str: I32.String, len: I32), {I32, I32}, digits: I32, n: I32 do
38 |     if len === 0 or len > 3 do
39 |       0
40 |       0
41 |       return()
42 |     end
43 | 
44 |     digits =
45 |       Memory.load!(I32, str)
46 |       # Loads as little-endian
47 |       |> I32.xor(0x30303030)
48 |       |> I32.shl((4 - len) * 8)
49 | 
50 |     n =
51 |       digits
52 |       |> I32.mul(0x640A01)
53 |       |> I32.shr_u(24)
54 |       |> I32.band(0x000000FF)
55 | 
56 |     # Check are valid digits
57 |     I32.eqz((digits ||| 0x06060606 + digits) &&& 0xF0F0F0F0)
58 |     # Check is <= 255 (after converting to big-endian)
59 |     |> I32.band(
60 |       I32.rotl(digits |> I32.band(0xFF00FF00), 8)
61 |       |> I32.or(I32.rotr(digits |> I32.band(0x00FF00FF), 8)) <= 0x020505
62 |     )
63 | 
64 |     n
65 |   end
66 | end
67 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/mime_types/mime_types.ex:
--------------------------------------------------------------------------------
 1 | # Compare to Zig version compiled to WebAssembly:
 2 | # https://github.com/andrewrk/mime
 3 | 
 4 | defmodule ComponentsGuide.Wasm.Examples.MimeTypes do
 5 |   use Orb
 6 | 
 7 |   require SilverOrb.Arena |> alias
 8 | 
 9 |   Arena.def(Heap, pages: 1)
10 |   # Heap.export_alloc()
11 | 
12 |   # defw get_mime_type_for_extension(extension: Heap.String), Heap.String do
13 | 
14 |   # end
15 | end
16 | 


--------------------------------------------------------------------------------
/lib/components_guide/wasm/examples/temperature/temperature_converter.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuide.Wasm.Examples.TemperatureConverter do
2 |   use Orb
3 | 
4 |   global do
5 | 
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/channels/user_socket.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.UserSocket do
 2 |   use Phoenix.Socket
 3 | 
 4 |   ## Channels
 5 |   # channel "room:*", ComponentsGuideWeb.RoomChannel
 6 | 
 7 |   # Socket params are passed from the client and can
 8 |   # be used to verify and authenticate a user. After
 9 |   # verification, you can put default assigns into
10 |   # the socket that will be set for all channels, ie
11 |   #
12 |   #     {:ok, assign(socket, :user_id, verified_user_id)}
13 |   #
14 |   # To deny connection, return `:error`.
15 |   #
16 |   # See `Phoenix.Token` documentation for examples in
17 |   # performing token verification on connect.
18 |   def connect(_params, socket, _connect_info) do
19 |     {:ok, socket}
20 |   end
21 | 
22 |   # Socket id's are topics that allow you to identify all sockets for a given user:
23 |   #
24 |   #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
25 |   #
26 |   # Would allow you to broadcast a "disconnect" event and terminate
27 |   # all active sockets and channels for a given user:
28 |   #
29 |   #     ComponentsGuideWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
30 |   #
31 |   # Returning `nil` makes this socket anonymous.
32 |   def id(_socket), do: nil
33 | end
34 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/components/preload.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.Preload do
 2 |   use Phoenix.Component
 3 | 
 4 |   def fetch(assigns) do
 5 |     ~H"""
 6 |     <link rel="preload" href={@href} as="fetch" crossorigin="anonymous" />
 7 |     """
 8 |   end
 9 | end
10 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/calendar_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.CalendarController do
 2 |   use ComponentsGuideWeb, :controller
 3 | 
 4 |   def index(conn, _params) do
 5 |     render(conn, :index,
 6 |       page_title:
 7 |         "Calendar of when important tools are released, become LTS, and reach end-of-life",
 8 |       today: Date.utc_today()
 9 |     )
10 |   end
11 | end
12 | 
13 | defmodule ComponentsGuideWeb.CalendarHTML do
14 |   use ComponentsGuideWeb, :html
15 | 
16 |   embed_templates("calendar_html/*")
17 | end
18 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/calendar_html/index.html.heex:
--------------------------------------------------------------------------------
 1 | <div class="prose md:prose-xl prose-invert max-w-6xl mx-auto pt-8 px-3">
 2 |   <h1 class="text-center">Developer Calendar</h1>
 3 |   <ComponentsGuideWeb.DevCalendarComponent.calendar />
 4 | </div>
 5 | 
 6 | <div class="prose md:prose-xl prose-invert max-w-2xl mx-auto pt-8 pb-16 px-3">
 7 |   <ComponentsGuideWeb.DevCalendarComponent.list />
 8 | </div>
 9 | 
10 | <section class="prose prose-invert max-w-2xl mx-auto pt-8 pb-16 px-3">
11 |   <p>
12 |     <%= "Why number of weeks? Since most teams work in weekly or fortnightly sprints, I figure it’s helpful to see what will land in the next sprint or so." %>
13 |   </p>
14 |   <p>Sources:</p>
15 |   <ul>
16 |     <li>
17 |       <a href="https://wiki.mozilla.org/Release_Management/Calendar">Firefox release calendar</a>
18 |     </li>
19 |     <li><a href="https://chromiumdash.appspot.com/schedule">Chromium release schedule</a></li>
20 |     <li><a href="https://nodejs.org/en/about/releases/">Node.js releases</a></li>
21 |     <li>
22 |       <a href="https://deno.land/manual/contributing/release_schedule">Deno release schedule</a>
23 |     </li>
24 |     <li><a href="https://reactjs.org/blog/">React blog</a></li>
25 |     <li><a href="https://endoflife.date/postgresql">Postgres on endoflife.date</a></li>
26 |     <li><a href="https://simpleicons.org">Simple Icons</a></li>
27 |   </ul>
28 | </section>
29 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/cheatsheets_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.CheatsheetsController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   @wasm_source """
 6 |   (module
 7 |     (func (export "answer") (result i32)
 8 |      i32.const 42
 9 |     )
10 |   )
11 |   """
12 | 
13 |   def index(conn, _params) do
14 |     render(conn, "index.html", article: "intro", wasm_source: @wasm_source)
15 |   end
16 | 
17 |   @articles ["rxjs", "error-messages", "cloud-limits", "astro"]
18 | 
19 |   def show(conn, %{"id" => article}) when article in @articles do
20 |     render(conn, "index.html", article: article)
21 |   end
22 | 
23 |   def show(conn, _params) do
24 |     raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
25 |   end
26 | end
27 | 
28 | defmodule ComponentsGuideWeb.CheatsheetsView do
29 |   use ComponentsGuideWeb, :view
30 |   use ComponentsGuideWeb.Snippets
31 |   alias ComponentsGuideWeb.ThemeView
32 | 
33 |   defdelegate code_block(assigns), to: ComponentsGuideWeb.PrimitiveHelpers
34 | 
35 |   def header_styles() do
36 |     ThemeView.banner_styles(:cheatsheets)
37 |   end
38 | end
39 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/color_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.ColorController do
2 |   use ComponentsGuideWeb, :controller_view
3 | 
4 |   def index(conn, _params) do
5 |     Phoenix.Component.live_render(conn, ComponentsGuideWeb.ColorLive)
6 |     # render(conn, "index.html")
7 |   end
8 | end
9 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/composable_systems_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ComposableSystemsController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   def index(conn, _params) do
 6 |     render(conn, "index.html", article: "intro")
 7 |   end
 8 | 
 9 |   @articles ["opinionated-vs-flexible", "desirable-properties"]
10 | 
11 |   def show(conn, %{"id" => article}) when article in @articles do
12 |     render(conn, "index.html", article: article)
13 |   end
14 | 
15 |   def show(conn, _params) do
16 |     raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
17 |   end
18 | end
19 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/concepts_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.ConceptsController do
2 |   use ComponentsGuideWeb, :controller_view
3 | 
4 |   def index(conn, _params) do
5 |     render(conn, "index.html")
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/content_length_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ContentLengthController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   alias ComponentsGuide.Research.Source
 4 | 
 5 |   # @allowed_prefixes ["https://cdn.jsdelivr.net/", "https://unpkg.com/"]
 6 | 
 7 |   def index(conn, %{"url" => "https://cdn.jsdelivr.net/" <> _ = url}) do
 8 |     case Source.content_length(url) do
 9 |       {:ok, content_length} ->
10 |         conn
11 |         |> put_root_layout(false)
12 |         |> put_layout(false)
13 |         |> render("index.html", content_length: content_length)
14 | 
15 |       _ ->
16 |         html(conn, "–")
17 |     end
18 |   end
19 | end
20 | 
21 | defmodule ComponentsGuideWeb.ContentLengthView do
22 |   use ComponentsGuideWeb, :view
23 | 
24 |   def render("index.html", assigns) do
25 |     content_tag(:data, Format.humanize_bytes(assigns.content_length),
26 |       value: assigns.content_length
27 |     )
28 |   end
29 | end
30 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/encoding_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.EncodingController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   def index(conn, _params) do
 6 |     render(conn, "index.html", article: "intro")
 7 |   end
 8 | 
 9 |   @articles ["base64", "utf8"]
10 | 
11 |   def show(conn, %{"id" => article}) when article in @articles do
12 |     render(conn, "index.html", article: article)
13 |   end
14 | 
15 |   def show(conn, _),
16 |     do: raise(Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router)
17 | end
18 | 
19 | defmodule ComponentsGuideWeb.EncodingView do
20 |   use ComponentsGuideWeb, :view
21 |   use ComponentsGuideWeb.Snippets
22 |   alias ComponentsGuideWeb.ThemeView
23 | 
24 |   def header_styles() do
25 |     ThemeView.banner_styles(:encoding)
26 |   end
27 | end
28 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/fake_search_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.FakeSearchController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 | 
 4 |   alias ComponentsGuide.FakeSearch
 5 | 
 6 |   def index(conn, _params) do
 7 |     items = FakeSearch.list()
 8 |     render(conn, "index.html", items: items)
 9 |   end
10 | end
11 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/graphics_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.GraphicsController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   def index(conn, _params) do
 6 |     render(conn, "index.html", article: "intro")
 7 |   end
 8 | 
 9 |   @articles ["postage-stamp"]
10 | 
11 |   def show(conn, %{"id" => article}) when article in @articles do
12 |     render(conn, "index.html", article: article)
13 |   end
14 | 
15 |   def show(conn, _),
16 |     do: raise(Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router)
17 | end
18 | 
19 | defmodule ComponentsGuideWeb.GraphicsView do
20 |   use ComponentsGuideWeb, :view
21 |   use ComponentsGuideWeb.Snippets
22 |   alias ComponentsGuideWeb.ThemeView
23 | 
24 |   def header_styles() do
25 |     ThemeView.banner_styles(:graphics)
26 |   end
27 | end
28 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/landing_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.LandingController do
2 |   use ComponentsGuideWeb, :controller_view
3 | 
4 |   def index(conn, _params) do
5 |     render(conn, "index.html")
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/links_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.LinksController do
2 |   use ComponentsGuideWeb, :controller_view
3 | 
4 |   def index(conn, _params) do
5 |     render(conn, "index.html")
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/react_typescript_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ReactTypescriptController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 | 
 4 |   def index(conn, _params) do
 5 |     conn
 6 |     |> assign(:page_title, "React and TypeScript")
 7 |     |> render("index.html", article: "tips")
 8 |   end
 9 | 
10 |   @articles %{
11 |     "lifecycle" => %{title: "React Lifecycle"},
12 |     "testing" => %{title: "Testing React"},
13 |     "forms" => %{title: "Creating Forms in React"},
14 |     "state-levels" => %{title: "Levels of State in React"},
15 |     "reducer-patterns" => %{title: "React Reducer Patterns"},
16 |     "goodbye-use-effect" => %{title: "Goodbye useEffect"},
17 |     "form-reducers" => %{title: "Reduce form boilerplate with React reducers"},
18 |     "zero-hook-dependencies" => %{title: "Zero Hook Dependencies"},
19 |     "hooks-concurrent-world" => %{title: "React Hooks in a Concurrent World"},
20 |     "logical-clocks" => %{title: "Logical Clocks in React"},
21 |     "editor" => %{title: "React Online Editor"},
22 |     "editor-prolog" => %{title: "Prolog Online Editor"}
23 |   }
24 | 
25 |   def show(conn, %{"article" => article}) when is_map_key(@articles, article) do
26 |     conn
27 |     |> assign(:page_title, @articles[article].title)
28 |     |> render("index.html", article: article)
29 |   end
30 | end
31 | 
32 | defmodule ComponentsGuideWeb.ReactTypescriptView do
33 |   use ComponentsGuideWeb, :view
34 | 
35 |   @prose_class "prose md:prose-xl prose-invert max-w-4xl mx-auto py-16"
36 | 
37 |   def article_content_class("editor"), do: "content text-xl"
38 |   def article_content_class("editor-prolog"), do: "content text-xl"
39 |   def article_content_class(_article), do: @prose_class
40 | 
41 |   def table_rows(rows_content) do
42 |     Enum.map(rows_content, &table_row/1)
43 |   end
44 | 
45 |   def table_row(items) do
46 |     content_tag(:tr, Enum.map(items, &table_cell/1))
47 |   end
48 | 
49 |   def table_cell(content) do
50 |     content_tag(:td, content |> line(), class: "px-3 py-1")
51 |   end
52 | end
53 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/research_html/empty.html.heex:
--------------------------------------------------------------------------------
1 | <.search_header query="" show_help={true}></.search_header>
2 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/research_html/index.html.heex:
--------------------------------------------------------------------------------
1 | <.search_header query={@query}></.search_header>
2 | 
3 | <div class="py-8">
4 |   <div class="max-w-4xl mx-auto px-4" data-links="underline">
5 |     <%= @results %>
6 |   </div>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/research_html/loading.html.heex:
--------------------------------------------------------------------------------
 1 | <.search_header query={@query}></.search_header>
 2 | 
 3 | <div class="py-8 text-white">
 4 |   <div class="max-w-4xl mx-auto px-4" data-links="underline">
 5 |     <include-fragment src={"/research?q=#{@query}&results=1"} data-results>
 6 |       <div>
 7 |         Loading…
 8 |         <loading-stopwatch class="inline-flex opacity-25"></loading-stopwatch>
 9 |       </div>
10 |     </include-fragment>
11 | 
12 |     <script type="module">
13 |       const loader = document.querySelector('include-fragment[data-results]');
14 |       const container = loader.parentElement;
15 |       //loader.addEventListener('loadstart', () => container.classList.add('is-loading'))
16 |       //loader.addEventListener('loadend', () => window.Prism.highlightAll());
17 |       loader.addEventListener('loadend', () => window.Prism.highlightAllUnder(container));
18 |       //loader.addEventListener('load', () => container.classList.add('is-success'))
19 |       //loader.addEventListener('error', () => container.classList.add('is-error'))
20 |     </script>
21 |   </div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/research_html/results.html.heex:
--------------------------------------------------------------------------------
1 | <div><%= @results %></div>
2 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/robust_javascript_interactivity_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.RobustJavascriptInteractivityController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   def index(conn, _params) do
 6 |     render(conn, "index.html", article: "intro")
 7 |   end
 8 | 
 9 |   @articles ["idempotent-javascript-operations"]
10 | 
11 |   def show(conn, %{"id" => article}) when article in @articles do
12 |     render(conn, "index.html", article: article)
13 |   end
14 | 
15 |   def show(conn, _params) do
16 |     raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
17 |   end
18 | end
19 | 
20 | defmodule ComponentsGuideWeb.RobustJavascriptInteractivityView do
21 |   use ComponentsGuideWeb, :view
22 |   use ComponentsGuideWeb.Snippets
23 |   alias ComponentsGuideWeb.ThemeView
24 | 
25 |   def header_styles() do
26 |     ThemeView.banner_styles(:robust_javascript_interactivity)
27 |   end
28 | end
29 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/swift_ui_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.SwiftUIController do
2 |   use ComponentsGuideWeb, :controller_view
3 | 
4 |   def index(conn, _params) do
5 |     render(conn, "index.html")
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/text2_html/edit.html.heex:
--------------------------------------------------------------------------------
 1 | <.header>
 2 |   Edit Text2 <%= @text2.id %>
 3 |   <:subtitle>Use this form to manage text2 records in your database.</:subtitle>
 4 | </.header>
 5 | 
 6 | <.simple_form :let={f} for={@changeset} method="put" action={~p"/texts2/#{@text2}"}>
 7 |   <.error :if={@changeset.action}>
 8 |     Oops, something went wrong! Please check the errors below.
 9 |   </.error>
10 |   <.input field={f[:content]} type="text" label="Content" />
11 |   <:actions>
12 |     <.button>Save Text2</.button>
13 |   </:actions>
14 | </.simple_form>
15 | 
16 | <.back navigate={~p"/texts2"}>Back to texts2</.back>
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/text2_html/index.html.heex:
--------------------------------------------------------------------------------
 1 | <.header>
 2 |   Listing Texts2
 3 |   <:actions>
 4 |     <.link href={~p"/texts2/new"}>
 5 |       <.button>New Text2</.button>
 6 |     </.link>
 7 |   </:actions>
 8 | </.header>
 9 | 
10 | <.table id="texts2" rows={@texts2} row_click={&JS.navigate(~p"/texts2/#{&1}")}>
11 |   <:col :let={text2} label="Content"><%= text2.content %></:col>
12 |   <:action :let={text2}>
13 |     <div class="sr-only">
14 |       <.link navigate={~p"/texts2/#{text2}"}>Show</.link>
15 |     </div>
16 |     <.link navigate={~p"/texts2/#{text2}/edit"}>Edit</.link>
17 |   </:action>
18 |   <:action :let={text2}>
19 |     <.link href={~p"/texts2/#{text2}"} method="delete" data-confirm="Are you sure?">
20 |       Delete
21 |     </.link>
22 |   </:action>
23 | </.table>
24 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/text2_html/new.html.heex:
--------------------------------------------------------------------------------
 1 | <.header>
 2 |   New Text2
 3 |   <:subtitle>Use this form to manage text2 records in your database.</:subtitle>
 4 | </.header>
 5 | 
 6 | <.simple_form :let={f} for={@changeset} action={~p"/texts2"}>
 7 |   <.error :if={@changeset.action}>
 8 |     Oops, something went wrong! Please check the errors below.
 9 |   </.error>
10 |   <.input field={f[:content]} type="text" label="Content" />
11 |   <:actions>
12 |     <.button>Save Text2</.button>
13 |   </:actions>
14 | </.simple_form>
15 | 
16 | <.back navigate={~p"/texts2"}>Back to texts2</.back>
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/text2_html/show.html.heex:
--------------------------------------------------------------------------------
 1 | <.header>
 2 |   Text2 <%= @text2.id %>
 3 |   <:subtitle>This is a text2 record from your database.</:subtitle>
 4 |   <:actions>
 5 |     <.link href={~p"/texts2/#{@text2}/edit"}>
 6 |       <.button>Edit text2</.button>
 7 |     </.link>
 8 |   </:actions>
 9 | </.header>
10 | 
11 | <.list>
12 |   <:item title="Content"><%= @text2.content %></:item>
13 | </.list>
14 | 
15 | <.back navigate={~p"/texts2"}>Back to texts2</.back>
16 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/text_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.TextController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 | 
 4 |   alias ComponentsGuide.Content
 5 |   alias ComponentsGuide.Content.Text
 6 | 
 7 |   def index(conn, _params) do
 8 |     content = Content.list_content()
 9 |     import_changeset = Content.change_text(%Text{})
10 |     render(conn, "index.html", content: content, import_changeset: import_changeset)
11 |   end
12 | 
13 |   def new(conn, _params) do
14 |     changeset = Content.change_text(%Text{})
15 |     render(conn, "new.html", changeset: changeset)
16 |   end
17 | 
18 |   def create(conn, %{"text" => %{"url" => url}}) do
19 |     case Content.import_text(%{"url" => url}) do
20 |       {:ok, text} ->
21 |         conn
22 |         |> put_flash(:info, "Text imported successfully.")
23 |         |> redirect(to: Routes.text_path(conn, :show, text))
24 | 
25 |       {:error, %Ecto.Changeset{} = import_changeset} ->
26 |         render(conn, "index.html", content: [], import_changeset: import_changeset)
27 |     end
28 |   end
29 | 
30 |   def create(conn, %{"text" => text_params}) do
31 |     case Content.create_text(text_params) do
32 |       {:ok, text} ->
33 |         conn
34 |         |> put_flash(:info, "Text created successfully.")
35 |         |> redirect(to: Routes.text_path(conn, :show, text))
36 | 
37 |       {:error, %Ecto.Changeset{} = changeset} ->
38 |         render(conn, "new.html", changeset: changeset)
39 |     end
40 |   end
41 | 
42 |   def show(conn, %{"id" => id}) do
43 |     text = Content.get_text!(id)
44 |     render(conn, "show.html", text: text)
45 |   end
46 | 
47 |   def show_text_format(conn, %{"id" => id, "format" => format}) do
48 |     text = Content.get_text!(id)
49 | 
50 |     conn
51 |     |> put_resp_content_type("text/" <> format)
52 |     |> send_resp(200, text.content)
53 |   end
54 | 
55 |   def edit(conn, %{"id" => id}) do
56 |     text = Content.get_text!(id)
57 |     changeset = Content.change_text(text)
58 |     render(conn, "edit.html", text: text, changeset: changeset)
59 |   end
60 | 
61 |   def update(conn, %{"id" => id, "text" => text_params}) do
62 |     text = Content.get_text!(id)
63 | 
64 |     case Content.create_text(text_params) do
65 |       {:ok, text} ->
66 |         conn
67 |         |> put_flash(:info, "Text created successfully.")
68 |         |> redirect(to: Routes.text_path(conn, :show, text))
69 | 
70 |       {:error, %Ecto.Changeset{} = changeset} ->
71 |         render(conn, "edit.html", text: text, changeset: changeset)
72 |     end
73 |   end
74 | 
75 |   def delete(conn, %{"id" => id}) do
76 |     {:ok, _text} = Content.delete_text(id)
77 | 
78 |     conn
79 |     |> put_flash(:info, "Text deleted successfully.")
80 |     |> redirect(to: Routes.text_path(conn, :index))
81 |   end
82 | end
83 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/wasm_html/color.html.heex:
--------------------------------------------------------------------------------
 1 | <article class="p-4 sm:p-8 text-white">
 2 |   <h1 class="mb-4">Orb WebAssembly</h1>
 3 | 
 4 |   <wasm-simple-html class="block">
 5 |     <source src="/wasm/module/color_lab_swatch.wasm" type="application/wasm" />
 6 |     <%= raw(@initial_html) %>
 7 |   </wasm-simple-html>
 8 | 
 9 |   <p class="mt-4">WebAssembly module size: <%= Format.humanize_bytes(@wasm_size) %></p>
10 | </article>
11 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/controllers/web_standards_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.WebStandardsController do
 2 |   use ComponentsGuideWeb, :controller_view
 3 |   require Logger
 4 | 
 5 |   def index(conn, _params) do
 6 |     render(conn, "index.html", article: "intro")
 7 |   end
 8 | 
 9 |   @articles [
10 |     "url",
11 |     "http-caching",
12 |     "html",
13 |     "http-headers",
14 |     "media-queries",
15 |     "promise",
16 |     "robots-txt",
17 |   ]
18 | 
19 |   def show(conn, %{"id" => article}) when article in @articles do
20 |     render(conn, "index.html", article: article)
21 |   end
22 | 
23 |   def show(conn, _params) do
24 |     raise Phoenix.Router.NoRouteError, conn: conn, router: ComponentsGuideWeb.Router
25 |   end
26 | end
27 | 
28 | defmodule ComponentsGuideWeb.WebStandardsView do
29 |   use ComponentsGuideWeb, :view
30 |   use ComponentsGuideWeb.Snippets
31 |   alias ComponentsGuideWeb.ThemeView
32 | 
33 |   def header_styles() do
34 |     ThemeView.banner_styles(:web_standards)
35 |   end
36 | end
37 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/endpoint.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.Endpoint do
 2 |   use Phoenix.Endpoint, otp_app: :components_guide
 3 | 
 4 |   @session_options [
 5 |     store: :cookie,
 6 |     key: "_components_guide_web_key",
 7 |     signing_salt: "BfF2quM8"
 8 |   ]
 9 | 
10 |   socket("/socket", ComponentsGuideWeb.UserSocket,
11 |     websocket: true,
12 |     longpoll: false
13 |   )
14 | 
15 |   socket("/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]])
16 | 
17 |   plug(Plug.Static,
18 |     at: "/collected/image",
19 |     from: {:components_guide, "priv/static/collected/image"},
20 |     gzip: false,
21 |     only: ~w(svg png jpg gif)
22 |   )
23 | 
24 |   # Serve at "/" the static files from "priv/static" directory.
25 |   #
26 |   # You should set gzip to true if you are running phx.digest
27 |   # when deploying your static files in production.
28 |   plug(Plug.Static,
29 |     at: "/",
30 |     from: :components_guide,
31 |     gzip: false,
32 |     only: ComponentsGuideWeb.static_paths()
33 |   )
34 | 
35 |   # Code reloading can be explicitly enabled under the
36 |   # :code_reloader configuration of your endpoint.
37 |   if code_reloading? do
38 |     socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
39 |     plug(Phoenix.LiveReloader)
40 |     plug(Phoenix.CodeReloader)
41 |   end
42 | 
43 |   plug(Phoenix.LiveDashboard.RequestLogger,
44 |     param_key: "request_logger",
45 |     cookie_key: "request_logger"
46 |   )
47 | 
48 |   plug(Plug.RequestId)
49 |   plug(Plug.Telemetry, event_prefix: [:phoenix, :endpoint])
50 | 
51 |   plug(Plug.Parsers,
52 |     parsers: [:urlencoded, :multipart, :json],
53 |     pass: ["*/*"],
54 |     json_decoder: Phoenix.json_library()
55 |   )
56 | 
57 |   plug(Plug.MethodOverride)
58 |   plug(Plug.Head)
59 |   plug(Plug.Session, @session_options)
60 |   plug(ComponentsGuideWeb.Router)
61 | end
62 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/gettext.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.Gettext do
 2 |   @moduledoc """
 3 |   A module providing Internationalization with a gettext-based API.
 4 | 
 5 |   By using [Gettext](https://hexdocs.pm/gettext),
 6 |   your module gains a set of macros for translations, for example:
 7 | 
 8 |       import ComponentsGuideWeb.Gettext
 9 | 
10 |       # Simple translation
11 |       gettext("Here is the string to translate")
12 | 
13 |       # Plural translation
14 |       ngettext("Here is the string to translate",
15 |                "Here are the strings to translate",
16 |                3)
17 | 
18 |       # Domain-based translation
19 |       dgettext("errors", "Here is the error message to translate")
20 | 
21 |   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
22 |   """
23 |   use Gettext, otp_app: :components_guide
24 | end
25 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/live/activity.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ActivityLive do
 2 |   use Phoenix.LiveView
 3 |   use Phoenix.Component
 4 | 
 5 |   @impl true
 6 |   def render(assigns) do
 7 |     ~L"""
 8 |     UUID: <%= @uuid %>
 9 |     """
10 |   end
11 | 
12 |   defp new_uuid do
13 |     Ecto.UUID.generate()
14 |   end
15 | 
16 |   @impl true
17 |   def mount(%{}, _session, socket) do
18 |     if connected?(socket), do: :timer.send_interval(5000, self(), :update)
19 | 
20 |     {:ok, assign(socket, uuid: new_uuid())}
21 |   end
22 | 
23 |   @impl true
24 |   def handle_info(:update, socket) do
25 |     {:noreply, assign(socket, :uuid, new_uuid())}
26 |   end
27 | end
28 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/live/fake_search.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.FakeSearchLive do
 2 |   use Phoenix.LiveView
 3 | 
 4 |   alias ComponentsGuide.FakeSearch
 5 | 
 6 |   def render(assigns) do
 7 |     ~L"""
 8 |     <div class="bg-white text-black">
 9 |       <p>UUID: <%= @uuid %></p>
10 | 
11 |       <form phx-change="suggest" phx-submit="search">
12 |         <label>
13 |           Search:
14 |           <input name="q" value="<%= @query %>" class="border">
15 |         </label>
16 |       </form>
17 | 
18 |       <p><%= Enum.count(@filtered_items) %></p>
19 | 
20 |       <ul>
21 |       <%= for item <- @filtered_items do %>
22 |         <li><%= item["body"] %></li>
23 |       <% end %>
24 |       </ul>
25 |     </div>
26 |     """
27 |   end
28 | 
29 |   defp new_uuid do
30 |     Ecto.UUID.generate()
31 |   end
32 | 
33 |   def mount(_, _session, socket) do
34 |     # if connected?(socket), do: :timer.send_interval(5000, self(), :update)
35 | 
36 |     items = FakeSearch.list()
37 | 
38 |     {:ok, assign(socket, uuid: new_uuid(), items: items, filtered_items: items, query: "")}
39 |   end
40 | 
41 |   def handle_info(:update, socket) do
42 |     {:noreply, assign(socket, :uuid, new_uuid())}
43 |   end
44 | 
45 |   def handle_event("suggest", %{"q" => query}, socket) when byte_size(query) <= 100 do
46 |     items = socket.assigns.items
47 | 
48 |     filtered_items =
49 |       Enum.filter(items, fn item ->
50 |         String.contains?(item["body"], query)
51 |       end)
52 | 
53 |     {:noreply, assign(socket, filtered_items: filtered_items)}
54 |   end
55 | end
56 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/live/orb_html_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.OrbHTMLLive do
 2 |   use Phoenix.LiveView
 3 |   use Phoenix.Component
 4 | 
 5 |   @impl true
 6 |   def render(assigns) do
 7 |     ~H"""
 8 |     UUID: <%= @uuid %>
 9 |     """
10 |   end
11 | 
12 |   defp new_uuid do
13 |     Ecto.UUID.generate()
14 |   end
15 | 
16 |   @impl true
17 |   def mount(%{}, _session, socket) do
18 |     if connected?(socket), do: :timer.send_interval(5000, self(), :update)
19 | 
20 |     {:ok, assign(socket, uuid: new_uuid())}
21 |   end
22 | 
23 |   @impl true
24 |   def handle_info(:update, socket) do
25 |     {:noreply, assign(socket, :uuid, new_uuid())}
26 |   end
27 | end
28 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/live/types_search.ex:
--------------------------------------------------------------------------------
1 | # https://cdn.jsdelivr.net/npm/typescript@4.9.5/lib/lib.dom.d.ts
2 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/telemetry.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.Telemetry do
 2 |   use Supervisor
 3 |   import Telemetry.Metrics
 4 | 
 5 |   def start_link(arg) do
 6 |     Supervisor.start_link(__MODULE__, arg, name: __MODULE__)
 7 |   end
 8 | 
 9 |   @impl true
10 |   def init(_arg) do
11 |     children = [
12 |       {:telemetry_poller, measurements: periodic_measurements(), period: 10_000}
13 |       # Add reporters as children of your supervision tree.
14 |       # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()}
15 |     ]
16 | 
17 |     Supervisor.init(children, strategy: :one_for_one)
18 |   end
19 | 
20 |   def metrics do
21 |     [
22 |       # Phoenix Metrics
23 |       summary("phoenix.endpoint.stop.duration",
24 |         unit: {:native, :millisecond}
25 |       ),
26 |       summary("phoenix.router_dispatch.stop.duration",
27 |         tags: [:route],
28 |         unit: {:native, :millisecond}
29 |       ),
30 | 
31 |       # VM Metrics
32 |       summary("vm.memory.total", unit: {:byte, :kilobyte}),
33 |       summary("vm.total_run_queue_lengths.total"),
34 |       summary("vm.total_run_queue_lengths.cpu"),
35 |       summary("vm.total_run_queue_lengths.io"),
36 | 
37 |       # Fetch
38 |       summary("fetch.load!.done.duration", unit: {:native, :millisecond}),
39 |       summary("fetch.load_many!.done.duration", unit: {:native, :millisecond}),
40 |       summary("fetch.load_many!.request.done.duration", unit: {:native, :millisecond})
41 |     ]
42 |   end
43 | 
44 |   defp periodic_measurements do
45 |     [
46 |       # A module, function and arguments to be invoked periodically.
47 |       # This function must call :telemetry.execute/3 and a metric must be added above.
48 |       # {ComponentsGuideWeb, :count_users, []}
49 |     ]
50 |   end
51 | end
52 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/template_engines/image_engine.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.TemplateEngines.ImageEngine do
 2 |   @moduledoc false
 3 | 
 4 |   @behaviour Phoenix.Template.Engine
 5 | 
 6 |   require ExImageInfo
 7 | 
 8 |   def compile(path, _name) do
 9 |     data = File.read!(path)
10 | 
11 |     media_type = MIME.from_path(path)
12 |     hash = :crypto.hash(:sha256, data)
13 |     hash_base64 = hash |> Base.url_encode64()
14 |     extension = MIME.extensions(media_type) |> List.first()
15 |     static_path = Path.join(["collected", media_type, "#{hash_base64}.#{extension}"])
16 | 
17 |     image_info_type =
18 |       case media_type do
19 |         "image/png" -> :png
20 |       end
21 | 
22 |     {_, width, height, _} = ExImageInfo.info(data, image_info_type)
23 | 
24 |     result = %{
25 |       source_path: path,
26 |       static_path: static_path,
27 |       width: width,
28 |       height: height
29 |     }
30 | 
31 |     Macro.escape(result)
32 |   end
33 | end
34 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:accessibility_first) %>">
2 |   <%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/_nav.html.eex:
--------------------------------------------------------------------------------
 1 | <nav>
 2 |   <p class="px-2 pb-6 mb-6 text-5xl text-violet-200 border-b-4 border-current"><%= "Accessibility-First" %></p>
 3 |   <ul class="text-xl" data-links="block p-2 current-page-bold">
 4 |     <li><%= link("Why?", to: '/accessibility-first') %>
 5 |     <li><%= link("Navigation", to: '/accessibility-first/navigation') %>
 6 |     <li><%= link("Landmarks", to: '/accessibility-first/landmarks') %>
 7 |     <li><%= link("Content", to: '/accessibility-first/content') %>
 8 |     <li><%= link("Forms", to: '/accessibility-first/forms') %>
 9 |     <li><%= link("All Roles", to: '/accessibility-first/roles') %>
10 |     <li><%= link("Accessible Name", to: '/accessibility-first/accessible-name') %>
11 |     <li><%= link("Testing with Playwright", to: '/accessibility-first/playwright') %>
12 |     <li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
13 |     <li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
14 |   </ul>
15 | </nav>
16 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/_top.html.eex:
--------------------------------------------------------------------------------
 1 | <div class="mx-auto max-w-4xl">
 2 |   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
 3 |     <span class="mr-1 text-5xl">🔊🥇</span>
 4 |     <span><%= "Accessibility-First" %></span>
 5 |   </h1>
 6 |   <nav class="pt-6 pb-4">
 7 |     <ul y-y x-x="md" class="flex-wrap gap-4 text-xl font-bold" data-links="p-3">
 8 |       <li><%= link("Why?", to: '/accessibility-first') %>
 9 |       <li><%= link("Navigation", to: '/accessibility-first/navigation') %>
10 |       <li><%= link("Landmarks", to: '/accessibility-first/landmarks') %>
11 |       <li><%= link("Content", to: '/accessibility-first/content') %>
12 |       <li><%= link("Forms", to: '/accessibility-first/forms') %>
13 |       <li><%= link("All Roles", to: '/accessibility-first/roles') %>
14 |       <li><%= link("Accessible Name", to: '/accessibility-first/accessible-name') %>
15 |       <li><%= link("Testing with Playwright", to: '/accessibility-first/playwright') %>
16 |       <li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
17 |       <li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
18 |     </ul>
19 |   </nav>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/accessibility-tree-snapshot-failure-diff.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/accessibility-tree-snapshot-failure-diff.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/accessible-name.html.md:
--------------------------------------------------------------------------------
 1 | # Accessible names
 2 | 
 3 | Accessible elements don’t just have a role. They can have a ‘name’ too, which helps the user tell elements with the same role apart.
 4 | 
 5 | These names are provided by HTML in a number of ways:
 6 | 
 7 | - `<label>` relationship
 8 | - `aria-labelledby` attribute
 9 | - `aria-label` attribute
10 | - The displayed value
11 | - The text content for the [following roles](https://www.w3.org/TR/wai-aria/#namefromcontent):
12 |     - button
13 |     - cell
14 |     - checkbox
15 |     - columnheader
16 |     - gridcell
17 |     - heading
18 |     - link
19 |     - menuitem
20 |     - menuitemcheckbox
21 |     - menuitemradio
22 |     - option
23 |     - radio
24 |     - row
25 |     - rowgroup
26 |     - rowheader
27 |     - switch
28 |     - tab
29 |     - tooltip
30 |     - tree
31 |     - treeitem
32 | 
33 | 
34 | The algorithm is specified in [W3C’s Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te).
35 | 
36 | ### Examples of accessible names
37 | 
38 | ```html
39 | <button>Save</button>
40 | ```
41 | 
42 | ```html
43 | <label>Email: <input type=email></label>
44 | ```
45 | 
46 | ```html
47 | <label><input type=checkbox> Receive email alerts</label>
48 | ```
49 | 
50 | ```html
51 | <fieldset>
52 |   <legend>Alert settings</legend>
53 |   <label><input type=checkbox> Receive push notifications</label>
54 |   <label><input type=checkbox> Receive email alerts</label>
55 |   <label><input type=checkbox> Receive text messages</label>
56 | </fieldset>
57 | ```
58 | 
59 | ```html
60 | <article aria-labelledby="faq-heading">
61 |   <h2 id="faq-heading">Frequently Asked Questions</h2>
62 | </article>
63 | ```
64 | 
65 | ```html
66 | <nav aria-label="Primary">
67 |   …
68 | </nav>
69 | ```
70 | 
71 | ```html
72 | <svg role="img">
73 |   <title>New document</title>
74 |   …
75 | </svg>
76 | ```
77 | 
78 | You could query these elements using Testing Library:
79 | 
80 | ```ts
81 | getByRole('button', { name: 'Save' });
82 | getByRole('textbox', { name: /Email/ });
83 | getByRole('checkbox', { name: /Receive email alerts/i });
84 | getByRole('fieldset', { name: /Alert settings/i });
85 | getByRole('article', { name: /Frequently asked questions/i });
86 | getByRole('navigation', { name: 'Primary' });
87 | getByRole('img', { name: 'New document' });
88 | ```
89 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/github-banner-search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/github-banner-search.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/github-banner-signed-in.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/github-banner-signed-in.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/github-contentinfo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/github-contentinfo.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/github-new-repo-form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/github-new-repo-form.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/github-two-navs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/github-two-navs.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/google-homepage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/google-homepage.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/index-old.html.eex:
--------------------------------------------------------------------------------
 1 | <div class="text-white" style="<%= header_styles() %>">
 2 |   <header class="mx-auto max-w-4xl">
 3 |     <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
 4 |       <div class="row">
 5 |         <span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
 6 |       </div>
 7 |       <span><%= "Accessibility-First Development" %></span>
 8 |     </h1>
 9 |     <nav class="pt-6 pb-4">
10 |       <ul class="list-none row font-bold" data-links="p-3">
11 |         <li><%= link("Landmarks", to: '/accessibility-first/widgets-cheatsheet') %>
12 |         <li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
13 |         <li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
14 |         <li><%= link("Forms", to: '/accessibility-first/properties-cheatsheet') %>
15 |         <li><%= link("Keyboard Navigation", to: '/accessibility-first/properties-cheatsheet') %>
16 |       </ul>
17 |     </nav>
18 |   </header>
19 | </div>
20 | 
21 | <%= render view_module(@conn), "_header.html" %>
22 | 
23 | <div class="bg-white">
24 |   <%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>
25 |     <%= topic_article(title: "Landmarks", link: Routes.accessibility_first_path(@conn, :show, "landmarks")) do %>
26 |       <ul>
27 |         <li><%= link("Orienting web visitors using landmarks", to: "#") %>
28 |       </ul>
29 |       <p>Define what your elements are using a clear standard. Let your users quickly jump around the key parts of your page (better UX), and leverage those in your tests (better DX).</p>
30 |     <% end %>
31 |     <%= topic_article(title: "Widgets, Attributes & States", link: Routes.accessibility_first_path(@conn, :show, "properties-cheatsheet")) do %>
32 |       <p>Learn the standards for interactive widgets usable by touch, mouse, and keyboard. Let users know which page is current or which sub-control is selected.</p>
33 |     <% end %>
34 |     <%= topic_article(title: "BDD with Jest & React Testing Library") do %>
35 |       <p>Learn a consistent pattern to write your component tests in Jest. Use @testing-library to find elements in a realistic way. Describe your contexts and scenarios with plain language.</p>
36 |     <% end %>
37 |     <%= topic_article(title: "Atomic Design") do %>
38 |       <p>Organize your components into distict folders. Break them up at the right level, then compose them. Test them differently. Incorporate ARIA roles into the atomic design approach.</p>
39 |     <% end %>
40 |   <% end %>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/index.html.heex:
--------------------------------------------------------------------------------
 1 | <enhanced-navigation class="flex flex-col" data-add-aria-current-page data-add-article-navigation>
 2 |   <div
 3 |     class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8"
 4 |     style="--max-width: 46em"
 5 |   >
 6 |     <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
 7 |       <%= render(view_module(@conn), "_nav.html", conn: @conn) %>
 8 |     </div>
 9 |     <article class="text-white bg-gray-900 px-4 md:px-0" id="main-article">
10 |       <div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
11 |         <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
12 |       </div>
13 |     </article>
14 |     <aside class="sticky top-0 h-screen hidden xl:block" hidden>
15 |       <nav class="pt-16 text-gray-200">
16 |         <div class="pl-5 pb-2 font-bold uppercase text-white">On this page</div>
17 |         <slot name="article-navigation-items">
18 |           <template>
19 |             <ul class="list-none">
20 |               <li class="border-l-4 border-gray-800 hover:border-blue-400"></li>
21 |             </ul>
22 |             <a href="#" class="inline-flex py-1 pl-4 hover:text-blue-400"></a>
23 |           </template>
24 |         </slot>
25 |       </nav>
26 |     </aside>
27 |   </div>
28 | </enhanced-navigation>
29 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/intro.html.md:
--------------------------------------------------------------------------------
 1 | # Why Consider Accessibility First?
 2 | 
 3 | A mobile-first approach ensures that a phone experience, which many users now prefer and use regularly, is prioritised and is great. This approach helps combat the natural tendency for the mobile experience to be left behind.
 4 | 
 5 | Similarly, an accessibility-first experience ensures that the experience using screen readers and other assistive tech is prioritised and is great.
 6 | 
 7 | But the benefit goes further, as developers can use the accessibility affordances to write automated tests. And if what they make is accessible immediately, it provides predictable ways to write the tests upfront. This leads to quicker development and greater reliability.
 8 | 
 9 | ## Consider your HTML, no matter your framework
10 | 
11 | HTML is not an after-thought, it’s not a ‘solved problem’, it’s not something you learn once and never have to study again. Especially in the world of web apps, it’s worth surveying the capabilities of today’s HTML and the affordances it can bring to every user.
12 | 
13 | ## Accessibility Checklist for HTML
14 | 
15 | 1. [**Links vs Buttons:**](/accessibility-first/navigation) use links for navigating and buttons for actions.
16 | 1. [**Landmarks:**](/accessibility-first/landmarks) provide familiar touch points that users can jump to.
17 | 2. [**Semantic Content:**](/accessibility-first/content) add meaningful structure to your content.
18 | 3. [**Usable Forms:**](/accessibility-first/forms) ensure form controls are labelled and have the correct roles.
19 | 4. **Widgets:** allow everyone to use your controls.
20 | 5. [**Accessible Names:**](/accessibility-first/accessible-name) give every meaningful element a clear and distinct name.
21 | 5. [**Properties:**](/accessibility-first/properties-cheatsheet) hide or mark elements using accessibility attributes.
22 | 
23 | ```ts
24 | getByRole('link', { name: 'About' });
25 | 
26 | getByRole('button', { name: 'Sign up to newsletter' });
27 | ```
28 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/landmarks-extension.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/landmarks-extension.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/mozilla-contentinfo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/mozilla-contentinfo.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/stripe-nav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/stripe-nav.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/accessibility_first/twitter-profile-vertical-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/accessibility_first/twitter-profile-vertical-banner.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:cheatsheets) %>">
2 |   <%= render ComponentsGuideWeb.CheatsheetsView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/_nav.html.eex:
--------------------------------------------------------------------------------
1 | <nav class="pt-6 pb-4">
2 |   <ul y-y x-x=md class="text-xl font-bold" data-links="p-3">
3 |     <li><%= link("Error Messages", to: '/cheatsheets/error-messages') %>
4 |     <li><%= link("Cloud Limits", to: '/cheatsheets/cloud-limits') %>
5 |     <li><%= link("RxJS", to: '/cheatsheets/rxjs') %>
6 |   </ul>
7 | </nav>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/_top.html.eex:
--------------------------------------------------------------------------------
1 | <div class="mx-auto max-w-4xl">
2 |   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
3 |     <span class="mr-1 text-5xl">🐝💨</span>
4 |     <span><%= "Cheatsheets" %></span>
5 |   </h1>
6 |   <%= render ComponentsGuideWeb.CheatsheetsView, "_nav.html" %>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/astro.html.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | a = 4 + 3
 3 | class = "italic"
 4 | ---
 5 | 
 6 | # Astro
 7 | 
 8 | <p class={class}><%= a %>?</p>
 9 | <p class={class}><%= class %></p>
10 | 
11 | ```astro
12 | ---
13 | title: When WebAssembly is faster
14 | description: The overhead of the network vs the overhead of WebAssembly
15 | layout: ../../layouts/MainLayout.astro
16 | ---
17 | ```
18 | 
19 | <script defer src="https://unpkg.com/shiki@0.14.3/dist/index.unpkg.iife.js"></script>
20 | <script type="module">
21 | shiki
22 |     .getHighlighter({
23 |       theme: 'nord'
24 |     })
25 |     .then(highlighter => {
26 |       for (const astroCodeEl of document.body.querySelectorAll('code.language-astro')) {
27 |         const html = highlighter.codeToHtml(astroCodeEl.textContent, { lang: 'astro' });
28 |         astroCodeEl.innerHTML = html;
29 |       }
30 |     });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/cloud-limits.html.md:
--------------------------------------------------------------------------------
 1 | # Cloud Limits
 2 | 
 3 | ## Storage
 4 | 
 5 | <svg viewbox="0 0 270 160" width="540" height="360" class="border border-gray-800 rounded-lg">
 6 |   <title>Cloud Storage Limits</title>
 7 |   <g fill="#eb4859">
 8 |     <circle cx="50" cy="20" r="<%= 10.0 * :math.sqrt(0.065 / :math.pi()) %>" />
 9 |     <circle cx="50" cy="42" r="<%= 10.0 * :math.sqrt(0.4 / :math.pi()) %>" />
10 |     <circle cx="50" cy="65" r="<%= 10.0 * :math.sqrt(1.048 / :math.pi()) %>" />
11 |     <circle cx="50" cy="115" r="<%= 10.0 * :math.sqrt(26.12 / :math.pi()) %>" />
12 |   </g>
13 |   <g fill="currentColor" style="font-size: 10px; alignment-baseline: central;">
14 |     <text x="60" y="23">TCP packet: 64KiB</text>
15 |     <text x="63" y="45">DynamoDB attribute: 400KB</text>
16 |     <text x="66" y="68">GCP Datastore entity: 1MiB</text>
17 |     <text x="90" y="118">Cloudflare KV entry: 25MiB</text>
18 |   </g>
19 | </svg>
20 | 
21 | - TCP packet: 65,535 bytes (64KiB − 1 byte)
22 | - Max size of DynamoDB attribute key & value: 400KB
23 | - Max size of GCP Datastore entity: 1,048,572 bytes (1MiB − 4 bytes)
24 | - Max size of Cloudflare KV entry: 25MiB
25 | - Max size of Gmail attachment: 25MiB
26 | - Max size of S3 Object: 5TB
27 |   - Max size of single PUT: 5GB
28 |   - Multipart upload part size: 5MiB to 5GiB
29 |   - S3 Metadata: 2KB
30 | 
31 | ----
32 | 
33 | <svg viewbox="0 0 20 10" width="500" height="250">
34 |   <g fill="#d1272e">
35 |     <circle cx="2" cy="4" r="<%= :math.sqrt(0.065 / :math.pi()) %>" />
36 |     <circle cx="4" cy="4" r="<%= :math.sqrt(0.4 / :math.pi()) %>" />
37 |     <circle cx="7" cy="4" r="<%= :math.sqrt(1.048 / :math.pi()) %>" />
38 |     <circle cx="13" cy="4" r="<%= :math.sqrt(26.12 / :math.pi()) %>" />
39 |   </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/error-messages.html.md:
--------------------------------------------------------------------------------
 1 | # Great Error Messages
 2 | 
 3 | ## Network issues
 4 | 
 5 | <collected-figure image="vscode-marketplace-offline">
 6 |   When I search in Visual Studio Code’s Marketplace and it was unable to fetch any data, we get an offline error message: “Unable to search the Marketplace when offline, please check your network connection.”
 7 | </collected-figure>
 8 | 
 9 | ## Validation
10 | 
11 | <collected-figure image="github-org-name-unavailable">
12 |   Organization name is not available
13 | </collected-figure>
14 | 
15 | <collected-figure image="github-change-org-name-to-blank">
16 |   Organization name can't be blank, Organization name is too short (minimum is 1 character), and Organization name may only contain alphanumeric characters or single hyphens, and cannot begin or end with a hyphen
17 | </collected-figure>
18 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/github-change-org-name-to-blank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/cheatsheets/github-change-org-name-to-blank.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/github-org-name-unavailable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/cheatsheets/github-org-name-unavailable.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/index.html.eex:
--------------------------------------------------------------------------------
 1 | <%= render view_module(@conn), "_header.html" %>
 2 | 
 3 | <article>
 4 |   <div class="text-white bg-gray-900">
 5 |     <div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
 6 |       <%= render(view_module(@conn), @article <> ".html", assigns) %>
 7 |     </div>
 8 |   </div>
 9 | </article>
10 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/intro.html.heex:
--------------------------------------------------------------------------------
 1 | <p>
 2 |   Various cheatsheets will be added over time. If you have ideas for cheatsheets, please submit them.
 3 | </p>
 4 | 
 5 | <h2>Elixir</h2>
 6 | <h3>Add numbers</h3>
 7 | <.code_block lang="elixir">
 8 |   5 + 11
 9 | </.code_block>
10 | <.code_block lang="elixir" code={(5 + 11) |> inspect()} />
11 | 
12 | <hr />
13 | 
14 | <h2>WebAssembly + Wasmtime running via Rust</h2>
15 | <.code_block lang="wasm" code={@wasm_source} />
16 | <.code_block lang="elixir" code={OrbWasmtime.Wasm.call(@wasm_source, "answer") |> inspect()} />
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/cheatsheets/vscode-marketplace-offline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/cheatsheets/vscode-marketplace-offline.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/color/index.html.eex:
--------------------------------------------------------------------------------
1 | <h1>Color</h1>
2 | 
3 | <%= Phoenix.Component.live_render(@conn, ComponentsGuideWeb.ColorLive, session: %{}) %>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/composable_systems/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:composable_systems) %>">
2 |   <%= render ComponentsGuideWeb.ComposableSystemsView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/composable_systems/_nav.html.eex:
--------------------------------------------------------------------------------
 1 | <nav class="pt-6 pb-4">
 2 |   <ul y-y x-x=md class="flex-wrap gap-4 text-xl font-bold" data-links="p-3">
 3 |     <li><%= link("Why?", to: '/composable-systems') %>
 4 |     <li><%= link("Opinionated vs Flexible", to: '/composable-systems/opinionated-vs-flexible') %>
 5 |     <li><%= link("Desirable Properties", to: '/composable-systems/desirable-properties') %>
 6 |     <li hidden><%= link("Single Responsibility", to: '/composable-systems/roles') %>
 7 |     <li hidden><%= link("Deterministic", to: '/composable-systems/roles') %>
 8 |   </ul>
 9 | </nav>
10 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/composable_systems/_top.html.eex:
--------------------------------------------------------------------------------
1 | <div class="mx-auto max-w-4xl">
2 |   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
3 |     <span class="mr-1 text-5xl">🖇🍀</span>
4 |     <span><%= "Composable Systems" %></span>
5 |   </h1>
6 |   <%= render ComponentsGuideWeb.ComposableSystemsView, "_nav.html" %>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/composable_systems/index.html.eex:
--------------------------------------------------------------------------------
1 | <%= render view_module(@conn), "_header.html" %>
2 | 
3 | <article>
4 |   <div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
5 |     <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
6 |   </div>
7 | </article>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/composable_systems/intro.html.md:
--------------------------------------------------------------------------------
1 | # Why Think in Composable Systems?
2 | 
3 | - Less to explain at once
4 | - Reuse more
5 | - Composable encourages simplicity
6 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/concepts/index.html.eex:
--------------------------------------------------------------------------------
 1 | <header class="text-white bg-purple-600" style="background: <%= header_background() %>;">
 2 |   <div class="container px-6 pt-12 pb-12">
 3 |     <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
 4 |       <%= "Learn the concepts that are essential, no matter your stack." %>
 5 |     </h1>
 6 |     <p class="mt-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
 7 |       <%= "Compare robust techniques across different technologies." %>
 8 |     </p>
 9 |   </div>
10 | </header>
11 | 
12 | <div class="bg-white">
13 |   <section aria-label="Concepts" class="container pt-8 pb-16 text-2xl">
14 |     <%= topic_article title: "Naming", link: "/naming" do %>
15 |       <ul class="list-none">
16 |         <li>Semantics vs presentation
17 |         <li>Sharing a design language
18 |         <li>Structuring modules and files
19 |         <li>Better documentation with clearer concepts
20 |       </ul>
21 |     <% end %>
22 | 
23 |     <%= topic_article title: "Testing", link: "/testing" do %>
24 |       <ul class="list-none">
25 |         <li>Isolated unit tests
26 |         <li>Integration tests
27 |         <li>Acceptance tests
28 |         <li>Accessibility-first tests
29 |       </ul>
30 |     <% end %>
31 | 
32 |     <%= topic_article title: "Accessibility-First", link: Routes.accessibility_first_path(@conn, :index) do %>
33 |       <ul class="list-none">
34 |         <li>In the browser
35 |         <li>On iOS & Mac
36 |         <li>HTML semantics
37 |       </ul>
38 |     <% end %>
39 | 
40 |     <%= topic_article title: "Performance", link: "/performance" do %>
41 |       <ul class="list-none">
42 |         <li>Inform first by measuring data
43 |         <li>Fast loading as a priority
44 |         <li>Using assets and performance budgets
45 |         <li>Reducing bloat and waste
46 |       </ul>
47 |     <% end %>
48 |   </section>
49 | </div>
50 | 
51 | <section class="text-white bg-purple-600" style="background: <%= header_background() %>;">
52 |   <div aria-label="Submit" class="container px-6 pt-12 pb-12 text-center">
53 |     <input class="mb-4 md:mr-2 block w-full md:inline-block md:w-2/5 p-2 text-2xl leading-tight text-black rounded-lg md:mb-0 border-4 border-white focus:border-purple-300">
54 |     <button href="/signin/github" class="inline-block px-6 py-3 text-2xl leading-tight font-bold text-white bg-gray-900 rounded-lg" style="background: rgba(0,0,0,0.5);">
55 |       <%= "Suggest Link" %>
56 |     </button>
57 |   </div>
58 | </section>
59 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/events/events-design-system.html.md:
--------------------------------------------------------------------------------
 1 | # Events Design System
 2 | 
 3 | You will learn:
 4 | 
 5 | - What different events there are.
 6 | - The right element for each event.
 7 | - The correct HTML for functionality and accessibility.
 8 | 
 9 | ## Link
10 | 
11 | ```html
12 | <a href="/about">About me</a>
13 | ```
14 | 
15 | - Anti-pattern: adding a navigation event handler to another element like `<button onClick={() => router.goTo(…)}>`
16 | 
17 | ## Click
18 | 
19 | ```html
20 | <button>Add to favorites</button>
21 | ```
22 | 
23 | - Anti-pattern: adding a click handler to an inert element like `<div>`.
24 | - Anti-pattern: adding a click handler to a link like `<a href="#" onClick={…}>`.
25 | 
26 | ## Input
27 | 
28 | ```html
29 | <input type="text" />
30 | ```
31 | 
32 | ```html
33 | <textarea></textarea>
34 | ```
35 | 
36 | ## Choose
37 | 
38 | ```html
39 | <label for="color-scheme-select">Choose a color scheme</label>
40 | <select id="color-scheme-select">
41 |   <option value="dark">Dark</option>
42 |   <option value="light">Light</option>
43 |   <option value="system">System</option>
44 | </select>
45 | ```
46 | 
47 | ```html
48 | <fieldset>
49 |   <legend>Choose a color scheme</legend>
50 |   <label for="radio-dark"><input type="radio" id="radio-dark" value="dark" /> Dark</label>
51 |   <label for="radio-light"><input type="radio" id="radio-light" value="light" /> Light</label>
52 |   <label for="radio-system"><input type="radio" id="radio-system" value="system" /> System</label>
53 | </fieldset>
54 | ```
55 | 
56 | ## Search
57 | 
58 | ```html
59 | <input type="searchbox" />
60 | ```
61 | 
62 | ## Autocomplete
63 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/fake_search/index.html.eex:
--------------------------------------------------------------------------------
1 | <h1>Search</h1>
2 | 
3 | <%= Phoenix.Component.live_render(@conn, ComponentsGuideWeb.FakeSearchLive, session: %{}) %>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/graphics/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header style="<%= header_styles() %>">
2 |   <%= render ComponentsGuideWeb.GraphicsView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/graphics/_nav.html.eex:
--------------------------------------------------------------------------------
1 | <nav class="pt-6 pb-4">
2 |   <ul y-y x-x=md class="text-lg font-bold text-shadow" data-links="p-3">
3 |     <li><%= link("Intro", to: '/graphics') %>
4 |     <li><%= link("Postage Stamp", to: '/graphics/postage-stamp') %>
5 |   </ul>
6 | </nav>
7 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/graphics/_top.html.eex:
--------------------------------------------------------------------------------
1 | <div class="mx-auto max-w-4xl text-white">
2 |   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
3 |     <span class="mr-1 text-5xl">🌟🍭</span>
4 |     <span><%= "Graphics" %></span>
5 |   </h1>
6 |   <%= render ComponentsGuideWeb.GraphicsView, "_nav.html" %>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/graphics/index.html.eex:
--------------------------------------------------------------------------------
 1 | <%= render view_module(@conn), "_header.html" %>
 2 | 
 3 | <article>
 4 |   <div class="text-white bg-gray-900">
 5 |     <div class="content max-w-4xl mx-auto py-8 text-xl" style="--link-decoration: underline;">
 6 |       <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
 7 |     </div>
 8 |   </div>
 9 | </article>
10 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/graphics/postage-stamp.html.md:
--------------------------------------------------------------------------------
1 | # Postage Stamp
2 | 
3 | <live-render>
4 | ComponentsGuideWeb.Graphics.Live.PostageStamp
5 | </live-render>
6 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/integrations/convertkit_form.html.eex:
--------------------------------------------------------------------------------
1 | <script async data-uid="cdeda516d7" src="https://components-guide.ck.page/cdeda516d7/index.js"></script>
2 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/layout/_banner.html.heex:
--------------------------------------------------------------------------------
 1 | <header role="banner" class="bg-black text-white/90">
 2 |   <nav
 3 |     role="navigation"
 4 |     aria-label="Primary"
 5 |     class="w-full flex items-center lg:px-2 text-base text-center"
 6 |   >
 7 |     <details class="relative">
 8 |       <summary class="block w-48 text-left pl-6 text-base uppercase font-bold tracking-wider cursor-pointer">
 9 |         Navigate to
10 |       </summary>
11 |       <details-menu
12 |         role="menu"
13 |         class="absolute z-[var(--z-menu)] top-full left-0 flex flex-col py-2 text-left text-lg font-bold whitespace-nowrap text-purple-800 bg-purple-100 rounded ring-2 ring-purple-400 backdrop-blur-xl"
14 |       >
15 |         <%= link("React & TypeScript",
16 |           to: "/react+typescript",
17 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
18 |         ) %>
19 |         <%= link("Search Types",
20 |           to: "/research/dom-types",
21 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
22 |         ) %>
23 |         <%= link("React Playground",
24 |           to: "/react-playground",
25 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
26 |         ) %>
27 |         <%= link("Accessibility First",
28 |           to: "/accessibility-first",
29 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
30 |         ) %>
31 |         <%= link("Web Standards",
32 |           to: "/web-standards",
33 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
34 |         ) %>
35 |         <%= link("Composable Systems",
36 |           to: "/composable-systems",
37 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
38 |         ) %>
39 |         <%= link("Developer Calendar",
40 |           to: "/calendar",
41 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
42 |         ) %>
43 |         <%= link("WebAssembly",
44 |           to: "/wasm",
45 |           class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900"
46 |         ) %>
47 |       </details-menu>
48 |     </details>
49 | 
50 |     <hr class="mx-auto" />
51 | 
52 |     <a
53 |       href="/"
54 |       class="text-center block px-3 py-2 md:py-4 text-sm md:text-lg font-bold italic uppercase tracking-wider hover:bg-gray-800"
55 |     >
56 |       <span>Components.Guide</span>
57 |     </a>
58 | 
59 |     <hr class="mx-auto" />
60 | 
61 |     <div class="w-48 pr-6">
62 |       <.search_form />
63 |     </div>
64 |   </nav>
65 | </header>
66 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/layout/_contentinfo.html.eex:
--------------------------------------------------------------------------------
 1 | <footer role="contentinfo" class="container pt-16 pb-6 text-gray-500 border-t border-gray-800 tracking-wide">
 2 |   <div hidden class="text-center text-xl text-white" data-links="underline-on-hover">
 3 |     Follow <a href="https://twitter.com/ComponentsGuide">@ComponentsGuide</a> on Twitter for the latest articles.
 4 |   </div>
 5 |   <div class="text-center text-xl text-white" data-links="underline-on-hover">
 6 |     Follow <a href="https://twitter.com/RoyalIcing">@RoyalIcing</a> on Twitter for the latest.
 7 |   </div>
 8 | 
 9 |   <div class="X pt-8 pb-12">
10 |     <details>
11 |       <summary class="text-xl text-white text-center">Subscribe to the Newsletter</summary>
12 |       <div class="mt-2">
13 |         <%= render ComponentsGuideWeb.IntegrationsView, "convertkit_form.html", [] %>
14 |       </div>
15 |     </details>
16 |   </div>
17 | 
18 |   <nav aria-label="Links">
19 |     <ul class="list-none text-xs mt-4 leading-loose text-gray-500">
20 |       <li>Copyright © 2023 Patrick Smith
21 |       <li>
22 |         <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
23 |           <img alt="Creative Commons License" style="opacity: 0.5" src="https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg" class="inline-block">
24 |         </a>
25 |         <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Components.Guide</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://twitter.com/concreteniche" property="cc:attributionName" rel="cc:attributionURL">Patrick Smith</a> is <a href="https://github.com/ComponentsTV/components_guide/blob/master/LICENSE">licensed</a> under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
26 |       <li class="inline-block"><a href="https://github.com/ComponentsTV/components_guide" class="pr-2">View source on GitHub</a>
27 |       <li class="inline-block"><a href="https://twitter.com/ComponentsGuide" class="px-2">Twitter</a>
28 |       <li class="inline-block"><a href="https://app.usefathom.com/share/lyhmlvid/components.guide" class="px-2">View analytics</a>
29 |     </ul>
30 |   </nav>
31 | </footer>
32 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/layout/app.html.heex:
--------------------------------------------------------------------------------
1 | <main class={assigns[:main_class] || ""}>
2 |   <p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
3 |   <p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
4 |   <%= @inner_content %>
5 | </main>
6 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/layout/live.html.heex:
--------------------------------------------------------------------------------
 1 | <.flash flash={@flash} kind={:info} />
 2 | <.flash flash={@flash} kind={:error} />
 3 | <.connection_status>
 4 |   Re-establishing connection...
 5 | </.connection_status>
 6 | 
 7 | <main role="main">
 8 |   <%= @inner_content %>
 9 | </main>
10 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:react_typescript) %>">
2 |   <%= render ComponentsGuideWeb.ReactTypescriptView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/_headline.html.heex:
--------------------------------------------------------------------------------
 1 | <h2 y-y x-x="md" class="pt-8 pb-8 row space-x-4 text-4xl text-center font-bold leading-tight">
 2 |   <div class="row">
 3 |     <img
 4 |       class="inline-block mr-2"
 5 |       src="https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg"
 6 |       alt="React logo"
 7 |       width="48"
 8 |       height="48"
 9 |     />
10 |     <span class="mr-2 text-3xl">❤️</span>
11 |     <img
12 |       class="inline-block mr-2"
13 |       src="https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg"
14 |       alt="TypeScript logo"
15 |       width="48"
16 |       height="48"
17 |     />
18 |   </div>
19 |   <span><%= "React & TypeScript Guide" %></span>
20 | </h2>
21 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/_nav.html.heex:
--------------------------------------------------------------------------------
 1 | <nav>
 2 |   <p class="px-2 pb-6 mb-6 text-5xl text-blue-200 border-b-4 border-current">
 3 |     <%= "React & TypeScript Guide" %>
 4 |   </p>
 5 |   <ul class="text-xl" data-links="block p-2 current-page-bold">
 6 |     <li><%= link(@conn, "Fundamentals", to: "/react+typescript") %></li>
 7 |     <li><%= link(@conn, "Testing", to: "/react+typescript/testing") %></li>
 8 |     <li><%= link(@conn, "Goodbye useEffect", to: "/react+typescript/goodbye-use-effect") %></li>
 9 |     <li><%= link(@conn, "Lifecycle", to: "/react+typescript/lifecycle") %></li>
10 |     <li><%= link(@conn, "Reducer Patterns", to: "/react+typescript/reducer-patterns") %></li>
11 |     <li><%= link(@conn, "Form Reducers", to: "/react+typescript/form-reducers") %></li>
12 |     <li>
13 |       <%= link(@conn, "Zero Hook Dependencies", to: "/react+typescript/zero-hook-dependencies") %>
14 |     </li>
15 |     <li>
16 |       <%= link(@conn, "Hooks in a Concurrent World",
17 |         to: "/react+typescript/hooks-concurrent-world"
18 |       ) %>
19 |     </li>
20 |     <li hidden><%= link(@conn, "Event Handlers", to: "/react+typescript/event-handlers") %></li>
21 |     <li><%= link(@conn, "Logical Clocks", to: "/react+typescript/logical-clocks") %></li>
22 |     <li><%= link(@conn, "Forms", to: "/react+typescript/forms") %></li>
23 |     <li><%= link(@conn, "Playground", to: "/react-playground") %></li>
24 |   </ul>
25 | </nav>
26 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/_top.html.eex:
--------------------------------------------------------------------------------
 1 | <div class="mx-auto max-w-4xl">
 2 |   <h2 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
 3 |     <div class="row">
 4 |       <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
 5 |       <span class="mr-2 text-3xl">❤️</span>
 6 |       <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
 7 |     </div>
 8 |     <span><%= "React & TypeScript Guide" %></span>
 9 |   </h2>
10 |   <nav class="pt-6 pb-4">
11 |     <ul y-y x-x=md class="flex-wrap gap-4 text-xl list-none font-bold gap-y-6" data-links="p-3">
12 |       <li><%= link("Fundamentals", to: "/react+typescript") %>
13 |       <li><%= link("Testing", to: "/react+typescript/testing") %>
14 |       <li><%= link("Goodbye useEffect", to: "/react+typescript/goodbye-use-effect") %>
15 |       <li><%= link("Reducer Patterns", to: "/react+typescript/reducer-patterns") %>
16 |       <li><%= link("Zero Hook Dependencies", to: "/react+typescript/zero-hook-dependencies") %>
17 |       <li><%= link("Hooks in a Concurrent World", to: "/react+typescript/hooks-concurrent-world") %>
18 |       <li hidden><%= link("Event Handlers", to: "/react+typescript/event-handlers") %>
19 |       <li><%= link("Logical Clocks", to: "/react+typescript/logical-clocks") %>
20 |       <li><%= link("Forms", to: "/react+typescript/forms") %>
21 |       <li><%= link("Playground", to: "/react-playground") %>
22 |     </ul>
23 |   </nav>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/event-handlers.html.md:
--------------------------------------------------------------------------------
 1 | # React Event Handlers
 2 | 
 3 | ## The Problem
 4 | 
 5 | We have a link that is associated with a campaign, and when someone clicks the link we want to record that the campaign received some interest.
 6 | 
 7 | Here’s how we might write that:
 8 | 
 9 | ```tsx
10 | type AuthStatus = 'SignedIn' | 'SignedOut';
11 | 
12 | function trackCampaignClick(campaign: string, authStatus: AuthStatus) {
13 |   // Probably make some sort of HTTP request…
14 | }
15 | 
16 | function TwitterLink({ campaign }: { campaign: string }) {
17 |   const authStatus = useAuthStatus(); // Reads from context.
18 | 
19 |   return <a
20 |     href="https://twitter.com/royalicing"
21 |     onClick={() => {
22 |       // When a click happens, we record two things:
23 |       // the current campaign, and whether the user is signed in or not.
24 |       trackCampaignClick(campaign, authStatus);
25 |     }}
26 |   >
27 |     Follow me on Twitter
28 |   </a>;
29 | }
30 | ```
31 | 
32 | However, even for our simple link, there’s an issue. What happens if either the campaign or auth status changes?
33 | 
34 | We receive `campaign` as a prop — this could change at any time as it is our parent providing it, and we don’t where this value comes from and how often it changes. (This example of a campaign is admittedly unlikely to change often)
35 | 
36 | And `useAuthStatus()` is also out of control. We don’t know when the user signs in or out.
37 | 
38 | So in order for our `trackCampaignClick(campaign, authStatus)` call to be accurate, we need to keep these values up to date. There’s no much point in recording metrics if they use stale data!
39 | 
40 | ## Solution 1: Create a new Event handler when its deps change
41 | 
42 | ```js
43 | function TwitterLink({ campaign }: { campaign: string }) {
44 |   const authStatus = useAuthStatus(); // Reads from context.
45 | 
46 |   const onClick = useCallback(() => {
47 |     // When a click happens, we record two things:
48 |     // the current campaign, and whether the user is signed in or not.
49 |     trackCampaignClick(campaign, authStatus);
50 |   }, [campaign, authStatus]);
51 | 
52 |   return <a href="https://twitter.com/royalicing" onClick={onClick}>
53 |     Follow me on Twitter
54 |   </a>;
55 | }
56 | ```
57 | 
58 | ## Solution 2: Store changing state in a ref
59 | 
60 | ## Solution 3: Put State in the DOM and read it from the Event handler
61 | 
62 | ## Solution 4: Don’t store the state in React
63 | 
64 | ## Solution 5: Put a unique key in the DOM and read state from a shared store
65 | 
66 | ----
67 | 
68 | An example implementation of `trackCampaignClick()`:
69 | 
70 | ```js
71 | function trackCampaignClick(campaign) {
72 |   navigator.sendBeacon('/analytics', new URLSearchParams({ campaign }));
73 | }
74 | ```
75 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/goodbye-use-effect.html.md:
--------------------------------------------------------------------------------
 1 | # Goodbye `useEffect`
 2 | 
 3 | ## Media queries
 4 | 
 5 | If you `useState` with `useEffect` to subscribe to events you have to [worry about dependency arrays:](https://fireship.io/snippets/use-media-query-hook/)
 6 | 
 7 | ```tsx
 8 | 
 9 | import { useState, useEffect } from "react";
10 | 
11 | export function useMediaQuery(query: string) {
12 |   const [matches, setMatches] = useState(false);
13 | 
14 |   useEffect(() => {
15 |     const media = window.matchMedia(query);
16 |     if (media.matches !== matches) {
17 |       setMatches(media.matches);
18 |     }
19 |     const listener = () => setMatches(media.matches);
20 |     window.addEventListener("resize", listener);
21 |     return () => window.removeEventListener("resize", listener);
22 |   }, [matches, query]);
23 | 
24 |   return matches;
25 | }
26 | ```
27 | 
28 | Instead try `useSyncExternalStore`. Your breakpoints are very likely constant, so create custom hooks for each one.
29 | 
30 | ```tsx
31 | import { useSyncExternalStore } from "react";
32 | 
33 | function makeUseMediaQuery(mediaQuery: string, getServerValue: () => boolean): () => boolean {
34 |   function subscribe(onStoreChange) {
35 |     const aborter = new AbortController();
36 |     // https://css-tricks.com/working-with-javascript-media-queries/
37 |     // All browsers support addEventListener instead of addListener today.
38 |     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event
39 |     window.matchMedia(mediaQuery).addEventListener("change", onStoreChange, { signal: aborter.signal });
40 |     return () => {
41 |       aborter.abort();
42 |     };
43 |   }
44 | 
45 |   return function useCustomMediaQuery() {
46 |     return useSyncExternalStore(
47 |       subscribe,
48 |       () => window.matchMedia(mediaQuery).matches,
49 |       getServerValue
50 |     );
51 |   };
52 | }
53 | 
54 | // Default Tailwind breakpoints: https://tailwindcss.com/docs/responsive-design
55 | // Server rendering is mobile-first for SEO so we default to false.
56 | export const useSm = makeUseMediaQuery("(min-width: 640px)", () => false);
57 | export const useMd = makeUseMediaQuery("(min-width: 768px)", () => false);
58 | export const useLg = makeUseMediaQuery("(min-width: 1024px)", () => false);
59 | 
60 | // Derive “is mobile” from whether sm breakpoint matches.
61 | export function useIsMobile(): boolean {
62 |   return !useSm();
63 | }
64 | ```
65 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/hooks-concurrent-world.html.md:
--------------------------------------------------------------------------------
 1 | # Understanding React Hooks in a Concurrent World
 2 | 
 3 | - `useId`: generate a unique value consistently on the server & browser side, usually for `id` attributes.
 4 | - `useState` & `useReducer`: holds data that can be changed @ any time.
 5 | - `useSyncExternalStore`: subscribes to an external source of data.
 6 | - `useMemo` & `useCallback`: recalculate output when inputs change @ render time.
 7 | - `useContext`: subscribes to data provided by another component further up the tree.
 8 | - `useDeferredValue`: forks a piece of state, rendering in the background until suspended components have loaded, rendering previous state in the meanwhile.
 9 | - `useEffect`: executed by React when inputs change @ commit time.
10 | - `useRef`: holds unsafe data that can be changed @ any time.
11 | - [View Official Hooks Reference](https://reactjs.org/docs/hooks-reference.html)
12 | 
13 | ## Parallel-Universe-Safe
14 | 
15 | ### `useMemo`, `useState`, `useReducer`
16 | 
17 | Each of these hooks hold state.
18 | 
19 | ### `useRef` + `useEffect`
20 | 
21 | ```js
22 | const instRef = useRef(null);
23 | let inst;
24 | // Lazily initialize the ref the first time.
25 | if (instRef.current === null) {
26 |   inst = {
27 |     value: null,
28 |   };
29 |   instRef.current = inst;
30 | } else {
31 |   inst = instRef.current;
32 | }
33 | 
34 | …
35 | 
36 | // Update the ref once value has been committed.
37 | useEffect(() => {
38 |   inst.value = value;
39 | }, [value]);
40 | ```
41 | 
42 | ## Parallel-Universe-Unsafe
43 | 
44 | ### `useRef`
45 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/lifecycle.html.md:
--------------------------------------------------------------------------------
 1 | # React Lifecycle
 2 | 
 3 | 1. Initial render.
 4 | 2. Initial DOM is created.
 5 | 3. Browser performs layout and repainting.
 6 | 4. External event occurs (e.g. user interaction, promise completes).
 7 | 5. State changes.
 8 | 6. Component subtree is rendered.
 9 | 7. UI differences are applied to DOM.
10 | 8. Browser performs layout and repainting.
11 | 
12 | ## Client-only
13 | 
14 | 1. Initial render:
15 |     1. Calls root component (e.g. `App`) to get its returned elements.
16 |     2. Iterates through elements and calls their components, and so on, until we have all leaf elements that represent HTML elements.
17 |     3. Creates DOM elements for each leaf React element, and inserts them on the page.
18 |     4. Runs `useLayoutEffect` callbacks.
19 |     5. Browser performs layout and repainting.
20 |     6. Runs `useEffect` callbacks.
21 | 2. A component within the tree changes state:
22 |     1. Schedules update.
23 |     2. Update starts.
24 |     3. Calls the changed component to get its returned elements.
25 |     4. Iterates through elements and calls their components, and so on, until we have all leaf elements that represent HTML elements.
26 |     5. Compares the new leaf elements to the previously committed leaf elements.
27 |     6. Updates/replaces/removes DOM elements for each leaf React element.
28 |     7. Runs `useLayoutEffect` callbacks.
29 |     8. Browser performs layout and repainting.
30 |     9. Runs `useEffect` callbacks.
31 | 
32 | ## Not included (yet?)
33 | 
34 | - Hydration from server to client rendering
35 | - Suspense
36 | - `useDeferredValue`
37 | - React Server Components
38 | - Server streaming
39 | 
40 | ## Next.js
41 | 
42 | ## Example
43 | 
44 | ```jsx
45 | 
46 | ```
47 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/list-of-roles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/react_typescript/list-of-roles.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/list-of-roles.png.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/templates/react_typescript/list-of-roles.png.png


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/logical-clocks.html.md:
--------------------------------------------------------------------------------
 1 | # Simplify React Effects with Logical Clocks
 2 | 
 3 | ## Problems
 4 | 
 5 | Hooks offer a more flexible and powerful suite of tools than we had a few years ago in React with class components’ lifecycle methods.
 6 | 
 7 | Each hook tries to follow the unix philosophy: have small tools that solve one particular task well. For example, `useState()` solves many needs for a mutable variable that belongs to a component.
 8 | 
 9 | However, while React has certainly made the *what* easier with the declarative model of building a view, getting the *when* right proves to be a lot harder. Hooks like `useEffect()` can appear simple but are difficult to compose together and to visualise. By using logical clocks, we can get back towards the declarative model that we all love in React.
10 | 
11 | ## What is a logical clock?
12 | 
13 | A logical clock is a monotonically increasing number. Or in other words, an incremented integer: `i++`.
14 | 
15 | We can implement once as a React hook using `useReducer()`:
16 | 
17 | ```ts
18 | function useTicker() {
19 |   return useReducer(t => t + 1, 0);
20 | }
21 | ```
22 | 
23 | We can wire it up to a button like so:
24 | 
25 | ```ts
26 | const [count, advance] = useTicker();
27 | 
28 | return <>
29 |   <p>You have clicked {count} times</p>
30 |   <button onClick={advance}>Click me!</button>
31 | </>;
32 | ```
33 | 
34 | ## Debouncing
35 | 
36 | ```ts
37 | export function useDebouncedTicker(duration: number): readonly [number, EffectCallback] {
38 |   const [count, advance] = useTicker();
39 | 
40 |   const callback = useMemo(() => {
41 |     let timeout: null | ReturnType<typeof setTimeout> = null;
42 |     function clear() {
43 |       if (timeout) {
44 |         clearTimeout(timeout);
45 |         timeout = null;
46 |       }
47 |     }
48 |     return () => {
49 |       clear()
50 |       timeout = setTimeout(advance, duration);
51 |       return clear;
52 |     };
53 |   }, [duration, advance]);
54 | 
55 |   return [count, callback];
56 | }
57 | ```
58 | 
59 | ```ts
60 | export function useDebouncedEffect(effect: EffectCallback, duration: number, deps: DependencyList): void {
61 |   const [count, receive] = useDebouncedTicker(duration);
62 |   useEffect(receive, deps); // When our deps change, notify our debouncer.
63 |   useEffect(effect, [count]); // When our debouncer finishes, run our effect.
64 | }
65 | 
66 | export function useDebouncedMemo<T>(factory: () => T, duration: number, deps: DependencyList): T {
67 |   const [tick, scheduleAdvance] = useDebouncedTicker(duration);
68 |   useEffect(scheduleAdvance, deps); // When our deps change, notify our debouncer.
69 |   return useMemo(factory, [tick]); // When our debouncer finishes, invalidate our memo.
70 | }
71 | ```
72 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/react_typescript/state-levels.html.md:
--------------------------------------------------------------------------------
 1 | # React State
 2 | 
 3 | ## Derive local variable
 4 | 
 5 | ## useState
 6 | 
 7 | ## useReducer
 8 | 
 9 | ## useSyncExternalStore
10 | 
11 | ```ts
12 | function useIsOffline(): boolean {
13 |   const isOnline = useSyncExternalStore(
14 |     (callback: () => void) => {
15 |       window.addEventListener("offline", callback);
16 | 
17 |       return () => {
18 |         window.removeEventListener("offline", callback);
19 |       };
20 |     },
21 |     () => navigator.onLine,
22 |     () => true
23 |   );
24 |   return !isOnline;
25 | }
26 | ```
27 | 
28 | ## Root prop
29 | 
30 | ## createContext
31 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/robust_javascript_interactivity/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:robust_javascript_interactivity) %>">
2 |   <%= render ComponentsGuideWeb.RobustJavascriptInteractivityView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/robust_javascript_interactivity/_nav.html.eex:
--------------------------------------------------------------------------------
1 | <nav>
2 |   <p class="px-2 pb-6 mb-6 text-5xl text-orange-200 border-b-4 border-current"><%= "Robust JavaScript Interactivity" %></p>
3 |   <ul class="text-xl" data-links="block p-2 current-page-bold">
4 |     <li><%= link("What goes wrong?", to: '/robust-javascript') %>
5 |     <li><%= link("Idempotency", to: '/robust-javascript/idempotent-javascript-operations') %>
6 |   </ul>
7 | </nav>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/robust_javascript_interactivity/_top.html.heex:
--------------------------------------------------------------------------------
 1 | <div class="mx-auto max-w-4xl">
 2 |   <h2 y-y x-x="md" class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
 3 |     <span class="mr-1 text-5xl">🫵🏾🔨</span>
 4 |     <span><%= "Robust JavaScript Interactivity" %></span>
 5 |   </h2>
 6 |   <nav class="pt-6 pb-4">
 7 |     <ul y-y x-x="md" class="flex-wrap gap-4 text-xl list-none font-bold gap-y-6" data-links="p-3">
 8 |       <li>
 9 |         <.link href="/robust-javascript">What goes wrong?</.link>
10 |       </li>
11 |       <li>
12 |         <.link href="/robust-javascript/idempotent-javascript-operations">Idempotency</.link>
13 |       </li>
14 |     </ul>
15 |   </nav>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/robust_javascript_interactivity/index.html.eex:
--------------------------------------------------------------------------------
 1 | <enhanced-navigation class="flex flex-col" data-add-aria-current-page data-add-article-navigation>
 2 |   <div class="mx-auto grid-flow-col md:grid md:grid-cols-[20rem_minmax(0,var(--max-width))] xl:grid-cols-[20rem_minmax(0,var(--max-width))_18rem] gap-8" style="--max-width: 46em">
 3 |     <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
 4 |       <%= render view_module(@conn), "_nav.html", conn: @conn %>
 5 |     </div>
 6 |     <article class="text-white bg-gray-900 px-4 md:px-0">
 7 |       <div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
 8 |         <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
 9 |       </div>
10 |     </article>
11 |     <aside class="sticky top-0 h-screen hidden xl:block" hidden>
12 |       <nav class="pt-16 text-gray-200">
13 |         <div class="pl-5 pb-2 font-bold uppercase text-white">On this page</div>
14 |         <slot name="article-navigation-items">
15 |           <template>
16 |             <ul class="list-none">
17 |               <li class="border-l-4 border-gray-800 hover:border-blue-400"></li>
18 |             </ul>
19 |             <a href="#" class="inline-flex py-1 pl-4 hover:text-blue-400"></a>
20 |           </template>
21 |         </slot>
22 |       </nav>
23 |     </aside>
24 |   </div>
25 | </enhanced-navigation>
26 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/robust_javascript_interactivity/intro.html.md:
--------------------------------------------------------------------------------
 1 | # What goes wrong with interactive JavaScript apps?
 2 | 
 3 | - The user gets confused:
 4 |   - The layout looks broken on their device.
 5 |   - The content sounds broken on their device.
 6 |   - They can’t find what they are looking for.
 7 |   - They can’t successfully interact with widgets on the page.
 8 |   - They don’t understand the information that is being provided.
 9 | - The network fails.
10 | - A browser doesn’t support a feature being used.
11 | - Browser extensions corrupt the page.
12 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/text/edit.html.heex:
--------------------------------------------------------------------------------
 1 | <h1>Edit Text</h1>
 2 | 
 3 | <.simple_form :let={f} for={@changeset} method="put" action={~p"/text/#{@text}"}>
 4 |   <.error :if={@changeset.action}>
 5 |     Oops, something went wrong! Please check the errors below.
 6 |   </.error>
 7 |   <.input field={f[:content]} type="text" label="Content" />
 8 |   <:actions>
 9 |     <.button>Save Text</.button>
10 |   </:actions>
11 | </.simple_form>
12 | 
13 | <span><%= link("Back", to: Routes.text_path(@conn, :index)) %></span>
14 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/text/import_form.html.eex:
--------------------------------------------------------------------------------
 1 | <%= form_for @changeset, @action, fn f -> %>
 2 |   <%= if @changeset.action do %>
 3 |     <div class="alert alert-danger">
 4 |       <p>Oops, something went wrong! Please check the errors below.</p>
 5 |     </div>
 6 |   <% end %>
 7 | 
 8 |   <%= label f, :url, "URL" %>
 9 |   <.error
10 |     field={:url}
11 |     input_name="url"
12 |     errors={@changeset.errors}
13 |     class="pt-2 pl-4 pr-4 ml-2 text-center"
14 |   />
15 |   <%= text_input f, :url %>
16 | 
17 |   <div>
18 |     <%= submit "Save" %>
19 |   </div>
20 | <% end %>
21 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/text/index.html.eex:
--------------------------------------------------------------------------------
 1 | <h1>Content</h1>
 2 | 
 3 | <span><%= link "Write", to: Routes.text_path(@conn, :new) %></span>
 4 | 
 5 | <%= Phoenix.Component.live_render(@conn, ComponentsGuideWeb.ActivityLive, session: %{}, router: ComponentsGuideWeb.Router ) %>
 6 | 
 7 | <table>
 8 |   <thead>
 9 |     <tr>
10 |       <th>Content</th>
11 |       <th></th>
12 |     </tr>
13 |   </thead>
14 |   <tbody>
15 | <%= for text <- @content do %>
16 |     <tr>
17 |       <td><%= String.slice(text.content, 0..60) %></td>
18 |       <td>
19 |         <%= link "Show", to: Routes.text_path(@conn, :show, text) %>
20 |         <%= link "Edit", to: Routes.text_path(@conn, :edit, text) %>
21 |         <%= link "Delete", to: Routes.text_path(@conn, :delete, text), method: :delete, data: [confirm: "Are you sure?"] %>
22 |       </td>
23 |     </tr>
24 | <% end %>
25 |   </tbody>
26 | </table>
27 | 
28 | <h2>Import</h2>
29 | 
30 | <%= render "import_form.html", Map.merge(assigns, %{
31 |   action: Routes.text_path(@conn, :create),
32 |   changeset: @import_changeset
33 | }) %>
34 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/text/new.html.eex:
--------------------------------------------------------------------------------
 1 | <h1>New Text</h1>
 2 | 
 3 | <.simple_form :let={f} for={@changeset} action={~p"/texts"}>
 4 |   <.error :if={@changeset.action}>
 5 |     Oops, something went wrong! Please check the errors below.
 6 |   </.error>
 7 |   <.input field={f[:content]} type="text" label="Content" />
 8 |   <:actions>
 9 |     <.button>Save Text</.button>
10 |   </:actions>
11 | </.simple_form>
12 | 
13 | <span><%= link "Back", to: Routes.text_path(@conn, :index) %></span>
14 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/text/show.html.eex:
--------------------------------------------------------------------------------
 1 | <nav>
 2 |   <ul>
 3 |     <li><%= link "All Text", to: Routes.text_path(@conn, :index) %></li>
 4 |   </ul>
 5 | </nav>
 6 | 
 7 | <h1>Show Text</h1>
 8 | <span><%= link "Edit", to: Routes.text_path(@conn, :edit, @text) %></span>
 9 | 
10 | <div><%= @text.content %></div>
11 | 
12 | <h3>Formats</h3>
13 | <ul>
14 |   <li><%= link "text/plain", to: Routes.text_path(@conn, :show_text_format, @text, "plain") %></li>
15 |   <li><%= link "text/css", to: Routes.text_path(@conn, :show_text_format, @text, "css") %></li>
16 | </ul>
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/_header.html.eex:
--------------------------------------------------------------------------------
1 | <header class="<%= ComponentsGuideWeb.TopicsView.class_for_topic(:web_standards) %>">
2 |   <%= render ComponentsGuideWeb.WebStandardsView, "_top.html" %>
3 | </header>
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/_nav.html.eex:
--------------------------------------------------------------------------------
 1 | <nav class="pt-6 pb-4">
 2 |   <ul y-y x-x=md class="text-xl font-bold" data-links="p-3">
 3 |     <li><%= link("URL", to: '/web-standards/url') %>
 4 |     <li><%= link("HTML", to: '/web-standards/html') %>
 5 |     <li><%= link("HTTP Headers", to: '/web-standards/http-headers') %>
 6 |     <li><%= link("HTTP Caching", to: '/web-standards/http-caching') %>
 7 |     <li><%= link("Media Queries", to: '/web-standards/media-queries') %>
 8 |     <li><%= link("Promise", to: '/web-standards/promise') %>
 9 |     <li><%= link("Robots.txt", to: '/web-standards/robots-txt') %>
10 |   </ul>
11 | </nav>
12 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/_top.html.eex:
--------------------------------------------------------------------------------
1 | <div class="mx-auto max-w-4xl">
2 |   <h1 y-y x-x=md class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight">
3 |     <span class="mr-1 text-5xl">🤝💝</span>
4 |     <span><%= "Web Standards" %></span>
5 |   </h1>
6 |   <%= render ComponentsGuideWeb.WebStandardsView, "_nav.html" %>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/html.html.md:
--------------------------------------------------------------------------------
 1 | # Anatomy of a web page’s HTML
 2 | 
 3 | _Here we break down a common HTML page and explain what each part does._
 4 | 
 5 | ## All web pages have two languages
 6 | 
 7 | The first, <abbr title="Hyper Text Markup Language">HTML</abbr>, is for computers. It has been around since the early 90s and continues to be updated today. This language is understood by Safari, Firefox, Chrome, Google.com, DuckDuckGo.com, and many more digital services.
 8 | 
 9 | The second is for people, for example: `en` for english, `fr` for français, `zh_CN` for 官话.
10 | 
11 | So all web pages must state these two languages:
12 | 
13 | ```html
14 | <!doctype html> <!-- This is a modern HTML page -->
15 | <html lang=en> <!-- Written in english -->
16 | ```
17 | 
18 | ## Make it work well in browsers, on social media, and on phones.
19 | 
20 | ```html
21 | <!-- OK let’s write some metadata… -->
22 | <head>
23 | 
24 | <!-- Let’s ensure emoji and all languages work. -->
25 | <meta charset=utf-8>
26 | 
27 | <!-- The text shown in the browser tab. -->
28 | <title>…</title>
29 | 
30 | <!-- Let’s look great on social media with a title… -->
31 | <meta property=og:title content=…>
32 | 
33 | <!-- …and ideally an image too. -->
34 | <meta property=og:image content=…>
35 | 
36 | <!-- Let’s look great on phones, and allow people to zoom in. -->
37 | <meta name=viewport content="width=device-width, initial-scale=1.0">
38 | 
39 | <!-- Let’s look great everywhere with CSS styles -->
40 | <link rel=stylesheet href=…>
41 | ```
42 | 
43 | ## Let’s write content that anyone can read
44 | 
45 | ```html
46 | <body>
47 | 
48 | <!-- Allow people to navigate to other pages -->
49 | <nav aria-label="Primary">
50 |   <!-- Allow assistive technology to see each link as its own item -->
51 |   <ul>
52 |     <li><a href="/">Home</a>
53 |     <li><a href="/contact">Contact</a>
54 |     <li><a href="/bio">Bio</a>
55 |     <li><a href="/news">News</a>
56 |   </ul>
57 | </nav>
58 | 
59 | <!-- Allow assistive technology to find the main content -->
60 | <!-- (A la skip intro on Netflix) -->
61 | <main>
62 |   <!-- The headline of this page -->
63 |   <h1>Example web page</h1>
64 |   
65 |   <p>Some more content</p>
66 | </main>
67 | ```
68 | 
69 | For more on HTML content, read about landmarks.
70 | 
71 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/http-headers.html.md:
--------------------------------------------------------------------------------
 1 | # HTTP Headers
 2 | 
 3 | <form role="search" class="text-center" id="search-http-headers">
 4 |   <input name="q" type="search" placeholder="Search HTTP Headers…" autofocus class="text-white bg-gray-800 border-gray-700 rounded">
 5 | </form>
 6 | 
 7 | <script type="module">
 8 |   const searchForm = document.getElementById("search-http-headers");
 9 |   const listItems = searchForm.parentNode.querySelectorAll('ul li');
10 |   searchForm.addEventListener('input', () => {
11 |     const values = new FormData(searchForm);
12 |     const q = values.get('q').trim().toLowerCase();
13 |     for (const li of Array.from(listItems)) {
14 |       const matches = q === '' ? true : li.textContent.toLowerCase().includes(q);
15 |       li.hidden = !matches;
16 |     }
17 |   });
18 | </script>
19 | 
20 | ## Request
21 | 
22 | - Host (required)
23 | - User-Agent
24 | - Accept
25 | - Accept-Language
26 | - Accept-Encoding
27 | - Origin
28 | - Referer
29 | - Connection
30 | - Content-Length
31 | - Range
32 | - Cache-Control
33 |   - `max-age`
34 |   - `max-stale`
35 |   - `min-fresh`
36 |   - `no-cache`
37 |   - `no-store`
38 |   - `no-transform`
39 |   - `only-if-cached`
40 |   - `stale-if-error`
41 | - If-Modified-Since
42 | - If-Unmodified-Since
43 | - If-Match
44 | - If-None-Match
45 | - If-Range
46 | - Authorization
47 | - Expect
48 | - Cookie
49 | 
50 | ## Response
51 | 
52 | - Content-Length
53 | - Content-Type
54 | - Content-Encoding
55 | - Transfer-Encoding
56 | - Location
57 | - Allow
58 | - Link
59 | - Date
60 | - Accept-Ranges
61 | - Content-Range
62 | - Age
63 | - Expires
64 | - Vary
65 | - ETag
66 | - Cache-Control
67 |   - `max-age`
68 |   - `s-maxage`
69 |   - `no-cache`
70 |   - `no-store`
71 |   - `no-transform`
72 |   - `must-revalidate`
73 |   - `proxy-revalidate`
74 |   - `must-understand`
75 |   - `private`
76 |   - `public`
77 |   - `immutable`
78 |   - `stale-while-revalidate`
79 |   - `stale-if-error`
80 |   - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
81 |   - https://github.com/mdn/browser-compat-data/blob/main/http/headers/cache-control.json
82 | - Set-Cookie
83 | - Access-Control-Allow-Origin
84 | - Upgrade
85 | - Alt-Svc
86 | - Retry-After
87 | - Server-Timing
88 | - Report-To
89 | - Last-Event-ID
90 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/http_caching_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.WebStandards.Live.HttpCaching do
 2 |   use ComponentsGuideWeb, :live_view
 3 | 
 4 |   defmodule State do
 5 |     defstruct local: nil, remote: nil
 6 |   end
 7 | 
 8 |   def mount(_params, _session, socket) do
 9 |     {:ok, assign(socket, state: %State{})}
10 |   end
11 | 
12 |   def render(assigns) do
13 |     ~L"""
14 |     <form phx-change=change>
15 |       <fieldset class="flex flex-row space-x-4">
16 |         <div class="font-bold">Local</div>
17 |         <label><input type=radio name=local value=0 class="form-radio"> Blank</label>
18 |         <label><input type=radio name=local value=1 class="form-radio"> Loaded previously</label>
19 |       </fieldset>
20 |       <fieldset class="flex flex-row space-x-4">
21 |         <div class="font-bold">Remote</div>
22 |         <label><input type=radio name=remote value=a class="form-radio"> ABC</label>
23 |         <label><input type=radio name=remote value=z class="form-radio"> XYZ</label>
24 |       </fieldset>
25 |     </form>
26 |     """
27 |   end
28 | 
29 |   def handle_event("change", %{"local" => local}, socket) do
30 |     state = socket.assigns.state
31 |     state = put_in(state.local, local)
32 | 
33 |     {
34 |       :noreply,
35 |       socket
36 |       |> assign(:state, state)
37 |     }
38 |   end
39 | 
40 |   def handle_event("change", %{"remote" => remote}, socket) do
41 |     state = socket.assigns.state
42 |     state = put_in(state.remote, remote)
43 | 
44 |     {
45 |       :noreply,
46 |       socket
47 |       |> assign(:state, state)
48 |     }
49 |   end
50 | end
51 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/index.html.eex:
--------------------------------------------------------------------------------
1 | <%= render view_module(@conn), "_header.html" %>
2 | 
3 | <article class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
4 |   <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
5 | </article>
6 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/intro.html.md:
--------------------------------------------------------------------------------
1 | # Why do we have the web?
2 | 
3 | ## Where?
4 | 
5 | - [Browsers](https://developer.mozilla.org/en-US/docs/Web)
6 | - [Deno](https://doc.deno.land/builtin/stable)
7 | - [Cloudflare Workers](https://developers.cloudflare.com/workers/runtime-apis/web-standards)
8 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/javascript-collections.html.md:
--------------------------------------------------------------------------------
 1 | # JavaScript Key-Value Collections
 2 | 
 3 | - Map
 4 | - URLSearchParams
 5 | - FormData
 6 | - Object
 7 | - WeakMap
 8 | 
 9 | ## Map
10 | 
11 | - **Pro:** keys can be any JavaScript value, not just strings.
12 | - **Con:** homogeneous TypeScript values.
13 | - 💡 Clone:
14 | ```js
15 | const newMap = new Map(otherMap);
16 | ```
17 | 
18 | ## URLSearchParams
19 | 
20 | - Spec: serializes to `application/x-www-form-urlencoded`
21 | 
22 | ## Objects
23 | 
24 | - Keys can be strings or symbols.
25 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/media-queries.html.md:
--------------------------------------------------------------------------------
1 | # Media Queries
2 | 
3 | [Spec](https://www.w3.org/TR/mediaqueries-5/)
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/robots-txt.html.md:
--------------------------------------------------------------------------------
1 | # Robots.txt
2 | 
3 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/templates/web_standards/url.html.md:
--------------------------------------------------------------------------------
 1 | # Anatomy of a URL
 2 | 
 3 | ## Change the parts of a URL
 4 | 
 5 | <live-render>
 6 | ComponentsGuideWeb.WebStandards.Live.URLForm
 7 | </live-render>
 8 | 
 9 | ----
10 | 
11 | ## JavaScript’s `URL`
12 | 
13 | ```js
14 | const root = new URL('/');
15 | ```
16 | 
17 | ```js
18 | // In a browser
19 | const current = new URL(window.location.href);
20 | ```
21 | 
22 | ```js
23 | // With a fetch Request
24 | const current = new URL(request.url);
25 | ```
26 | 
27 | ## Elixir’s `URI`
28 | 
29 | ```elixir
30 | url = URI.parse("https://www.example.org/")
31 | 
32 | ```
33 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/asset_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.AssetsHelpers do
 2 |   @moduledoc """
 3 |   Conveniences for presenting assets like images
 4 |   """
 5 | 
 6 |   use Phoenix.HTML
 7 |   alias ComponentsGuideWeb.Router.Helpers, as: Routes
 8 | 
 9 |   def collected_image(conn, module, image_name) do
10 |     %{static_path: path_to_image, width: width, height: height} = module.render(image_name, [])
11 |     url = Routes.static_path(conn, "/" <> path_to_image)
12 |     tag(:img, src: url, width: width / 2, height: height / 2)
13 |   end
14 | 
15 |   def collected_figure(conn, module, image_name, caption) do
16 |     content_tag(:figure, [
17 |       collected_image(conn, module, image_name),
18 |       content_tag(:figcaption, caption)
19 |     ])
20 |   end
21 | end
22 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/collected_view.ex:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/lib/components_guide_web/views/collected_view.ex


--------------------------------------------------------------------------------
/lib/components_guide_web/views/color_view.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.ColorView do
2 |   use ComponentsGuideWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/composable_systems_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ComposableSystemsView do
 2 |   use ComponentsGuideWeb, :view
 3 |   require EEx
 4 | 
 5 |   def header_styles() do
 6 |     l = 62
 7 |     a = 51
 8 |     b = 24
 9 | 
10 |     color = {:lab, l, a, b}
11 | 
12 |     gradient =
13 |       Styling.linear_gradient("150grad", [
14 |         {:lab, l * 1.5, a * 0.7, b * 2},
15 |         {:lab, l * 1.3, a * 0.8, b * 1.6},
16 |         {:lab, l * 1.1, a * 0.9, b * 1.2},
17 |         color,
18 |         {:lab, l * 0.9, a * 1.3, b * 0.7},
19 |         {:lab, l * 0.8, a * 1.7, b * 0.5}
20 |       ])
21 | 
22 |     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
23 |   end
24 | end
25 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/concepts_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ConceptsView do
 2 |   use ComponentsGuideWeb, :view
 3 |   require EEx
 4 |   use ComponentsGuideWeb.Snippets
 5 | 
 6 |   # @hello 8
 7 | 
 8 |   def header_background do
 9 |     Styling.linear_gradient("150grad", [
10 |       {:lab, 70, 40, 50},
11 |       {:lab, 50, 90, 40},
12 |       {:lab, 50, 90, 20},
13 |       {:lab, 50, 90, 10},
14 |       {:lab, 60, 70, 60}
15 |     ])
16 |   end
17 | 
18 |   def topic_article(assigns, block) do
19 |     ~E"""
20 |     <%= link to: @link do %>
21 |       <article class="pl-8 py-4 mb-8 text-red-700 bg-red-100 border-l-4 border-current rounded hover:text-red-800 hover:bg-red-200 shadow-lg hover:shadow-xl">
22 |         <h2 class="mb-2 text-4xl leading-normal font-bold">
23 |           <%= @title %>
24 |         </h2>
25 |         <%= block[:do] %>
26 |       </article>
27 |     <% end %>
28 |     """
29 |   end
30 | end
31 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/custom_element_helpers.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.CustomElementHelpers do
2 |   use Phoenix.HTML
3 | 
4 |   def client_include(src, content \\ []), do: content_tag("include-fragment", content, src: src)
5 | end
6 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/error_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ErrorView do
 2 |   use ComponentsGuideWeb, :view
 3 | 
 4 |   # If you want to customize a particular status code
 5 |   # for a certain format, you may uncomment below.
 6 |   # def render("500.html", _assigns) do
 7 |   #   "Internal Server Error"
 8 |   # end
 9 | 
10 |   # By default, Phoenix returns the status message from
11 |   # the template name. For example, "404.html" becomes
12 |   # "Not Found".
13 |   def template_not_found(template, _assigns) do
14 |     Phoenix.Controller.status_message_from_template(template)
15 |   end
16 | end
17 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/fake_search_view.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.FakeSearchView do
2 |   use ComponentsGuideWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/formatting_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.FormattingHelpers do
 2 |   defdelegate float_to_string(f, options), to: :erlang, as: :float_to_binary
 3 | 
 4 |   def humanize_bytes(count) when is_integer(count) and count >= 1024 * 1024 do
 5 |     megabytes = count / (1024 * 1024)
 6 |     "#{float_to_string(megabytes, decimals: 1)} mB"
 7 |   end
 8 | 
 9 |   def humanize_bytes(count) when is_integer(count) and count >= 1024 do
10 |     kilobytes = count / 1024
11 |     "#{float_to_string(kilobytes, decimals: 1)} kB"
12 |   end
13 | 
14 |   def humanize_bytes(count) when is_integer(count) do
15 |     "#{count} B"
16 |   end
17 | 
18 |   def humanize_bytes(binary) when is_binary(binary) do
19 |     binary |> byte_size() |> humanize_bytes()
20 |   end
21 | 
22 |   # def humanize_bytes(bytes) when is_binary(bytes) do
23 |   #   humanize_bytes(byte_size(bytes))
24 |   # end
25 | 
26 |   def humanize_count(count) when is_integer(count) and count >= 1_000_000 do
27 |     formatted = count / 1_000_000
28 |     "#{float_to_string(formatted, decimals: 1)}M"
29 |   end
30 | 
31 |   def humanize_count(count) when is_integer(count) and count >= 1000 do
32 |     formatted = count / 1000
33 |     "#{float_to_string(formatted, decimals: 1)}K"
34 |   end
35 | 
36 |   def humanize_count(count) when is_integer(count) do
37 |     "#{count}"
38 |   end
39 | end
40 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/integrations_view.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.IntegrationsView do
2 |   use ComponentsGuideWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/layout_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.LayoutView do
 2 |   use ComponentsGuideWeb, :view
 3 |   require EEx
 4 | 
 5 |   # def render("_header2.html", assigns) do
 6 |   # end
 7 | 
 8 |   @nav_links [
 9 |     {:search}
10 |     # {"By Concept", to: "/concepts"},
11 |     # {"By Technology", to: "/links"},
12 |     # {"Patterns", to: "/patterns"},
13 |     # {"News Feed", to: "/feed"},
14 |     # {"About", to: "/about"}
15 |   ]
16 | 
17 |   def search_form(assigns) do
18 |     ~H"""
19 |     <form role="search" action="/research" class="flex h-full px-2 items-center">
20 |       <input
21 |         type="search"
22 |         name="q"
23 |         placeholder="Search…"
24 |         class="w-full py-1 px-4 text-sm bg-gray-900 text-white rounded-full border border-gray-500"
25 |       />
26 |     </form>
27 |     """
28 |   end
29 | 
30 |   def search_form_item(assigns) do
31 |     ~H"""
32 |     <li class="row-span-3">
33 |       <%= search_form([]) %>
34 |     </li>
35 |     """
36 |   end
37 | 
38 |   def nav_items(path_info) do
39 |     [
40 |       Enum.map(@nav_links, fn
41 |         {:search} -> search_form_item([])
42 |         {title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
43 |       end)
44 |     ]
45 |   end
46 | 
47 |   def nav_link_item(assigns) do
48 |     to = assigns[:to]
49 | 
50 |     current =
51 |       case Path.join(["/" | assigns[:path_info]]) do
52 |         ^to -> "page"
53 |         _ -> "false"
54 |       end
55 | 
56 |     ~E"""
57 |     <li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full px-4 py-2 md:py-2 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-current"><%= @title %></a>
58 |     """
59 |   end
60 | end
61 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/link_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.LinkHelpers do
 2 |   use Phoenix.HTML
 3 | 
 4 |   def link(conn, text, opts) do
 5 |     to = Keyword.get(opts, :to)
 6 | 
 7 |     current =
 8 |       case conn.request_path do
 9 |         ^to -> "page"
10 |         _ -> "false"
11 |       end
12 | 
13 |     IO.inspect(%{
14 |       current: current,
15 |       request_path: conn.request_path,
16 |       to: to
17 |     })
18 | 
19 |     opts = Keyword.put(opts, :aria_current, current)
20 | 
21 |     Phoenix.HTML.Link.link(text, opts)
22 |   end
23 | end
24 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/links_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.LinksView do
 2 |   use ComponentsGuideWeb, :view
 3 |   alias Phoenix.HTML.Tag
 4 | 
 5 |   # def defsection(name, tag_name, attrs) do
 6 |   #   Tag.content_tag(tag_name, "hello", attrs)
 7 |   # end
 8 | 
 9 |   def article(attrs \\ [], do: block) do
10 |     # %{class: class} = Enum.into(attrs, %{class: ""})
11 |     class = Keyword.get(attrs, :class, "")
12 | 
13 |     Tag.content_tag :article, class: "mt-8 mb-24 #{class} a{font-bold}" do
14 |       block
15 |     end
16 |   end
17 | 
18 |   def span(content, options) when is_list(options) do
19 |     content_tag(:span, content, Enum.reduce(options, [class: ""], &span_option/2))
20 |   end
21 | 
22 |   defp span_option(:nums_tabular, tag_options) do
23 |     Keyword.update!(tag_options, :class, fn class ->
24 |       class <> " nums-tabular"
25 |     end)
26 |   end
27 | 
28 |   defp list_item({{:safe, content}, nested_items}) when is_list(nested_items) do
29 |     content_tag(:li) do
30 |       [
31 |         {:safe, content},
32 |         ul_list(nested_items)
33 |       ]
34 |     end
35 |   end
36 | 
37 |   defp list_item({:safe, content}) do
38 |     content_tag(:li, {:safe, content})
39 |   end
40 | 
41 |   def ul_list(items) when is_list(items) do
42 |     content_tag(:ul, Enum.map(items, &list_item/1))
43 |   end
44 | 
45 |   def nums_tabular(content) do
46 |     content_tag(:span, content, class: "nums-tabular")
47 |   end
48 | end
49 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/markdown_helpers.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.MarkdownHelpers do
2 |   use Phoenix.HTML
3 | 
4 |   def markdown!(markdown) do
5 |     Earmark.as_html!(markdown)
6 |     |> raw()
7 |   end
8 | end
9 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/primitive_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.PrimitiveHelpers do
 2 |   @moduledoc """
 3 |   Conveniences for translating and building error messages.
 4 |   """
 5 | 
 6 |   use Phoenix.HTML
 7 |   use Phoenix.Component
 8 | 
 9 |   def code_block(assigns) do
10 |     # assigns = %{}
11 |     # content_tag(:pre, inspect(assigns))
12 |     ~H"""
13 |     <pre class={"language-#{@lang}"}><code><%=
14 |       if assigns[:code] do
15 |         assigns[:code]
16 |       else
17 |         render_slot(@inner_block) |> then(fn
18 |           %{static: [code]} -> String.trim(code)
19 |           %{static: strings} when is_list(strings) -> strings |> Enum.join() |> String.trim()
20 |         end)
21 |       end
22 |     %></code></pre>
23 |     """
24 |   end
25 | end
26 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/snippets.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.Snippets do
 2 |   require EEx
 3 |   use Phoenix.HTML
 4 | 
 5 |   defmacro __using__(_opts) do
 6 |     quote do
 7 |       def section(label, attrs, block) do
 8 |         content_tag(:section, [aria_label: label] ++ attrs, block)
 9 |       end
10 |     end
11 |   end
12 | 
13 |   defmacro defhello do
14 |     quote do
15 |       def yep, do: 5
16 |     end
17 |   end
18 | 
19 |   defmacro def_E(call1, source) do
20 |     # call2 = Macro.escape(call1, unquote: nil)
21 |     # call2 = Macro.escape(call1, unquote: true)
22 |     # call2 = Macro.escape(call1)
23 |     # call2 = :topic_article
24 |     # args = Macro.generate_arguments(2, nil)
25 | 
26 |     # source2 = Macro.escape(source)
27 | 
28 |     quote bind_quoted: binding() do
29 |       info = Keyword.merge([file: __ENV__.file, line: __ENV__.line], engine: Phoenix.HTML.Engine)
30 |       args = [{:assigns, [line: info[:line]], nil}, {:block, [line: info[:line]], nil}]
31 |       # compiled = EEx.compile_string(source, info)
32 |       compiled =
33 |         quote do
34 |           compiled = unquote(source)
35 |         end
36 | 
37 |       # def topic_article(assigns, block), do: 4
38 |       # def topic_article(assigns, block), do: 4
39 | 
40 |       # def unquote(call1)(assigns, block), do: unquote(compiled)
41 | 
42 |       def unquote(call1)(unquote_splicing(args)), do: unquote(source)
43 | 
44 |       # def unquote(call2)(assigns, block) do
45 |       #   unquote(compiled)
46 |       # end
47 | 
48 |       # def({
49 |       #     quote do
50 |       #       call
51 |       #     end,
52 |       #     Macro.generate_arguments(2, __MODULE__)
53 |       #   },
54 |       #   do: 4
55 |       # )
56 | 
57 |       # unquote(
58 |       #   quote do
59 |       #     def unquote(call)(assigns, block), do: quote(compiled)
60 |       #   end
61 |       # )
62 |     end
63 |   end
64 | end
65 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/swift_ui_view.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.SwiftUIView do
2 |   use ComponentsGuideWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/text_view.ex:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.TextView do
2 |   use ComponentsGuideWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/components_guide_web/views/topics_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.TopicsView do
 2 |   use ComponentsGuideWeb, :view
 3 | 
 4 |   #   defp subject_to_module(:accessibility_first), do: ComponentsGuideWeb.AccessibilityFirstView
 5 |   #   defp subject_to_module(:react_typescript), do: ComponentsGuideWeb.ReactTypescriptView
 6 |   # 
 7 |   #   defp subject_to_module(:robust_javascript_interactivity),
 8 |   #     do: ComponentsGuideWeb.RobustJavascriptInteractivityView
 9 |   # 
10 |   #   defp subject_to_module(:web_standards), do: ComponentsGuideWeb.WebStandardsView
11 |   #   defp subject_to_module(:composable_systems), do: ComponentsGuideWeb.ComposableSystemsView
12 | 
13 |   @backgrounds %{
14 |     accessibility_first: "bg-violet-200",
15 |     react_typescript: "bg-blue-200",
16 |     robust_javascript_interactivity: "bg-orange-200",
17 |     web_standards: "bg-yellow-200",
18 |     composable_systems: "bg-lime-200",
19 |     cheatsheets: "bg-teal-200"
20 |   }
21 | 
22 |   def class_for_topic(topic), do: @backgrounds[topic]
23 | end
24 | 


--------------------------------------------------------------------------------
/lib/mix/tasks/template_assets.ex:
--------------------------------------------------------------------------------
 1 | defmodule Mix.Tasks.TemplateAssets do
 2 |   use Mix.Task
 3 | 
 4 |   # alias ComponentsGuideWeb.Endpoint
 5 | 
 6 |   @shortdoc "Move images from templates to static assets"
 7 |   def run(_) do
 8 |     Mix.Task.run("app.start")
 9 | 
10 |     IO.puts("Running mix template_assets in #{project_dir()}")
11 |     IO.inspect(File.ls(project_dir()))
12 | 
13 |     IO.puts("Template path: #{templates_path()}")
14 | 
15 |     IO.inspect(File.ls(templates_path()))
16 |     IO.inspect(File.ls(Path.join(templates_path(), "react_typescript")))
17 | 
18 |     image_paths = Path.wildcard(Path.join(templates_path(), "**/*.{png,jpg,jpeg,gif}"))
19 |     IO.puts("Found images:")
20 |     IO.inspect(image_paths)
21 | 
22 |     for image_path <- image_paths do
23 |       process_image(image_path)
24 |     end
25 | 
26 |     # templates_path = Application.app_dir(:components_guide, "templates")
27 |     # Application.app_dir(:components_guide, "priv")
28 | 
29 |     count = Enum.count(image_paths)
30 | 
31 |     Mix.shell().info("Processed #{count} file(s).")
32 |   end
33 | 
34 |   defp project_dir(), do: File.cwd!()
35 | 
36 |   defp templates_path(),
37 |     do: Path.join(project_dir(), "/lib/components_guide_web/templates")
38 | 
39 |   defp static_collected_dir(),
40 |     do: Path.join(project_dir(), "/priv/static/collected")
41 | 
42 |   defp process_image(image_path) do
43 |     data = File.read!(image_path)
44 |     media_type = MIME.from_path(image_path)
45 |     hash = :crypto.hash(:sha256, data)
46 |     hash_base64 = hash |> Base.url_encode64()
47 | 
48 |     destination_dir = Path.join(static_collected_dir(), media_type)
49 |     File.mkdir_p!(destination_dir)
50 | 
51 |     extension = MIME.extensions(media_type) |> List.first()
52 |     destination_path = Path.join(destination_dir, "#{hash_base64}.#{extension}")
53 |     File.copy!(image_path, destination_path)
54 | 
55 |     Mix.shell().info("Copied #{image_path} to #{destination_path}")
56 |   end
57 | end
58 | 


--------------------------------------------------------------------------------
/lib/orb-demo-ideas.md:
--------------------------------------------------------------------------------
 1 | # Orb demo ideas
 2 | 
 3 | ## Insurance application form
 4 | 
 5 | Find a real life insurance.
 6 | 
 7 | - Personal info: name, address, date of birth, phone number
 8 | - Amount to be insured
 9 | - Policy type
10 | - Which extras: theft cover (& how much), TPD (& how much)
11 | 
12 | ## Validation form
13 | 


--------------------------------------------------------------------------------
/native/molten/.cargo/config:
--------------------------------------------------------------------------------
1 | [target.'cfg(target_os = "macos")']
2 | rustflags = [
3 |     "-C", "link-arg=-undefined",
4 |     "-C", "link-arg=dynamic_lookup",
5 | ]
6 | 


--------------------------------------------------------------------------------
/native/molten/.gitignore:
--------------------------------------------------------------------------------
1 | /target
2 | 


--------------------------------------------------------------------------------
/native/molten/Cargo.toml:
--------------------------------------------------------------------------------
 1 | [package]
 2 | name = "molten"
 3 | version = "0.1.0"
 4 | authors = []
 5 | edition = "2018"
 6 | 
 7 | [lib]
 8 | name = "molten"
 9 | path = "src/lib.rs"
10 | crate-type = ["cdylib"]
11 | 
12 | [dependencies]
13 | rustler = "0.28.0"
14 | deno_core = "0.193.0"
15 | swc_common = "0.27.0"
16 | swc_ecma_parser = "0.117.0"
17 | serde_json = "1.0"
18 | tokio = { version = "1", features = ["full"] }
19 | 


--------------------------------------------------------------------------------
/native/molten/README.md:
--------------------------------------------------------------------------------
 1 | # NIF for Elixir.Molten
 2 | 
 3 | ## To build the NIF module:
 4 | 
 5 | - Your NIF will now build along with your project.
 6 | 
 7 | ## To load the NIF:
 8 | 
 9 | ```elixir
10 | defmodule Molten do
11 |     use Rustler, otp_app: :mini_modules, crate: "Molten"
12 | 
13 |     # When your NIF is loaded, it will override this function.
14 |     def add(_a, _b), do: :erlang.nif_error(:nif_not_loaded)
15 | end
16 | ```
17 | 
18 | ## Examples
19 | 
20 | [This](https://github.com/hansihe/NifIo) is a complete example of a NIF written in Rust.
21 | 


--------------------------------------------------------------------------------
/phoenix_static_buildpack.config:
--------------------------------------------------------------------------------
1 | phoenix_relative_path=.
2 | node_version=16.14.2
3 | npm_version=8.5.5
4 | compile="compile"
5 | 


--------------------------------------------------------------------------------
/priv/gettext/en/LC_MESSAGES/errors.po:
--------------------------------------------------------------------------------
 1 | ## `msgid`s in this file come from POT (.pot) files.
 2 | ##
 3 | ## Do not add, change, or remove `msgid`s manually here as
 4 | ## they're tied to the ones in the corresponding POT file
 5 | ## (with the same domain).
 6 | ##
 7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge`
 8 | ## to merge POT files into PO files.
 9 | msgid ""
10 | msgstr ""
11 | "Language: en\n"
12 | 


--------------------------------------------------------------------------------
/priv/gettext/errors.pot:
--------------------------------------------------------------------------------
 1 | ## This is a PO Template file.
 2 | ##
 3 | ## `msgid`s here are often extracted from source code.
 4 | ## Add new translations manually only if they're dynamic
 5 | ## translations that can't be statically extracted.
 6 | ##
 7 | ## Run `mix gettext.extract` to bring this file up to
 8 | ## date. Leave `msgstr`s empty as changing them here has no
 9 | ## effect: edit them in PO (`.po`) files instead.
10 | 
11 | 


--------------------------------------------------------------------------------
/test/components_guide/fetch_test.exs:
--------------------------------------------------------------------------------
 1 | # defmodule ComponentsGuide.FetchTest do
 2 | #   use ExUnit.Case, async: true
 3 | 
 4 | #   # doctest ComponentsGuide.Fetch
 5 | 
 6 | #   test "can fetch news.ycombinator.com" do
 7 | #     response = ComponentsGuide.Fetch.get!("https://news.ycombinator.com/")
 8 | 
 9 | #     assert %ComponentsGuide.Fetch.Response{
10 | #              done?: true,
11 | #              url: "https://news.ycombinator.com/",
12 | #              status: 200,
13 | #              headers: _,
14 | #              body: _
15 | #            } = response
16 | #   end
17 | 
18 | #   test "can load HEAD for news.ycombinator.com" do
19 | #     response =
20 | #       ComponentsGuide.Fetch.load!(
21 | #         ComponentsGuide.Fetch.Request.new!("https://news.ycombinator.com/", method: "HEAD")
22 | #       )
23 | 
24 | #     assert %ComponentsGuide.Fetch.Response{
25 | #              done?: true,
26 | #              url: "https://news.ycombinator.com/",
27 | #              status: _,
28 | #              headers: _,
29 | #              body: _
30 | #            } = response
31 | 
32 | #     content_type =
33 | #       Enum.find_value(response.headers, fn
34 | #         {"content-type", value} -> value
35 | #         _ -> nil
36 | #       end)
37 | #     assert "text/html" == content_type
38 | #   end
39 | # end
40 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/examples_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.ExamplesTest do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.{Instance, Wasm}
 5 | 
 6 |   alias ComponentsGuide.Wasm.Examples
 7 | 
 8 |   describe "SimpleWeekdayParser" do
 9 |     alias Examples.SimpleWeekdayParser
10 | 
11 |     test "works" do
12 |       # IO.puts(SimpleWeekdayParser.to_wat())
13 |       # IO.inspect(byte_size(SimpleWeekdayParser.to_wasm()))
14 |       a = Instance.run(SimpleWeekdayParser)
15 | 
16 |       assert SimpleWeekdayParser.parse(a) == 0
17 | 
18 |       SimpleWeekdayParser.set_input(a, "Mon")
19 |       assert SimpleWeekdayParser.parse(a) == 1
20 | 
21 |       SimpleWeekdayParser.set_input(a, "Mob")
22 |       assert SimpleWeekdayParser.parse(a) == 0
23 | 
24 |       SimpleWeekdayParser.set_input(a, "Tua")
25 |       assert SimpleWeekdayParser.parse(a) == 0
26 | 
27 |       SimpleWeekdayParser.set_input(a, "Tue")
28 |       assert SimpleWeekdayParser.parse(a) == 2
29 | 
30 |       SimpleWeekdayParser.set_input(a, "Wed")
31 |       assert SimpleWeekdayParser.parse(a) == 3
32 | 
33 |       SimpleWeekdayParser.set_input(a, "Thu")
34 |       assert SimpleWeekdayParser.parse(a) == 4
35 | 
36 |       SimpleWeekdayParser.set_input(a, "Fri")
37 |       assert SimpleWeekdayParser.parse(a) == 5
38 | 
39 |       SimpleWeekdayParser.set_input(a, "Sat")
40 |       assert SimpleWeekdayParser.parse(a) == 6
41 | 
42 |       SimpleWeekdayParser.set_input(a, "Sun")
43 |       assert SimpleWeekdayParser.parse(a) == 7
44 | 
45 |       SimpleWeekdayParser.set_input(a, "Monday")
46 |       assert SimpleWeekdayParser.parse(a) == 0
47 |     end
48 |   end
49 | 
50 |   describe "HTTPProxy" do
51 |     alias Examples.HTTPProxy
52 | 
53 |     test "wat" do
54 |       # IO.puts(HTTPProxy.to_wat())
55 | 
56 |       assert HTTPProxy.to_wat() =~
57 |                ~S"""
58 |                (module $HTTPProxy
59 |                  (import "http" "get" (func $ComponentsGuide.Wasm.Examples.HTTPProxy.Fetch.get (param $a i32) (result i32)))
60 |                  (global $input_offset (export "input_offset") (mut i32) (i32.const 65536))
61 |                """
62 |     end
63 | 
64 |     test "list exports" do
65 |       assert Wasm.list_import_types(HTTPProxy) == [
66 |                {"http", "get", {:func, %{params: [:i32], results: [:i32]}}}
67 |              ]
68 |     end
69 | 
70 |     test "works by using correct imported function" do
71 |       instance = HTTPProxy.start()
72 | 
73 |       status = Instance.call(instance, "get_status")
74 |       assert status == 200
75 |     end
76 |   end
77 | end
78 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/format_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Format.Test do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Wasm
 5 |   alias ComponentsGuide.Wasm.Examples.Format
 6 | 
 7 |   describe "IntToString" do
 8 |     alias Format.IntToString
 9 | 
10 |     test "format_u32_char_count" do
11 |       assert Wasm.call(IntToString, :format_u32_char_count, 0) == 1
12 |       assert Wasm.call(IntToString, :format_u32_char_count, 7) == 1
13 |       assert Wasm.call(IntToString, :format_u32_char_count, 17) == 2
14 |       assert Wasm.call(IntToString, :format_u32_char_count, 173) == 3
15 |       assert Wasm.call(IntToString, :format_u32_char_count, 604_800) == 6
16 |     end
17 |   end
18 | end
19 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/magic_numbers_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.MagicNumbers.Test do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Wasm
 5 |   alias ComponentsGuide.Wasm.Examples.MagicNumbers
 6 | 
 7 |   describe "MobileThrottling" do
 8 |     alias MagicNumbers.MobileThrottling
 9 |     alias MagicNumbers.MobileThrottlingJSON
10 | 
11 |     test "json encoded size", do: assert(149 = byte_size(MobileThrottlingJSON.json()))
12 |     test "wasm with globals size", do: assert(168 = byte_size(Wasm.to_wasm(MobileThrottling)))
13 | 
14 |     test "wasm with embedded json size",
15 |       do: assert(224 = byte_size(Wasm.to_wasm(MobileThrottlingJSON)))
16 | 
17 |     @tag :skip
18 |     test "opt" do
19 |       path_wasm = Path.join(__DIR__, "mobile_throttling.wasm")
20 |       path_wat = Path.join(__DIR__, "mobile_throttling.wat")
21 |       path_opt_wasm = Path.join(__DIR__, "mobile_throttling_OPT.wasm")
22 |       path_opt_wat = Path.join(__DIR__, "mobile_throttling_OPT.wat")
23 |       wasm = Wasm.to_wasm(MobileThrottlingJSON)
24 |       File.write!(path_wasm, wasm)
25 |       System.cmd("wasm-opt", [path_wasm, "-o", path_opt_wasm, "-O"])
26 | 
27 |       %{size: size} = File.stat!(path_opt_wasm)
28 |       assert size == 168
29 | 
30 |       {wat, 0} = System.cmd("wasm2wat", [path_wasm])
31 |       File.write!(path_wat, wat)
32 |       {opt_wat, 0} = System.cmd("wasm2wat", [path_opt_wasm])
33 |       File.write!(path_opt_wat, opt_wat)
34 |     end
35 |   end
36 | 
37 |   # byte_size(Wasm.to_wasm(URLEncoding)) |> dbg()
38 | end
39 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/memory_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.MemoryTest do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.{Instance, Wasm}
 5 |   alias ComponentsGuide.Wasm.Examples.Memory
 6 | 
 7 |   describe "LinkedLists" do
 8 |     alias Memory.LinkedLists
 9 | 
10 |     test "wasm size" do
11 |       wasm = Wasm.to_wasm(LinkedLists)
12 |       assert byte_size(wasm) == 326
13 |     end
14 | 
15 |     test "multiple allocations" do
16 |       inst = LinkedLists.start()
17 |       # alloc = Instance.capture(inst, :_test_alloc, 1)
18 |       cons = Instance.capture(inst, :cons, 2)
19 |       count = Instance.capture(inst, :list_count, 1)
20 |       sum = Instance.capture(inst, :list32_sum, 1)
21 | 
22 |       enum = fn node ->
23 |         Stream.unfold(node, fn node ->
24 |           case Instance.call(inst, :hd, node) do
25 |             0x0 -> nil
26 |             value -> {value, Instance.call(inst, :tl, node)}
27 |           end
28 |         end)
29 |       end
30 | 
31 |       # i1 = alloc.(0x4)
32 |       # i2 = alloc.(0x4)
33 |       # i3 = alloc.(0x4)
34 |       l1 = cons.(3, 0x0)
35 |       l2 = cons.(4, l1)
36 |       l3 = cons.(5, l2)
37 |       l4 = cons.(6, l3)
38 | 
39 |       # Instance.write_i32(inst, i1, 0xdeadbeef)
40 |       # Instance.write_i32(inst, i1, 3)
41 |       # Instance.write_i32(inst, i2, 4)
42 |       # Instance.write_i32(inst, i3, 5)
43 | 
44 |       Instance.log_memory(inst, 0x10000, 32)
45 | 
46 |       assert Enum.to_list(enum.(l4)) == [6, 5, 4, 3]
47 |       assert Enum.to_list(enum.(l3)) == [5, 4, 3]
48 |       assert Enum.to_list(enum.(l2)) == [4, 3]
49 |       assert Enum.to_list(enum.(l1)) == [3]
50 | 
51 |       assert count.(0x0) == 0
52 |       assert count.(l1) == 1
53 |       assert count.(l2) == 2
54 |       assert count.(l3) == 3
55 |       assert count.(l4) == 4
56 | 
57 |       assert sum.(0x0) == 0
58 |       assert sum.(l1) == 3
59 |       assert sum.(l2) == 7
60 |       assert sum.(l3) == 12
61 |       assert sum.(l4) == 18
62 | 
63 |       Instance.call(inst, :reverse_in_place, l4)
64 |       Instance.log_memory(inst, 0x10000, 32)
65 |       assert Enum.to_list(enum.(l1)) == [3, 4, 5, 6]
66 |       # TODO: is this the right behavior?
67 |       assert Enum.to_list(enum.(l2)) == [4, 5, 6]
68 |       assert Enum.to_list(enum.(l3)) == [5, 6]
69 |       assert Enum.to_list(enum.(l4)) == [6]
70 |     end
71 |   end
72 | end
73 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/numeric_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.NumericTest do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Wasm
 5 |   alias ComponentsGuide.Wasm.Examples.Numeric
 6 | 
 7 |   describe "BasicMath" do
 8 |     alias Numeric.BasicMath
 9 | 
10 |     # test "validate definition", do: BasicMath.validate_definition!()
11 | 
12 |     test "i32_double" do
13 |       assert Wasm.call(BasicMath, :i32_double, 7) == 14
14 |     end
15 | 
16 |     test "f32_double" do
17 |       assert Wasm.call(BasicMath, :f32_double, 7.0) == 14.0
18 |     end
19 |   end
20 | 
21 |   describe "UnitInterval" do
22 |     alias Numeric.UnitInterval
23 | 
24 |     test "to_wat" do
25 |       assert UnitInterval.to_wat() =~ "(f32.convert_i32_s"
26 |       assert UnitInterval.to_wat() =~ "(param $value f32)"
27 |       assert UnitInterval.to_wat() =~ "(result i32)"
28 |     end
29 | 
30 |     # test "validate definition", do: UnitInterval.validate_definition!()
31 | 
32 |     test "to_int_in_range" do
33 |       # to_int_in_range = &Wasm.call(UnitInterval, :to_int_in_range, &1, &2, &3)
34 |       to_int_in_range = Wasm.capture(UnitInterval, :to_int_in_range, 3)
35 | 
36 |       assert to_int_in_range.(0.0, 1, 10) == 1
37 |       assert to_int_in_range.(0.0, 1, 10) == 1
38 |       assert to_int_in_range.(0.05, 1, 10) == 1
39 |       assert to_int_in_range.(0.099, 1, 10) == 1
40 |       assert to_int_in_range.(0.11, 1, 10) == 2
41 |       assert to_int_in_range.(0.499, 1, 10) == 5
42 |       assert to_int_in_range.(0.51, 1, 10) == 6
43 |       assert to_int_in_range.(0.999, 1, 10) == 10
44 |     end
45 |   end
46 | end
47 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/parser_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.ParserTest do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Instance
 5 |   alias ComponentsGuide.Wasm.Examples.Parser
 6 | 
 7 |   describe "HexConversion" do
 8 |     alias Parser.HexConversion
 9 | 
10 |     test "u32_to_hex_lower" do
11 |       # IO.puts(HexConversion.to_wat())
12 | 
13 |       inst = Instance.run(HexConversion)
14 |       u32_to_hex_lower = Instance.capture(inst, :u32_to_hex_lower, 2)
15 |       read = &Instance.read_memory(inst, &1, 8)
16 | 
17 |       u32_to_hex_lower.(0x00000000, 0x100)
18 |       assert read.(0x100) == "00000000"
19 | 
20 |       u32_to_hex_lower.(255, 0x100)
21 |       assert read.(0x100) == "000000ff"
22 | 
23 |       u32_to_hex_lower.(0x00ABCDEF, 0x100)
24 |       assert read.(0x100) == "00abcdef"
25 | 
26 |       u32_to_hex_lower.(0x44ABCDEF, 0x100)
27 |       assert read.(0x100) == "44abcdef"
28 | 
29 |       u32_to_hex_lower.(0xFFFF_FFFF, 0x100)
30 |       assert read.(0x100) == "ffffffff"
31 | 
32 |       u32_to_hex_lower.(1, 0x100)
33 |       assert read.(0x100) == "00000001"
34 | 
35 |       # Does NOT write outside its bounds.
36 |       assert Instance.read_memory(inst, 0x100 - 1, 1) == <<0>>
37 |       assert Instance.read_memory(inst, 0x100 + 9, 1) == <<0>>
38 |     end
39 |   end
40 | 
41 |   describe "DomainNames" do
42 |     alias Parser.DomainNames
43 | 
44 |     test "lookup_domain_name" do
45 |       inst = Instance.run(DomainNames)
46 |       lookup_domain_name = Instance.capture(inst, :lookup_domain_name, 1)
47 |       alloc_string = &Instance.alloc_string(inst, &1)
48 | 
49 |       assert lookup_domain_name.(alloc_string.("com")) == 1
50 |       assert lookup_domain_name.(alloc_string.("org")) == 1
51 |       assert lookup_domain_name.(alloc_string.("foo")) == 0
52 |     end
53 |   end
54 | end
55 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/podcast_feed_xml.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/test/components_guide/wasm/examples/podcast_feed_xml.wasm


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/podcast_feed_xml_OPT.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/test/components_guide/wasm/examples/podcast_feed_xml_OPT.wasm


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/sitemap_form_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.SitemapForm.Test do
 2 |   # FIXME
 3 |   use ExUnit.Case, async: true, register: false
 4 | 
 5 |   alias OrbWasmtime.Instance
 6 |   alias ComponentsGuide.Wasm.Examples.SitemapForm
 7 | 
 8 |   test "index.html" do
 9 |     inst = Instance.run(SitemapForm)
10 |     set_www_form_data = Instance.capture(inst, :set_www_form_data, 1)
11 |     to_html = Instance.capture(inst, String, :html_index, 0)
12 | 
13 |     [
14 |       {"urls[]", "https://example.org/a=1&b=2&c=3"},
15 |       {"urls[]", "caf+@!<.org"}
16 |     ]
17 |     |> URI.encode_query()
18 |     |> set_www_form_data.()
19 | 
20 |     html = to_html.()
21 | 
22 |     assert html =~ ~S{<!doctype html>}
23 |     assert html =~ ~S{value="https://example.org/a=1&amp;b=2&amp;c=3"}
24 |     assert html =~ ~S{value="caf+@!&lt;.org"}
25 |   end
26 | 
27 |   test "bugs" do
28 |     inst = Instance.run(SitemapForm)
29 |     set_www_form_data = Instance.capture(inst, :set_www_form_data, 1)
30 |     to_sitemap_xml = Instance.capture(inst, String, :xml_sitemap, 0)
31 |     to_html = Instance.capture(inst, String, :html_index, 0)
32 | 
33 |     [
34 |       {"urls[]", "https:"}
35 |     ]
36 |     |> URI.encode_query()
37 |     |> set_www_form_data.()
38 | 
39 |     html = to_html.()
40 | 
41 |     assert html =~ ~S{<!doctype html>}
42 |     assert html =~ ~S{value="https:"}
43 | 
44 |     assert to_sitemap_xml.() == ~S"""
45 |            <?xml version="1.0" encoding="UTF-8"?>
46 |            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
47 |            <url>
48 |            <loc>https:</loc>
49 |            </url>
50 |            </urlset>
51 |            """
52 |   end
53 | 
54 |   test "sitemap.xml" do
55 |     inst = Instance.run(SitemapForm)
56 |     set_www_form_data = Instance.capture(inst, :set_www_form_data, 1)
57 |     to_sitemap_xml = Instance.capture(inst, String, :xml_sitemap, 0)
58 | 
59 |     [
60 |       {"urls[]", "https://example.org/a=1&b=2&c=3"},
61 |       {"urls[]", "https://example.com/"}
62 |       # {"urls[]", ""}
63 |     ]
64 |     |> URI.encode_query()
65 |     |> set_www_form_data.()
66 | 
67 |     assert to_sitemap_xml.() == ~S"""
68 |            <?xml version="1.0" encoding="UTF-8"?>
69 |            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
70 |            <url>
71 |            <loc>https://example.org/a=1&amp;b=2&amp;c=3</loc>
72 |            </url>
73 |            <url>
74 |            <loc>https://example.com/</loc>
75 |            </url>
76 |            </urlset>
77 |            """
78 |   end
79 | end
80 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/sqlite_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.Sqlite.Test do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Instance
 5 | 
 6 |   alias ComponentsGuide.Wasm.Examples.Sqlite.{
 7 |     HeightsTable
 8 |   }
 9 | 
10 |   describe "HeightsTable" do
11 |     test "works" do
12 |       {inst, db} = HeightsTable.start()
13 |       # inst = Instance.run(HeightsTable)
14 | 
15 |       init = Instance.capture(inst, :init, 0)
16 |       add_height = Instance.capture(inst, :add_height, 1)
17 |       # get_count = Instance.capture(inst, :get_count, 0)
18 |       # calc_min = Instance.capture(inst, :calc_min, 0)
19 |       # calc_max = Instance.capture(inst, :calc_max, 0)
20 | 
21 |       init.()
22 |       add_height.(6)
23 |       add_height.(5)
24 |       add_height.(5)
25 |       add_height.(4)
26 |       add_height.(6)
27 |       add_height.(7)
28 |       #
29 |       #       assert get_count.() == 6
30 |       # assert calc_min.() == 4
31 |       # assert calc_max.() == 7
32 | 
33 |       # Instance.cast(inst, :init)
34 |       # Instance.call(inst, :init)
35 |       # Instance.call(inst, :add_height, 6)
36 | 
37 |       {:ok, statement} = Exqlite.Sqlite3.prepare(db, "select * from heights")
38 |       rows = Exqlite.Sqlite3.fetch_all(db, statement)
39 |       assert rows == {:ok, [[1, 99], [2, 99], [3, 99], [4, 99], [5, 99], [6, 99]]}
40 | 
41 |       # IO.inspect(rows)
42 |     end
43 |   end
44 | end
45 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/svg_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuide.Wasm.Examples.SVGTest do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.Instance
 5 | 
 6 |   alias ComponentsGuide.Wasm.Examples.SVG
 7 | 
 8 |   describe "Square" do
 9 |     alias SVG.Square
10 | 
11 |     test "creates a black square" do
12 |       instance = Instance.run(Square)
13 | 
14 |       svg = Square.read_body(instance)
15 | 
16 |       assert svg == ~S"""
17 |              <svg width="64" height="64"><rect width="64" height="64" fill="#000000ff" /></svg>
18 |              """
19 |     end
20 | 
21 |     test "can set color_hex global" do
22 |       instance = Instance.run(Square)
23 | 
24 |       Instance.set_global(instance, :color_hex, 0xAA33BBFF)
25 |       svg = Square.read_body(instance)
26 | 
27 |       assert svg == ~S"""
28 |              <svg width="64" height="64"><rect width="64" height="64" fill="#aa33bbff" /></svg>
29 |              """
30 |     end
31 |   end
32 | end
33 | 


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/url_encode.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/test/components_guide/wasm/examples/url_encode.wasm


--------------------------------------------------------------------------------
/test/components_guide/wasm/examples/url_encode_OPT.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ComponentsGuide/components_guide/a183f5a2df2baf4bc6e92e6723facc5a3ea02845/test/components_guide/wasm/examples/url_encode_OPT.wasm


--------------------------------------------------------------------------------
/test/components_guide/wasm/i32/string_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule Orb.I32.String.Test do
 2 |   use ExUnit.Case, async: true
 3 | 
 4 |   alias OrbWasmtime.{Instance, Wasm}
 5 |   alias Orb.I32
 6 | 
 7 |   test "wasm size" do
 8 |     wasm = Wasm.to_wasm(I32.String)
 9 |     assert byte_size(wasm) == 152
10 |   end
11 | 
12 |   test "strlen" do
13 |     inst = Instance.run(I32.String)
14 |     strlen = Instance.capture(inst, :strlen, 1)
15 | 
16 |     Instance.write_string_nul_terminated(inst, 0x00100, "hello")
17 |     Instance.write_string_nul_terminated(inst, 0x00200, "me")
18 |     assert strlen.(0x00100) == 5
19 |     assert strlen.(0x00200) == 2
20 |     assert strlen.(0x00300) == 0
21 |   end
22 | 
23 |   test "streq" do
24 |     inst = Instance.run(I32.String)
25 |     streq = Instance.capture(inst, :streq, 2)
26 | 
27 |     Instance.write_string_nul_terminated(inst, 0x00100, "hello")
28 |     Instance.write_string_nul_terminated(inst, 0x00200, "world")
29 |     assert streq.(0x00100, 0x00200) == 0
30 | 
31 |     Instance.write_string_nul_terminated(inst, 0x00100, "hello")
32 |     Instance.write_string_nul_terminated(inst, 0x00200, "hello")
33 |     assert streq.(0x00100, 0x00200) == 1
34 | 
35 |     Instance.write_string_nul_terminated(inst, 0x00100, "hellp")
36 |     Instance.write_string_nul_terminated(inst, 0x00200, "hello")
37 |     assert streq.(0x00100, 0x00200) == 0
38 | 
39 |     Instance.write_string_nul_terminated(inst, 0x00100, "hi\0\0\0")
40 |     Instance.write_string_nul_terminated(inst, 0x00200, "hip\0\0")
41 |     assert streq.(0x00100, 0x00200) == 0
42 | 
43 |     Instance.write_string_nul_terminated(inst, 0x00100, "hip\0\0")
44 |     Instance.write_string_nul_terminated(inst, 0x00200, "hi\0\0\0")
45 |     assert streq.(0x00100, 0x00200) == 0
46 | 
47 |     Instance.write_string_nul_terminated(inst, 0x00100, "\0\0\0\0\0")
48 |     Instance.write_string_nul_terminated(inst, 0x00200, "\0\0\0\0\0")
49 |     assert streq.(0x00100, 0x00200) == 1
50 | 
51 |     Instance.write_string_nul_terminated(inst, 0x00100, "h\0\0\0\0")
52 |     Instance.write_string_nul_terminated(inst, 0x00200, "\0\0\0\0\0")
53 |     assert streq.(0x00100, 0x00200) == 0
54 | 
55 |     Instance.write_string_nul_terminated(inst, 0x00100, "\0\0\0\0\0")
56 |     Instance.write_string_nul_terminated(inst, 0x00200, "h\0\0\0\0")
57 |     assert streq.(0x00100, 0x00200) == 0
58 | 
59 |     assert streq.(0x00300, 0x00400) == 1
60 |   end
61 | end
62 | 


--------------------------------------------------------------------------------
/test/components_guide_web/components/calendar_component_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.CalendarComponentTest do
 2 |   # use ExUnit.Case
 3 |   # import Phoenix.LiveViewTest
 4 |   use ComponentsGuideWeb.ComponentCase
 5 |   alias ComponentsGuideWeb.CalendarComponent
 6 | 
 7 |   describe "CalendarComponent.calendar_grid" do
 8 |     setup context do
 9 |       assigns = context[:assigns]
10 |       el = render_fragment(&CalendarComponent.calendar_grid/1, assigns)
11 |       {:ok, el: el}
12 |     end
13 | 
14 |     @tag assigns: [current_date: ~D[2022-04-01]]
15 |     test "1st April 2022", %{el: el} do
16 |       current_date = el |> find("td[aria-current=date]")
17 |       assert "01 Apr" == current_date |> text() |> String.trim()
18 |       assert current_date |> Enum.count() == 1
19 | 
20 |       assert 7 == count(el, "thead th")
21 |       assert 9 == count(el, "tbody tr")
22 |       assert 9 * 7 == count(el, "tbody td:not([role=presentation])")
23 |     end
24 | 
25 |     @tag assigns: [current_date: ~D[2022-04-15]]
26 |     test "15th April 2022", %{el: el} do
27 |       current_date = el |> find("td[aria-current=date]")
28 |       assert "15 Apr" == current_date |> text() |> String.trim()
29 |     end
30 | 
31 |     @tag assigns: [current_date: ~D[2022-01-03]]
32 |     test "3rd January 2022", %{el: el} do
33 |       current_date = el |> find("td[aria-current=date]")
34 |       assert "03 Jan" == current_date |> text() |> String.trim()
35 |       assert 9 * 7 == count(el, "tbody td:not([role=presentation])")
36 |     end
37 |   end
38 | end
39 | 


--------------------------------------------------------------------------------
/test/components_guide_web/controllers/page_controller_test.exs:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.PageControllerTest do
2 |   use ComponentsGuideWeb.ConnCase
3 | 
4 |   test "GET /", %{conn: conn} do
5 |     conn = get(conn, "/")
6 |     assert html_response(conn, 200) =~ "Components.Guide"
7 |   end
8 | end
9 | 


--------------------------------------------------------------------------------
/test/components_guide_web/views/error_view_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ErrorViewTest do
 2 |   use ComponentsGuideWeb.ConnCase, async: true
 3 | 
 4 |   # Bring render/3 and render_to_string/3 for testing custom views
 5 |   import Phoenix.View
 6 | 
 7 |   test "renders 404.html" do
 8 |     assert render_to_string(ComponentsGuideWeb.ErrorView, "404.html", []) == "Not Found"
 9 |   end
10 | 
11 |   test "renders 500.html" do
12 |     assert render_to_string(ComponentsGuideWeb.ErrorView, "500.html", []) ==
13 |              "Internal Server Error"
14 |   end
15 | end
16 | 


--------------------------------------------------------------------------------
/test/components_guide_web/views/layout_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.LayoutViewTest do
2 |   use ComponentsGuideWeb.ConnCase, async: true
3 | end
4 | 


--------------------------------------------------------------------------------
/test/components_guide_web/views/page_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule ComponentsGuideWeb.PageViewTest do
2 |   use ComponentsGuideWeb.ConnCase, async: true
3 | end
4 | 


--------------------------------------------------------------------------------
/test/components_guide_web/views/research_html_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ResearchHTMLTest do
 2 |   use ComponentsGuideWeb.ConnCase, async: true
 3 | 
 4 |   alias ComponentsGuideWeb.ResearchHTML, as: Subject
 5 | 
 6 |   describe "humanize_bytes/1" do
 7 |     test "0" do
 8 |       assert Subject.humanize_bytes(0) == "0 B"
 9 |     end
10 | 
11 |     test "1" do
12 |       assert Subject.humanize_bytes(1) == "1 B"
13 |     end
14 | 
15 |     test "1023" do
16 |       assert Subject.humanize_bytes(1023) == "1023 B"
17 |     end
18 | 
19 |     test "1024" do
20 |       assert Subject.humanize_bytes(1024) == "1.0 kB"
21 |     end
22 | 
23 |     test "1025" do
24 |       assert Subject.humanize_bytes(1025) == "1.0 kB"
25 |     end
26 | 
27 |     test "1_000_000" do
28 |       assert Subject.humanize_bytes(1_000_000) == "976.6 kB"
29 |     end
30 | 
31 |     test "1_048_575" do
32 |       assert Subject.humanize_bytes(1_048_575) == "1024.0 kB"
33 |     end
34 | 
35 |     test "1_048_576" do
36 |       assert Subject.humanize_bytes(1_048_576) == "1.0 mB"
37 |     end
38 |   end
39 | 
40 |   describe "humanize_count/1" do
41 |     test "0" do
42 |       assert Subject.humanize_count(0) == "0"
43 |     end
44 | 
45 |     test "1" do
46 |       assert Subject.humanize_count(1) == "1"
47 |     end
48 | 
49 |     test "999" do
50 |       assert Subject.humanize_count(999) == "999"
51 |     end
52 | 
53 |     test "1000" do
54 |       assert Subject.humanize_count(1000) == "1.0K"
55 |     end
56 | 
57 |     test "10,000" do
58 |       assert Subject.humanize_count(10_000) == "10.0K"
59 |     end
60 | 
61 |     test "1,000,000" do
62 |       assert Subject.humanize_count(1_000_000) == "1.0M"
63 |     end
64 |   end
65 | end
66 | 


--------------------------------------------------------------------------------
/test/support/channel_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ChannelCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   channel tests.
 5 | 
 6 |   Such tests rely on `Phoenix.ChannelTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   it cannot be async. For this reason, every test runs
12 |   inside a transaction which is reset at the beginning
13 |   of the test unless the test case is marked as async.
14 |   """
15 | 
16 |   use ExUnit.CaseTemplate
17 | 
18 |   using do
19 |     quote do
20 |       # Import conveniences for testing with channels
21 |       use Phoenix.ChannelTest
22 | 
23 |       # The default endpoint for testing
24 |       @endpoint ComponentsGuideWeb.Endpoint
25 |     end
26 |   end
27 | 
28 |   setup _tags do
29 |     :ok
30 |   end
31 | end
32 | 


--------------------------------------------------------------------------------
/test/support/component_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ComponentCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   component tests.
 5 |   """
 6 | 
 7 |   use ExUnit.CaseTemplate
 8 | 
 9 |   using do
10 |     quote do
11 |       import Phoenix.LiveViewTest
12 | 
13 |       defdelegate find(el, selector), to: Floki
14 |       defdelegate text(html), to: Floki
15 | 
16 |       def render_fragment(component, assigns) do
17 |         html = render_component(component, assigns)
18 |         {:ok, el} = Floki.parse_fragment(html)
19 |         el
20 |       end
21 | 
22 |       def count(el, selector) do
23 |         find(el, selector) |> Enum.count()
24 |       end
25 |     end
26 |   end
27 | 
28 |   setup _tags do
29 |     :ok
30 |   end
31 | end
32 | 


--------------------------------------------------------------------------------
/test/support/conn_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule ComponentsGuideWeb.ConnCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   tests that require setting up a connection.
 5 | 
 6 |   Such tests rely on `Phoenix.ConnTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   it cannot be async. For this reason, every test runs
12 |   inside a transaction which is reset at the beginning
13 |   of the test unless the test case is marked as async.
14 |   """
15 | 
16 |   use ExUnit.CaseTemplate
17 | 
18 |   using do
19 |     quote do
20 |       # Import conveniences for testing with connections
21 |       import Plug.Conn
22 |       import Phoenix.ConnTest
23 |       import ComponentsGuideWeb.ConnCase
24 | 
25 |       alias ComponentsGuideWeb.Router.Helpers, as: Routes
26 | 
27 |       # The default endpoint for testing
28 |       @endpoint ComponentsGuideWeb.Endpoint
29 | 
30 |       use ComponentsGuideWeb, :verified_routes
31 |     end
32 |   end
33 | 
34 |   setup _tags do
35 |     {:ok, conn: Phoenix.ConnTest.build_conn()}
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/test/test_helper.exs:
--------------------------------------------------------------------------------
1 | ExUnit.start()
2 | 


--------------------------------------------------------------------------------