Devlinks

My public solution to the Frontend Mentor link-sharing app challenge: a guest editor that saves a profile and up to five links in this browser. It keeps the challenge's design and copy, and it has no accounts. The daily-use Devlinks, with sign-in and my own content, is a separate private suite app.

Local workflow

Use Node24. Run npm ci, then npm run dev. Installs need no token. /dashboard/links edits up to five platform URLs; /dashboard/profile-details edits a name, optional email and picture. Each section saves independently. The preview and Copy links use only saved values. Changing pages retains unsaved edits; reloading restores the saved version. /login and /create-account return to the welcome page instead of collecting credentials.

Saved in this browser

Saved data stays under devlinks.saved-draft.v1 in this browser origin. PNG/JPEG pictures must decode and be at most256KB and1024×1024pixels. Web Locks serialize saves and an expected stored revision rejects stale tabs. If locking or storage is unavailable, saving fails visibly. Malformed drafts remain untouched until the person downloads a backup and explicitly resets that one key. Saved drafts are not encrypted; anyone with access to this browser profile may read them.

Verification

npm test runs the validation, serialization, reorder and copy-feedback tests, plus tests/fm-solution-only.test.ts, which keeps this solution free of the sign-in package and AUTH_* settings. npm run lint, npm run typecheck and npm run build check the candidate. After building, npm run test:browser starts its own production server at127.0.0.1:4392 and exercises the guest editor (persistence, keyboard/pointer behavior, storage failure and conflict, image decode, clipboard denial and400/768/1440layouts). All data is synthetic.

The historical37image assets remain unchanged. Instrument Sans is self-hosted from Google Fonts with its original OFL license. Full premium design stills were not available for this preparation; it retains the historical purple/white editor and preview composition without claiming pixel-exact compliance. The five-link cap is historical behavior, not a new claim about the official brief.

The empty links-editor illustration loads eagerly with a high fetch priority because it is visible in the initial viewport. The server page also preloads that SVG so its request can start before the local draft finishes loading. The image, its dimensions and the editor's save behavior stay the same. Browser regressions check the initial document's preload hint and Chrome's actual initial request priority at 400, 768 and 1440px in both display preferences.

The original exercise notes are retained below. Old Shoelace notes describe the former stack (the unused Docker setup was removed) and are not the current setup instructions.

---

Issues

404 on .svg. Next js tries to get them from the public file

cannot fix it with

// @ts-ignore
// import { setBasePath } from "@shoelace-style/shoelace/cdn/utilities/base-path.js"
import {
  getBasePath,
  setBasePath,
} from "@shoelace-style/shoelace/dist/utilities/base-path.js"
// import { setBasePath } from "@shoelace-style/shoelace/dist/assets/icons"

setBasePath("/@shoelace-style/shoelace/dist")
console.log(getBasePath())
// setBasePath("@/node_modules/@shoelace-style/shoelace/dist")
// setBasePath("@shoelace-style/shoelace/dist")
// setBasePath("https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/")

https://shoelace.style/getting-started/installation/#setting-the-base-path

Imports of sl elements are causing issues

If I'm able to copy and paste the elements into my project then I would have full access to them. That and the working solution for svg assets will be good enough for me to work. I can manually add them to my project. They would still be more than good enough and I can add the fixes I need. So they can work like a template more than anything else.

This means that every time I can the latest one I could be getting a improve one with bug fixes included or I can continue to use my old implementations. The main advantage is that I don't have to created from scratch for every new project, and things are standardized.

How can we change the select current option without using css variables in tailwind? #2042

https://github.com/shoelace-style/shoelace/discussions/2042

SL issues with importing

digest: "2262742997" ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload GET / 500 in 1500ms

Next js hard reloads on every update

Icon component not working

Nothing displays

"use client"
import {
  SlIcon
} from "@/node_modules/@shoelace-style/shoelace/cdn/react"
export default function IconText(){
  return <SlIcon name="github"></SlIcon>
}

Interesting

Editing links is much nicer and easier than editing sl-buttons

sl-button has many moving pieces. I didn't like that padding didn't work as expected. So I don't know how to manually increase the size without the size property.

Link works great with tailwind but I have to write all functionality from scratch.

The best case for me would be if sl-button had local css variables with state that could be overwritten dynamically.

I'm noticing the limited value sl-elements bring. So far:

• a select that I can style
• a button with 90% of its functionality and styles finish. Now it just needs branding.

Styling with ::part is harder to read than normal css classes.

