Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data

Overview

CIDEr

Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data.

Website: Start using Cider

About CIDEr

Cider was created to fill a niche between ease-of-use and versatility. The current market of board game/card creating applications seems to fit into two categories: 1) advanced software with a steep learning curve and hundreds of pages of documentation, and 2) user-friendly graphical interface, but limited versatility. Cider is absolutely closer to the first category in execution since it currently provides no graphical template editor, but it makes up for the learning curve by using a templating language that many are already familiar with (HTML/Handlebars and CSS).

1. Template

Create a template for each of the varying card fronts and card backs using HTML/Handlebars and CSS. Use variables to reference attributes that are unique to each card. Use control logic to conditionally display specific parts of the template.

screen-1

1.1 Built-in Handlebars Helpers

Built-in helpers reference

1.2 Card Attributes and Assets

Card Attributes

Reference any card attribute (names are in kebab case Ex. 'Mystic Power' -> 'mystic-power').

{{card.mystic-power}}

Assets

Reference any asset (names are in kebab case Ex. 'Apple Image' -> 'apple-image').

<img src="{{assets.apple-image}}"/>

1.3 Basic Helpers

Index {{index}}

Index an object/array with another variable (Ex. assets[card.image]).

{{index assets card.image}}

Compile Images {{compileImages}}

Compile text containing {{asset-name}} variables.

{{compileImages card.description width=100}}

Ex. Description Field

Convert up to two {{apple}} into a {chip}} each

image-1

Alternatively you can specify a multiplier to display multiple of a single image.

Convert {{apple 2}} into {{chip}}

1.4 Control Helpers

Repeat {{repeat}}

Repeat the contained HTML n number of times.

