<commit_before>import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'install-page',
})
export class InstallPage {
  @Prop()
  name: string;

  @State()
  cssVersion: string;

  @State()
  atomsVersion: string;

  async componentWillLoad() {
    try {
      const cssRes = await fetch('https://cors-anywhere.herokuapp.com/https://registry.npmjs.org/@blaze/css', {
        mode: 'cors',
      });
      const cssData = await cssRes.json();
      this.cssVersion = cssData['dist-tags'].latest;

      const atomsRes = await fetch('https://cors-anywhere.herokuapp.com/https://registry.npmjs.org/@blaze/atoms', {
        mode: 'cors',
      });
      const atomsData = await atomsRes.json();
      this.atomsVersion = atomsData['dist-tags'].latest;
    } catch {
      this.cssVersion = 'x.x.x';
      this.atomsVersion = 'x.x.x';
    }
  }

  render() {
    return (
      <page-template name={this.name}>
        <p slot="intro" class="c-paragraph">
          The easiest way to use the toolkit is via CDN.
        </p>

        <blaze-tabs>
          <blaze-tab header="CSS" open>
            <h2 class="c-heading u-xlarge">Installing the CSS</h2>

            <p class="c-paragraph">
              <a class="c-link" href="https://unpkg.com/@blaze/css/dist/blaze.css">
                blaze.css
              </a>{' '}
              <span class="u-text--loud">contains everything you need</span>. Link to it by adding the following to your{' '}
              <code class="u-code">{`<head></head>`}</code>.
            </p>

            <blaze-demo
              demo={false}
              language="html"
              code={`<link rel="stylesheet" href="https://unpkg.com/@blaze/css@${this.cssVersion}/dist/blaze.css">`}
            /><commit_msg>refactor(install page): latest version code<commit_after>import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'install-page',
})
export class InstallPage {
  @Prop()
  name: string;

  @State()
  cssVersion: string;

  @State()
  atomsVersion: string;

  async componentWillLoad() {
    try {
      const corsAnywhere = 'https://cors-anywhere.herokuapp.com/https://registry.npmjs.org/@blaze';
      const cssRes = await fetch(`${corsAnywhere}/css`, {
        mode: 'cors',
      });
      const atomsRes = await fetch(`${corsAnywhere}/atoms`, {
        mode: 'cors',
      });

      const cssData = await cssRes.json();
      const atomsData = await atomsRes.json();

      this.cssVersion = cssData['dist-tags'].latest;
      this.atomsVersion = atomsData['dist-tags'].latest;
    } catch {
      this.cssVersion = 'x.x.x';
      this.atomsVersion = 'x.x.x';
    }
  }

  render() {
    return (
      <page-template name={this.name}>
        <p slot="intro" class="c-paragraph">
          The easiest way to use the toolkit is via CDN.
        </p>

        <blaze-tabs>
          <blaze-tab header="CSS" open>
            <h2 class="c-heading u-xlarge">Installing the CSS</h2>

            <p class="c-paragraph">
              <a class="c-link" href="https://unpkg.com/@blaze/css/dist/blaze.css">
                blaze.css
              </a>{' '}
              <span class="u-text--loud">contains everything you need</span>. Link to it by adding the following to your{' '}
              <code class="u-code">{`<head></head>`}</code>.
            </p>

            <blaze-demo
              demo={false}
              language="html"
              code={`<link rel="stylesheet" href="https://unpkg.com/@blaze/css@${this.cssVersion}/dist/blaze.css">`}
            />
{'fraction_non_alphanumeric': 0.1658714566376649, 'fraction_numerical': 0.001122649452708392, 'mean_word_length': 2.145631067961165, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7319540', 'n_tokens_mistral': 1159, 'n_tokens_neox': 1124, 'n_words': 227}