package json settings

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shoelace-style/shoelace/*": [
        "dist/react/*"
      ]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./dist/react"
    ]
  },
  "include": [
    "src",
    "dist/react"
  ],

Interesting way to style for ::part

<sl-option class="&[aria-selected=“true”]:[&::part(base)]:bg-blue-500"></sl-option>

link to discussion

Lesson learns

use shoelace in react

use a wrapper so that react can support custom elements

create scripts/make-wrappers.js

make-wrappers.js

import { generateReactWrappers } from "custom-element-react-wrappers"
import manifest from "@shoelace-style/shoelace/dist/custom-elements.json" assert { type: "json" }

generateReactWrappers(manifest, {
  outdir: "shoelace-wrappers",
  modulePath: (className, tagName) =>
    `@shoelace-style/shoelace/dist/components/${tagName.replace("sl-", "")}/${tagName.replace("sl-", "")}.js`,
  defaultExport: true,
  /**
   * not true.
   * Causes lag on reload. You don't event have to use them in 'use client' files just like any other tag.
   * An important note is that in order to mkae this work, the wrapper generation configuration must have the `ssrSafe` property set to `true`. This will allow the components to register and execute when the client is ready.
   */
  // ssrSafe: true,
  // todo: fix SlTreeItem auto build issue. For now skip it.
  exclude: ["SlTreeItem"],
})

package.json Enable type module and run the make-wrappers in the prepare script

{
  "type": "module",
  "scripts": {
    "prepare": "node scripts/make-wrappers.js"
  }
}

The prepare script is a npm life cycle hook that run automatically after each install.

default npm install to include --legacy-peer-deps

create .npmrc file

add legacy-peer-deps=true

for now I'm getting 404 on images and I cannot set the base path to the correct path

I have to manually add the svg to next.js

I can get the images from the npm package assets icons

import "@shoelace-style/shoelace/dist/assets/icons"

setting font family

next.js way doesn't work due to the shadow dom but it can get all other normal tags.

Components need font family need to overwritten by :part or css variable

[&::part(base)]:font-instrument-sans

/*
.button--large {
    height: auto;
    min-height: var(--sl-input-height-large);
    font-size: var(--sl-button-font-size-large);
    line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
    border-radius: var(--sl-input-border-radius-large);
}

.button {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    border-style: solid;
    border-width: var(--sl-input-border-width);
    font-family: var(--sl-input-font-family);
    font-weight: var(--sl-font-weight-semibold);
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0;
    transition: var(--sl-transition-x-fast) styles-color,
      var(--sl-transition-x-fast) color,
      var(--sl-transition-x-fast) border,
      var(--sl-transition-x-fast) box-shadow;
    cursor: inherit;
}

[--sl-input-font-family:'__Instrument_Sans_8f8cb2','__Instrument_Sans_Fallback_8f8cb2']
[&::part(base)]:[${instrumentSans.style}]
[&::part(base)]:font-instrument-sans
 */

:root body {
    --sl-font-sans: 'Instrument Sans', "sans-serif";
}

https://shoelace.style/tokens/typography/

best way to style sl-elements?

With tailwind and [] to run css

When the css variables become state and style name bound then they would be the best. Right now there name doesn't match what they do. Make it hard to look back at it again and know what its changing. Also not all properties have css variables.

// css variables are not well enough implemented to only use them
// they are not state and style specific
// some styles don't even have css variables
// the css variables don't let you know what they do so it's hard to maintain
// tailwind is not enough. I need to have the :not so that active classes don't activate when the button is disabled. I don't seem to be able to do that with default tailwind but I can do it with css
// this none helpful css variables names makes styling to hard. I'm keeping tailwind easier name, and I'm just going to overwrite everything. I have to find a solution for :not
// solution: [&:not(:disabled)]:
// its extremely difficult to chain state like :active:enable
// it appears that the buttons are not enable they are using classes instead

/*
     styles-color: var(--sl-color-primary-600);
   border-color: var(--sl-color-primary-600);
   color: var(--sl-color-neutral-0);
   border-radius: var(--sl-input-border-radius-large);

       height: auto;
   min-height: var(--sl-input-height-large);
   font-size: var(--sl-button-font-size-large);
   line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);


.button--standard.button--primary {
   styles-color: var(--sl-color-primary-600);
   border-color: var(--sl-color-primary-600);
   color: var(--sl-color-neutral-0);
}

   .button--standard.button--primary:active:not(.button--disabled) {
   styles-color: #43386c;
   border-color: var(--sl-color-primary-600);
   color: var(--sl-color-neutral-0);

   .button--standard.button--primary:hover:not(.button--disabled) {
   styles-color: var(--sl-color-primary-500);
   border-color: var(--sl-color-primary-500);
   color: var(--sl-color-neutral-0);
}

[&::part(base):active:not(.button--disabled)]:bg-purple-hover
[&::part(base):active:enabled]:bg-purple-hover
}
  */