{{#repeat 5}}
    Any arbitrary HTML
{{/repeat}}

1.5 Boolean Helpers

AND {{and}}

{{#if (and (eq card.type "mystic") (gt card.power 4))}}
{{/if}}

OR {{or}}

{{#if (or (eq card.type "mystic") (gt card.power 4))}}
{{/if}}

1.6 Comparison Helpers

Equal {{eq}}

{{#if (eq card.type 'mystic')}}
{{/if}}

Greater Than {{gt}}

{{#if (gt card.power 5)}}
{{/if}}

Greater Than or Equal to{{gte}}

{{#if (gte card.power 5)}}
{{/if}}

Less Than {{lt}}

{{#if (lt card.power 4)}}
{{/if}}

Less Than or Equal to {{lte}}

{{#if (lte card.power 4)}}
{{/if}}

1.7 String Helpers

Concatenate {{concat}}

{{concat card.type "-experience"}}

Kebab-Case {{kebabcase}}

{{kebabcase "Clear Orb"}}

Upper-Case {{uppercase}}

{{uppercase "Clear Orb"}}

Lower-Case {{lowercase}}

{{lowercase "Clear Orb"}}

Pad Zeros {{padZeroes}}

Pad a given number by n zeros.

{{padZeros card.id 3}}

1.8 Math Helpers

Add {{add}}

{{add card.power 2}}

Subtract {{sub}}

{{sub card.power 2}}

Multiply {{multiply}}

{{multiply card.power 2}}

Divide {{divide}}

{{divide card.power 2}}

Ceiling {{ceil}}

{{ceil card.power}}

Floor {{floor}}

{{floor card.power}}

Absolute Value {{abs}}

{{abs card.power}}

2. Tabulate

Create attributes relevant to your game and fill out their values for each card. Choose the front and back templates for each card.

screen-2

3. Preview

Preview the way the cards look with the tabular data applied to the templates.

screen-3

4. Export

Export the cards as individual images (PNG), or as card sheets ready to print (PDF). Adjust the paper size, paper margins, and spacing between cards.

screen-4

Creative Ownership

Anything you create using CIDEr is your own intellectual property. The website hosts nothing and all of your card data and assets sit in IndexedDB on your browser. You may export and import your entire database to a .json file to use between devices. You may host your own version of the CIDEr website by downloading the source code and running npm install && ng serve.

The repository itself is protected by AGPL-3.0 to ensure the project remains open-sourced.

Comments
  • Some CSS style tags not working in export

    Some CSS style tags not working in export

    I found that when working with CSS grid it is properly displayed in the UI but the export is not working properly.

    I attached below the file content I was using and how it should look like (left, bottom-left, bottom-middle, bottom-right are square images - don't mind the colors please. Just fiddling around with the tool :))

    image

    1. grid-area is not recognized at all by the export (change div classes from one to onename, two to twoname, ...)
    2. Overlapping grid parts are not displayed correctly and used spacings/margins are also somehow a bit different in export
    3. CSS Tricks with :after to display an icon behind a div are also not working in the export.

    See also: database.zip

    <html>
        <head>
            <style type="text/css">
                .cutframe {
                    margin: 0px;
                    width: 1111px;
                    height: 816px;
                    background-color: hsl(0, 0%, 90%);
                    border: 36px solid hsl(0, 0%, 90%);
                    color: hsl(0, 0%, 90%);
                    font-family: "Segoe UI", Arial, sans-serif;
                    font-size: 33px;
                }
                .card {
                    width: 1039px;
                    height: 744px;
                    border-radius: 25px;
                    background-color: hsl(0, 0%, 40%);
                    border: 36px solid hsl(0, 0%, 100%);
                    display: grid;
                    grid-template-columns: 225px auto 225px auto 141px 84px;
                    grid-template-rows: 15px 84px 20px 106px auto 225px;
                    grid-template-areas: 
                        "one . . . . ."
                        "one header header header header number"
                        "one . . . . ."
                        "one content content content content content"
                        "leftlink content content content content content"
                        "two bottom1 three bottom2 four four";
                    column-gap: 0;
                    row-gap: 0;
                }
                .card>.icon img {
                    width: 225px;
                    border-radius: 25px;
                }
                .card .one {
                    grid-row: 1 / 4;
                    grid-column: 1;
                }
                .card .two {
                    grid-row: 6;
                    grid-column: 1;
                }
                .card .three {
                    grid-row: 6;
                    grid-column: 3;
                }
                .card .four {
                    grid-row: 6;
                    grid-column: 5 / 6;
                }
                .card .onename {
                    grid-area: one;
                }
                .card .two {
                    grid-area: two;
                }
                .card .three {
                    grid-area: three;
                }
                .card .four {
                    grid-area: four;
                }            
                .card .header {
                    background-color: #f2a029;
                    color: #ffffff;
                    grid-area: header;
                    font-size: 48px;
                    padding-left: 20px;
                    line-height: 84px;
                }                        
                .card .header span {
                    display: inline-block;
                    vertical-align: middle;
                    font-family: "Segoe UI", Arial, sans-serif;
                    text-transform: uppercase;
                }
                .card .number {
                    grid-area: number;
                    padding-left: 0 !important;
                    background-color: #ffffff;
                    color: #000000;
                    font-weight: 800;
                    font-family: sans-serif;
                    text-align: center;
                }
                .card .content {
                    grid-area: content;
                    padding-left: 45px;
                }
                .card .content div:not(:last-child) {
                    margin-bottom: 20px;
                }
                .card .content > div.effect {
                    background-color: #ffffffaa;
                    color: #000000;
                    padding: 10px;
                    padding-left: 40px;
                    padding-right: 10px;
                    line-height: 1.3;
                }
                div.effect > .icon {
                    margin-left: -65px;
                    margin-top: -3px;
                    float: left;
                    width: 50px;
                    height: 50px;
                }
                div.effect > .icon:after {
                    content: " ";
                    text-indent: -999em;
                    display: block;
                    background: url("ressources/behind.svg");
                    background-size: 70px;
                    margin: -60px 0 0 -10px;
                    width: 70px;
                    height: 70px;
                }
            </style>
        </head>
        <body>
    <div class="cutframe">
        <div class="card">
            <div class="header"><span>Title</span></div>
            <div class="header number"><span>1</span></div>
            <div class="content">
                <div class="effect">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </div>
                <div class="effect">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
                </div>
            </div>
            <div class="icon one"><img src="ressources/image-1.svg" /></div>
            <div class="icon two"><img src="ressources/image-2.svg" /></div>
            <div class="icon three"><img src="ressources/image-3.svg" /></div>
            <div class="icon four"><img src="ressources/image-4.svg" /></div>
        </div>
    </div>
        </body>
    </html>
    
    bug 
    opened by psistorm 19
  • CSS grid not supported when exporting to PDF.

    CSS grid not supported when exporting to PDF.

    I have a card with the following grid as shown in Thumbnails in the editor:

    image

    In Export Preview it looks fine, but after exporting to PDF I get:

    image

    CSS used:

    .card {
        width: 765px;                                   /* Width:  2.55" * 300 DPI */
        height: 1050px;                                 /* Height: 3.50" * 300 DPI */
        text-align: center;
        display: flex;
        flex-direction: column;
        border: 45px solid hsl(0, 0%, 10%);
        color: hsl(0, 0%, 10%);
        font-weight: 600;
        font-size: 50px;
    }
    .card .content {
        flex: 1;
        display: grid;
        grid: 33% 33% 33% / 1fr 1fr;
        grid-auto-flow: column;
        width: 100%;
        height: 50%;
    
    }
    .content div {
        border: 5px solid gray;
        display: grid;
        grid: 100% / 40% 60%;
    }
    .content img {
        width: 100%;
        height: 90%;
        margin: auto 0;
        object-fit: contain;
    }
    .content p {
        display: inline-block;
        padding: 0;
        margin: auto 0;
        font-weight: 6000;
        font-size: 70px;
    }
    
    opened by chubby1968 7
  • Create command line interface (CLI)

    Create command line interface (CLI)

    Users have requested a CLI for automated tasks.

    Sample CLI calls:

    node cider-cli.js function=export-pdf database=database.json cards=cards.csv assets=assets/ output=output.pdf
    
    node cider-cli.js function=export-png database=database.json cards=cards.csv assets=assets/ output=output.zip
    

    cards.csv

    id,name,count,frontTemplate,backTemplate,attr1,attr2,...
    1,"CLI Card",1,"Apple Front","Apple Back","val1","val2",...
    2,"GUI Card",1,"Apple Front","Apple Back","val1","val2",...
    

    assets Pass in a directory for the assets. Each file in the provided directory is indexed by its name. assets/poison-apple.png => referenced by {{assets.poison-apple}}

    database Pass in an exported database.js. This is used for containing the templates.

    Feature request origin: https://boardgamegeek.com/thread/2818611/new-application-cider-card-ide-designing-game-card

    enhancement 
    opened by hristoiankov 6
  • Embed Icons?

    Embed Icons?

    Most card game prototyping software has the ability replace certain strings with images in the descriptions of cards. As of now, it doesn't appear that it's possible within the current system, but it'd certainly be a welcome if not essential feature. If there is a way to do so currently, please inform me! Thanks.

    opened by zorro-weaver 3
  • Export PDF: Cards per page setting does not work on page 3+ (i.e. after first pair of pages with fronts and backs)

    Export PDF: Cards per page setting does not work on page 3+ (i.e. after first pair of pages with fronts and backs)

    When exporting cards to PDF the "cards per page" setting does not work on page 3+ (i.e. after first pair of pages with fronts and backs).

    In image below the 3rd and 4th page contains 6 cards per page.

    image

    opened by chubby1968 2
  • Implement attribute validation

    Implement attribute validation

    When building decks, it would be nice to apply validation to certain values:

    Some examples include:

    • A card has an elemental type. Since there are limited types, and it would be nice to be able to define what those limitations are.
    • A hero has a health attribute. It would be nice to set a regex that limits that attribute to either a number or another game-specific special symbol.

    A simple implementation could be just setting a regex, but I would also like to see creating a list of valid values that could be selected from a dropdown.

    A stretch goal could also be allowing attributes to use existing validation criteria (using Pokemon as an example, using the same validation to select both the card's type and weakness).

    enhancement 
    opened by greenstack 2
  • Consider version control capability options

    Consider version control capability options

    Consider options for saving iterations of a card game during development.

    Implementation Options:

    Export to Repository (Already possible)

    Export database and save into a repository. The database.json file can be diffed between versions in the repo. Working iterations of the game can be tagged in the repository. This is a little harder to track since you are only making changes to a single file and it may be a bit daunting to read that large .json file. Running diff on such a large file (containing many images) crashes.

    Card Editioning (Partial Versioning)

    Add versioning to individual cards (1st edition, 2nd, ...). Create a new CardVersion/CardEdition table that contains a starting entry for each card. This can also already be achieved by just creating a new card "Ex. Red Apple" with a property of edition set to 1, 2, etc.

    Exploded Project Structure (Entire reworking)

    This has been hinted at by user requests, but the idea is that the database file can instead be exploded into many individual files that are part of a card game project. Ex. /assets folder with images, project root with cards.csv, attributes.csv, templates.csv, /templates folder with .html templates. Cider can be redesigned to use the file system instead of the indexed-db database. Unfortunately this change will make cider unable to run in the browser because of restrictions on file system access from browsers. We could investigate directly integrating with github repositories and pulling/pushing data to those repos on load/save. We could also look into making Cider a standalone app in addition to a web app that can save in multiple ways (db vs exploded).

    enhancement 
    opened by hristoiankov 1
  • Create an export to tabletop simulator

    Create an export to tabletop simulator

    Create a png sheet export to be used as an import into Tabletop Simulator.

    Sheet format Reference: https://kb.tabletopsimulator.com/custom-content/custom-deck/

    enhancement 
    opened by hristoiankov 1
  • Make application mobile friendly

    Make application mobile friendly

    Make the theme responsive to mobile devices, or at least set min dimensions for the viewer.

    Application Theme

    • Relax the minimum page size for mobile devices
    • Stack horizontally stacked interfaces vertically for mobile

    Template Editor Unfortunately there is a hard limitation with the editor we have chosen (Monaco): https://github.com/microsoft/monaco-editor/issues/246

    Their mobile support issue has been open since 2016, so we will need to change editors in order to support mobile. This may be a non-starter if it ends up hurting the desktop experience unless a decent new editor with mobile support is selected.

    PDF Export pdfMake does not support mobile devices. We may need to switch to jsPDF.

    enhancement mobile 
    opened by hristoiankov 1
  • Importing list of cards in one game erase all cards in other games.

    Importing list of cards in one game erase all cards in other games.

    If you have more than 1 game (besides the standard apple game) and you import a list of cards (.cvs) into one game then all cards belonging to the other games will be erased.

    opened by chubby1968 0
  • Bump karma from 6.3.15 to 6.3.16 in /cider-app

    Bump karma from 6.3.15 to 6.3.16 in /cider-app

    Bumps karma from 6.3.15 to 6.3.16.

    Release notes

    Sourced from karma's releases.

    v6.3.16

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)
    Changelog

    Sourced from karma's changelog.

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)
    Commits
    • ab4b328 chore(release): 6.3.16 [skip ci]
    • ff7edbb fix(security): mitigate the "Open Redirect Vulnerability"
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Add support for Google Fonts

    Add support for Google Fonts

    Google Fonts render correctly in the preview window, but fail to render when exporting, resulting in browser default faults instead. It would be great if the exports could render the fonts.

    opened by timkyoung 1
  • Alert:

    Alert: "Unsaved changes will be lost!"

    Failing to save changes to templates before navigating away from the templates page results in unsaved changes being lost. Displaying an alert that reminds the user that unsaved changes will be lost when user attempts to navigate away from the templates page would help prevent losing unsaved changes. (An auto-save feature would mitigate this issue as well, but is likely to be more difficult to implement. So the alert should be fine.)

    opened by timkyoung 0
  • Relocate Edit and Delete buttons to left side of Cards Listing page

    Relocate Edit and Delete buttons to left side of Cards Listing page

    I'm working on a game with 21 different possible card attributes. Currently when I want to edit a card I have to scroll to the right on the Cards/Listing page to be able to access the edit button, due to the large number of attributes my cards have. It would be nice to be able to access the Edit and Delete buttons without having to use the horizontal scroll bar. This could be achieved by relocating the edit and delete buttons to the left side of the Cards/Listing page.

    opened by timkyoung 0
  • Return to previously selected Template and Card when navigating away from then back to templates section

    Return to previously selected Template and Card when navigating away from then back to templates section

    Sometimes while working on a template I find it necessary to refresh my memory about one of the attributes or to add a new asset, etc. This means I have to navigate away from the template section. Upon returning to the template section neither the template nor the card that I was working on is loaded. So I have to re-select both template and card. It would be convenient if the application could remember which template and card were loaded an queue those up upon returning to the template section.

    opened by timkyoung 1
  • PDF export not working on iPad

    PDF export not working on iPad

    PDFMake doesn't seem to have great mobile support. We will have to consider changing pdf generation libraries.

    https://github.com/bpampuch/pdfmake/issues/935

    bug mobile external library issue 
    opened by hristoiankov 0
Releases(0.3)
  • 0.3(Dec 10, 2022)

    What's Changed

    • Expanded helpers (basic, control, boolean, comparison, string, math) by @hristoiankov in https://github.com/oatear/cider/pull/27
    • Electron by @hristoiankov in https://github.com/oatear/cider/pull/34
    • New exploded project file structure
    • New complete sample game: Cosmic Apple
    • Welcome page added
    • Open recent feature in desktop application
    • Loading/opening/saving improvements
    • Fixed issue when importing cards .csv and clearing out data in other games/decks
    • Replaced Game functionality/table with Deck functionality/table

    Full Changelog: https://github.com/oatear/cider/compare/0.2...0.3

    Source code(tar.gz)
    Source code(zip)
    cider-0.3.0-arm64.dmg(1353.12 MB)
    cider.Setup.0.3.0.exe(215.34 MB)
  • 0.2(Mar 29, 2022)

    What's Changed

    • Low ink mode added by @hristoiankov in https://github.com/oatear/cider/pull/7
    • Bump karma from 6.3.15 to 6.3.16 in /cider-app by @dependabot in https://github.com/oatear/cider/pull/8
    • optimized cards page and image urls by @hristoiankov in https://github.com/oatear/cider/pull/9
    • Attribute types: text, text-area, option by @hristoiankov in https://github.com/oatear/cider/pull/16
    • Tabletop Simulator sheet export + export render fixes by @hristoiankov in https://github.com/oatear/cider/pull/17
    • Mobile support styling by @hristoiankov in https://github.com/oatear/cider/pull/19
    • CSV import export by @hristoiankov in https://github.com/oatear/cider/pull/20
    • Compile images multiplier feature by @hristoiankov in https://github.com/oatear/cider/pull/21
    • cards per page bug fix by @hristoiankov in https://github.com/oatear/cider/pull/23

    New Contributors

    • @hristoiankov made their first contribution in https://github.com/oatear/cider/pull/7
    • @dependabot made their first contribution in https://github.com/oatear/cider/pull/8

    Full Changelog: https://github.com/oatear/cider/compare/0.1...0.2

    Source code(tar.gz)
    Source code(zip)
  • 0.1(Feb 25, 2022)

Project Cider. A new look into listening and enjoying Apple Music in style and performance. 🚀

Links Wiki Request Feature Report Bug View The Releases Install Sources Compiling and Configuration For more information surrounding configuration, co

Cider Collective 5.8k Jan 5, 2023
A tiny, reactive JavaScript library for structured state and tabular data.

A JavaScript library for structured state. Using plain old JavaScript objects to manage data gets old very quickly. It's error-prone, tricky to track

tinyplex 1.4k Jan 1, 2023
Successor of the flowchart-fun syntax. Store tabular data and graph information in the same document.

graph-selector-syntax A syntax for storing graphs and tabular data in plain text View Examples Installation npm install graph-selector Usage import {

Tone Row 32 Dec 15, 2022
Cards Against Humanity Game Client made with ⚡Nextron (Next.js + Electron) and Typescript

CAH Client Introduction This project is one of the other projects related to the Cards Against Humanity (CAH) game. This client is made in Electron, u

null 3 Jun 17, 2022
Clinton Mbonu 20 Jun 30, 2022
Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card. Uses simplenotsimpler/modern-table library.

SimpleNotSimpler 6 Feb 17, 2022
👾 Simple creating cards using canvas. Welcome, Rank, Info and so on.

⭐ discord-canvas-card Are you developing a bot using DiscordJS and you need beautiful images created using Canvas? You can create great welcome, goodb

Gusarov 6 Dec 18, 2022
This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a

Andrew Tsegaye 4 Mar 4, 2023
libnIDE is an IDE for DS programmers using libnds!

UPDATE: Since I haven't had a whole lot of time to spend on this and also some bugs I don't know how to fix, I am going to stop work on libnIDE. No, n

Kenyon Bowers (CEO of BowersIndustry) 2 Jun 3, 2022
Cardmatchinggamebyercan - A card-matching game made with Flutter.

card_matching_game_by_ercan A card-matching game. Working Demo: https://confident-austin-19dbd2.netlify.app Getting Started This project is a starting

Ercan Tomac 17 Dec 14, 2022
SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

Benjamin Piper 2 Oct 3, 2022
The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台,可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便,前端使用流行的layui界面美观大方。 采用组件开发技术,提高系统的灵活性和可扩展性;采

Qian Chen 38 Dec 27, 2022
Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and easy to use it

Digispark_Overmaster Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and

Yehia Elborma 5 Nov 14, 2022
Unfurl links into rich cards, as seen in places like Slack and Twitter

eleventy-plugin-unfurl Turn URLs into rich cards. Show a preview image, page title, description and other meta information all inside a neatly present

David Darnes 38 Dec 16, 2022
Additional themes for Lovelace Mushroom Cards 🍄

?? Mushroom Themes Mushroom themes allow you to customize your Mushroom dashboard using Home Assistant themes. ⚠️ It's only a theme! You need to insta

Paul Bottein 127 Dec 24, 2022
Customizable Codegrepper Stat cards.

CodeGrepper Cards Render your grepper data on your profile. The average server reponse is around 3seconds on the first request. Config Base URL https:

Jareer Abdullah 1 Apr 24, 2022
A free & open source project to save your passwords, notes & credit cards

Free & open source project to save your passwords, notes & credit cards with a clean console UI with multiples features such as show information/create information/delete information

null 4 Aug 8, 2022
A front-end only implementation of linked template cards for Lovelace

Linked Lovelace by @daredoes A Javascript/Websocket way to do templating in the Lovelace UI Support Hey you! Help me out for a couple of ?? or a ☕ ! F

Daniel Evans 13 Dec 12, 2022
Follow along with blog posts, code samples, and practical exercises to learn how to build serverless applications from your local Integrated development environment (IDE).

Getting started with serverless This getting started series is written by the serverless developer advocate team @AWSCloud. It has been designed for d

AWS Samples 55 Dec 28, 2022