// export function Button({
//   children,
//   disabled,
//   className = "",
//   type = "button",
//   variant = "primary",
//   size = "large",
// }: TButton) {
//
//   return (
//     <SlButton
//       variant="primary"
//       disabled={disabled}
//       outline={variant === "secondary"}
//       size={size}
//       type={type}
//       className={clsx(
//         "[--sl-input-border-radius-large:0.5rem] [--sl-color-primary-600:var(--purple)] [----sl-color-neutral-0:var(--white)] [--sl-color-primary-500:var(--purple)] group [&::part(base):active]:bg-purple-hover [&::part(base):disabled]:bg-purple",
//         {
//           "  ": variant === "primary",
//           [styles.radixSecondary]: variant === "secondary",
//           [className]: className,
//         }
//       )}
//     >
//       {children}
//     </SlButton>
//   )
// }

// note that using tailwind classes over overwritting css variables is causing the functionality to break. so the dynamic classes are completely overwritting and its making me having to remake more styles that I normally want. When it comes to handling the states like hover active and disabled

For some reason the sl-button are not activating the :enable

run the disabled style base on the sl-button disabled attribute

[&[disabled]::part(base)]:bg-purple/25

https://github.com/shoelace-style/shoelace/discussions/2049

The correct way to import shoelace component is next.js

SlTab can be replace with the React name of the sl element

const SlIcon = dynamic(
  () => import("@shoelace-style/shoelace/dist/react").then(mod => mod.SlIcon),
  {
    ssr: false,
  }
)

Avoid build issues. https://github.com/shoelace-style/shoelace/discussions/2047 https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

Fix sl npm package imports

Just make sure you are importing from dist instead of cdn

//do
import { SlButton, SlSelect } from "@shoelace-style/shoelace/dist/react"
//don't
import { SlButton, SlSelect } from "@shoelace-style/shoelace/cdn/react"

Also solves the issues with the SlIcon.

Loading icon svg

https://github.com/shoelace-style/shoelace/discussions/2043

previous demo page

 <FormDemo />
<Heading as="h1">Royer Adames</Heading>
<Heading as="h1" size="small">
  Royer Adames
</Heading>
<Text>Body Medium Royer Adames</Text>
<Text size="small">Body small Royer Adames</Text>
<ButtonRadix>Primary ButtonRadix</ButtonRadix>
<ButtonRadix disabled>Primary disable ButtonRadix</ButtonRadix>
<ButtonRadix variant="secondary">Secondary ButtonRadix</ButtonRadix>
<ButtonRadix variant="secondary" disabled>
  Secondary disable ButtonRadix
</ButtonRadix>
<Nav></Nav>
<Nav></Nav>

First translate to css then tailwind

Due to it being more support for css and having to use arbitrary values

DropdownOld

tailwind using ::part

Using arbitrary

[&::part(base)]

With plugin (for tailwind config)

plugins: [
    plugin(function ({ matchVariant, e }) {
    matchVariant("part", placeholder => `&::part(${placeholder})`)
    }),
],

Styling

We can style things through tailwind with after content but we cannot connect the after with :part.

Fail try: Trying to add text base when the item aria-label-selected true adds the text in the item and the select group box. Learn: We can style other elements base on other elements props. Tailwind additional details

// aria-selected:after:content-['(selected)']
// aria-selected:after:content-['(selected2)']:part-[base]
// flex
// items-center
// aria-selected:after:text-purple
<SlOption
  key={i}
  placeholder={option.placeholder}
  className="
            part-[checked-icon]:hidden
            part-[base]:[--sl-color-primary-600:none]
            part-[base]:[--sl-color-neutral-0:var(--dark-grey)]
            aria-selected:part-[base]:[--sl-color-neutral-0:var(--purple)]
            group
            "
>
  {option.label}
  <span className="hidden group-aria-selected:inline">
              (Selected)
            </span>
</SlOption>

Others notes about it: // incorrect css doesn't load with part-[] // you are not notify in any way // you can overwrite with tailwind classes and attribute and state on and off the elements // for some reason I cannot reach the svg part // normally select the shadow dom child element through the parent (use attribute and state to style it different) and style it with tailwind first. If it fails then overwrite the css variables

---- Default docs

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.